From 1c619eea43fadb6cec2da720080b0490ea40899f Mon Sep 17 00:00:00 2001
From: Wellington Gabriel Vicente de Souza <wellingtongabrielvs@gmail.com>
Date: Sat, 14 Apr 2018 18:00:17 -0300
Subject: [PATCH] [T3] fix a constructor bug with lines attributes centerX and
centerY when x0 > xf and/or y0 > yf
---
T3/lines.js | 89 +++++++++++++++++++++++++++++------------------------
1 file changed, 49 insertions(+), 40 deletions(-)
diff --git a/T3/lines.js b/T3/lines.js
index 315c7af..12bda3f 100644
--- a/T3/lines.js
+++ b/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;
--
GitLab