Editor has no 'lock path' option — user wanting to keep a path from being accidentally edited has to use 'Hide' (which removes the path from rendering) or move it out of the way; no separate 'lock for editing' state #289

New issue

Open

opened 2026-10-04 03:46:45 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:46:45 +00:00

Owner

Finding

grep -rn 'lock.*path\|pathLocked\|locked' src/components/editor/ returns 0 hits for path locking. The editor has:

Hide/Show path (visibility toggle)
Delete path
Duplicate path
No "lock" state

A user with a complex design (e.g., a logo with 12 paths):

Wants to keep the most-important paths visible (so they can see them) but not accidentally click-and-move them
Currently: hide = invisible, can't see. No "lock but visible" option.

Lock is a separate state from hide:

Hidden: not rendered, not selectable, not in the path list
Locked: rendered, NOT selectable, NOT editable, but visible in the path list (greyed out or with a lock icon)

Where

Editor's path operations: src/components/editor/EditorRightPanel.tsx (per-row actions)
No lock: grep -rn 'pathLocked' src/components/editor/ returns 0
Path type: src/components/editor/types.ts — let me check if locked?: boolean exists

Suggested fix shape

Type: add locked: boolean to the StitchPath type:

export interface StitchPath {
  // ... existing fields
  locked: boolean;
}

UI: a "Lock" toggle button in the path list row (and in the EditorContextMenu per #191):

<button
  onClick={() => onToggleLock(path.id)}
  data-testid={`lock-${path.id}`}
  title={path.locked ? 'Unlock path' : 'Lock path'}
>
  {path.locked ? <Lock size={11} /> : <Unlock size={11} />}
</button>

Render: locked paths are still drawn but with a "locked" indicator (a small lock icon in the corner of the bounding box, or a greyed-out color).
Click behavior: clicking a locked path doesn't select it. The user must unlock first.
Multi-select: when a path is locked, multi-select skips it (or warns).
History: lock toggles are undoable.

Severity

Low. The user can hide. Power users with complex designs notice.

Discovered by

Gap analysis (2026-10-02) of editor path operations.

The visibility toggle is in place. The lock is the parallel for "editable."
Figma/Illustrator have Lock; the editor's gap is a parity issue.
The reference image (per #245) is a different "non-editable" surface. Lock is the path-level version.

## Finding `grep -rn 'lock.*path\|pathLocked\|locked' src/components/editor/` returns 0 hits for path locking. The editor has: - Hide/Show path (visibility toggle) - Delete path - Duplicate path - No "lock" state A user with a complex design (e.g., a logo with 12 paths): - Wants to keep the most-important paths visible (so they can see them) but not accidentally click-and-move them - Currently: hide = invisible, can't see. No "lock but visible" option. Lock is a separate state from hide: - Hidden: not rendered, not selectable, not in the path list - Locked: rendered, NOT selectable, NOT editable, but visible in the path list (greyed out or with a lock icon) ## Where - Editor's path operations: `src/components/editor/EditorRightPanel.tsx` (per-row actions) - No lock: `grep -rn 'pathLocked' src/components/editor/` returns 0 - Path type: `src/components/editor/types.ts` — let me check if `locked?: boolean` exists ## Suggested fix shape 1. **Type**: add `locked: boolean` to the `StitchPath` type: ```ts export interface StitchPath { // ... existing fields locked: boolean; } ``` 2. **UI**: a "Lock" toggle button in the path list row (and in the EditorContextMenu per #191): ```tsx <button onClick={() => onToggleLock(path.id)} data-testid={`lock-${path.id}`} title={path.locked ? 'Unlock path' : 'Lock path'} > {path.locked ? <Lock size={11} /> : <Unlock size={11} />} </button> ``` 3. **Render**: locked paths are still drawn but with a "locked" indicator (a small lock icon in the corner of the bounding box, or a greyed-out color). 4. **Click behavior**: clicking a locked path doesn't select it. The user must unlock first. 5. **Multi-select**: when a path is locked, multi-select skips it (or warns). 6. **History**: lock toggles are undoable. ## Severity Low. The user can hide. Power users with complex designs notice. ## Discovered by Gap analysis (2026-10-02) of editor path operations. ## Related - The visibility toggle is in place. The lock is the parallel for "editable." - Figma/Illustrator have Lock; the editor's gap is a parity issue. - The reference image (per #245) is a different "non-editable" surface. Lock is the path-level version.