From 7f3a8cef527c74c6c2b41fbb7175416188d1cdd6 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 25 Jul 2019 13:27:22 +0900 Subject: [PATCH] Progress on WORKSHOP --- WORKSHOP.md | 26 +++++++++++++++- desktop/sources/scripts/commander.js | 44 ++++------------------------ desktop/sources/scripts/library.js | 2 +- desktop/sources/scripts/ronin.js | 35 +++++++++++++++++----- desktop/sources/scripts/surface.js | 14 ++++++--- 5 files changed, 69 insertions(+), 52 deletions(-) diff --git a/WORKSHOP.md b/WORKSHOP.md index 2ed10d7..c8c652e 100644 --- a/WORKSHOP.md +++ b/WORKSHOP.md @@ -35,6 +35,24 @@ The previous code will import an image, and position it at `50,100`, at a size o (pos 50 100)) ``` +### Crop + +To crop the canvas, type the following text, drag an image file onto the Ronin window press `cmd+r`: + +``` +(import "~/Desktop/photo.jpg" + (pos 50 100)) +(crop (rect 50 50 300 300) +``` + +Alternatively, you could select the cropping area with the cursor with the following code, and selecting an area in the canvas: + +``` +(import "~/Desktop/photo.jpg" + (pos 50 100)) +(crop $rect) +``` + ### Export To export the resulting image, type the following text, drag an image file onto the Ronin window, then drag a folder and add the new file's name, and press `cmd+r`: @@ -45,7 +63,13 @@ To export the resulting image, type the following text, drag an image file onto (export $path) ``` -### Crop +For example, a version of that same code with file paths, might look something like: + +``` +(import "~/Desktop/photo.jpg" + (pos 50 100)) +(export "~/Desktop/export.png") +``` ## Draw diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js index 37ad31c..d2781b2 100644 --- a/desktop/sources/scripts/commander.js +++ b/desktop/sources/scripts/commander.js @@ -106,52 +106,20 @@ function Commander (ronin) { // Injection - this.cache = '' + this.cache = this._input.value this.capture = function () { + console.log('capture') this.cache = this._input.value } - this.canInject = function () { - return this._input.value.indexOf('$path') > -1 - } - this.injectPath = function (path) { - if (this.canInject()) { - this._input.value = this._input.value.replace('$path', `"${path}"`) - } + this._input.value = this._input.value.replace('$path', `"${path}"`) } - this.commit = function () { - let value = this.cache - - if (value.indexOf('$') < 0) { - return - } - - ronin.surface.clearGuide() - - const next = value.split('$')[1] - - if (next.substr(0, 4) === 'pos)') { - value = value.replace('($pos)', `(pos ${this.mouseRect.x} ${this.mouseRect.y})`) - this.mouseRect.t = 'pos' - ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide) - } - - if (next.substr(0, 5) === 'rect)') { - value = value.replace('($rect)', `(rect ${this.mouseRect.x} ${this.mouseRect.y} ${this.mouseRect.w} ${this.mouseRect.h})`) - this.mouseRect.t = 'rect' - ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide) - } - - if (next.substr(0, 5) === 'line)') { - value = value.replace('($line)', `(line (pos ${this.mouseRect.a.x} ${this.mouseRect.a.y}) (pos ${this.mouseRect.b.x} ${this.mouseRect.b.y}))`) - this.mouseRect.t = 'line' - ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide) - } - - this._input.value = value + this.commit = function (shape) { + console.log('inject') + this._input.value = this.cache.replace('$rect', `(rect ${shape.x} ${shape.y} ${shape.w} ${shape.h})`).replace('$pos', `(pos ${shape.x} ${shape.y})`).replace('$line', `(line ${shape.a.x} ${shape.a.y} ${shape.b.x} ${shape.b.y})`) } // Display diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index ed00117..640c601 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -93,7 +93,7 @@ function Library (ronin) { ronin.surface.fill(rect, color) return rect } - + this.gradient = (line, colors = ['white', 'black']) => { return ronin.surface.linearGradient(line.a.x, line.a.y, line.b.x, line.b.y, colors) } diff --git a/desktop/sources/scripts/ronin.js b/desktop/sources/scripts/ronin.js index fdb214d..9a019f2 100644 --- a/desktop/sources/scripts/ronin.js +++ b/desktop/sources/scripts/ronin.js @@ -72,30 +72,49 @@ function Ronin () { this.bindings[event] = fn } - this.mouseIsDown = false + // Cursor + + this.mouseTouch = null this.onMouseDown = (e, id = 'mouse-down') => { - this.mouseIsDown = true + this.mouseTouch = { x: e.offsetX, y: e.offsetY } + const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id) if (this.bindings[id]) { - this.bindings[id](this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, 'mouse-down')) + this.bindings[id](shape) } + this.commander.capture() + this.surface.drawGuide(shape) } this.onMouseMove = (e, id = 'mouse-move') => { + const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id) if (this.bindings[id]) { - this.bindings[id](this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, 'mouse-move')) + this.bindings[id](shape) + } + if (this.mouseTouch) { + this.commander.commit(shape) + this.surface.drawGuide(shape) } } this.onMouseUp = (e, id = 'mouse-up') => { - this.mouseIsDown = false + this.mouseTouch = null + const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id) if (this.bindings[id]) { - this.bindings[id](this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, 'mouse-up')) + this.bindings[id](shape) } + this.surface.clearGuide() } this.makeMouseOffset = (pos, type) => { - return { x: pos.x * ronin.surface.ratio, y: pos.y * ronin.surface.ratio, 'type': type, 'is-down': this.mouseIsDown } + if (!this.mouseTouch) { return } + const x = this.mouseTouch.x * ronin.surface.ratio + const y = this.mouseTouch.y * ronin.surface.ratio + const w = this.mouseTouch.x ? (pos.x * ronin.surface.ratio) - (this.mouseTouch.x * ronin.surface.ratio) : 0 + const h = this.mouseTouch.y ? (pos.y * ronin.surface.ratio) - (this.mouseTouch.y * ronin.surface.ratio) : 0 + const a = { x, y } + const b = { x: x + w, y: y + h } + return { x, y, w, h, a, b, type, 'is-down': this.mouseTouch !== null } } // Zoom @@ -133,7 +152,7 @@ function Ronin () { const file = e.dataTransfer.files[0] if (!file || !file.name) { console.warn('File', 'Not a valid file.'); return } const path = file.path ? file.path : file.name - if (this.commander.canInject()) { + if (this.commander._input.value.indexOf('$path') > -1) { this.commander.injectPath(file.path) this.commander.show() } else if (path.indexOf('.lisp') > -1) { diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index 375e0ce..b820783 100644 --- a/desktop/sources/scripts/surface.js +++ b/desktop/sources/scripts/surface.js @@ -79,16 +79,16 @@ function Surface (ronin) { this.trace = function (shape, context) { if (isRect(shape)) { this.traceRect(shape, context) - } else if (isLine(shape)) { + } + if (isLine(shape)) { this.traceLine(shape, context) - } else if (isCircle(shape)) { + } + if (isCircle(shape)) { this.traceCircle(shape, context) } else if (isText(shape)) { this.traceText(shape, context) } else if (isSvg(shape)) { this.traceSVG(shape, context) - } else { - console.warn('Unknown type', shape) } } @@ -158,6 +158,12 @@ function Surface (ronin) { context.clearRect(rect.x, rect.y, rect.w, rect.h) } + this.drawGuide = function (shape, context = this.guide) { + this.clearGuide() + this.stroke(shape, 5, 'black', context) + this.stroke(shape, 2, 'white', context) + } + this.clone = function (a, b) { this.context.drawImage(this.el, a.x, a.y, a.w, a.h, b.x, b.y, b.w, b.h) }