dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added kinetic bones?!

Browse Source
This commit is contained in:
Devine Lu Linvega
2019-08-02 16:40:30 +09:00
parent 44699fa08e
commit 2944bc4d1d
8 changed files with 131 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
desktop/sources/scripts/commander.js
View File

@@ -159,6 +159,10 @@ function Commander (ronin) {
this.cache = this.cache.replace('$view', `(view $rect $rect)`)
} else if (word === 'poly') {
this.cache = this.cache.replace('$poly', `(poly $pos+)`)
} else if (word === 'move') {
this.cache = this.cache.replace('$move', `(transform:move $wh)`)
} else if (word === 'rotate') {
this.cache = this.cache.replace('$rotate', `(transform:rotate $a)`)
}
if (shape[word]) {
@@ -183,7 +187,7 @@ function Commander (ronin) {
if (word === 'line') { return `(line ${shape.a.x} ${shape.a.y} ${shape.b.x} ${shape.b.y})` }
if (word === 'circle') { return `(circle ${shape.cx} ${shape.cy} ${shape.r})` }
if (word === 'arc') { return `(arc ${shape.cx} ${shape.cy} ${shape.r} ${shape.sa} ${shape.ea})` }
if (word === 'x' || word === 'y' || word === 'xy' || word === 'wh') { return `${shape}` }
if (word === 'x' || word === 'y' || word === 'xy' || word === 'wh' || word === 'a') { return `${shape}` }
return ''
}
@@ -264,7 +268,7 @@ function Commander (ronin) {
// Splash
this.splash = `; welcome to ronin
; v2.26
; v2.28
(clear)
(def logo-path "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ")
(stroke

134
desktop/sources/scripts/library.js
View File

@@ -3,12 +3,40 @@ function Library (ronin) {
// Composition: Design programs to be connected to other programs.
// Parsimony: Write a big program only when it is clear by demonstration that nothing else will do.
// IO
this.import = async (path, shape, alpha = 1) => { // Imports a graphic file with format.
const img = new Image()
img.src = path
return ronin.surface.draw(img, shape, alpha)
}
this.export = (path, format = 'image/png', quality = 1.0) => { // Exports a graphic file with format.
if (!path) { console.warn('Missing export path'); return path }
const dataUrl = ronin.surface.el.toDataURL(path.indexOf('.jpg') > -1 ? 'image/jpeg' : path.indexOf('.png') > -1 ? 'image/png' : format, quality)
const data = dataUrl.replace(/^data:image\/png;base64,/, '').replace(/^data:image\/jpeg;base64,/, '')
fs.writeFileSync(path, data, 'base64')
return path
}
this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame.
return ronin.surface.open(path, ratio)
}
this.exit = (force = false) => { // Exits Ronin.
ronin.source.quit(force)
}
// Shapes
this.pos = (x = 0, y = 0) => { // Returns a position shape.
return { x, y }
}
this.line = (ax, ay, bx, by) => { // Returns a line shape.
return { a: this.pos(ax, ay), b: this.pos(bx, by) }
}
this.size = (w, h) => { // Returns a size shape.
return { w, h }
}
@@ -25,8 +53,8 @@ function Library (ronin) {
return { cx, cy, rx, ry }
}
this.line = (ax, ay, bx, by) => { // Returns a line shape.
return { a: this.pos(ax, ay), b: this.pos(bx, by) }
this.arc = (cx, cy, r, sa, ea) => { // Returns an arc shape.
return { cx, cy, r, sa, ea }
}
this.poly = (...pos) => { // Returns a poly shape.
@@ -41,35 +69,11 @@ function Library (ronin) {
return { x, y, d }
}
this.arc = (cx, cy, r, sa, ea) => { // Returns an arc shape.
return { cx, cy, r, sa, ea }
}
this.color = (r, g, b, a = 1) => { // Returns a color object.
const hex = '#' + ('0' + parseInt(r, 10).toString(16)).slice(-2) + ('0' + parseInt(g, 10).toString(16)).slice(-2) + ('0' + parseInt(b, 10).toString(16)).slice(-2)
return { r, g, b, a, hex, toString: () => { return `rgba(${r},${g},${b},${a})` }, 0: r, 1: g, 2: b, 3: a, f: [r / 255, g / 255, b / 255, a] }
}
//
this.import = async (path, shape, alpha = 1) => { // Imports a graphic file with format.
const img = new Image()
img.src = path
return ronin.surface.draw(img, shape, alpha)
}
this.export = (path, format = 'image/png', quality = 1.0) => { // Exports a graphic file with format.
if (!path) { console.warn('Missing export path'); return path }
const dataUrl = ronin.surface.el.toDataURL(path.indexOf('.jpg') > -1 ? 'image/jpeg' : path.indexOf('.png') > -1 ? 'image/png' : format, quality)
const data = dataUrl.replace(/^data:image\/png;base64,/, '').replace(/^data:image\/jpeg;base64,/, '')
fs.writeFileSync(path, data, 'base64')
return path
}
this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame.
return ronin.surface.open(path, ratio)
}
// Frame
this.frame = () => { // Returns a rect of the frame.
@@ -141,37 +145,28 @@ function Library (ronin) {
// Transforms
this.move = (x, y) => {
ronin.surface.context.translate(x, y)
}
this.rotate = (angle) => {
ronin.surface.context.rotate(angle)
}
this.scale = (w, h) => {
ronin.surface.context.scale(w, h === undefined ? w : h)
}
this.transform = (a, b, c, d, e, f) => {
// a:hscale b:hskew c:vskew d:vscale e:hmove f:vmove
ronin.surface.context.transform(a, b, c, d, e, f)
}
this.setTransform = (a, b, c, d, e, f) => {
ronin.surface.context.setTransform(a, b, c, d, e, f)
}
this.resetTransform = () => {
ronin.surface.context.resetTransform()
}
this.pushTransform = () => {
ronin.surface.context.save()
}
this.popTransform = () => {
ronin.surface.context.restore()
this.transform = {
push: () => { ronin.surface.context.save() },
pop: () => { ronin.surface.context.restore() },
reset: () => {
ronin.surface.context.resetTransform()
ronin.surface.guide.resetTransform()
},
move: (x, y) => {
ronin.surface.context.translate(x, y)
this.guide(this.line(0, 0, x, y))
ronin.surface.guide.translate(x, y)
},
scale: (w, h) => {
ronin.surface.context.scale(w, h === undefined ? w : h)
this.guide(this.rect(0, 0, 50 * w, 50 * h))
ronin.surface.guide.scale(w, h === undefined ? w : h)
},
rotate: (a) => {
ronin.surface.context.rotate(a)
this.guide(this.arc(0, 0, 50, 0, a))
ronin.surface.guide.rotate(a)
}
}
// Actions
@@ -186,6 +181,12 @@ function Library (ronin) {
return rect
}
this.clear = (rect = this.frame()) => { // Clears a rect.
ronin.surface.clearGuide(rect)
ronin.surface.clear(rect)
return rect
}
this.gradient = (line, colors = ['white', 'black']) => { // Defines a gradient color.
const gradient = ronin.surface.context.createLinearGradient(line.a.x, line.a.y, line.b.x, line.b.y)
colors.forEach((color, i) => {
@@ -199,17 +200,6 @@ function Library (ronin) {
return shape
}
this.clear = (rect = this.frame()) => { // Clears a rect.
ronin.surface.clearGuide(rect)
ronin.surface.clear(rect)
return rect
}
this.theme = (variable, el = document.documentElement) => {
// ex. (theme "f_main") -> :root { --f_main: "#fff" }
return getComputedStyle(el).getPropertyValue(`--${variable}`)
}
// Pixels
this.pixels = async (fn, q = 1, rect = this.frame()) => {
@@ -541,10 +531,6 @@ function Library (ronin) {
return require('path').parse(path).name
}
this.exit = (force = false) => { // Exits Ronin.
ronin.source.quit(force)
}
this.offset = (a, b) => { // Offsets pos a with pos b, returns a.
a.x += b.x
a.y += b.y
@@ -592,4 +578,8 @@ function Library (ronin) {
console.log(`time taken: ${Date.now() - start}ms`)
return result
}
// Accessors
this.theme = ronin.theme.active // Get theme values.
}

28
desktop/sources/scripts/ronin.js
View File

@@ -146,31 +146,33 @@ function Ronin () {
const y = position.y
const xy = x + ' ' + y
const pos = { x, y }
const rect = {
x: this.mouseOrigin.x,
y: this.mouseOrigin.y,
w: this.mouseOrigin.x ? pos.x - this.mouseOrigin.x : 0,
h: this.mouseOrigin.y ? pos.y - this.mouseOrigin.y : 0
}
const wh = rect.w + ' ' + rect.h
const line = {
a: { x: this.mouseOrigin.x, y: this.mouseOrigin.y },
b: { x: pos.x, y: pos.y }
}
const size = { w: line.a.x ? pos.x - line.a.x : 0, h: line.a.y ? pos.y - line.a.y : 0 }
const rect = {
x: line.a.x,
y: line.a.y,
w: size.w,
h: size.h
}
const wh = rect.w + ' ' + rect.h
const d = Math.sqrt(((line.a.x - line.b.x) * (line.a.x - line.b.x)) + ((line.a.y - line.b.y) * (line.a.y - line.b.y)))
const a = Math.atan2(pos.y - line.a.y, pos.x - line.a.x)
const circle = {
cx: this.mouseOrigin.x,
cy: this.mouseOrigin.y,
cx: line.a.x,
cy: line.a.y,
r: d.toFixed(2)
}
const arc = {
cx: this.mouseOrigin.x,
cy: this.mouseOrigin.y,
cx: line.a.x,
cy: line.a.y,
r: d.toFixed(2),
sa: 0,
ea: Math.atan2(position.y - this.mouseOrigin.y, position.x - this.mouseOrigin.x).toFixed(2)
ea: a.toFixed(2)
}
return { x, y, xy, wh, d, line, rect, pos, circle, arc, type, 'is-down': type !== 'mouse-up' ? true : null }
return { x, y, xy, wh, d, a, line, rect, pos, size, circle, arc, type, 'is-down': type !== 'mouse-up' ? true : null }
}
// Zoom

20
desktop/sources/scripts/surface.js
View File

@@ -217,7 +217,7 @@ function Surface (ronin) {
}
}
this.resize = function (size, fit = false) {
this.resize = (size, fit = false) => {
const frame = this.getFrame()
if (frame.w === size.w && frame.h === size.h) { return }
console.log('Surface', `Resize: ${size.w}x${size.h}`)
@@ -234,10 +234,6 @@ function Surface (ronin) {
}
}
this.getFrame = function () {
return { x: 0, y: 0, w: this.el.width, h: this.el.height, t: 'rect', c: this.el.width / 2, m: this.el.height / 2 }
}
this.fitWindow = function (size) {
const win = require('electron').remote.getCurrentWindow()
const pad = { w: ronin.commander.isVisible === true ? 400 : 60, h: 60 }
@@ -245,12 +241,16 @@ function Surface (ronin) {
win.setSize(Math.floor((size.w / this.ratio) + pad.w), Math.floor((size.h / this.ratio) + pad.h), true)
}
this.maximize = function () {
this.maximize = () => {
this.resize(this.bounds())
}
this.bounds = function () {
return { x: 0, y: 0, w: ((window.innerWidth - 60) * this.ratio), h: ((window.innerHeight - 60) * this.ratio), t: 'rect' }
this.bounds = () => {
return { x: 0, y: 0, w: ((window.innerWidth - 60) * this.ratio), h: ((window.innerHeight - 60) * this.ratio) }
}
this.getFrame = () => {
return { x: 0, y: 0, w: this.el.width, h: this.el.height, c: this.el.width / 2, m: this.el.height / 2 }
}
this.onResize = function () {
@@ -326,10 +326,10 @@ function Surface (ronin) {
return shape && !isNaN(shape.x) && !isNaN(shape.y) && shape.p && shape.t && shape.f && shape.a
}
function isLine (shape) {
return shape.a && shape.b && !isNaN(shape.a.x) && !isNaN(shape.a.y) && !isNaN(shape.b.x) && !isNaN(shape.b.y)
return shape && shape.a && shape.b && !isNaN(shape.a.x) && !isNaN(shape.a.y) && !isNaN(shape.b.x) && !isNaN(shape.b.y)
}
function isPoly (shape) {
return shape[0] && shape[1] && !isNaN(shape[0].x) && !isNaN(shape[0].y) && !isNaN(shape[1].x) && !isNaN(shape[1].y)
return shape && shape[0] && shape[1] && !isNaN(shape[0].x) && !isNaN(shape[0].y) && !isNaN(shape[1].x) && !isNaN(shape[1].y)
}
function fitRect (image, container) {