Merge pull request #18 from brunopicinin/edit-polygon-mode

Add feature to edit polygons

Author: capjamesg

index.html

@@ -78,12 +78,19 @@ <h2>JSON Points</h2>
                                     </span>
                                 </div>
                                 <div class="t-icon t-mode" id="mode-line">
-                                    <i class="fa-solid fa-arrows-left-right"></i>
+                                    <i class="fa-solid fa-lines-leaning"></i>
                                     <span class="ti-caption">
                                         <span>Line Mode</span>
                                         <span>(L)</span>
                                     </span>
                                 </div>
+                                <div class="t-icon t-mode" id="mode-edit">
+                                    <i class="fa-solid fa-up-down-left-right"></i>
+                                    <span class="ti-caption">
+                                        <span>Edit Mode</span>
+                                        <span>(E)</span>
+                                    </span>
+                                </div>
                                 <div class="t-divider"></div>
                                 <div class="t-icon" id="undo">
                                     <i class="fa-solid fa-rotate-left"></i>
@@ -101,7 +108,7 @@ <h2>JSON Points</h2>
                                 </div>
                                 <div class="t-divider"></div>
                                 <div class="t-icon" id="clear">
-                                    <i class="fa-solid fa-trash-can"></i>
+                                    <i class="fa-solid fa-trash"></i>
                                     <span class="ti-caption">
                                         <span>Clear all polygons</span>
                                         <span>(Ctrl/⌘-E)</span>

script.js

@@ -42,6 +42,10 @@ var showNormalized = false;
 var modeMessage = document.querySelector('#mode');
 // var coords = document.querySelector('#coords');
 
