Improved guide

desktop/sources/links/main.css

@@ -1,14 +1,10 @@
 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;}
+#app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag;}
 
 #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;}
 #dotgrid { margin:0px auto; position:relative; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; }
 
-#cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:5px; border:2px solid black;}
+#cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:15px; background:white; margin-left:2px; margin-top:2px;}
-#cursor_from { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;}
-#cursor_to { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
-#cursor_end { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
-
 #cursor_x { position: absolute; top:0px; display: block; width:20px; height:10px; font-size: 11px; text-align: center; margin-left:10px; transition: left 100ms }
 #cursor_y { position: absolute; left:-10px; display: block; width:20px; height:10px; font-size: 11px; text-align: right; margin-top:15px; transition: top 100ms }
 
@@ -54,6 +50,6 @@ body { background:var(--background) !important; }
 .icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }
 #dotgrid svg.vector { stroke:var(--f_high) !important; }
 #dotgrid #preview { stroke:var(--f_high) !important; } 
-#dotgrid #cursor { border-color:var(--f_med); }
+#dotgrid #cursor { background:var(--f_med); }
 #dotgrid #cursor.keyboard { border-color:var(--f_high) !Important; }
     

desktop/sources/scripts/dotgrid.js

@@ -283,7 +283,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
     dotgrid.preview(e.target.getAttribute("ar"));
     dotgrid.move_cursor(pos)
-    dotgrid.guide.update();
+    dotgrid.guide.refresh();
     e.preventDefault();
   }
 
@@ -490,7 +490,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.preview();
     this.render.draw();
     this.interface.update();
-    this.guide.update();
+    this.guide.refresh();
   }
 
   // Draw

desktop/sources/scripts/guide.js

@@ -10,7 +10,7 @@ function Guide()
   this.start = function()
   {
     this.clear();
-    this.draw();
+    this.refresh();
   }
 
   this.toggle = function()
@@ -18,19 +18,6 @@ function Guide()
     this.el.style.opacity = !this.el.style.opacity || this.el.style.opacity == 1 ? 0 : 1;
   }
 
-  this.draw = function()
-  {
-    for (var x = dotgrid.grid_x; x >= 0; x--) {
-      for (var y = dotgrid.grid_y; y >= 0; y--) {
-        var pos_x = parseInt(x * dotgrid.grid_width) + dotgrid.grid_width ;
-        var pos_y = parseInt(y * dotgrid.grid_height) + dotgrid.grid_height ;
-        var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0;
-        var radius = is_step ? 2.5 : 1.5;
-        dotgrid.guide.draw_marker({x:pos_x,y:pos_y},radius,is_step);
-      }
-    }
-  }
-
   this.resize = function(size)
   {
     this.el.width = (size.width+40)*2;
@@ -38,7 +25,7 @@ function Guide()
     this.el.style.width = (size.width+40)+"px";
     this.el.style.height = (size.height+40)+"px";
 
-    this.update();
+    this.refresh();
   }
 
   this.clear = function()
@@ -46,14 +33,28 @@ function Guide()
     this.el.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2);
   }
 
-  this.update = function()
+  this.refresh = function()
   {
+    console.log("refresh")
     this.clear();
 
+    // Markers
+    for (var x = dotgrid.grid_x; x >= 0; x--) {
+      for (var y = dotgrid.grid_y; y >= 0; y--) {
+        var pos_x = parseInt(x * dotgrid.grid_width) + dotgrid.grid_width ;
+        var pos_y = parseInt(y * dotgrid.grid_height) + dotgrid.grid_height ;
+        var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0;
+        var radius = is_step ? 2.5 : 1.5;
+        this.draw_marker({x:pos_x,y:pos_y},radius,is_step);
+      }
+    }
+
+    // Verteces
     for(id in dotgrid.tool.verteces){
       this.draw_vertex(dotgrid.tool.verteces[id]);
     }
 
+    // Handles
     for(segment_id in dotgrid.tool.layer()){
       var segment = dotgrid.tool.layer()[segment_id];
       for(vertex_id in segment.verteces){
@@ -66,7 +67,6 @@ function Guide()
     if(dotgrid.translation){
       this.draw_translation();
     }
-    this.draw();
   }
 
   this.draw_vertex = function(pos, radius = 5)
@@ -101,13 +101,6 @@ function Guide()
     ctx.strokeStyle = dotgrid.theme.active.f_low;
     ctx.stroke(); 
     ctx.closePath(); 
-    ctx.beginPath();
-    ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, 2, 0, 2 * Math.PI, false);
-    ctx.fillStyle = dotgrid.theme.active.f_high;
-    ctx.fill(); 
-    ctx.strokeStyle = dotgrid.theme.active.background;
-    ctx.stroke(); 
-    ctx.closePath();      
   }
 
   this.draw_translation = function()

desktop/sources/scripts/keyboard.js

@@ -24,28 +24,28 @@ function Keyboard()
   {
     this.selector = {x:pos.x * -dotgrid.grid_width,y:pos.y * dotgrid.grid_height};
     dotgrid.move_cursor(this.selector)
-    dotgrid.guide.update();
+    dotgrid.guide.refresh();
     dotgrid.draw();
   }
 
   this.deselect = function()
   {
     dotgrid.tool.clear();
-    dotgrid.guide.update();
+    dotgrid.guide.refresh();
     dotgrid.draw();
   }
 
   this.confirm = function()
   {
     dotgrid.tool.add_vertex({x:this.selector.x * -1,y:this.selector.y});
-    dotgrid.guide.update();
+    dotgrid.guide.refresh();
     dotgrid.draw();
   }
 
   this.erase = function()
   {
     dotgrid.tool.remove_segments_at(this.selector);
-    dotgrid.guide.update();
+    dotgrid.guide.refresh();
     dotgrid.draw();
   }
 
@@ -56,7 +56,7 @@ function Keyboard()
     this.selector.x = this.selector.x > 0 ? 0 : this.selector.x;
     this.selector.y = this.selector.y < 0 ? 0 : this.selector.y;
     dotgrid.move_cursor(this.selector)
-    dotgrid.guide.update();
+    dotgrid.guide.refresh();
     dotgrid.draw();
   }