Implemented multi-translate

README.md

@@ -8,6 +8,8 @@ Dotgrid is a simple vector drawing application.
 
 Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved with the arrows. Clicking one of the path icons, or pressing one of the shortcuts, will draw a stroke between them. The newly created segment's handles can be moved by clicking and dragging them.
 
+Hold `shift` to drag entire layer, hold `alt` to delete a vertex.
+
 ## Controls
 
 ## default Mode

desktop/sources/scripts/dotgrid.js

@@ -262,13 +262,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
   // Cursor
 
   this.translation = null;
+  this.translation_multi = null;
 
   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);
 
     if(e.altKey){ dotgrid.tool.remove_segments_at(pos); return; }
-    if(dotgrid.tool.vertex_at(pos)){ console.log("Begin translation"); dotgrid.translation = {from:pos,to:pos}; return; }
+    
+    if(dotgrid.tool.vertex_at(pos)){ 
+      console.log("Begin translation"); dotgrid.translation = {from:pos,to:pos}; 
+      if(e.shiftKey){ console.log("Begin translation(multi)"); dotgrid.translation_multi = true; }
+      return; 
+    }
 
     var o = e.target.getAttribute("ar");
     if(!o){ return; }
@@ -311,8 +317,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     if(pos.x > 0) { dotgrid.translation = null; return; }
 
     if(dotgrid.translation && (Math.abs(dotgrid.translation.from.x) != Math.abs(dotgrid.translation.to.x) || Math.abs(dotgrid.translation.from.y) != Math.abs(dotgrid.translation.to.y))){
-      dotgrid.tool.translate(dotgrid.translation.from,dotgrid.translation.to);
+      if(dotgrid.translation_multi){
+        dotgrid.tool.translate_multi(dotgrid.translation.from,dotgrid.translation.to);
+      }
+      else{
+        dotgrid.tool.translate(dotgrid.translation.from,dotgrid.translation.to);  
+      }
       dotgrid.translation = null;
+      dotgrid.translation_multi = null;
       this.draw();
       e.preventDefault();
       return;

desktop/sources/scripts/tool.js

@@ -229,6 +229,22 @@ function Tool()
     dotgrid.draw();
   }
 
+  this.translate_multi = function(a,b)
+  {
+    var offset = {x:a.x - b.x,y:a.y - b.y}
+
+    for(segment_id in this.layer()){
+      var segment = this.layer()[segment_id];
+      for(vertex_id in segment.verteces){
+        var vertex = segment.verteces[vertex_id];
+        segment.verteces[vertex_id] = {x:vertex.x+offset.x,y:vertex.y-offset.y};
+      }
+    }
+    dotgrid.history.push(this.layers);
+    this.clear();
+    dotgrid.draw();
+  }
+
   // Style
 
   this.style = function()