Improved picker

desktop/sources/scripts/cursor.js

@@ -20,7 +20,7 @@ function Cursor()
 
   this.down = function(e)
   {
-    this.pos = this.pos_from_event(e)
+    this.pos = this.pos_from_event(e);
 
     // Translation
     if(dotgrid.tool.vertex_at(this.pos)){
@@ -65,6 +65,7 @@ function Cursor()
     }
     else if(e.target.id == "guide"){
       dotgrid.tool.add_vertex({x:this.pos.x,y:this.pos.y});
+      dotgrid.picker.stop();
     }
 
     this.translate();

desktop/sources/scripts/guide.js

@@ -183,7 +183,7 @@ function Guide()
     ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale),(dotgrid.cursor.translation.to.y * this.scale));
     ctx.lineCap="round";
     ctx.lineWidth = 5;
-    ctx.strokeStyle = dotgrid.theme.active.b_inv;
+    ctx.strokeStyle = dotgrid.theme.active.f_low;
     ctx.setLineDash([5,10]); 
     ctx.stroke();
     ctx.closePath();

desktop/sources/scripts/picker.js

@@ -5,38 +5,54 @@ function Picker()
   this.memory = "";
   this.el = document.createElement("div");
   this.el.id = "picker"
+  this.is_active = false;
   this.input = document.createElement("input");
   this.input.id = "picker_input"
-  this.original = null;
 
   this.el.appendChild(this.input)
 
   this.start = function()
   {
+    if(this.is_active){ return; }
+
+    this.is_active = true;
+
     this.input.setAttribute("placeholder",`${dotgrid.tool.style().color.replace("#","").trim()}`)
     this.input.setAttribute("maxlength",6)
 
-    try{ dotgrid.controller.set("picker"); }
-    catch(err){ }
-
     dotgrid.interface.el.className = "picker"
     this.input.focus()
-    this.original = dotgrid.tool.style().color
     this.input.value = ""
+
+    try{ dotgrid.controller.set("picker"); }
+    catch(err){ }
+  }
+
+  this.update = function()
+  {
+    if(!this.is_active){ return; }
+    if(!is_color(this.input.value)){ return; }
+
+    let hex = `#${this.input.value}`;
+
+    document.getElementById("option_color").children[0].style.fill = hex;
+    document.getElementById("option_color").children[0].style.stroke = hex;
   }
 
   this.stop = function()
   {
-    this.cancel();
-
-    try{ dotgrid.controller.set(); }
-    catch(err){ console.log("No controller"); }
+    if(!this.is_active){ return; }
 
+    this.is_active = false;
+  
     dotgrid.interface.el.className = ""
     this.input.blur()
     this.input.value = ""
 
-    setTimeout(() => { dotgrid.interface.update(true); }, 250)
+    try{ dotgrid.controller.set(); }
+    catch(err){ console.log("No controller"); }
+
+    setTimeout(() => { dotgrid.interface.update(true); dotgrid.guide.update(); }, 250)
   }
 
   this.validate = function()
@@ -45,46 +61,10 @@ function Picker()
 
     let hex = `#${this.input.value}`;
 
-    this.set_color(hex);
-
-    dotgrid.guide.update();
-    
-    try{ dotgrid.controller.set(); }
-    catch(err){ console.log("No controller"); }
-
-    dotgrid.interface.el.className = ""
-    this.input.blur()
-    this.input.value = ""
-
-    setTimeout(() => { dotgrid.interface.update(true); }, 250)
-  }
-
-  this.set_color = function(color)
-  {
     dotgrid.tool.style().color = color;
     dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? color : "none";
-  }
 
-  this.set_size = function(size)
-  {
-    dotgrid.set_size(size);
-  }
-
-  this.cancel = function()
-  {
-    if(!this.original){ return; }
-    dotgrid.guide.update();
-    setTimeout(() => { dotgrid.interface.update(true); }, 250)
-  }
-
-  this.update = function()
-  {
-    if(!is_color(this.input.value)){ return; }
-
-    let hex = `#${this.input.value}`;
-
-    document.getElementById("option_color").children[0].style.fill = hex;
-    document.getElementById("option_color").children[0].style.stroke = hex;
+    this.stop();
   }
 
   this.listen = function(e,is_down = false)