Allow for drag/drop of verteces

README.md

@@ -33,8 +33,10 @@ It works by adding control points and selecting a stroke type. So clicking the c
 ### Shortcuts
 
 - `ctrl+n` New canvas.
-- `alt+click` Erase target stroke.
+
 - `ctrl+enter` Toggle Fullscreen.
+- `alt+click` Erase target control point.
+- `ctrl+click` Translate target control point.
 
 ## License
 

main.js

@@ -6,7 +6,7 @@ let win
 
 app.on('ready', () => 
 {
-  win = new BrowserWindow({width: 900, height: 420, minWidth: 390, minHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
+  win = new BrowserWindow({width: 390, height: 420, minWidth: 390, minHeight: 420, maxWidth: 390, maxHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
 
   win.loadURL(`file://${__dirname}/sources/index.html`)
 
@@ -56,7 +56,7 @@ app.on('ready', () =>
     is_shown = true;
   })
   // Open the DevTools.
-  win.webContents.openDevTools()
+  // win.webContents.openDevTools()
 })
 
 app.on('window-all-closed', () => 

sources/links/main.css

@@ -9,8 +9,8 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit
 #cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
 #cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
 #interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:20px;-webkit-app-region: no-drag;}
-#guide { position: absolute;top: 0px;left: 0px;padding: 10px; width: 300px;height: 300px;}
+#guide,#widgets { position: absolute;top: 0px;left: 0px; width: 300px;height: 300px;}
-#guide .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
+#widgets { z-index: 9000 }
 #render { display: none }
 
 .icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 0.5}

sources/scripts/dotgrid.js

@@ -56,6 +56,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.wrapper.appendChild(this.element);
     this.wrapper.appendChild(this.interface);
     this.element.appendChild(this.guide.el);
+    this.element.appendChild(this.guide.widgets);
     this.wrapper.appendChild(this.render.el);
 
     // Cursors
@@ -114,9 +115,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   // Cursor
 
+  this.translation = null;
+
   this.mouse_down = function(e)
   {
     var o = e.target.getAttribute("data-operation");
+
+    var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
+    pos = this.position_on_grid(pos);
+    if(e.ctrlKey){ dotgrid.translation = {from:pos,to:pos}; }
+
     if(!o){ return; }
 
     if(o == "line"){ this.draw_line(); }
@@ -133,10 +141,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
     pos = this.position_on_grid(pos);
 
+    if(e.ctrlKey && dotgrid.translation){ dotgrid.translation.to = pos; }
+
     this.cursor.style.left = Math.floor(-(pos.x-this.grid_width));
     this.cursor.style.top = Math.floor(pos.y+this.grid_height);
     this.cursor_coord.className = -pos.x > this.width/2 ? "fl left" : "fl"
     this.cursor_coord.textContent = parseInt(-pos.x/this.grid_width)+","+parseInt(pos.y/this.grid_height);
+
+    dotgrid.guide.update();
   }
 
   this.mouse_up = function(e)
@@ -144,6 +156,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
     pos = this.position_on_grid(pos);
 
+    if(dotgrid.translation){
+      dotgrid.translate(dotgrid.translation);
+      return;
+    }
+    
     if(e.altKey){ dotgrid.delete_at(pos); return; }
     if(pos.x>0) return;
 
@@ -153,6 +170,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.draw();
   }
 
+  this.translate = function(t)
+  {
+    for(id in dotgrid.segments){
+      var segment = dotgrid.segments[id];
+      if(segment.from && segment.from.is_equal(dotgrid.translation.from)){ segment.from = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
+      if(segment.to && segment.to.is_equal(dotgrid.translation.from)){ segment.to = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
+      if(segment.end && segment.end.is_equal(dotgrid.translation.from)){ segment.end = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)}
+    }
+
+    dotgrid.translation = null;
+    dotgrid.draw();
+  }
+
   // Setters
 
   this.set_from = function(pos)
@@ -229,7 +259,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
       return;
     }
     // Move offset
-    this.offset = this.offset.add(new Pos(move.x,move.y));
+    // this.offset = this.offset.add(new Pos(move.x,move.y));
     this.draw();
   }
 
@@ -292,6 +322,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     this.render.draw();
     this.update_interface();
+    this.guide.update();
   }
 
   // Draw
@@ -456,12 +487,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - (30+10*(this.scale)))
   }
 
