Implemented picker

LAYOUT.md

@@ -25,15 +25,15 @@
 - Linecap: `Q`
 - Linejoin: `W`
 - Mirror: `E`
-- Fill: `R`
 - Thicker: `}`
 - Thinner: `{`
 - Thicker +5: `]`
 - Thinner -5: `[`
 
 ### Layers
-- Move Above: `P`
-- Move Below: `L`
+- Foreground: `CmdOrCtrl+1`
+- Middleground: `CmdOrCtrl+2`
+- Background: `CmdOrCtrl+3`
 
 ### View
 - Tools: `U`
@@ -43,6 +43,7 @@
 ### Mode
 - Toggle Size: `CmdOrCtrl+E`
 - Keyboard: `CmdOrCtrl+K`
+- Picker: `CmdOrCtrl+P`
 
 
 ## keyboard Mode
@@ -71,3 +72,18 @@
 - Stop Keyboard Mode: `Escape`
 
 
+## picker Mode
+
+### Edit
+- undo: `undefined`
+- redo: `undefined`
+- cut: `undefined`
+- copy: `undefined`
+- paste: `undefined`
+- delete: `undefined`
+- selectall: `undefined`
+
+### Mode
+- Stop Picker Mode: `Escape`
+
+

README.md

@@ -10,8 +10,6 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
 
 ## Controls
 
-## default Mode
-
 ### File
 - New: `CmdOrCtrl+N`
 - Open: `CmdOrCtrl+O`
@@ -37,15 +35,15 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
 - Linecap: `Q`
 - Linejoin: `W`
 - Mirror: `E`
-- Fill: `R`
 - Thicker: `}`
 - Thinner: `{`
 - Thicker +5: `]`
 - Thinner -5: `[`
 
 ### Layers
-- Move Above: `P`
-- Move Below: `L`
+- Foreground: `CmdOrCtrl+1`
+- Middleground: `CmdOrCtrl+2`
+- Background: `CmdOrCtrl+3`
 
 ### View
 - Tools: `U`
@@ -55,6 +53,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
 ### Mode
 - Toggle Size: `CmdOrCtrl+E`
 - Keyboard: `CmdOrCtrl+K`
+- Picker: `CmdOrCtrl+P`
 
 ## keyboard Mode
 
@@ -81,6 +80,20 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
 ### Mode
 - Stop Keyboard Mode: `Escape`
 
+## picker Mode
+
+### Edit
+- undo: `undefined`
+- redo: `undefined`
+- cut: `undefined`
+- copy: `undefined`
+- paste: `undefined`
+- delete: `undefined`
+- selectall: `undefined`
+
+### Mode
+- Stop Picker Mode: `Escape`
+
 <img src='https://cdn.rawgit.com/hundredrabbits/Dotgrid/master/LAYOUT.svg?v=3' width="600"/>
 
 ## Extras

desktop/sources/index.html

@@ -11,6 +11,7 @@
     <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>
+    <script type="text/javascript" src="scripts/picker.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/links/fonts.css

@@ -1,6 +1,15 @@
+/* Input */
+
 @font-face {
-  font-family: 'din_regular';
-  src: url('../media/fonts/din_regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'input_mono_regular';
+    src: url('../media/fonts/input_mono_regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'input_mono_medium';
+    src: url('../media/fonts/input_mono_medium.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
 }

desktop/sources/links/main.css

@@ -1,4 +1,4 @@
-body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms}
+body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms}
 #app { display: flex; flex-direction: column; align-items: center;}
 
 #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;}
@@ -21,7 +21,7 @@ body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; over
 
 svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; }
 
-#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px);}
+#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px); height:30px;}
 #interface svg.inactive { opacity: 0.2 }
 #interface svg path.inactive { opacity: 0.2 }
 #interface svg:hover { opacity: 0.5 }
@@ -31,6 +31,10 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px;
 #interface.hidden { bottom:10px;opacity: 0 }
 #interface.visible { bottom:20px; opacity: 1 }
 
+#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900}
+#interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms;}
+#interface.picker #menu { opacity: 0; top:-5px; z-index: 0 }
+#interface.picker #picker { opacity: 1; top:0px; z-index: 900 }
 #preview { position: absolute; top:20px; left:20px; stroke-dasharray: 4,4; }
 
 /* Theme Defaults */
@@ -38,6 +42,7 @@ svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px;
 :root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; }  
 
 body { background:var(--background) !important; }
+#picker { background:var(--background) !important; color:var(--f_high) !important; }
 .fh { color:var(--f_high) !important; stroke:var(--f_high) !important; }
 .fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; }
 .fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; }

desktop/sources/scripts/dotgrid.js

@@ -8,6 +8,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
   this.render = new Render();
   this.tool = new Tool();
   this.keyboard = new Keyboard();
+  this.picker = new Picker();
 
   this.width = width;
   this.height = height;
@@ -158,6 +159,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
 
     this.controller.add("default","Mode","Toggle Size",() => { dotgrid.interface.toggle_zoom(); },"CmdOrCtrl+E");
     this.controller.add("default","Mode","Keyboard",() => { dotgrid.keyboard.start(); },"CmdOrCtrl+K");
+    this.controller.add("default","Mode","Picker",() => { dotgrid.picker.start(); },"CmdOrCtrl+P");
 
     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");
