100% keyboard controls

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`
 
 

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`
 
 <img src='https://cdn.rawgit.com/hundredrabbits/Dotgrid/master/LAYOUT.svg?v=3' width="600"/>
 

desktop/sources/index.html

@@ -10,6 +10,7 @@
     <script type="text/javascript" src="scripts/render.js"></script>
     <script type="text/javascript" src="scripts/interface.js"></script>
     <script type="text/javascript" src="scripts/tool.js"></script>
+    <script type="text/javascript" src="scripts/keyboard.js"></script>
     <link rel="stylesheet" type="text/css" href="links/reset.css"/>
     <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
     <link rel="stylesheet" type="text/css" href="links/main.css"/>

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);

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();
+  }
+}