-  this.position_on_grid = function(pos) // rounds the mouse position to the nearest cell, and limits the coords to within the box
+  this.position_on_grid = function(pos)
   {
     x = Math.round(pos.x/this.grid_width)*this.grid_width
     y = Math.round(pos.y/this.grid_height)*this.grid_height
     off = (x<-this.width || x>0 || y>this.height || y<0)
-    if(off) { // change position so the cursor will not be seen
+    if(off) {
       x = 50
       y = -50
     }

sources/scripts/guide.js

@@ -2,34 +2,54 @@ function Guide()
 {
   this.el = document.createElement("canvas");
   this.el.id = "guide";
-  this.el.width = 600;
+  this.el.width = 640;
-  this.el.height = 600;
+  this.el.height = 640;
-  this.el.style.width = "300px";
+  this.el.style.width = "320px";
-  this.el.style.height = "300px";
+  this.el.style.height = "320px";
-  this.markers;
+
+  this.widgets = document.createElement("canvas");
+  this.widgets.id = "widgets";
+  this.widgets.width = 640;
+  this.widgets.height = 640;
+  this.widgets.style.width = "320px";
+  this.widgets.style.height = "320px";
 
   this.start = function()
   {
-    this.update();
+    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.clear = function()
   {
-    this.el.getContext('2d').clearRect(0, 0, 600, 600);
+    this.widgets.getContext('2d').clearRect(0, 0, 600, 600);
   }
 
   this.update = function()
   {
     this.clear();
 
-    for (var x = dotgrid.grid_x; x >= 0; x--) {
+    var handles = [];
-      for (var y = dotgrid.grid_y; y >= 0; y--) {
+    for(id in dotgrid.segments){
-        var pos_x = parseInt(x * dotgrid.grid_width) ;
+      var segment = dotgrid.segments[id];
-        var pos_y = parseInt(y * dotgrid.grid_height) ;
+      handles = handles.concat(segment.handles())
-        var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0;
-        var radius = is_step ? 1.5 : 0.5;
-        dotgrid.guide.draw_marker({x:pos_x * 2,y:pos_y * 2},radius,is_step);
     }
+
+    for(id in handles){
+      var handle = handles[id];
+      this.draw_handle(handle,4);
+    }
+
+    // Translations
+    if(dotgrid.translation){
+      this.draw_translation();
     }
   }
 
@@ -37,8 +57,46 @@ function Guide()
   {
     var ctx = this.el.getContext('2d');
     ctx.beginPath();
-    ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI, false);
+    ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false);
-    ctx.fillStyle = step ? 'green' : 'red';
+    ctx.fillStyle = step ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low;
     ctx.fill();
+    ctx.closePath();
+  }
+
+  this.draw_handle = function(pos,radius)
+  {
+    var ctx = this.widgets.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, 10, 0, 2 * Math.PI, false);
+    ctx.fillStyle = dotgrid.theme.active.f_high;
+    ctx.fill(); 
+    ctx.closePath(); 
+
+    ctx.beginPath();
+    ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, radius, 0, 2 * Math.PI, false);
+    ctx.fillStyle = dotgrid.theme.active.f_high;
+    ctx.fill(); 
+    ctx.lineWidth = 3;
+    ctx.strokeStyle = dotgrid.theme.active.background;
+    ctx.stroke(); 
+    ctx.closePath();    
+  }
+
+  this.draw_translation = function()
+  {    
+    // From
+    var ctx = this.widgets.getContext('2d');
+    var from = dotgrid.translation.from;
+    var to = dotgrid.translation.to;
+
+    ctx.beginPath();
+    ctx.moveTo((from.x * -2)+20,(from.y * 2)+20);
+    ctx.lineTo((to.x * -2)+20,(to.y * 2)+20);
+    ctx.lineCap="round";
+    ctx.lineWidth = 5;
+    ctx.strokeStyle = dotgrid.theme.active.f_high;
+    ctx.stroke();
+    ctx.closePath();
   }
 }

sources/scripts/path_arc.js

@@ -35,4 +35,13 @@ function Path_Arc(from,to,orientation,end)
 
     return html 
   }
+
+  this.handles = function()
+  {
+    var a = [];
+    if(this.from){ a.push(this.from); }
+    if(this.to){ a.push(this.to); }
+    if(this.end){ a.push(this.end); }
+    return a;
+  }
 }

sources/scripts/path_bezier.js

@@ -28,4 +28,13 @@ function Path_Bezier(from,to,end)
 
     return html += "Q"+this.to.scale(dotgrid.scale)+" "+this.end.scale(dotgrid.scale)+" "
   }
+
+  this.handles = function()
+  {
+    var a = [];
+    if(this.from){ a.push(this.from); }
+    if(this.to){ a.push(this.to); }
+    if(this.end){ a.push(this.end); }
+    return a;
+  }
 }

sources/scripts/path_line.js

@@ -34,4 +34,13 @@ function Path_Line(from,to,end = null)
 
     return html
   }
+
+  this.handles = function()
+  {
+    var a = [];
+    if(this.from){ a.push(this.from); }
+    if(this.to){ a.push(this.to); }
+    if(this.end){ a.push(this.end); }
+    return a;
+  }
 }