From dc3a9c3e71ccbe075251656334f28fd5e6e4e724 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Mon, 19 Feb 2018 15:29:07 +1300 Subject: [PATCH] 100% keyboard controls --- LAYOUT.md | 36 ++++++++++++++-- LAYOUT.svg | 2 +- README.md | 35 ++++++++++++++-- desktop/sources/index.html | 1 + desktop/sources/scripts/dotgrid.js | 42 +++++++++++++++---- desktop/sources/scripts/keyboard.js | 64 +++++++++++++++++++++++++++++ 6 files changed, 166 insertions(+), 14 deletions(-) create mode 100644 desktop/sources/scripts/keyboard.js diff --git a/LAYOUT.md b/LAYOUT.md index bf0cc38..63df9bb 100644 --- a/LAYOUT.md +++ b/LAYOUT.md @@ -7,6 +7,7 @@ ### Edit - Copy: `CmdOrCtrl+C` +- Cut: `CmdOrCtrl+X` - Paste: `CmdOrCtrl+V` - Undo: `CmdOrCtrl+Z` - Redo: `CmdOrCtrl+Shift+Z` @@ -31,13 +32,42 @@ - Thinner -5: `[` ### Layers -- Move Above: `Up` -- Move Below: `Down` +- Move Above: `P` +- Move Below: `L` ### View - Tools: `U` - Grid: `H` - Control Points: `J` -- Expert Mode: `:` + +### Mode +- Toggle Size: `CmdOrCtrl+E` +- Keyboard: `CmdOrCtrl+K` + + +## keyboard Mode + +### Controls +- Add vertex: `Enter` +- Remove vertex: `Backspace` + +### Select +- Move Up: `Up` +- Move Down: `Down` +- Move Left: `Left` +- Move Right: `Right` +- XXYY(0): `0` +- XXYY(1): `1` +- XXYY(2): `2` +- XXYY(3): `3` +- XXYY(4): `4` +- XXYY(5): `5` +- XXYY(6): `6` +- XXYY(7): `7` +- XXYY(8): `8` +- XXYY(9): `9` + +### Mode +- Stop Keyboard Mode: `Escape` diff --git a/LAYOUT.svg b/LAYOUT.svg index c56eecf..0ecd08d 100644 --- a/LAYOUT.svg +++ b/LAYOUT.svg @@ -1 +1 @@ -ESCDESELECTDOCUMENT1234567890-PLUSBACKSPACEDELETERESETTABQLINECAPQUITWLINEJOINEMIRRORRFILLTYUTOOLSIOOPENP[THINNER]THICKER|CAPSALINESARCSAVEDARC REVFBEZIERGHGRIDHIDEJCONTROLKL;'ENTERFULLSCRESHIFTZCONNECTUNDOXCCOPYVPASTEBNNEWM,ABOUT.INSPECT/CAPSLOCKCTRLCMDALTSPACECTRLPNFNALT \ No newline at end of file +ESCDESELECTDOCUMENT1234567890-PLUSBACKSPACEDELETERESETTABQLINECAPQUITWLINEJOINEMIRRORSIZERFILLTYUTOOLSIOOPENPMOVE ABO[THINNER]THICKER|CAPSALINESARCSAVEDARC REVFBEZIERGHGRIDHIDEJCONTROLKKEYBOARDLMOVE BEL;'ENTERFULLSCRESHIFTZCONNECTUNDOXCUTCCOPYVPASTEBNNEWM,ABOUT.INSPECT/CAPSLOCKCTRLCMDALTSPACECTRLPNFNALT \ No newline at end of file diff --git a/README.md b/README.md index 79b9c7e..fcbbd37 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved ### Edit - Copy: `CmdOrCtrl+C` +- Cut: `CmdOrCtrl+X` - Paste: `CmdOrCtrl+V` - Undo: `CmdOrCtrl+Z` - Redo: `CmdOrCtrl+Shift+Z` @@ -43,14 +44,42 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved - Thinner -5: `[` ### Layers -- Move Above: `Up` -- Move Below: `Down` +- Move Above: `P` +- Move Below: `L` ### View - Tools: `U` - Grid: `H` - Control Points: `J` -- Expert Mode: `:` + +### Mode +- Toggle Size: `CmdOrCtrl+E` +- Keyboard: `CmdOrCtrl+K` + +## keyboard Mode + +### Controls +- Add vertex: `Enter` +- Remove vertex: `Backspace` + +### Select +- Move Up: `Up` +- Move Down: `Down` +- Move Left: `Left` +- Move Right: `Right` +- XXYY(0): `0` +- XXYY(1): `1` +- XXYY(2): `2` +- XXYY(3): `3` +- XXYY(4): `4` +- XXYY(5): `5` +- XXYY(6): `6` +- XXYY(7): `7` +- XXYY(8): `8` +- XXYY(9): `9` + +### Mode +- Stop Keyboard Mode: `Escape` diff --git a/desktop/sources/index.html b/desktop/sources/index.html index a792030..1594535 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -10,6 +10,7 @@ + diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 532e7ea..cda035d 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -7,6 +7,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.guide = new Guide(); this.render = new Render(); this.tool = new Tool(); + this.keyboard = new Keyboard(); this.width = width; this.height = height; @@ -137,10 +138,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace"); this.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc"); - this.controller.add("default","Select","Foreground",() => { dotgrid.tool.select_layer(0); },"1"); - this.controller.add("default","Select","Middleground",() => { dotgrid.tool.select_layer(1); },"2"); - this.controller.add("default","Select","Background",() => { dotgrid.tool.select_layer(2); },"3"); - this.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A"); this.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1 this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0 @@ -157,14 +154,45 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Effect","Thicker +5",() => { dotgrid.mod_thickness(5,true) },"]"); this.controller.add("default","Effect","Thinner -5",() => { dotgrid.mod_thickness(-5,true) },"["); - this.controller.add("default","Layers","Move Above",() => { dotgrid.tool.layer_up() },"Up"); - this.controller.add("default","Layers","Move Below",() => { dotgrid.tool.layer_down() },"Down"); + this.controller.add("default","Layers","Move Above",() => { dotgrid.tool.layer_up() },"P"); + this.controller.add("default","Layers","Move Below",() => { dotgrid.tool.layer_down() },"L"); this.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U"); this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H"); this.controller.add("default","View","Control Points",() => { dotgrid.guide.toggle_widgets(); },"J"); - this.controller.add("default","View","Expert Mode",() => { dotgrid.interface.toggle_zoom(); },":"); + this.controller.add("default","Mode","Toggle Size",() => { dotgrid.interface.toggle_zoom(); },"CmdOrCtrl+E"); + this.controller.add("default","Mode","Keyboard",() => { dotgrid.controller.set("keyboard"); },"CmdOrCtrl+K"); + + this.controller.add("keyboard","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); + this.controller.add("keyboard","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); + this.controller.add("keyboard","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); + this.controller.add("keyboard","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); + this.controller.add("keyboard","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc"); + this.controller.add("keyboard","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace"); + this.controller.add("keyboard","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); + + this.controller.add("keyboard","Controls","Add vertex",() => { dotgrid.keyboard.confirm(); },"Enter"); + this.controller.add("keyboard","Controls","Remove vertex",() => { dotgrid.keyboard.erase(); },"Backspace"); + + this.controller.add("keyboard","Select","Move Up",() => { dotgrid.keyboard.move(0,1); },"Up"); + this.controller.add("keyboard","Select","Move Down",() => { dotgrid.keyboard.move(0,-1); },"Down"); + this.controller.add("keyboard","Select","Move Left",() => { dotgrid.keyboard.move(1,0); },"Left"); + this.controller.add("keyboard","Select","Move Right",() => { dotgrid.keyboard.move(-1,0); },"Right"); + + this.controller.add("keyboard","Select","XXYY(0)",() => { dotgrid.keyboard.push(0); },"0"); + this.controller.add("keyboard","Select","XXYY(1)",() => { dotgrid.keyboard.push(1); },"1"); + this.controller.add("keyboard","Select","XXYY(2)",() => { dotgrid.keyboard.push(2); },"2"); + this.controller.add("keyboard","Select","XXYY(3)",() => { dotgrid.keyboard.push(3); },"3"); + this.controller.add("keyboard","Select","XXYY(4)",() => { dotgrid.keyboard.push(4); },"4"); + this.controller.add("keyboard","Select","XXYY(5)",() => { dotgrid.keyboard.push(5); },"5"); + this.controller.add("keyboard","Select","XXYY(6)",() => { dotgrid.keyboard.push(6); },"6"); + this.controller.add("keyboard","Select","XXYY(7)",() => { dotgrid.keyboard.push(7); },"7"); + this.controller.add("keyboard","Select","XXYY(8)",() => { dotgrid.keyboard.push(8); },"8"); + this.controller.add("keyboard","Select","XXYY(9)",() => { dotgrid.keyboard.push(9); },"9"); + + this.controller.add("keyboard","Mode","Stop Keyboard Mode",() => { dotgrid.keyboard.exit(); },"Escape"); + this.controller.commit(); document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false); diff --git a/desktop/sources/scripts/keyboard.js b/desktop/sources/scripts/keyboard.js new file mode 100644 index 0000000..2c52043 --- /dev/null +++ b/desktop/sources/scripts/keyboard.js @@ -0,0 +1,64 @@ +function Keyboard() +{ + this.memory = ""; + + this.selector = {x:0,y:0}; + + this.select = function(pos) + { + this.selector = {x:pos.x * -dotgrid.grid_width,y:pos.y * dotgrid.grid_height}; + dotgrid.move_cursor(this.selector) + dotgrid.guide.update(); + dotgrid.draw(); + } + + this.deselect = function() + { + dotgrid.tool.clear(); + dotgrid.guide.update(); + dotgrid.draw(); + } + + this.confirm = function() + { + dotgrid.tool.add_vertex({x:this.selector.x * -1,y:this.selector.y}); + dotgrid.guide.update(); + dotgrid.draw(); + } + + this.erase = function() + { + dotgrid.tool.remove_segments_at(this.selector); + dotgrid.guide.update(); + dotgrid.draw(); + } + + this.move = function(x,y) + { + this.selector = {x:this.selector.x+(x*dotgrid.grid_width),y:this.selector.y+(-y*dotgrid.grid_height)} + dotgrid.move_cursor(this.selector) + dotgrid.guide.update(); + dotgrid.draw(); + } + + this.push = function(k) + { + this.memory = `${this.memory}${k}`; + if(this.memory.length > 3){ + var pos = {x:parseInt(this.memory.substr(0,2)),y:parseInt(this.memory.substr(2,2))}; + this.select(pos); + this.memory = ""; + } + } + + this.reset = function() + { + this.memory = ""; + dotgrid.update(); + } + + this.exit = function() + { + dotgrid.controller.set(); + } +} \ No newline at end of file