diff --git a/T3/lines.js b/T3/lines.js index 22c1a4cd76614d96c0b4b9fd28914d3b9b1d4eb2..315c7af6b0f8e77f756331588b3e23703f4eaea6 100644 --- a/T3/lines.js +++ b/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); }