Moving preview into guide

desktop/main.js

@@ -32,6 +32,7 @@ app.on('ready', () =>
   app.win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
 
   app.win.loadURL(`file://${__dirname}/sources/index.html`);
+  app.win.toggleDevTools();
   
   app.win.on('closed', () => {
     win = null

desktop/sources/scripts/dotgrid.js

@@ -59,7 +59,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     this.preview_el.style.strokeWidth = this.tool.style().thickness;
     this.preview_el.style.strokeLinecap = this.tool.style().strokeLinecap;
     this.preview_el.style.fill = this.tool.style().fill;
-    this.element.appendChild(this.preview_el);
+    // this.element.appendChild(this.preview_el);
 
     this.svg_el.appendChild(this.layer_3);
     this.svg_el.appendChild(this.layer_2);
@@ -234,11 +234,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
     this.cursor.pos = pos;
     this.cursor.updated = new Date().getTime();
+    this.cursor.operation = e.target.getAttribute("ar");
 
     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; }
 
-    dotgrid.preview(e.target.getAttribute("ar"));
+    dotgrid.guide.refresh();
-    dotgrid.guide.refresh(pos);
     e.preventDefault();
   }
 
@@ -249,7 +249,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);
 
-    if(e.altKey){ return; }
+    if(e.altKey || e.target.id != "guide"){ return; }
 
     if(pos.x > 0) { dotgrid.cursor.translation = null; return; }
 

desktop/sources/scripts/generator.js

@@ -19,7 +19,7 @@ function Generator(layer)
     return l;
   }
 
-  function render(segment)
+  this.render = function(segment)
   {
     var type = segment.type;
     var vertices = segment.vertices;
@@ -63,9 +63,11 @@ function Generator(layer)
 
     var layer = operate(this.layer,offset,scale)
 
+    console.log(layer)
+
     for(id in layer){
       var seg = layer[id];
-      s += `${render(seg)}`
+      s += `${this.render(seg)}`
     }
 
     return s.trim()

desktop/sources/scripts/guide.js

@@ -25,6 +25,7 @@ function Guide()
     this.draw_overlays()
     this.draw_translation();
     this.draw_cursor();  
+    this.draw_preview();
   }
 
   this.clear = function()
@@ -126,14 +127,21 @@ function Guide()
     var ctx = this.el.getContext('2d');
     var p = new Path2D(path);
 
+    ctx.setLineDash([0,0]); 
+
     ctx.strokeStyle = style.color;
     ctx.lineWidth = style.thickness * scale;
     ctx.lineCap = style.strokeLinecap;
     ctx.lineJoin = style.strokeLinejoin;
+
     if(style.fill && style.fill != "none"){
       ctx.fillStyle = style.color
       ctx.fill(p);
     }
+    if(style.strokeLineDash){
+      ctx.setLineDash(style.strokeLineDash);
+    }
+
     ctx.stroke(p);
   }
 
@@ -141,6 +149,7 @@ function Guide()
   {
     var ctx = this.el.getContext('2d');
     ctx.beginPath();
+    ctx.setLineDash([0,0]); 
     ctx.lineWidth = 3;
     ctx.lineCap="round";
     ctx.arc((pos.x * scale)+30, (pos.y * scale)+30, radius, 0, 2 * Math.PI, false);
@@ -159,6 +168,7 @@ function Guide()
 
     if(to.x<=0) {
       ctx.beginPath();
+      ctx.setLineDash([0,0]); 
       ctx.moveTo((from.x * -scale)+30,(from.y * scale)+30);
       ctx.lineTo((to.x * -scale)+30,(to.y * scale)+30);
       ctx.lineCap="round";
@@ -173,6 +183,7 @@ function Guide()
   {
     var ctx = this.el.getContext('2d');
     ctx.beginPath();
+    ctx.setLineDash([0,0]); 
     ctx.lineWidth = 3;
     ctx.lineCap="round";
     ctx.arc(Math.abs(pos.x * -scale)+30, Math.abs(pos.y * scale)+30, radius, 0, 2 * Math.PI, false);
@@ -181,5 +192,24 @@ function Guide()
     ctx.closePath(); 
   }
 
+  this.draw_preview = function()
+  {
+    var operation = dotgrid.cursor.operation
+
+    if(!dotgrid.tool.can_cast(operation)){ return; }
+    if(operation == "close"){ return; }
+
+    var path  = new Generator([{vertices:dotgrid.tool.vertices,type:operation}]).toString({x:15,y:15},2)
+    var style = {
+      color:"#f00",
+      thickness:2,
+      strokeLinecap:"round",
+      strokeLinejoin:"round",
+      strokeLineDash:[5, 15]
+    }
+
+    this.draw_path(path,style)
+  }
+
   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) }
 }