+var editMode = false;
+var selectedPointIndex = -1;
+var selectedPolygonIndex = -1;
+
 function blitCachedCanvas() {
     mainCtx.clearRect(0, 0, canvas.width, canvas.height);
     mainCtx.drawImage(offScreenCanvas, 0, 0);
@@ -185,6 +189,28 @@ function getParentPoints() {
     return parentPoints;
 }
 
+function findClosestPoint(x, y) {
+    let minDist = Infinity;
+    let closestPoint = null;
+    let polygonIndex = -1;
+    let pointIndex = -1;
+
+    for (let i = 0; i < masterPoints.length; i++) {
+        for (let j = 0; j < masterPoints[i].length; j++) {
+            const [px, py] = masterPoints[i][j];
+            const dist = Math.sqrt((x - px) ** 2 + (y - py) ** 2);
+            if (dist < minDist && dist < 10 / scaleFactor) { // grab radius
+                minDist = dist;
+                closestPoint = [px, py];
+                polygonIndex = i;
+                pointIndex = j;
+            }
+        }
+    }
+
+    return { point: closestPoint, polygonIndex, pointIndex };
+}
+
 window.addEventListener('keyup', function(e) {
     if (e.key === 'Shift') {
         constrainAngles = false;
@@ -218,19 +244,16 @@ canvas.addEventListener('mouseleave', function(e) {
     ycoord.innerHTML = '';
 });
 
-// on canvas hover, if cursor is crosshair, draw line from last point to cursor
 canvas.addEventListener('mousemove', function(e) {
-    var x = getScaledCoords(e)[0];
-    var y = getScaledCoords(e)[1];
-    // round
+    var [x, y] = getScaledCoords(e);
     x = Math.round(x);
     y = Math.round(y);
 
     // update x y coords
     var xcoord = document.querySelector('#x');
     var ycoord = document.querySelector('#y');
 
-    if(constrainAngles) {
+    if(constrainAngles && points.length > 0) {
         var lastPoint = points[points.length - 1];
         var dx = x - lastPoint[0];
         var dy = y - lastPoint[1];
@@ -258,6 +281,7 @@ canvas.addEventListener('mousemove', function(e) {
     ctx.lineJoin = 'bevel';
     ctx.fillStyle = 'white';
 
+    // if cursor is crosshair, draw line from last point to cursor
     if (canvas.style.cursor == 'crosshair') {
         blitCachedCanvas();
 
@@ -284,6 +308,13 @@ canvas.addEventListener('mousemove', function(e) {
             drawNode(ctx, points[i][0], points[i][1]);
         }
     }
+
+    if (editMode && selectedPointIndex !== -1) {
+        masterPoints[selectedPolygonIndex][selectedPointIndex] = [x, y];
+        drawAllPolygons(offScreenCtx);
+        blitCachedCanvas();
+        writePoints(getParentPoints());
+    }
 });
 
 canvas.addEventListener('drop', function(e) {
@@ -364,57 +395,74 @@ function writePoints(parentPoints) {
     document.querySelector('#json').innerHTML = json_template;
 }
 
-canvas.addEventListener('click', function(e) {
-    canvas.style.cursor = 'crosshair';
-
-    var x = getScaledCoords(e)[0];
-    var y = getScaledCoords(e)[1];
+canvas.addEventListener('mousedown', function(e) {
+    var [x, y] = getScaledCoords(e);
     x = Math.round(x);
     y = Math.round(y);
 
-    if(constrainAngles) {
-        var lastPoint = points[points.length - 1];
-        var dx = x - lastPoint[0];
-        var dy = y - lastPoint[1];
-        var angle = Math.atan2(dy, dx);
-        var length = Math.sqrt(dx * dx + dy * dy);
-        const snappedAngle = Math.round(angle / radiansPer45Degrees) * radiansPer45Degrees;
-        var new_x = lastPoint[0] + length * Math.cos(snappedAngle);
-        var new_y = lastPoint[1] + length * Math.sin(snappedAngle);
-        x = Math.round(new_x);
-        y = Math.round(new_y);
-    }
+    if (editMode) {
+        const { point, polygonIndex, pointIndex } = findClosestPoint(x, y);
+        if (point) {
+            selectedPointIndex = pointIndex;
+            selectedPolygonIndex = polygonIndex;
+            canvas.style.cursor = 'grabbing';
+        }
+    } else {
+        // click handling for drawing mode
+        canvas.style.cursor = 'crosshair';
+
+        if(constrainAngles && points.length > 0) {
+            var lastPoint = points[points.length - 1];
+            var dx = x - lastPoint[0];
+            var dy = y - lastPoint[1];
+            var angle = Math.atan2(dy, dx);
+            var length = Math.sqrt(dx * dx + dy * dy);
+            const snappedAngle = Math.round(angle / radiansPer45Degrees) * radiansPer45Degrees;
+            var new_x = lastPoint[0] + length * Math.cos(snappedAngle);
+            var new_y = lastPoint[1] + length * Math.sin(snappedAngle);
+            x = Math.round(new_x);
+            y = Math.round(new_y);
+        }
 
-    if (points.length > 2 && drawMode == "polygon") {
-        distX = x - points[0][0];
-        distY = y - points[0][1];
-        // stroke is 3px and centered on the circle (i.e. 1/2 * 3px) and arc radius is 
-        if(Math.sqrt(distX * distX + distY * distY) <= 6.5) {
-            onPathClose();
-            return;
+        if (points.length > 2 && drawMode == "polygon") {
+            distX = x - points[0][0];
+            distY = y - points[0][1];
+            // stroke is 3px and centered on the circle (i.e. 1/2 * 3px) and arc radius is 
+            if(Math.sqrt(distX * distX + distY * distY) <= 6.5) {
+                onPathClose();
+                return;
+            }
         }
-    }
 
-    points.push([x, y]);
+        points.push([x, y]);
 
-    drawNode(mainCtx, x, y, rgb_color); 
+        drawNode(mainCtx, x, y, rgb_color); 
 
-    if(drawMode == "line" && points.length == 2) {
-        onPathClose();
-    }
+        if(drawMode == "line" && points.length == 2) {
+            onPathClose();
+        }
 
-    // concat all points into one array
-    var parentPoints = [];
+        // concat all points into one array
+        var parentPoints = [];
 
-    for (var i = 0; i < masterPoints.length; i++) {
-        parentPoints.push(masterPoints[i]);
-    }
-    // add "points"
-    if(points.length > 0) {
-        parentPoints.push(points);
+        for (var i = 0; i < masterPoints.length; i++) {
+            parentPoints.push(masterPoints[i]);
+        }
+        // add "points"
+        if(points.length > 0) {
+            parentPoints.push(points);
+        }
+
+        writePoints(parentPoints);
     }
+});
 
-    writePoints(parentPoints);
+canvas.addEventListener('mouseup', function(e) {
+    if (editMode) {
+        selectedPointIndex = -1;
+        selectedPolygonIndex = -1;
+        canvas.style.cursor = 'move';
+    }
 });
 
 document.querySelector('#normalize-checkbox').addEventListener('change', function(e) {
@@ -425,11 +473,19 @@ document.querySelector('#normalize-checkbox').addEventListener('change', functio
 
 function setDrawMode(mode) {
     drawMode = mode;
+    setEditMode(false);
     canvas.style.cursor = 'crosshair';
     document.querySelectorAll('.t-mode').forEach(el => el.classList.remove('active'));
     document.querySelector(`#mode-${mode}`).classList.add('active');
 }
 
+function setEditMode(editEnabled) {
+    editMode = editEnabled;
+    canvas.style.cursor = editEnabled ? 'move' : 'crosshair';
+    document.querySelectorAll('.t-mode').forEach(el => el.classList.remove('active'));
+    document.querySelector(`#mode-${editEnabled ? 'edit' : drawMode}`).classList.add('active');
+}
+
 document.querySelector('#mode-polygon').addEventListener('click', function(e) {
     setDrawMode('polygon');
 })
@@ -438,14 +494,21 @@ document.querySelector('#mode-line').addEventListener('click', function(e) {
     setDrawMode('line');
 })
 
+document.querySelector('#mode-edit').addEventListener('click', function(e) {
+    setEditMode(true);
+});
+
 document.addEventListener('keydown', function(e) {
     if (e.key == 'l' || e.key == 'L') {
         setDrawMode('line');
     }
     if (e.key == 'p' || e.key == 'P') {
         setDrawMode('polygon');
     }
-})
+    if (e.key == 'e' || e.key == 'E') {
+        setEditMode(true);
+    }
+});
 
 function rewritePoints() {
     var parentPoints = getParentPoints();

styles.css

@@ -193,10 +193,6 @@ li {
     margin-top: 1em;
 }
 
-.taskbar-container .tc-container {
-    max-width: 700px;
-}
-
 .taskbar {
     display: flex;
     background-color: #7733f4;