Updated readme

.gitignore

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

README.txt

@@ -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))
+
+// 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}`)