Added text shape support, fixes #42

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,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; }

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)
+  }
+}

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()
   }

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',

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) {

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)))
-  )
+  (stroke (text 10 170 200 "HELL") 2 "pink")
+)