From f90b007ace6ed370ea0a8fec22ec7da796b4efa1 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Wed, 21 Mar 2018 20:35:28 +1300
Subject: [PATCH] Implemented multi-translate

---
 README.md                          |  2 ++
 desktop/sources/scripts/dotgrid.js | 16 ++++++++++++++--
 desktop/sources/scripts/tool.js    | 16 ++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2e64d7f..17dc7e8 100644
--- a/README.md
+++ b/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
diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js
index 8b39ff5..6518c8f 100644
--- a/desktop/sources/scripts/dotgrid.js
+++ b/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;
diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js
index 6e91957..45370c5 100644
--- a/desktop/sources/scripts/tool.js
+++ b/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()