From c7164613a2214e5ab7e0a6dc4902769aa2a78e33 Mon Sep 17 00:00:00 2001 From: neauoire Date: Wed, 25 Mar 2020 09:53:18 +0900 Subject: [PATCH] Improved controls --- README.txt | 47 +++++++++++++++++++------------------ index.html | 56 ++++++++++++++++++++------------------------ scripts/client.js | 47 +++++++++++++++++++------------------ scripts/interface.js | 7 ------ scripts/lib/acels.js | 5 +++- 5 files changed, 78 insertions(+), 84 deletions(-) diff --git a/README.txt b/README.txt index 883a9ad..a23e78c 100644 --- a/README.txt +++ b/README.txt @@ -23,8 +23,15 @@ File Open ^O File Save ^S File Export Vector ^E File Export Image ^Shift+E -History Undo ^Z -History Redo ^Shift+Z +Edit Undo ^Z +Edit Redo ^Shift+Z +View Color Picker G +View Toggle Grid H +View Toggle Tools ^H +Layers Foreground ^1 +Layers Middleground ^2 +Layers Background ^3 +Layers Merge Layers ^M Stroke Line A Stroke Arc S Stroke Arc Rev D @@ -33,27 +40,21 @@ 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 +Stroke Erase Segment Backspace +Control Add Point Enter +Control Move Up Up +Control Move Right Right +Control Move Down Down +Control Move Left Left +Control Remove Point X +Style Linecap Q +Style Linejoin W +Style Mirror E +Style Fill R +Style Thicker } +Style Thinner { +Style Thicker +5 ] +Style Thinner -5 [ Extras diff --git a/index.html b/index.html index 770e2a7..fd081c7 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@ function Acels (client) { return h } this.convert = (event) => { - const accelerator = event.key === ' ' ? 'Space' : event.key.substr(0, 1).toUpperCase() + event.key.substr(1) + const accelerator = event.key === ' ' ? 'Space' : capitalize(event.key.replace('Arrow', '')) if ((event.ctrlKey || event.metaKey) && event.shiftKey) { return `CmdOrCtrl+Shift+${accelerator}` } @@ -113,6 +113,7 @@ function Acels (client) { this.toggle = () => { this.el.className = this.el.className === 'hidden' ? '' : 'hidden' } + function capitalize (s) { return s.substr(0, 1).toUpperCase() + s.substr(1) } } 'use strict' function History () { @@ -408,8 +409,15 @@ function Client () { this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('dotgrid', 'grid', this.tool.export(), 'text/plain') }) this.acels.set('File', 'Export Vector', 'CmdOrCtrl+E', () => { this.source.write('dotgrid', 'svg', this.manager.toString(), 'image/svg+xml') }) this.acels.set('File', 'Export Image', 'CmdOrCtrl+Shift+E', () => { this.manager.toPNG(this.tool.settings.size, (dataUrl) => { this.source.write('dotgrid', 'png', dataUrl, 'image/png') }) }) - this.acels.set('History', 'Undo', 'CmdOrCtrl+Z', () => { this.tool.undo() }) - this.acels.set('History', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.tool.redo() }) + this.acels.set('Edit', 'Undo', 'CmdOrCtrl+Z', () => { this.tool.undo() }) + this.acels.set('Edit', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.tool.redo() }) + this.acels.set('View', 'Color Picker', 'G', () => { this.picker.start() }) + this.acels.set('View', 'Toggle Grid', 'H', () => { this.renderer.toggle() }) + this.acels.set('View', 'Toggle Tools', 'CmdOrCtrl+H', () => { this.interface.toggle() }) + this.acels.set('Layers', 'Foreground', 'CmdOrCtrl+1', () => { this.tool.selectLayer(0) }) + this.acels.set('Layers', 'Middleground', 'CmdOrCtrl+2', () => { this.tool.selectLayer(1) }) + this.acels.set('Layers', 'Background', 'CmdOrCtrl+3', () => { this.tool.selectLayer(2) }) + this.acels.set('Layers', 'Merge Layers', 'CmdOrCtrl+M', () => { this.tool.merge() }) this.acels.set('Stroke', 'Line', 'A', () => { this.tool.cast('line') }) this.acels.set('Stroke', 'Arc', 'S', () => { this.tool.cast('arc_c') }) this.acels.set('Stroke', 'Arc Rev', 'D', () => { this.tool.cast('arc_r') }) @@ -418,27 +426,21 @@ function Client () { this.acels.set('Stroke', 'Arc(full)', 'T', () => { this.tool.cast('arc_c_full') }) this.acels.set('Stroke', 'Arc Rev(full)', 'Y', () => { this.tool.cast('arc_r_full') }) this.acels.set('Stroke', 'Clear Selection', 'Escape', () => { this.tool.clear() }) - this.acels.set('Effect', 'Linecap', 'Q', () => { this.tool.toggle('linecap') }) - this.acels.set('Effect', 'Linejoin', 'W', () => { this.tool.toggle('linejoin') }) - this.acels.set('Effect', 'Mirror', 'E', () => { this.tool.toggle('mirror') }) - this.acels.set('Effect', 'Fill', 'R', () => { this.tool.toggle('fill') }) - this.acels.set('Effect', 'Thicker', '}', () => { this.tool.toggle('thickness', 1) }) - this.acels.set('Effect', 'Thinner', '{', () => { this.tool.toggle('thickness', -1) }) - this.acels.set('Effect', 'Thicker +5', ']', () => { this.tool.toggle('thickness', 5) }) - this.acels.set('Effect', 'Thinner -5', '[', () => { this.tool.toggle('thickness', -5) }) - this.acels.set('Manual', 'Add Point', 'Enter', () => { this.tool.addVertex(this.cursor.pos); this.renderer.update() }) - this.acels.set('Manual', 'Move Up', 'Up', () => { this.cursor.pos.y -= 15; this.renderer.update() }) - this.acels.set('Manual', 'Move Right', 'Right', () => { this.cursor.pos.x += 15; this.renderer.update() }) - this.acels.set('Manual', 'Move Down', 'Down', () => { this.cursor.pos.y += 15; this.renderer.update() }) - this.acels.set('Manual', 'Move Left', 'Left', () => { this.cursor.pos.x -= 15; this.renderer.update() }) - this.acels.set('Manual', 'Remove Point', 'Shift+Backspace', () => { this.tool.removeSegmentsAt(this.cursor.pos) }) - this.acels.set('Manual', 'Remove Segment', 'Backspace', () => { this.tool.removeSegment() }) - this.acels.set('Layers', 'Foreground', 'CmdOrCtrl+1', () => { this.tool.selectLayer(0) }) - this.acels.set('Layers', 'Middleground', 'CmdOrCtrl+2', () => { this.tool.selectLayer(1) }) - this.acels.set('Layers', 'Background', 'CmdOrCtrl+3', () => { this.tool.selectLayer(2) }) - 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.set('Stroke', 'Erase Segment', 'Backspace', () => { this.tool.removeSegment() }) + this.acels.set('Control', 'Add Point', 'Enter', () => { this.tool.addVertex(this.cursor.pos); this.renderer.update() }) + this.acels.set('Control', 'Move Up', 'Up', () => { this.cursor.pos.y -= 15; this.renderer.update() }) + this.acels.set('Control', 'Move Right', 'Right', () => { this.cursor.pos.x += 15; this.renderer.update() }) + this.acels.set('Control', 'Move Down', 'Down', () => { this.cursor.pos.y += 15; this.renderer.update() }) + this.acels.set('Control', 'Move Left', 'Left', () => { this.cursor.pos.x -= 15; this.renderer.update() }) + this.acels.set('Control', 'Remove Point', 'X', () => { this.tool.removeSegmentsAt(this.cursor.pos) }) + this.acels.set('Style', 'Linecap', 'Q', () => { this.tool.toggle('linecap') }) + this.acels.set('Style', 'Linejoin', 'W', () => { this.tool.toggle('linejoin') }) + this.acels.set('Style', 'Mirror', 'E', () => { this.tool.toggle('mirror') }) + this.acels.set('Style', 'Fill', 'R', () => { this.tool.toggle('fill') }) + this.acels.set('Style', 'Thicker', '}', () => { this.tool.toggle('thickness', 1) }) + this.acels.set('Style', 'Thinner', '{', () => { this.tool.toggle('thickness', -1) }) + this.acels.set('Style', 'Thicker +5', ']', () => { this.tool.toggle('thickness', 5) }) + this.acels.set('Style', 'Thinner -5', '[', () => { this.tool.toggle('thickness', -5) }) this.acels.route(this) this.manager.install() this.interface.install(host) @@ -888,12 +890,6 @@ function Interface (client) { this.isVisible = !this.isVisible this.el.className = this.isVisible ? 'visible' : 'hidden' } - document.onkeydown = function (e) { - if (e.key === 'Tab') { - client.interface.toggle() - e.preventDefault() - } - } function capitalize (str) { return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() } diff --git a/scripts/client.js b/scripts/client.js index e6dfe28..18805c0 100644 --- a/scripts/client.js +++ b/scripts/client.js @@ -51,8 +51,15 @@ function Client () { this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('dotgrid', 'grid', this.tool.export(), 'text/plain') }) this.acels.set('File', 'Export Vector', 'CmdOrCtrl+E', () => { this.source.write('dotgrid', 'svg', this.manager.toString(), 'image/svg+xml') }) this.acels.set('File', 'Export Image', 'CmdOrCtrl+Shift+E', () => { this.manager.toPNG(this.tool.settings.size, (dataUrl) => { this.source.write('dotgrid', 'png', dataUrl, 'image/png') }) }) - this.acels.set('History', 'Undo', 'CmdOrCtrl+Z', () => { this.tool.undo() }) - this.acels.set('History', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.tool.redo() }) + this.acels.set('Edit', 'Undo', 'CmdOrCtrl+Z', () => { this.tool.undo() }) + this.acels.set('Edit', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.tool.redo() }) + this.acels.set('View', 'Color Picker', 'G', () => { this.picker.start() }) + this.acels.set('View', 'Toggle Grid', 'H', () => { this.renderer.toggle() }) + this.acels.set('View', 'Toggle Tools', 'CmdOrCtrl+H', () => { this.interface.toggle() }) + this.acels.set('Layers', 'Foreground', 'CmdOrCtrl+1', () => { this.tool.selectLayer(0) }) + this.acels.set('Layers', 'Middleground', 'CmdOrCtrl+2', () => { this.tool.selectLayer(1) }) + this.acels.set('Layers', 'Background', 'CmdOrCtrl+3', () => { this.tool.selectLayer(2) }) + this.acels.set('Layers', 'Merge Layers', 'CmdOrCtrl+M', () => { this.tool.merge() }) this.acels.set('Stroke', 'Line', 'A', () => { this.tool.cast('line') }) this.acels.set('Stroke', 'Arc', 'S', () => { this.tool.cast('arc_c') }) this.acels.set('Stroke', 'Arc Rev', 'D', () => { this.tool.cast('arc_r') }) @@ -61,27 +68,21 @@ function Client () { this.acels.set('Stroke', 'Arc(full)', 'T', () => { this.tool.cast('arc_c_full') }) this.acels.set('Stroke', 'Arc Rev(full)', 'Y', () => { this.tool.cast('arc_r_full') }) this.acels.set('Stroke', 'Clear Selection', 'Escape', () => { this.tool.clear() }) - this.acels.set('Effect', 'Linecap', 'Q', () => { this.tool.toggle('linecap') }) - this.acels.set('Effect', 'Linejoin', 'W', () => { this.tool.toggle('linejoin') }) - this.acels.set('Effect', 'Mirror', 'E', () => { this.tool.toggle('mirror') }) - this.acels.set('Effect', 'Fill', 'R', () => { this.tool.toggle('fill') }) - this.acels.set('Effect', 'Thicker', '}', () => { this.tool.toggle('thickness', 1) }) - this.acels.set('Effect', 'Thinner', '{', () => { this.tool.toggle('thickness', -1) }) - this.acels.set('Effect', 'Thicker +5', ']', () => { this.tool.toggle('thickness', 5) }) - this.acels.set('Effect', 'Thinner -5', '[', () => { this.tool.toggle('thickness', -5) }) - this.acels.set('Manual', 'Add Point', 'Enter', () => { this.tool.addVertex(this.cursor.pos); this.renderer.update() }) - this.acels.set('Manual', 'Move Up', 'Up', () => { this.cursor.pos.y -= 15; this.renderer.update() }) - this.acels.set('Manual', 'Move Right', 'Right', () => { this.cursor.pos.x += 15; this.renderer.update() }) - this.acels.set('Manual', 'Move Down', 'Down', () => { this.cursor.pos.y += 15; this.renderer.update() }) - this.acels.set('Manual', 'Move Left', 'Left', () => { this.cursor.pos.x -= 15; this.renderer.update() }) - this.acels.set('Manual', 'Remove Point', 'Shift+Backspace', () => { this.tool.removeSegmentsAt(this.cursor.pos) }) - this.acels.set('Manual', 'Remove Segment', 'Backspace', () => { this.tool.removeSegment() }) - this.acels.set('Layers', 'Foreground', 'CmdOrCtrl+1', () => { this.tool.selectLayer(0) }) - this.acels.set('Layers', 'Middleground', 'CmdOrCtrl+2', () => { this.tool.selectLayer(1) }) - this.acels.set('Layers', 'Background', 'CmdOrCtrl+3', () => { this.tool.selectLayer(2) }) - 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.set('Stroke', 'Erase Segment', 'Backspace', () => { this.tool.removeSegment() }) + this.acels.set('Control', 'Add Point', 'Enter', () => { this.tool.addVertex(this.cursor.pos); this.renderer.update() }) + this.acels.set('Control', 'Move Up', 'Up', () => { this.cursor.pos.y -= 15; this.renderer.update() }) + this.acels.set('Control', 'Move Right', 'Right', () => { this.cursor.pos.x += 15; this.renderer.update() }) + this.acels.set('Control', 'Move Down', 'Down', () => { this.cursor.pos.y += 15; this.renderer.update() }) + this.acels.set('Control', 'Move Left', 'Left', () => { this.cursor.pos.x -= 15; this.renderer.update() }) + this.acels.set('Control', 'Remove Point', 'X', () => { this.tool.removeSegmentsAt(this.cursor.pos) }) + this.acels.set('Style', 'Linecap', 'Q', () => { this.tool.toggle('linecap') }) + this.acels.set('Style', 'Linejoin', 'W', () => { this.tool.toggle('linejoin') }) + this.acels.set('Style', 'Mirror', 'E', () => { this.tool.toggle('mirror') }) + this.acels.set('Style', 'Fill', 'R', () => { this.tool.toggle('fill') }) + this.acels.set('Style', 'Thicker', '}', () => { this.tool.toggle('thickness', 1) }) + this.acels.set('Style', 'Thinner', '{', () => { this.tool.toggle('thickness', -1) }) + this.acels.set('Style', 'Thicker +5', ']', () => { this.tool.toggle('thickness', 5) }) + this.acels.set('Style', 'Thinner -5', '[', () => { this.tool.toggle('thickness', -5) }) this.acels.route(this) this.manager.install() diff --git a/scripts/interface.js b/scripts/interface.js index a34dd15..867b902 100644 --- a/scripts/interface.js +++ b/scripts/interface.js @@ -159,13 +159,6 @@ function Interface (client) { this.el.className = this.isVisible ? 'visible' : 'hidden' } - document.onkeydown = function (e) { - if (e.key === 'Tab') { - client.interface.toggle() - e.preventDefault() - } - } - function capitalize (str) { return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() } diff --git a/scripts/lib/acels.js b/scripts/lib/acels.js index c02832f..740b2e7 100644 --- a/scripts/lib/acels.js +++ b/scripts/lib/acels.js @@ -58,7 +58,7 @@ function Acels (client) { } this.convert = (event) => { - const accelerator = event.key === ' ' ? 'Space' : event.key.substr(0, 1).toUpperCase() + event.key.substr(1) + const accelerator = event.key === ' ' ? 'Space' : capitalize(event.key.replace('Arrow', '')) if ((event.ctrlKey || event.metaKey) && event.shiftKey) { return `CmdOrCtrl+Shift+${accelerator}` } @@ -81,6 +81,7 @@ function Acels (client) { this.onKeyDown = (e) => { const target = this.get(this.convert(e)) if (!target || !target.downfn) { return this.pipe ? this.pipe.onKeyDown(e) : null } + target.downfn() e.preventDefault() } @@ -118,4 +119,6 @@ function Acels (client) { this.toggle = () => { this.el.className = this.el.className === 'hidden' ? '' : 'hidden' } + + function capitalize (s) { return s.substr(0, 1).toUpperCase() + s.substr(1) } }