Updated packages

desktop/package.json

@@ -17,8 +17,8 @@
     "push": "npm run build ; npm run push_osx ; npm run push_linux ; npm run push_win ; npm run clean ; npm run status"
   },
   "devDependencies": {
-    "electron": "^7.1.5",
-    "electron-packager": "^14.1.1"
+    "electron": "^8.1.1",
+    "electron-packager": "^14.2.1"
   },
   "standard": {
     "globals": [

desktop/sources/index.html

@@ -24,6 +24,7 @@
     <script type="text/javascript" src="scripts/lib/history.js"></script>
     <script type="text/javascript" src="scripts/lib/source.js"></script>
     <!-- Dotgrid -->
+    <script type="text/javascript" src="scripts/listener.js"></script>
     <script type="text/javascript" src="scripts/client.js"></script>
     <script type="text/javascript" src="scripts/manager.js"></script>
     <script type="text/javascript" src="scripts/renderer.js"></script>

desktop/sources/scripts/client.js

@@ -23,6 +23,7 @@ function Client () {
     this.history = new History(this)
     this.source = new Source(this)
 
+    this.listener = new Listener(this)
     this.manager = new Manager(this)
     this.renderer = new Renderer(this)
     this.tool = new Tool(this)

desktop/sources/scripts/lib/acels.js

@@ -37,10 +37,10 @@ function Acels (client) {
     if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
       return `CmdOrCtrl+Shift+${accelerator}`
     }
-    if (event.shiftKey) {
+    if (event.shiftKey && event.key.toUpperCase() !== event.key) {
       return `Shift+${accelerator}`
     }
-    if (event.altKey) {
+    if (event.altKey && event.key.length !== 1) {
       return `Alt+${accelerator}`
     }
     if (event.ctrlKey || event.metaKey) {
@@ -73,7 +73,7 @@ function Acels (client) {
     for (const cat in cats) {
       text += `\n### ${cat}\n\n`
       for (const item of cats[cat]) {
-        text += item.accelerator ? `- \`${item.accelerator}\`: ${item.info}\n` : ''
+        text += item.accelerator ? `- \`${item.accelerator.replace('`', 'tilde')}\`: ${item.name}\n` : ''
       }
     }
     return text.trim()
@@ -83,8 +83,9 @@ function Acels (client) {
     const cats = this.sort()
     let text = ''
     for (const cat in cats) {
+      text += `\n${cat}\n\n`
       for (const item of cats[cat]) {
-        text += item.accelerator ? `${cat}: ${item.name} | ${item.accelerator}\n` : ''
+        text += item.accelerator ? `${item.name.padEnd(25, '.')} ${item.accelerator}\n` : ''
       }
     }
     return text.trim()
@@ -105,13 +106,13 @@ function Acels (client) {
           submenu: [
             { label: 'Download Themes', click: () => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes') } },
             { label: 'Open Theme', click: () => { client.theme.open() } },
-            { label: 'Reset Theme', click: () => { client.theme.reset() } }
+            { label: 'Reset Theme', accelerator: 'CmdOrCtrl+Escape', click: () => { client.theme.reset() } }
           ]
         },
         { label: 'Fullscreen', accelerator: 'CmdOrCtrl+Enter', click: () => { app.toggleFullscreen() } },
         { label: 'Hide', accelerator: 'CmdOrCtrl+H', click: () => { app.toggleVisible() } },
         { label: 'Toggle Menubar', accelerator: 'Alt+H', click: () => { app.toggleMenubar() } },
-        { label: 'Inspect', accelerator: 'CmdOrCtrl+.', click: () => { app.inspect() } },
+        { label: 'Inspect', accelerator: 'CmdOrCtrl+Tab', click: () => { app.inspect() } },
         { role: 'quit' }
       ]
     })

desktop/sources/scripts/listener.js

@@ -0,0 +1,69 @@
+'use strict'
+
+// Dotgrid UDP Listener
+// Ex: 1a0156(6 characters 0-9a-z)
+
+// 0 layer[0-2]
+// 1 type[lcrd*]
+// 2 from[0-z][0-z]
+// 4 to[0-z][0-z]
+
+const dgram = require('dgram')
+
+function Listener (dotgrid) {
+  this.server = dgram ? dgram.createSocket('udp4') : { on: () => {}, bind: () => {} }
+
+  function base36 (c) {
+    return clamp(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y'].indexOf(c.toLowerCase()), 0, 36) * 15 + 15
+  }
+
+  function clear () {
+    dotgrid.tool.erase()
+  }
+
+  function operate (data) {
+    if (!data) { return }
+    if (!dotgrid.tool.layers[data.layer]) { return }
+    dotgrid.tool.addSegment(data.type, [data.from, data.to], data.layer)
+  }
+
+  function draw () {
+    dotgrid.renderer.update()
+  }
+
+  function parse (msg) {
+    if (msg === '') {
+      return draw()
+    }
+    if (['0', '1', '2'].indexOf(msg) > -1) {
+      return clear()
+    }
+    const layer = parseInt(msg.substr(0, 1))
+    const type = { l: 'line', c: 'arc_c', r: 'arc_r', '*': 'draw' }[msg.substr(1, 1).toLowerCase()]
+    const from = { x: base36(msg.substr(2, 1)), y: base36(msg.substr(3, 1)) }
+    const to = { x: base36(msg.substr(4, 1)), y: base36(msg.substr(5, 1)) }
+    return { layer: layer, type: type, from: from, to: to }
+  }
+
+  function clamp (v, min, max) {
+    return v < min ? min : v > max ? max : v
+  }
+
+  // Server
+
+  this.server.on('message', (msg, rinfo) => {
+    operate(parse(`${msg}`))
+  })
+
+  this.server.on('listening', () => {
+    const address = this.server.address()
+    console.log(`Server listening for UDP:\n ${address.address}:${address.port}`)
+  })
+
+  this.server.on('error', (err) => {
+    console.log(`Server error:\n ${err.stack}`)
+    this.server.close()
+  })
+
+  this.server.bind(49161)
+}

index.html

@@ -19,11 +19,13 @@
     <meta property="og:description" content="A minimalist vector graphics tool." /> 
     <meta property="og:site_name" content="Dotgrid" />
     <!-- Generics -->
+    <script type="text/javascript">function require(name){ console.warn('Failed to require '+name) }</script>
     <script type="text/javascript" src="desktop/sources/scripts/lib/acels.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/lib/theme.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/lib/source.js"></script>
     <!-- Dotgrid -->
+    <script type="text/javascript" src="desktop/sources/scripts/listener.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/client.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/manager.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/renderer.js"></script>