diff --git a/README.md b/README.md index 413525b..a151e4c 100644 --- a/README.md +++ b/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. diff --git a/src/path/PathEditor.svelte b/src/path/PathEditor.svelte index e12212d..7b16a29 100644 --- a/src/path/PathEditor.svelte +++ b/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; } } @@ -447,6 +451,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}