@@ -187,6 +189,24 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
     this.controller.add("keyboard","Select","XXYY(9)",() => { dotgrid.keyboard.push(9); },"9");
     
     this.controller.add("keyboard","Mode","Stop Keyboard Mode",() => { dotgrid.keyboard.stop(); },"Escape");
+
+    this.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
+    this.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
+    this.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H");
+    this.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
+    this.controller.add("picker","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc");
+    this.controller.add("picker","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace");
+    this.controller.add("picker","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
+
+    this.controller.add_role("picker","Edit","undo");
+    this.controller.add_role("picker","Edit","redo");
+    this.controller.add_role("picker","Edit","cut");
+    this.controller.add_role("picker","Edit","copy");
+    this.controller.add_role("picker","Edit","paste");
+    this.controller.add_role("picker","Edit","delete");
+    this.controller.add_role("picker","Edit","selectall");
+
+    this.controller.add("picker","Mode","Stop Picker Mode",() => { dotgrid.picker.stop(); },"Escape");
     
     this.controller.commit();
 
@@ -265,6 +285,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
     if(o == "linecap"){ this.mod_linecap(); }
     if(o == "linejoin"){ this.mod_linejoin(); }
     if(o == "mirror"){ this.mod_mirror(); }
+    if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100) }
     if(o == "depth"){ this.toggle_layer(); }
   }
 
@@ -352,7 +373,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
     this.tool.style().thickness = Math.max(this.tool.style().thickness+mod,0);
     this.cursor_x.textContent = this.tool.style().thickness;
     this.draw();
-    console.log(mod,step,this.tool.style())
   }
 
   this.mod_linecap_index = 1;

desktop/sources/scripts/interface.js

@@ -3,12 +3,17 @@ function Interface()
   this.el = document.createElement("div");
   this.el.id = "interface";
 
+  this.el.appendChild(this.menu_el = document.createElement("div"));
+  this.menu_el.id = "menu";
+
   this.is_visible = true;
   this.zoom = false;
 
   this.start = function()
   {
     document.getElementById("app").appendChild(this.el);
+    this.el.appendChild(dotgrid.picker.el);
+    
     var html = ""
     var tools = {
       line: ["line","M60,60 L240,240",""],
@@ -31,7 +36,7 @@ function Interface()
       var tool = tools[id];
       html += `<svg id="${id}" ar="${id}" title="${tool[0]}" viewBox="0 0 300 300" class="icon"><path class="icon_path" d="${tool[1]}"/>${id == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${id}" width="300" height="300" opacity="0"><title>${id}</title></rect></svg>`
     }
-    this.el.innerHTML = html
+    this.menu_el.innerHTML = html
   }
 
   this.update = function()

desktop/sources/scripts/keyboard.js

@@ -1,11 +1,13 @@
 function Keyboard()
 {
   this.memory = "";
+  this.is_active = false;
 
   this.selector = {x:0,y:0};
 
   this.start = function()
   {
+    this.is_active = true;
     dotgrid.controller.set("keyboard");
     this.select({x:10,y:10})
     dotgrid.cursor.className = "keyboard";
@@ -13,6 +15,7 @@ function Keyboard()
 
   this.stop = function()
   {
+    this.is_active = false;
     dotgrid.controller.set();
     dotgrid.cursor.className = "";
   }
@@ -75,6 +78,8 @@ function Keyboard()
 
   this.listen = function(e)
   {
+    if(!this.is_active){ return; }
+    
     if(e.key == "ArrowRight"){
       dotgrid.keyboard.move(-1,0);
       e.preventDefault();

desktop/sources/scripts/picker.js

@@ -0,0 +1,64 @@
+function Picker()
+{
+  this.memory = "";
+  this.el = document.createElement("input");
+  this.el.id = "picker"
+  this.el.setAttribute("placeholder","#ff0000")
+  this.el.setAttribute("maxlength","7")
+  this.original = null;
+
+  this.start = function()
+  {
+    dotgrid.controller.set("picker");
+    dotgrid.interface.el.className = "picker"
+    this.el.focus()
+    this.original = dotgrid.tool.style().color
+    this.el.value = ""
+  }
+
+  this.stop = function()
+  {
+    this.cancel();
+    dotgrid.controller.set();
+    dotgrid.interface.el.className = ""
+    this.el.blur()
+    this.el.value = ""
+  }
+
+  this.validate = function()
+  {
+    dotgrid.tool.style().color = this.el.value;
+    dotgrid.draw();
+    dotgrid.controller.set();
+    dotgrid.interface.el.className = ""
+    this.el.blur()
+  }
+
+  this.cancel = function()
+  {
+    if(!this.original){ return; }
+    dotgrid.tool.style().color = this.original;
+    dotgrid.draw();
+  }
+
+  this.update = function()
+  {
+    if(this.el.value.length != 4 && this.el.value.length != 7){ return; }
+
+    dotgrid.tool.style().color = this.el.value;
+    dotgrid.draw();
+  }
+
+  this.listen = function(e)
+  {
+    if(e.key == "Enter"){
+      this.validate();
+      e.preventDefault();
+      return;
+    }
+
+    this.update();
+  }
+
+  this.el.onkeyup = function(event){ dotgrid.picker.listen(event); };
+}