From f8b2a4d652f686e740da9f94e491a4711186de7d Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sun, 14 Jul 2019 20:21:12 +0900 Subject: [PATCH 1/4] Added zoom --- desktop/sources/index.html | 5 ++++- desktop/sources/scripts/ronin.js | 22 ++++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/desktop/sources/index.html b/desktop/sources/index.html index a775c71..62e6443 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -26,7 +26,7 @@ ronin.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen() },"CmdOrCtrl+Enter"); ronin.controller.add("default","*","Hide",() => { app.toggleVisible() },"CmdOrCtrl+H"); ronin.controller.add("default","*","Inspect",() => { app.inspect() },"CmdOrCtrl+."); - ronin.controller.add("default","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset() },"CmdOrCtrl+Backspace"); + ronin.controller.add("default","*","Reset",() => { ronin.reset(); ronin.theme.reset() },"CmdOrCtrl+Backspace"); ronin.controller.add("default","*","Quit",() => { ronin.source.quit() },"CmdOrCtrl+Q"); ronin.controller.add("default","File","New",() => { ronin.source.new() },"CmdOrCtrl+N") ronin.controller.add("default","File","Save",() => { ronin.source.save() },"CmdOrCtrl+S") @@ -40,6 +40,9 @@ ronin.controller.addRole('default', 'Edit', 'paste') ronin.controller.addRole('default', 'Edit', 'delete') ronin.controller.addRole('default', 'Edit', 'selectall') + ronin.controller.add("default","View","Zoom In",() => { ronin.modZoom(0.25) },"CmdOrCtrl+=") + ronin.controller.add("default","View","Zoom Out",() => { ronin.modZoom(-0.25) },"CmdOrCtrl+-") + ronin.controller.add("default","View","Zoom Reset",() => { ronin.modZoom(1,true) },"CmdOrCtrl+0") ronin.controller.add("default","Project","Run",() => { ronin.commander.run(); },"CmdOrCtrl+R"); ronin.controller.add("default","Project","Reload Run",() => { ronin.source.revert(); ronin.commander.run(); },"CmdOrCtrl+Shift+R"); ronin.controller.add("default","Commander","Toggle",() => { ronin.commander.toggle(); },"CmdOrCtrl+K"); diff --git a/desktop/sources/scripts/ronin.js b/desktop/sources/scripts/ronin.js index 7cf3dd4..1ac9076 100644 --- a/desktop/sources/scripts/ronin.js +++ b/desktop/sources/scripts/ronin.js @@ -56,6 +56,28 @@ function Ronin () { this.load = function (content = this.default()) { } + + // Zoom + + this.modZoom = function (mod = 0, set = false) { + try { + const { webFrame } = require('electron') + const currentZoomFactor = webFrame.getZoomFactor() + webFrame.setZoomFactor(set ? mod : currentZoomFactor + mod) + console.log(window.devicePixelRatio) + } catch (err) { + console.log('Cannot zoom') + } + } + + this.setZoom = function (scale) { + try { + webFrame.setZoomFactor(scale) + } catch (err) { + console.log('Cannot zoom') + } + } + // Events this.drag = (e) => { From 6a617a1859343d3fa8e84ad1c351254d965abc97 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sun, 14 Jul 2019 20:32:22 +0900 Subject: [PATCH 2/4] Completed theme implementation --- desktop/sources/links/theme.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/desktop/sources/links/theme.css b/desktop/sources/links/theme.css index 231fd09..a1eb8c4 100644 --- a/desktop/sources/links/theme.css +++ b/desktop/sources/links/theme.css @@ -1,2 +1,5 @@ body { background:var(--background); } -#ronin #commander { background:var(--background); } \ No newline at end of file +#ronin #wrapper #commander { background:var(--background); } +#ronin #wrapper #commander { border-right-color: var(--f_low) } +#ronin #wrapper #commander textarea { color:var(--f_high); } +#ronin #wrapper #commander div#status { color:var(--f_med); } \ No newline at end of file From cb4ce3eb186b2eee3cd949fcb297a5d88d5fdd6e Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sun, 14 Jul 2019 20:55:38 +0900 Subject: [PATCH 3/4] Added theme menu --- desktop/sources/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 62e6443..7225f9b 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -46,6 +46,10 @@ ronin.controller.add("default","Project","Run",() => { ronin.commander.run(); },"CmdOrCtrl+R"); ronin.controller.add("default","Project","Reload Run",() => { ronin.source.revert(); ronin.commander.run(); },"CmdOrCtrl+Shift+R"); ronin.controller.add("default","Commander","Toggle",() => { ronin.commander.toggle(); },"CmdOrCtrl+K"); + ronin.controller.add("default","Theme","Open Theme",() => { ronin.theme.open() },"CmdOrCtrl+Shift+O") + ronin.controller.add("default","Theme","Reset Theme",() => { ronin.theme.reset() },"CmdOrCtrl+Shift+Backspace") + ronin.controller.addSpacer('default', 'Theme', 'Download') + ronin.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes') }) ronin.controller.commit(); ronin.install(document.body); window.addEventListener('load', () => { ronin.start(); }) From d21178202ab5b73095437c6f18cd62a67cb13092 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sun, 14 Jul 2019 21:16:17 +0900 Subject: [PATCH 4/4] Added text shape support, fixes #42 --- desktop/sources/links/main.css | 4 ++-- desktop/sources/scripts/lib/controller.js | 24 +++++++++++++++++++---- desktop/sources/scripts/library.js | 4 ++++ desktop/sources/scripts/ronin.js | 4 ++-- desktop/sources/scripts/surface.js | 24 +++++++++++++++++++---- examples/shapes.lisp | 7 ++++--- 6 files changed, 52 insertions(+), 15 deletions(-) diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index bb08f38..47787f0 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -5,8 +5,8 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular #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 - 80px); resize: none; font-size: 12px;color: white; line-height: 15px; padding-right: 15px} -#ronin #wrapper #commander div#status { color:#555; position: absolute; bottom: 0px; } +#ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 80px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px} +#ronin #wrapper #commander div#status { position: absolute; bottom: 0px; } #ronin #wrapper #commander.hidden { margin-left:-331px; } #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; } diff --git a/desktop/sources/scripts/lib/controller.js b/desktop/sources/scripts/lib/controller.js index 44f7f1c..6094222 100644 --- a/desktop/sources/scripts/lib/controller.js +++ b/desktop/sources/scripts/lib/controller.js @@ -15,7 +15,11 @@ function Controller () { this.add = function (mode, cat, label, fn, accelerator) { if (!this.menu[mode]) { this.menu[mode] = {} } if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} } - this.menu[mode][cat][label] = { fn: fn, accelerator: accelerator } + this.menu[mode][cat][label] = { fn: function (_menuItem, browserWindow) { + browserWindow.webContents.focus() + fn.apply(this, arguments) + }, + accelerator: accelerator } } this.addRole = function (mode, cat, label) { @@ -24,6 +28,12 @@ function Controller () { this.menu[mode][cat][label] = { role: label } } + this.addSpacer = function (mode, cat, label, type = 'separator') { + if (!this.menu[mode]) { this.menu[mode] = {} } + if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} } + this.menu[mode][cat][label] = { type: type } + } + this.clearCat = function (mode, cat) { if (this.menu[mode]) { this.menu[mode][cat] = {} } } @@ -42,6 +52,8 @@ function Controller () { const option = m[cat][name] if (option.role) { submenu.push({ role: option.role }) + } else if (option.type) { + submenu.push({ type: option.type }) } else { submenu.push({ label: name, accelerator: option.accelerator, click: option.fn }) } @@ -52,10 +64,11 @@ function Controller () { } this.commit = function () { + console.log('Controller', 'Changing..') this.app.injectMenu(this.format()) } - this.accelerator_for_key = function (key, menu) { + this.accelerator = function (key, menu) { const acc = { basic: null, ctrl: null } for (cat in menu) { const options = menu[cat] @@ -67,6 +80,9 @@ function Controller () { } return acc } -} -module.exports = new Controller() + this.docs = function () { + // TODO + console.log(this.menu.default) + } +} diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index f3bc7fa..73246a6 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -132,6 +132,10 @@ function Library (ronin) { return { a, b, t } } + this.text = (x, y, g, s, f = 'Arial', t = 'text') => { + return { x, y, g, s, f, t } + } + this.frame = () => { return ronin.surface.getFrame() } diff --git a/desktop/sources/scripts/ronin.js b/desktop/sources/scripts/ronin.js index 1ac9076..4b24b2a 100644 --- a/desktop/sources/scripts/ronin.js +++ b/desktop/sources/scripts/ronin.js @@ -1,9 +1,9 @@ function Ronin () { const defaultTheme = { background: '#222', - f_high: '#000', + f_high: '#fff', f_med: '#999', - f_low: '#ccc', + f_low: '#444', f_inv: '#000', b_high: '#000', b_med: '#888', diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index 722c717..73e7f53 100644 --- a/desktop/sources/scripts/surface.js +++ b/desktop/sources/scripts/surface.js @@ -41,17 +41,27 @@ function Surface (ronin) { this.trace(shape, context) context.lineWidth = width context.strokeStyle = color - context.stroke() + if (shape.t === 'text') { + context.font = `${shape.g}px ${shape.f}` + context.strokeText(shape.s, shape.x, shape.y) + } else { + context.stroke() + } context.closePath() } // Fill - this.fill = (shape, color, context) => { + this.fill = (shape, color, context = this.context) => { context.beginPath() - this.trace(shape, context) context.fillStyle = color - context.fill() + this.trace(shape, context) + if (shape.t === 'text') { + context.font = `${shape.g}px ${shape.f}` + context.fillText(shape.s, shape.x, shape.y) + } else { + context.fill() + } context.closePath() } @@ -64,6 +74,8 @@ function Surface (ronin) { this.traceLine(shape, context) } else if (shape.t === 'circle') { this.traceCircle(shape, context) + } else if (shape.t === 'text') { + this.traceText(shape, context) } else { console.warn('Unknown type') } @@ -86,6 +98,10 @@ function Surface (ronin) { context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI) } + this.traceText = function (text, context) { + + } + // IO this.open = function (path, scale) { diff --git a/examples/shapes.lisp b/examples/shapes.lisp index c42747a..29f0ea8 100644 --- a/examples/shapes.lisp +++ b/examples/shapes.lisp @@ -9,16 +9,17 @@ ; draw circle (stroke - (circle center-w center-h rad) 2 "red") + (circle center-w center-h rad) 2 "white") ; draw rect (stroke (rect - (sub center-w rad) (sub center-h rad) center-h center-h) 2 "red") + (sub center-w rad) (sub center-h rad) center-h center-h) 2 "white") ; draw line (stroke (line (pos (sub center-w rad) center-h) (pos (add center-w rad) center-h))) - ) \ No newline at end of file + (stroke (text 10 170 200 "HELL") 2 "pink") +) \ No newline at end of file