Improved UI

desktop/sources/links/main.css

@@ -4,10 +4,10 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non
 
 #app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag; padding-top:30px;}
 #dotgrid { margin:0px auto; position:relative; padding:15px;-webkit-app-region: no-drag; width:310px; height:310px; }
-#guide { position: absolute;width: 300px;height: 300px; transition: opacity 250ms;}
+#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms;}
 #render { display: none }
 #vector { z-index: 1000;position: relative;width:300px; height:300px; }
-#preview { position: absolute; top:15px; left:15px; stroke-dasharray: 4,4;}
+#preview { z-index: 1001;position: absolute; top:15px; left:15px; stroke-dasharray: 4,4;}
 
 /* Interface */
 

desktop/sources/scripts/dotgrid.js

@@ -22,7 +22,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
   this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999";
   this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_3.id = "layer_3"; this.layer_3.style.stroke = "#ccc";
   
-  this.cursor = { pos:{x:0,y:0},translation:null,multi:false }
+  this.cursor = { pos:{x:0,y:0},translation:null,multi:false,updated:0 }
 
   this.install = function()
   {  
@@ -148,7 +148,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     document.addEventListener('copy', function(e){ dotgrid.copy(e); e.preventDefault(); }, false);
     document.addEventListener('cut', function(e){ dotgrid.cut(e); e.preventDefault(); }, false);
     document.addEventListener('paste', function(e){ dotgrid.paste(e); e.preventDefault(); }, false);
-
     window.addEventListener('drop', dotgrid.drag);
 
     dotgrid.set_size({width:300,height:300});
@@ -197,34 +196,35 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
   this.mouse_down = function(e)
   {
-    var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
+    var o = e.target.getAttribute("ar");
+
+    if(o){
+      if(o == "line"){ this.tool.cast("line"); return; }
+      if(o == "arc_c"){ this.tool.cast("arc_c"); return;}
+      if(o == "arc_r"){ this.tool.cast("arc_r"); return; }
+      if(o == "bezier"){ this.tool.cast("bezier"); return; }
+      if(o == "close"){ this.tool.cast("close"); return; }
+
+      if(o == "thickness"){ this.mod_thickness(); return; }
+      if(o == "linecap"){ this.mod_linecap(); return; }
+      if(o == "linejoin"){ this.mod_linejoin(); return; }
+      if(o == "mirror"){ this.mod_mirror(); return; }
+      if(o == "fill"){ this.mod_fill(); return; }
+      if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100); return; }
+      if(o == "depth"){ this.tool.select_next_layer(); return; }
+
+      e.preventDefault();
+    }    
+
+    var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); 
+    pos = this.position_on_grid(pos);
 
     if(e.altKey){ dotgrid.tool.remove_segments_at(pos); return; }
     
     if(dotgrid.tool.vertex_at(pos)){ 
       console.log("Begin translation"); dotgrid.cursor.translation = {from:pos,to:pos}; 
       if(e.shiftKey){ console.log("Begin translation(multi)"); dotgrid.cursor.multi = true; }
-      return; 
     }
-
-    var o = e.target.getAttribute("ar");
-    if(!o){ return; }
-
-    if(o == "line"){ this.tool.cast("line"); }
-    if(o == "arc_c"){ this.tool.cast("arc_c"); }
-    if(o == "arc_r"){ this.tool.cast("arc_r"); }
-    if(o == "bezier"){ this.tool.cast("bezier"); }
-    if(o == "close"){ this.tool.cast("close"); }
-
-    if(o == "thickness"){ this.mod_thickness(); }
-    if(o == "linecap"){ this.mod_linecap(); }
-    if(o == "linejoin"){ this.mod_linejoin(); }
-    if(o == "mirror"){ this.mod_mirror(); }
-    if(o == "fill"){ this.mod_fill(); }
-    if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100) }
-    if(o == "depth"){ this.tool.select_next_layer(); }
-
-    e.preventDefault();
   }
 
   this.mouse_move = function(e)
@@ -232,6 +232,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
 
     this.cursor.pos = pos;
+    this.cursor.updated = new Date().getTime();
 
     if(dotgrid.cursor.translation && (Math.abs(dotgrid.cursor.translation.from.x) != Math.abs(pos.x) || Math.abs(dotgrid.cursor.translation.from.y) != Math.abs(pos.y))){ dotgrid.cursor.translation.to = pos; }
 
@@ -242,7 +243,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
   this.mouse_up = function(e)
   {
-    var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
+    if(e.target.getAttribute("ar")){ return } // If clicking on interface
+
+    var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); 
+    pos = this.position_on_grid(pos);
 
     if(e.altKey){ return; }
 
@@ -281,9 +285,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
   this.preview = function(operation)
   {
-    if(this.preview_prev == operation ){ return; }
+    if(this.preview_prev == operation){ return; }
 
-    this.preview_el.innerHTML = !operation || operation == "close" ? `<path d='M0,0'></path>` : `<path d='${dotgrid.tool.path(dotgrid.tool.index,[{type:operation,verteces:dotgrid.tool.verteces}])}'></path>`;
+    this.preview_el.innerHTML = !operation || operation == "close" || !dotgrid.tool.can_cast(operation) ? `<path d='M0,0'></path>` : `<path d='${dotgrid.tool.path(dotgrid.tool.index,[{type:operation,verteces:dotgrid.tool.verteces}])}'></path>`;
     this.preview_prev = operation;
   }
 
@@ -496,17 +500,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     return {x:x*-1,y:y};
   }
 
-  function is_json(text)
-  {
-    try{
-      JSON.parse(text);
-      return true;
-    }
-    catch (error){
-      return false;
-    }
-  }
-
+  function is_json(text){ try{ JSON.parse(text);return true; } catch(error){ return false; }}
   function pos_is_equal(a,b){ return a && b && a.x == b.x && a.y == b.y }
   function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
 }

desktop/sources/scripts/guide.js

@@ -101,7 +101,7 @@ function Guide()
     ctx.lineWidth = 3;
     ctx.lineCap="round";
     ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false);
-    ctx.strokeStyle = dotgrid.theme.active.f_low;
+    ctx.strokeStyle = pos_is_equal(pos,dotgrid.cursor.pos) ? dotgrid.theme.active.b_inv : dotgrid.theme.active.f_low;
     ctx.stroke(); 
     ctx.closePath(); 
   }
@@ -127,7 +127,6 @@ function Guide()
 
   this.draw_cursor = function(pos = dotgrid.cursor.pos,radius = 10)
   {
-    console.log(pos)
     var ctx = this.el.getContext('2d');
     ctx.beginPath();
     ctx.lineWidth = 3;
@@ -137,4 +136,6 @@ function Guide()
     ctx.stroke(); 
     ctx.closePath(); 
   }
+
+  function pos_is_equal(a,b){ return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) }
 }

desktop/sources/scripts/tool.js

@@ -170,6 +170,11 @@ function Tool()
         return false;
       }
     }
+    if(type == "bezier"){
+      if(this.verteces.length % 2 == 0){
+        return false;
+      }
+    }
     return this.verteces.length >= this.reqs[type];
   }