[T3] fix a constructor bug with lines attributes centerX and centerY when x0 > xf and/or y0 > yf

T3/lines.js

@@ -6,8 +6,14 @@ class Line {
     this.yf = yf;
     this.width = Math.abs(xf - x0);
     this.height = Math.abs(yf - y0);
-    this.centerX = x0 + this.width/2;
-    this.centerY = y0 + this.height/2;
+    if (this.x0 < this.xf)
+      this.centerX = x0 + this.width/2;
+    else 
+      this.centerX = xf + this.width/2;
+    if (this.y0 < this.yf)
+      this.centerY = y0 + this.height/2;
+    else 
+      this.centerY = yf + this.height/2;
   }
 }
 
@@ -32,6 +38,9 @@ var draggingSecondEnd = false;
 
 canvas.width = width;
 canvas.height = height;
+canvas.style.background = "#333";
+document.body.style.color = "#fff";
+ctx.strokeStyle = "#fff";
 
 //event listeners
 window.addEventListener('resize', resizeCanvas, false);
@@ -67,38 +76,35 @@ function handleMouseUp() {
   selectedLine = null;
   movingEntireLine = false;
   draggingFirstEnd = false;
-  draggingSecondEnd = false;
-  console.log(selectedLine);
+  draggingSecondEnd = false;  
 }
 
 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[selectedLine].xf = mouseX-(lines[selectedLine].width/2);
-          lines[selectedLine].x0 = mouseX+(lines[selectedLine].width/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[selectedLine].yf = mouseY-(lines[selectedLine].height/2);
-          lines[selectedLine].y0 = mouseY+(lines[selectedLine].height/2); 
-        }
-        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;
-        }
+    if (movingEntireLine) {      
+      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[selectedLine].xf = mouseX-(lines[selectedLine].width/2);
+        lines[selectedLine].x0 = mouseX+(lines[selectedLine].width/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[selectedLine].yf = mouseY-(lines[selectedLine].height/2);
+        lines[selectedLine].y0 = mouseY+(lines[selectedLine].height/2); 
+      }
+      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 (draggingFirstEnd) {
       lines[selectedLine].x0 = mouseX;
@@ -135,22 +141,24 @@ function dragLine() {
 }
 
 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) {
+  if (mouseDown && selectedLine == null) {
+    for (var i = lines.length - 1; i >= 0; i--) {
+      if (mouseX >= lines[i].centerX - 10 && mouseX <= lines[i].centerX + 10 && mouseY >= lines[i].centerY - 10 && mouseY <= lines[i].centerY + 10) {
         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) {
+      } else if (mouseX >= lines[i].x0 - 20 && mouseX <= lines[i].x0 + 20 && mouseY >= lines[i].y0 - 20 && mouseY <= lines[i].y0 + 20) {
         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) {
+      } else if (mouseX >= lines[i].xf - 20 && mouseX <= lines[i].xf + 20 && mouseY >= lines[i].yf - 20 && mouseY <= lines[i].yf + 20) {
         selectedLine = i;
         draggingSecondEnd = true;
         break;
       }
-    } else if (rightClick) {
+    }
+  } else if (rightClick) {
+    for (var i = lines.length - 1; i >= 0; i--) {
       if ((mouseY >= lines[i].y0 && mouseY <= lines[i].yf) || (mouseY >= lines[i].yf && mouseY <= lines[i].y0)) {
         if (mouseX >= lines[i].x0 && mouseX <= lines[i].xf) {
           lines[lines.length] = new Line(mouseX,mouseY,lines[i].xf,lines[i].yf);
@@ -233,7 +241,6 @@ function generatePolygon() {
     }
     drawCurrentCanvas();
   } else {
-    console.log("Valor inválido.");
     alert("Valor inválido! O número de arestas deve estar no intervalo de [3..8].")
   }
 }
@@ -241,7 +248,7 @@ function generatePolygon() {
 //function that updates screen
 function drawCurrentCanvas() {
   drawLines();
-  if (mouseDown || rightClick) handleMouse();
+  if ((mouseDown && selectedLine == null) || rightClick) handleMouse();
   dragLine();
   requestAnimationFrame(drawCurrentCanvas);
 }
@@ -250,16 +257,18 @@ function drawCurrentCanvas() {
 function drawLines() {
   ctx.clearRect(0,0,canvas.width,canvas.height);
   for (var i = lines.length - 1; i >= 0; i--) {
-    drawLine(lines[i].x0,lines[i].y0,lines[i].xf,lines[i].yf);
+    drawLine(lines[i].x0,lines[i].y0,lines[i].xf,lines[i].yf, i);
   }
 }
 
 //function that draws a line
-function drawLine(x0,y0,xf,yf) {
+function drawLine(x0,y0,xf,yf,i) {
   ctx.beginPath();
   ctx.lineWidth = 3;
   ctx.moveTo(x0,y0);
   ctx.lineTo(xf,yf);
+  if (selectedLine == i) ctx.strokeStyle = "red";
+  else ctx.strokeStyle = "#fff";
   ctx.stroke();
   lineX0 = x0;
   lineY0 = y0;