From d309a9f032269170240f2e7ae1cdbfb370d08bbb Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 13 Jul 2019 20:19:18 +0900 Subject: [PATCH] Started guides --- desktop/sources/index.html | 2 ++ desktop/sources/links/main.css | 14 ++++++------ desktop/sources/links/theme.css | 2 ++ desktop/sources/scripts/commander.js | 32 ++++++++++++++++++++++++++-- desktop/sources/scripts/library.js | 30 +++++++++++++++++++++++++- desktop/sources/scripts/ronin.js | 14 +++++++++--- desktop/sources/scripts/surface.js | 30 ++++++++++++++++++++------ examples/guides.lisp | 20 +++++++++++++++++ examples/scale.lisp | 2 +- 9 files changed, 127 insertions(+), 19 deletions(-) create mode 100644 desktop/sources/links/theme.css create mode 100644 examples/guides.lisp diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 0b6cdc1..6d7b129 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -11,6 +11,7 @@ + Ronin @@ -41,6 +42,7 @@ ronin.controller.addRole('default', 'Edit', 'selectall') ronin.controller.add("default","Project","Run",() => { ronin.commander.run(); },"CmdOrCtrl+R"); + ronin.controller.add("default","Commander","Toggle",() => { ronin.commander.toggle(); },"CmdOrCtrl+K"); ronin.controller.commit(); diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 94e8ba0..b4a9e15 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -1,10 +1,12 @@ -body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular",courier,monospace; background:000; -webkit-user-select: none; font-size:12px;} +body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular",courier,monospace; background:000; -webkit-app-region: drag; -webkit-user-select: none; font-size:12px; transition: background 500ms} *:focus {outline: none; } -#ronin { background:var(--b_low); height: 100vh; width:100vw; -webkit-app-region: drag; } -#ronin #commander { z-index: 9000; top: 0px; left: 0px; position: absolute; width: calc(50vw - 90px); height: calc(100vh - 60px); margin: 30px; border-right: 1px solid #333; -webkit-app-region: no-drag; padding-right: 30px;} -#ronin #commander textarea { background: none; width: 100%; height: calc(100vh - 75px); resize: none; font-size: 12px;color: white; } -#ronin #commander div#status { color:#555; } +#ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; } +#ronin #wrapper { overflow: hidden; position: relative; } +#ronin #wrapper #commander { z-index: 9000; position: relative; width: 300px; height: calc(100vh - 60px); border-right: 1px solid #333; -webkit-app-region: no-drag; padding-right: 30px; transition: margin-left 250ms;} +#ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 75px); resize: none; font-size: 12px;color: white; } +#ronin #wrapper #commander div#status { color:#555; position: absolute; bottom: 0px; } +#ronin #wrapper #commander.hidden { margin-left:-331px; } -#ronin canvas#surface { position: absolute; right:30px; top:30px; background-image: url("data:image/svg+xml;utf8,"); background-size: 10px 10px; background-position: -4px -4px; -webkit-user-select: none;-webkit-app-region: no-drag;} \ No newline at end of file +#ronin canvas#surface { 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; } \ No newline at end of file diff --git a/desktop/sources/links/theme.css b/desktop/sources/links/theme.css new file mode 100644 index 0000000..231fd09 --- /dev/null +++ b/desktop/sources/links/theme.css @@ -0,0 +1,2 @@ +body { background:var(--background); } +#ronin #commander { background:var(--background); } \ No newline at end of file diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js index 13a42de..f1d8505 100644 --- a/desktop/sources/scripts/commander.js +++ b/desktop/sources/scripts/commander.js @@ -20,9 +20,11 @@ function Commander (ronin) { this._status.textContent = 'Idle. (zoom 100%)' this._input.focus() this.run() + this.hide() } this.run = function (txt = this._input.value) { + if (txt.indexOf('$') > -1) { console.log('Contains $'); return } console.log('========') const inter = new Lisp(txt, ronin.library) inter.toPixels() @@ -33,6 +35,10 @@ function Commander (ronin) { this.run() } + this.setStatus = function (msg) { + this._status.textContent = `${msg}` + } + this.update = function () { } @@ -117,6 +123,26 @@ function Commander (ronin) { this._input.value = value } + // Display + + this.show = function () { + console.log('show') + this.el.className = '' + } + + this.hide = function () { + console.log('hide') + this.el.className = 'hidden' + } + + this.toggle = function () { + if (this.el.className === 'hidden') { + this.show() + } else { + this.hide() + } + } + // Events this.drag = (e) => { @@ -132,12 +158,14 @@ function Commander (ronin) { if (!file || !file.name) { console.warn('File', 'Not a valid file.'); return } if (file.name.indexOf('.lisp') > -1) { const reader = new FileReader() - reader.onload = function (e) { - ronin.commander.load(e.target.result) + reader.onload = (e) => { + this.load(e.target.result) + this.show() } reader.readAsText(file) } else if (file.path) { this.injectPath(file.path) + this.show() } } } diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index cffc24b..9a2c756 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -2,11 +2,28 @@ function Library (ronin) { this.clear = (rect = this.select_all()) => { } + // IO + + this.open = (path, w = 1, h = 1) => { + ronin.surface.open(path, { w, h }) + return path + } + + this.save = function (path, type = 'jpg') { + console.log('save', path) + // TODO: Save file + return path + } + this.draw = (path, rect) => { ronin.surface.draw(path, rect) return rect } + this.exit = () => { + // TODO: Closes Ronin + } + // Rects this.pos = (x, y, t = 'pos') => { @@ -26,7 +43,12 @@ function Library (ronin) { } this.frame = () => { - return this.rect(0, 0, Math.floor(window.innerWidth / 2) - 15, Math.floor(window.innerHeight) - 30) + return ronin.surface.getFrame() + } + + this.center = () => { + const rect = this.frame() + return this.pos(rect.w / 2, rect.h / 2) } this.path = (path) => { @@ -63,4 +85,10 @@ function Library (ronin) { console.log(any) return any } + + // + + this.of = function (h, k) { + return h[k] + } } diff --git a/desktop/sources/scripts/ronin.js b/desktop/sources/scripts/ronin.js index f05f5b1..708519f 100644 --- a/desktop/sources/scripts/ronin.js +++ b/desktop/sources/scripts/ronin.js @@ -1,6 +1,6 @@ function Ronin () { const defaultTheme = { - background: '#eee', + background: '#222', f_high: '#000', f_med: '#999', f_low: '#ccc', @@ -20,8 +20,12 @@ function Ronin () { this.library = new Library(this) this.install = function (host = document.body) { - this.commander.install(this.el) - this.surface.install(this.el) + this._wrapper = document.createElement('div') + this._wrapper.id = 'wrapper' + + this.commander.install(this._wrapper) + this.surface.install(this._wrapper) + this.el.appendChild(this._wrapper) host.appendChild(this.el) this.theme.install() } @@ -38,6 +42,10 @@ function Ronin () { this.theme.reset() } + this.log = function (msg) { + this.commander.setStatus(msg) + } + this.load = function (content = this.default()) { } diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index 21d5327..972790f 100644 --- a/desktop/sources/scripts/surface.js +++ b/desktop/sources/scripts/surface.js @@ -29,6 +29,8 @@ function Surface (ronin) { this.strokeRect(shape, width, color) } else if (shape.t === 'line') { this.strokeLine(shape, width, color) + } else { + console.warn('Unknown type') } } @@ -60,6 +62,8 @@ function Surface (ronin) { this.fill = (shape, color) => { if (shape.t === 'rect') { this.fillRect(shape, color) + } else { + console.warn('Unknown type') } } @@ -75,7 +79,19 @@ function Surface (ronin) { this.context.closePath() } - this.draw = function (path, rect = this.getRect()) { + // IO + + this.open = function (path, scale) { + const img = new Image() + img.src = path + img.onload = () => { + ronin.log(`Image(${img.width}x${img.height}), scale:${scale.w}:${scale.h}`) + this.resize({ w: img.width * scale.w, h: img.height * scale.h }) + this.context.drawImage(img, 0, 0, img.width * scale.w, img.height * scale.h) + } + } + + this.draw = function (path, rect = this.getFrame()) { const img = new Image() img.src = path img.onload = () => { @@ -85,7 +101,7 @@ function Surface (ronin) { } } - this.clear = function (rect = this.getRect()) { + this.clear = function (rect = this.getFrame()) { this.context.clearRect(rect.x, rect.y, rect.w, rect.h) } @@ -101,14 +117,16 @@ function Surface (ronin) { } this.maximize = function () { - this.resize(this.getRect()) + this.resize(this.getFrame()) } this.onResize = function () { - this.maximize() + if (ronin.commander._input.value === '') { + this.maximize() + } } - this.getRect = function () { - return { x: 0, y: 0, w: Math.floor(window.innerWidth / 2) - 30, h: Math.floor(window.innerHeight) - 60 } + this.getFrame = function () { + return { x: 0, y: 0, w: window.innerWidth - 60, h: window.innerHeight - 60, t: 'rect' } } } diff --git a/examples/guides.lisp b/examples/guides.lisp new file mode 100644 index 0000000..079752f --- /dev/null +++ b/examples/guides.lisp @@ -0,0 +1,20 @@ +; guides file + +((clear) + (stroke (frame) 1 "red") + + (stroke + (line + (pos 0 0) + (pos (of (frame) "w") (of (frame) "h"))) + 1 "red") + + + (stroke + (line + (pos (of (frame) "w") 0) + (pos 0 (of (frame) "h"))) + 1 "red") + + (stroke (line (pos 0 0) (pos (of (frame) "w") (of (frame) "h"))) 1 "red") +) \ No newline at end of file diff --git a/examples/scale.lisp b/examples/scale.lisp index 30b81a6..5f86d20 100644 --- a/examples/scale.lisp +++ b/examples/scale.lisp @@ -1,3 +1,3 @@ ; scale file -(echo (scale ($rect) 0.5 0.5)) \ No newline at end of file +(open ($path) 0.25 0.25) \ No newline at end of file