[T3] fix how lines are chosen when being dragged

T3/lines.js

@@ -25,6 +25,10 @@ var rightClick = 0;
 
 var lines = [];
 lines[0] = new Line(centerX-200,centerY,centerX+200,centerY);
+var selectedLine = null;
+var movingEntireLine = false;
+var draggingFirstEnd = false;
+var draggingSecondEnd = false;
 
 canvas.width = width;
 canvas.height = height;
@@ -60,73 +64,90 @@ function handleMouseDown(e) {
 function handleMouseUp() {
   mouseDown = 0;
   rightClick = 0;
+  selectedLine = null;
+  movingEntireLine = false;
+  draggingFirstEnd = false;
+  draggingSecondEnd = false;
+  console.log(selectedLine);
 }
 
-function handleMouse() {
-  for (var i = lines.length - 1; i >= 0; i--) {
-    if (mouseDown) {
-      if (mouseX >= lines[i].centerX - 40 && mouseX <= lines[i].centerX + 40 && mouseY >= lines[i].centerY - 40 && mouseY <= lines[i].centerY + 40) {
-        console.log("Line" + i + ":" + lines[i].x0 + " " + lines[i].y0 + " " + lines[i].xf + " " + lines[i].yf + " " + lines[i].width + " " + lines[i].height + " " + lines[i].centerX + " " + lines[i].centerY);
-        if (lines[i].x0 <= lines[i].xf) {
-          lines[i].x0 = mouseX-(lines[i].width/2);
-          lines[i].xf = mouseX+(lines[i].width/2);
+function dragLine() {
+  if (selectedLine != null) {
+    if (movingEntireLine) {
+      if (mouseX >= lines[selectedLine].centerX - 40 && mouseX <= lines[selectedLine].centerX + 40 && mouseY >= lines[selectedLine].centerY - 40 && mouseY <= lines[selectedLine].centerY + 40) {
+        if (lines[selectedLine].x0 <= lines[selectedLine].xf) {
+          lines[selectedLine].x0 = mouseX-(lines[selectedLine].width/2);
+          lines[selectedLine].xf = mouseX+(lines[selectedLine].width/2);
         } else {
-          lines[i].xf = mouseX-(lines[i].width/2);
-          lines[i].x0 = mouseX+(lines[i].width/2);
+          lines[selectedLine].xf = mouseX-(lines[selectedLine].width/2);
+          lines[selectedLine].x0 = mouseX+(lines[selectedLine].width/2);
         }
-        if (lines[i].y0 <= lines[i].yf) {
-          lines[i].y0 = mouseY-(lines[i].height/2);
-          lines[i].yf = mouseY+(lines[i].height/2);
+        if (lines[selectedLine].y0 <= lines[selectedLine].yf) {
+          lines[selectedLine].y0 = mouseY-(lines[selectedLine].height/2);
+          lines[selectedLine].yf = mouseY+(lines[selectedLine].height/2);
         } else {
-          lines[i].yf = mouseY-(lines[i].height/2);
-          lines[i].y0 = mouseY+(lines[i].height/2); 
+          lines[selectedLine].yf = mouseY-(lines[selectedLine].height/2);
+          lines[selectedLine].y0 = mouseY+(lines[selectedLine].height/2); 
         }
-        if (lines[i].x0 <= lines[i].xf) {
-          lines[i].centerX = lines[i].x0 + lines[i].width/2;
+        if (lines[selectedLine].x0 <= lines[selectedLine].xf) {
+          lines[selectedLine].centerX = lines[selectedLine].x0 + lines[selectedLine].width/2;
         } else {
-          lines[i].centerX = lines[i].xf + lines[i].width/2;
+          lines[selectedLine].centerX = lines[selectedLine].xf + lines[selectedLine].width/2;
         }
-        if (lines[i].y0 <= lines[i].yf) {
-          lines[i].centerY = lines[i].y0 + lines[i].height/2;
+        if (lines[selectedLine].y0 <= lines[selectedLine].yf) {
+          lines[selectedLine].centerY = lines[selectedLine].y0 + lines[selectedLine].height/2;
         } else {
-          lines[i].centerY = lines[i].yf + lines[i].height/2;
+          lines[selectedLine].centerY = lines[selectedLine].yf + lines[selectedLine].height/2;
         }
+      }
+    } else if (draggingFirstEnd) {
+      lines[selectedLine].x0 = mouseX;
+      lines[selectedLine].y0 = mouseY;
+      lines[selectedLine].width = Math.abs(lines[selectedLine].xf - lines[selectedLine].x0);
+      lines[selectedLine].height = Math.abs(lines[selectedLine].yf - lines[selectedLine].y0);
+      if (lines[selectedLine].x0 <= lines[selectedLine].xf) {
+        lines[selectedLine].centerX = lines[selectedLine].x0 + lines[selectedLine].width/2;
+      } else {
+        lines[selectedLine].centerX = lines[selectedLine].xf + lines[selectedLine].width/2;
+      }
+      if (lines[selectedLine].y0 <= lines[selectedLine].yf) {
+        lines[selectedLine].centerY = lines[selectedLine].y0 + lines[selectedLine].height/2;
+      } else {
+        lines[selectedLine].centerY = lines[selectedLine].yf + lines[selectedLine].height/2;
+      }
+    } else if (draggingSecondEnd) {
+      lines[selectedLine].xf = mouseX;
+      lines[selectedLine].yf = mouseY;
+      lines[selectedLine].width = Math.abs(lines[selectedLine].xf - lines[selectedLine].x0);
+      lines[selectedLine].height = Math.abs(lines[selectedLine].yf - lines[selectedLine].y0);
+      if (lines[selectedLine].x0 <= lines[selectedLine].xf) {
+        lines[selectedLine].centerX = lines[selectedLine].x0 + lines[selectedLine].width/2;
+      } else {
+        lines[selectedLine].centerX = lines[selectedLine].xf + lines[selectedLine].width/2;
+      }
+      if (lines[selectedLine].y0 <= lines[selectedLine].yf) {
+        lines[selectedLine].centerY = lines[selectedLine].y0 + lines[selectedLine].height/2;
+      } else {
+        lines[selectedLine].centerY = lines[selectedLine].yf + lines[selectedLine].height/2;
+      }
+    }
+  }
+}
+
+function handleMouse() {
+  for (var i = lines.length - 1; i >= 0; i--) {
+    if (mouseDown && selectedLine == null) {
+      if (mouseX >= lines[i].centerX - 40 && mouseX <= lines[i].centerX + 40 && mouseY >= lines[i].centerY - 40 && mouseY <= lines[i].centerY + 40) {
+        selectedLine = i;
+        movingEntireLine = true;
         break;
       } else if (mouseX >= lines[i].x0 - 60 && mouseX <= lines[i].x0 + 60 && mouseY >= lines[i].y0 - 60 && mouseY <= lines[i].y0 + 60) {
-        console.log("Line" + i + ":" + lines[i].x0 + " " + lines[i].y0 + " " + lines[i].xf + " " + lines[i].yf + " " + lines[i].width + " " + lines[i].height + " " + lines[i].centerX + " " + lines[i].centerY);
-        
-        lines[i].x0 = mouseX;
-        lines[i].y0 = mouseY;
-        lines[i].width = Math.abs(lines[i].xf - lines[i].x0);
-        lines[i].height = Math.abs(lines[i].yf - lines[i].y0);
-        if (lines[i].x0 <= lines[i].xf) {
-          lines[i].centerX = lines[i].x0 + lines[i].width/2;
-        } else {
-          lines[i].centerX = lines[i].xf + lines[i].width/2;
-        }
-        if (lines[i].y0 <= lines[i].yf) {
-          lines[i].centerY = lines[i].y0 + lines[i].height/2;
-        } else {
-          lines[i].centerY = lines[i].yf + lines[i].height/2;
-        }
+        selectedLine = i;
+        draggingFirstEnd = true;
         break;
       } else if (mouseX >= lines[i].xf - 60 && mouseX <= lines[i].xf + 60 && mouseY >= lines[i].yf - 60 && mouseY <= lines[i].yf + 60) {
-        console.log("Line" + i + ":" + lines[i].x0 + " " + lines[i].y0 + " " + lines[i].xf + " " + lines[i].yf + " " + lines[i].width + " " + lines[i].height + " " + lines[i].centerX + " " + lines[i].centerY);
-        
-        lines[i].xf = mouseX;
-        lines[i].yf = mouseY;
-        lines[i].width = Math.abs(lines[i].xf - lines[i].x0);
-        lines[i].height = Math.abs(lines[i].yf - lines[i].y0);
-        if (lines[i].x0 <= lines[i].xf) {
-          lines[i].centerX = lines[i].x0 + lines[i].width/2;
-        } else {
-          lines[i].centerX = lines[i].xf + lines[i].width/2;
-        }
-        if (lines[i].y0 <= lines[i].yf) {
-          lines[i].centerY = lines[i].y0 + lines[i].height/2;
-        } else {
-          lines[i].centerY = lines[i].yf + lines[i].height/2;
-        }
+        selectedLine = i;
+        draggingSecondEnd = true;
         break;
       }
     } else if (rightClick) {
@@ -154,7 +175,7 @@ function handleMouse() {
         }
       }
     }
-  } 
+  }
 }
 
 function generatePolygon() {
@@ -221,6 +242,7 @@ function generatePolygon() {
 function drawCurrentCanvas() {
   drawLines();
   if (mouseDown || rightClick) handleMouse();
+  dragLine();
   requestAnimationFrame(drawCurrentCanvas);
 }