Path tool: selection improvements

Author: alexandrep-explorai

README.md

@@ -36,8 +36,9 @@ Create polylines made of straight or curved segments.
 
 **Editing:**
 
-- **Toggle corner/curve:** Click a point to switch between corner and smooth curve (handles will appear).
-- **Adjust curvature:**: Drag the handles to refine the shape.
+- **Delete points:** Press `Del` or `Backspace` while a point is selected to remove that point from the path.
+- **Toggle corner/curve:** Hold `Alt` (or `Option` on Mac) and click a point to switch between corner and smooth curve (handles will appear).
+- **Adjust curvature:** Drag the handles to refine the shape.
 - **Sharp corner between curves:** Hold `Alt` (or `Option` on Mac) while dragging a handle to move it independently.
 - **Re-link handles:** Double-click the point to snap handles back together.
 

src/path/PathEditor.svelte

@@ -69,6 +69,11 @@
 
   /** Determine visible midpoint, if any **/
   const onPointerMove = (evt: PointerEvent) => {
+    if (selectedCorner !== null || !midpoints.some(m => m.visible)) {
+      visibleMidpoint = undefined;
+      return;
+    }
+
     const [px, py] = transform.elementToImage(evt.offsetX, evt.offsetY);
 
     const getDistSq = (pt: number[]) =>
@@ -117,22 +122,21 @@
     // Drag, not click
     if (performance.now() - lastHandleClick > CLICK_THRESHOLD) return;
 
-    // Click on a CORNER instantly selects and converts to curve
-    const { type } = geom.points[idx];
-    
-    if (type === 'CORNER') {
-      selectedCorner = idx;
+    const isSelected = selectedCorner === idx;
 
+    // Clicking on a handle with alt key pressed toggles between corner/curve
+    if (isAltPressed) {
       const polyline = togglePolylineCorner(shape, idx, viewportScale);
       dispatch('change', polyline);
+
+      // If was not selected, select it now
+      if (!isSelected) {
+        selectedCorner = idx;
+      }
     } else {
-      const isSelected = selectedCorner === idx;
       if (isSelected) {
-        // If already selected, toggle to corner
-        const polyline = togglePolylineCorner(shape, idx,viewportScale);
-        dispatch('change', polyline);
+        selectedCorner = null;
       } else {
-        // Just select
         selectedCorner = idx;
       }
     }
@@ -446,6 +450,7 @@ const onAddPoint = (midpointIdx: number) => async (evt: PointerEvent) => {
       x={pt.point[0]}
       y={pt.point[1]}
       scale={viewportScale}
+      selected={selectedCorner === idx}
       on:dblclick={onDoubleClick(idx)}
       on:pointerenter={onEnterHandle}
       on:pointerleave={onLeaveHandle}