From 5f75d854f633b4db525e49e8c24f0fbefef114de Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sun, 14 Jul 2019 14:35:03 +0900 Subject: [PATCH] Added guide layer and selection widget --- desktop/icon.png | Bin 0 -> 4689 bytes desktop/sources/links/main.css | 3 +- desktop/sources/scripts/commander.js | 13 ++++- desktop/sources/scripts/source.js | 2 +- desktop/sources/scripts/surface.js | 78 +++++++++++++++------------ examples/logic.lisp | 11 ---- examples/math.lisp | 5 -- examples/pixels.lisp | 2 +- 8 files changed, 61 insertions(+), 53 deletions(-) create mode 100644 desktop/icon.png delete mode 100644 examples/logic.lisp delete mode 100644 examples/math.lisp diff --git a/desktop/icon.png b/desktop/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..e7f6c5550e27cd258018172ac253bbf3faa95ea4 GIT binary patch literal 4689 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"); background-size: 10px 10px; background-position: -4px -4px; } \ No newline at end of file +#ronin canvas#surface,#ronin canvas#guide { position: absolute; right:0px; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,"); background-size: 10px 10px; background-position: -4px -4px; } +#ronin canvas#guide { background:none; } \ No newline at end of file diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js index 0265b84..000124a 100644 --- a/desktop/sources/scripts/commander.js +++ b/desktop/sources/scripts/commander.js @@ -34,7 +34,7 @@ function Commander (ronin) { } this.setStatus = function (msg) { - this._status.textContent = `${msg}` + this._status.textContent = `${msg.substr(0, 40)}` } this.update = function () { @@ -60,6 +60,7 @@ function Commander (ronin) { this.mouseRect.y = e.offsetY this.mouseRect.a.x = e.offsetX this.mouseRect.a.y = e.offsetY + this.mouseRect.t = 'pos' this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}` this.capture() this.show() @@ -82,9 +83,11 @@ function Commander (ronin) { this.mouseRect.h = e.offsetY - this.mouseRect.y this.mouseRect.b.x = e.offsetX this.mouseRect.b.y = e.offsetY + this.mouseRect.t = '' this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}` this.commit() this._input.focus() + ronin.surface.clearGuide() } // Injection @@ -106,18 +109,26 @@ function Commander (ronin) { 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 diff --git a/desktop/sources/scripts/source.js b/desktop/sources/scripts/source.js index f45e74e..206b6f5 100644 --- a/desktop/sources/scripts/source.js +++ b/desktop/sources/scripts/source.js @@ -101,7 +101,7 @@ function Source (ronin) { console.log('Source', 'Looking for changes..') if (!this.path) { console.log('Source', 'File is unsaved..') - if (ronin.commander._input.value.length() > 2) { + if (ronin.commander._input.value.length > 2) { console.log('Source', `File is not empty.`) return true } diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index 2cdb61f..e7e3e76 100644 --- a/desktop/sources/scripts/surface.js +++ b/desktop/sources/scripts/surface.js @@ -1,15 +1,19 @@ function Surface (ronin) { this.el = document.createElement('canvas') this.el.id = 'surface' + this._guide = document.createElement('canvas') + this._guide.id = 'guide' this.ratio = window.devicePixelRatio this.context = this.el.getContext('2d') + this.guide = this.el.getContext('2d') this.install = function (host) { host.appendChild(this.el) + host.appendChild(this._guide) window.addEventListener('resize', (e) => { this.onResize() }, false) - this.el.addEventListener('mousedown', ronin.commander.onMouseDown, false) - this.el.addEventListener('mousemove', ronin.commander.onMouseMove, false) - this.el.addEventListener('mouseup', ronin.commander.onMouseUp, false) + this._guide.addEventListener('mousedown', ronin.commander.onMouseDown, false) + this._guide.addEventListener('mousemove', ronin.commander.onMouseMove, false) + this._guide.addEventListener('mouseup', ronin.commander.onMouseUp, false) } this.start = function () { @@ -32,54 +36,54 @@ function Surface (ronin) { // Shape - this.stroke = (shape, width, color) => { - this.context.beginPath() - this.trace(shape) - this.context.lineWidth = width - this.context.strokeStyle = color - this.context.stroke() - this.context.closePath() + this.stroke = (shape, width, color, context = this.context) => { + context.beginPath() + this.trace(shape, context) + context.lineWidth = width + context.strokeStyle = color + context.stroke() + context.closePath() } // Fill - this.fill = (shape, color) => { - this.context.beginPath() - this.trace(shape) - this.context.fillStyle = color - this.context.fill() - this.context.closePath() + this.fill = (shape, color, context) => { + context.beginPath() + this.trace(shape, context) + context.fillStyle = color + context.fill() + context.closePath() } // Tracers - this.trace = function (shape) { + this.trace = function (shape, context) { if (shape.t === 'rect') { - this.traceRect(shape) + this.traceRect(shape, context) } else if (shape.t === 'line') { - this.traceLine(shape) + this.traceLine(shape, context) } else if (shape.t === 'circle') { - this.traceCircle(shape) + this.traceCircle(shape, context) } else { console.warn('Unknown type') } } - this.traceRect = function (rect) { - this.context.moveTo(rect.x, rect.y) - this.context.lineTo(rect.x + rect.w, rect.y) - this.context.lineTo(rect.x + rect.w, rect.y + rect.h) - this.context.lineTo(rect.x, rect.y + rect.h) - this.context.lineTo(rect.x, rect.y) + this.traceRect = function (rect, context) { + context.moveTo(rect.x, rect.y) + context.lineTo(rect.x + rect.w, rect.y) + context.lineTo(rect.x + rect.w, rect.y + rect.h) + context.lineTo(rect.x, rect.y + rect.h) + context.lineTo(rect.x, rect.y) } - this.traceLine = function (line) { - this.context.moveTo(line.a.x, line.a.y) - this.context.lineTo(line.b.x, line.b.y) + this.traceLine = function (line, context) { + context.moveTo(line.a.x, line.a.y) + context.lineTo(line.b.x, line.b.y) } - this.traceCircle = function (circle) { - this.context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI) + this.traceCircle = function (circle, context) { + context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI) } // IO @@ -107,8 +111,12 @@ function Surface (ronin) { } } - this.clear = function (rect = this.getFrame()) { - this.context.clearRect(rect.x, rect.y, rect.w, rect.h) + this.clear = function (rect = this.getFrame(), context = this.context) { + context.clearRect(rect.x, rect.y, rect.w, rect.h) + } + + this.clearGuide = function () { + this.clear(ronin.surface.getFrame(), ronin.surface.guide) } this.clone = function (a, b) { @@ -120,6 +128,10 @@ function Surface (ronin) { this.el.height = size.h this.el.style.width = size.w + 'px' this.el.style.height = size.h + 'px' + this._guide.width = size.w + this._guide.height = size.h + this._guide.style.width = size.w + 'px' + this._guide.style.height = size.h + 'px' } this.maximize = function () { diff --git a/examples/logic.lisp b/examples/logic.lisp deleted file mode 100644 index dc22f79..0000000 --- a/examples/logic.lisp +++ /dev/null @@ -1,11 +0,0 @@ -( - (echo (lt 3 4)) - - (echo (and 1 2 true 4)) - - (echo (and 1 false 2)) - - (echo (or false false 2 false)) - - (if (gt 1 2) (echo "ok") (echo "not ok")) -) \ No newline at end of file diff --git a/examples/math.lisp b/examples/math.lisp deleted file mode 100644 index 7a6906e..0000000 --- a/examples/math.lisp +++ /dev/null @@ -1,5 +0,0 @@ -( - (echo (add 2 3)) - (echo (sub 22 3 4 5)) - (echo (mul 2 3 4 5)) -) \ No newline at end of file diff --git a/examples/pixels.lisp b/examples/pixels.lisp index af4bd78..54c01a9 100644 --- a/examples/pixels.lisp +++ b/examples/pixels.lisp @@ -4,6 +4,6 @@ ; Draw photo - (draw (path "/Users/VillaMoirai/Desktop/510.jpg")) + (draw (path "/Users/VillaMoirai/Desktop/clip.jpg")) (print (select (rect 0 0 10 10))) ) \ No newline at end of file