Implemented picker

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