Updated readme

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 builds/
-package-lock.json
+.DS_Store
+*/.DS_Store
+debug.*

README.txt

@@ -5,7 +5,7 @@ DOTGRID
 Dotgrid is a grid-based vector drawing software designed to create logos, icons and type. 
 It supports layers, the full SVG specs and additional effects such as mirroring and radial drawing. 
 Dotgrid exports to both PNG and SVG files.
-  
+
 The application was initially created for internal use, 
 and later made available as a free and open source software.
 
@@ -13,6 +13,48 @@ and later made available as a free and open source software.
 - Video Tutorial: https://www.youtube.com/watch?v=Xt1zYHhpypk
 - Community: https://hundredrabbits.itch.io/dotgrid/community
 
+Controls
+
+∷        Toggle Menubar   Tab
+∷        Open Theme       ^Shift+O
+∷        Reset Theme      ^Backspace
+File     New              ^N
+File     Open             ^O
+File     Save             ^S
+File     Export Vector    ^E
+File     Export Image     ^Shift+E
+History  Undo             ^Z
+History  Redo             ^Shift+Z
+Stroke   Line             A
+Stroke   Arc              S
+Stroke   Arc Rev          D
+Stroke   Bezier           F
+Stroke   Close            Z
+Stroke   Arc(full)        T
+Stroke   Arc Rev(full)    Y
+Stroke   Clear Selection  Escape
+Effect   Linecap          Q
+Effect   Linejoin         W
+Effect   Mirror           E
+Effect   Fill             R
+Effect   Thicker          }
+Effect   Thinner          {
+Effect   Thicker +5       ]
+Effect   Thinner -5       [
+Manual   Add Point        Enter
+Manual   Move Up          Up
+Manual   Move Right       Right
+Manual   Move Down        Down
+Manual   Move Left        Left
+Manual   Remove Point     Shift+Backspace
+Manual   Remove Segment   Backspace
+Layers   Foreground       ^1
+Layers   Middleground     ^2
+Layers   Background       ^3
+Layers   Merge Layers     ^M
+View     Color Picker     G
+View     Toggle Grid      H
+
 Extras
 
 - Themes: https://github.com/hundredrabbits/Themes

push.sh

@@ -1,11 +1,10 @@
 #!/bin/bash
 
-rm -r 'release'
-mkdir 'release'
-cp 'index.html' 'release/index.html'
-cp 'README.txt' 'release/README.txt'
-~/Applications/butler push ~/Repositories/Hundredrabbits/Dotgrid/release hundredrabbits/dotgrid:osx-64
-~/Applications/butler push ~/Repositories/Hundredrabbits/Dotgrid/release hundredrabbits/dotgrid:linux-64
-~/Applications/butler push ~/Repositories/Hundredrabbits/Dotgrid/release hundredrabbits/dotgrid:windows-64
+node scripts/lib/build
+rm -r release
+mkdir release
+cp index.html release/index.html
+cp README.txt release/README.txt
+~/Applications/butler push ~/Repositories/Hundredrabbits/Dotgrid/release hundredrabbits/dotgrid:main
 ~/Applications/butler status hundredrabbits/dotgrid
-rm -r 'release'
+rm -r release

scripts/client.js

@@ -43,6 +43,9 @@ function Client () {
     window.addEventListener('dragover', (e) => { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy' })
     window.addEventListener('drop', this.onDrop)
 
+    this.acels.set('∷', 'Toggle Menubar', 'Tab', () => { this.acels.toggle() })
+    this.acels.set('∷', 'Open Theme', 'CmdOrCtrl+Shift+O', () => { this.theme.open() })
+    this.acels.set('∷', 'Reset Theme', 'CmdOrCtrl+Backspace', () => { this.theme.reset() })
     this.acels.set('File', 'New', 'CmdOrCtrl+N', () => { this.source.new() })
     this.acels.set('File', 'Open', 'CmdOrCtrl+O', () => { this.source.open('grid', this.whenOpen) })
     this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('dotgrid', 'grid', this.tool.export(), 'text/plain') })
@@ -79,12 +82,12 @@ function Client () {
     this.acels.set('Layers', 'Merge Layers', 'CmdOrCtrl+M', () => { this.tool.merge() })
     this.acels.set('View', 'Color Picker', 'G', () => { this.picker.start() })
     this.acels.set('View', 'Toggle Grid', 'H', () => { this.renderer.toggle() })
-    this.acels.install(window)
-    this.acels.pipe(this)
+    this.acels.route(this)
 
     this.manager.install()
     this.interface.install(host)
     this.theme.install(host, () => { this.update() })
+    this.acels.install(host)
   }
 
   this.start = () => {
@@ -92,6 +95,7 @@ function Client () {
     console.info(`${this.acels}`)
 
     this.theme.start()
+    this.acels.start()
     this.tool.start()
     this.renderer.start()
     this.interface.start()

scripts/lib/acels.js

@@ -1,17 +1,42 @@
 'use strict'
 
 function Acels (client) {
+  this.el = document.createElement('ul')
+  this.el.id = 'acels'
+
+  this.order = []
   this.all = {}
   this.roles = {}
   this.pipe = null
 
-  this.install = (host = window) => {
-    host.addEventListener('keydown', this.onKeyDown, false)
-    host.addEventListener('keyup', this.onKeyUp, false)
+  this.install = (host = document.body) => {
+    window.addEventListener('keydown', this.onKeyDown, false)
+    window.addEventListener('keyup', this.onKeyUp, false)
+    host.appendChild(this.el)
+  }
+
+  this.start = () => {
+    const cats = this.sort()
+    for (const cat of this.order) {
+      const main = document.createElement('li')
+      const head = document.createElement('a')
+      head.innerText = cat
+      const subs = document.createElement('ul')
+      for (const item of cats[cat]) {
+        const option = document.createElement('li')
+        option.onclick = item.downfn
+        option.innerHTML = item.accelerator ? `${item.name} <i>${item.accelerator.replace('CmdOrCtrl+', '^')}</i>` : `${item.name}`
+        subs.appendChild(option)
+      }
+      main.appendChild(head)
+      main.appendChild(subs)
+      this.el.appendChild(main)
+    }
   }
 
   this.set = (cat, name, accelerator, downfn, upfn) => {
     if (this.all[accelerator]) { console.warn('Acels', `Trying to overwrite ${this.all[accelerator].name}, with ${name}.`) }
+    if (this.order.indexOf(cat) < 0) { this.order.push(cat) }
     this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
   }
 
@@ -49,7 +74,7 @@ function Acels (client) {
     return accelerator
   }
 
-  this.pipe = (obj) => {
+  this.route = (obj) => {
     this.pipe = obj
   }
 
@@ -82,11 +107,15 @@ function Acels (client) {
   this.toString = () => {
     const cats = this.sort()
     let text = ''
-    for (const cat in cats) {
+    for (const cat of this.order) {
       for (const item of cats[cat]) {
-        text += item.accelerator ? `${cat}: ${item.name} | ${item.accelerator}\n` : ''
+        text += item.accelerator ? `${cat.padEnd(8, ' ')} ${item.name.padEnd(16, ' ')} ${item.accelerator.replace('CmdOrCtrl+', '^')}\n` : ''
       }
     }
     return text.trim()
   }
+
+  this.toggle = () => {
+    this.el.className = this.el.className === 'hidden' ? '' : 'hidden'
+  }
 }

scripts/lib/build.js

@@ -18,7 +18,9 @@ function cleanup (txt) {
   return output
 }
 
-const wrapper = `
+// Create release
+
+const release_body = `
 <!DOCTYPE html>
 <html lang="en">
 <html>
@@ -43,6 +45,33 @@ const wrapper = `
   </body>
 </html>`
 
-fs.writeFileSync('index.html', cleanup(wrapper))
+fs.writeFileSync('index.html', cleanup(release_body))
 
-console.log(`Built ${id}`)
+// Create debug
+
+const debug_body = `
+<!DOCTYPE html>
+<html lang="en">
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${id}</title>
+    ${styles.reduce((acc, item) => { return `${acc}<link rel="stylesheet" type="text/css" href="./links/${item}"/>\n` }, '')}
+    ${libs.reduce((acc, item) => { return `${acc}<script type="text/javascript" src="./scripts/lib/${item}"></script>\n` }, '')}
+    ${scripts.reduce((acc, item) => { return `${acc}<script type="text/javascript" src="./scripts/${item}"></script>\n` }, '')}
+  </head>
+  <body>
+    <script>
+      const client = new Client()
+      client.install(document.body)
+      window.addEventListener('load', () => { 
+        client.start()
+      })
+    </script>
+  </body>
+</html>`
+
+fs.writeFileSync('debug.html', debug_body)
+
+console.log(`Built ${id}`)