From 5e2a293e540e6033b420c61bb5878e5614a4659e Mon Sep 17 00:00:00 2001
From: huoju <virushuo@gmail.com>
Date: Tue, 4 Apr 2017 06:13:23 -0400
Subject: [PATCH] using shift key to lock lines at vertical / horizontal

---
 draw.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 59 insertions(+), 8 deletions(-)

diff --git a/draw.js b/draw.js
index 7e9ba607..c2cc7bde 100644
--- a/draw.js
+++ b/draw.js
@@ -47,23 +47,39 @@ function initDraw(){
 	var drawing = true;
 
 	var undoHistory = [];
+  var _global_key_status = {"L_SHIFT":0, "R_SHIFT":0, buff:{}};
 
 	var lastPos = [0, 0];
 
 	render(path);
 
 	container.addEventListener("mousedown", function(e){
+    var e_clientX = e.clientX;
+    var e_clientY = e.clientY;
+    if(_global_key_status.R_SHIFT || _global_key_status.L_SHIFT === 1){
+      var r = lockHorV(e);
+      e_clientX=r[0];
+      e_clientY=r[1];
+    }
 		lastPos = [
-			 e.clientX
-			,e.clientY
+			 e_clientX
+			,e_clientY
 		];
 	});
 
 	container.addEventListener("mouseup", function(e){
-		if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing){
+    var e_clientX = e.clientX;
+    var e_clientY = e.clientY;
+
+      if(_global_key_status.R_SHIFT || _global_key_status.L_SHIFT === 1){
+        e_clientX = lastPos[0];
+        e_clientY = lastPos[1];
+      }
+
+		if(Math.abs(lastPos[0] - e_clientX) + Math.abs(lastPos[1] - e_clientY) <= 4 && drawing){
 			path.push([
-				 ~~((e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
-				,~~((e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
+				 ~~((e_clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
+				,~~((e_clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
 			]);
 			render(path);
 			
@@ -77,11 +93,31 @@ function initDraw(){
 		}
 	});
 
+  function lockHorV(e){
+    var e_clientX = e.clientX;
+    var e_clientY = e.clientY;
+    var x_offset = Math.abs(e.clientX -lastPos[0]);
+    var y_offset = Math.abs(e.clientY-lastPos[1]);
+    var offset = y_offset - x_offset ;
+    if(y_offset > x_offset ) //keep x 
+      e_clientX = lastPos[0];
+    else if (x_offset > y_offset) //keep y
+      e_clientY =lastPos[1];
+    return [e_clientX,e_clientY];
+  }
+
 	window.addEventListener("mousemove", function(e){
+    var e_clientX = e.clientX;
+    var e_clientY = e.clientY;
 		if(!dragging && drawing){
+      if(_global_key_status.R_SHIFT || _global_key_status.L_SHIFT === 1){
+        var r = lockHorV(e);
+        e_clientX=r[0];
+        e_clientY=r[1];
+      }
 			var last = [
-				 ~~((e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
-				,~~((e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
+				 ~~((e_clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
+				,~~((e_clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
 			];
 			render(path.concat([last]));
 		}
@@ -96,9 +132,24 @@ function initDraw(){
 			redo();
 		} else if(e.key == "Escape"){
 			exportOverlay.style.display = "none";
-		}
+		} else if (e.key === "Shift" ){
+      if(e.code === "ShiftRight")
+        _global_key_status.R_SHIFT = 0;
+      else if(e.code === "ShiftLeft")
+        _global_key_status.L_SHIFT = 0;
+    }
 	});
 
+	window.addEventListener("keydown", function(e){
+   if (e.key === "Shift" ){
+      if(e.code === "ShiftRight")
+        _global_key_status.R_SHIFT = 1;
+      else if(e.code === "ShiftLeft")
+        _global_key_status.L_SHIFT = 1;
+    }
+ 
+  });
+
 	finishButton.addEventListener("click", function(e){
 		finish();
 	});