Editor's path operations are scattered between the right panel, the EditorContextMenu, and keyboard shortcuts — no unified 'Operations' menu to discover all path operations in one place #340

New issue

Open

opened 2026-10-04 03:54:29 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:54:29 +00:00

Owner

Finding

The editor's path operations are spread across:

Right panel: per-row actions (Hide, Delete, Duplicate, Fit to View, Rename)
Right panel Path Properties: Stitch type, Density, Color, Sat width
EditorContextMenu (per #191): Delete Path, Duplicate Path, Add Node, Convert Node Type, Fit to View
Keyboard: D, A, C, P, S, M, Z, Tab, F, etc.

A user wanting to do something specific (e.g., "I want to align these 3 paths") has to know which surface has the operation.

grep -rn 'operations\|allOperations' src/components/editor/ returns 0.

The fix is a unified "Operations" menu (e.g., a "..." button in the path list) that lists all available operations.

Where

Right panel: src/components/editor/EditorRightPanel.tsx
EditorContextMenu: src/components/editor/EditorContextMenu.tsx
Keyboard: src/components/editor/useKeyboardShortcuts.ts
No unified menu: grep -rn 'operations' src/components/editor/ returns 0

Suggested fix shape

UI: a "..." button in the path list row (or in the right panel's header) that opens a dropdown with all available operations:

<DropdownMenu>
  <DropdownMenuTrigger>
    <MoreVertical size={12} />
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={onDuplicate}>Duplicate (Cmd+D)</DropdownMenuItem>
    <DropdownMenuItem onClick={onDelete}>Delete (Del)</DropdownMenuItem>
    <DropdownMenuItem onClick={onReverse}>Reverse</DropdownMenuItem>
    <DropdownMenuItem onClick={onClose}>Close path</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onClick={onFitToView}>Fit to view (F)</DropdownMenuItem>
    <DropdownMenuItem onClick={onSetAsBackground}>Set as background</DropdownMenuItem>
    <DropdownMenuItem onClick={onLock}>Lock</DropdownMenuItem>
    <DropdownMenuItem onClick={onBringToFront}>Bring to front</DropdownMenuItem>
    <DropdownMenuItem onClick={onSendToBack}>Send to back</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onClick={onSimplify}>Simplify (Douglas-Peucker)</DropdownMenuItem>
    <DropdownMenuItem onClick={onOffset}>Offset...</DropdownMenuItem>
    <DropdownMenuItem onClick={onBoolean('union')}>Boolean: Union</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Sections: the menu is grouped (Edit, View, Modify, Boolean).
Disabled state: items that don't apply to the current selection are disabled (e.g., Boolean is disabled for < 2 paths).
Discoverability: the user can browse all operations without remembering keyboard shortcuts.

Severity

Low. The user knows the operations they need. New users notice the discoverability gap.

Discovered by

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

The keyboard shortcuts (per the help page) document the operations.
The EditorContextMenu (per #191) is the right-click version; this is the explicit version.
Figma/Illustrator have similar "Object" / "Modify" menus in the top bar.

## Finding The editor's path operations are spread across: - Right panel: per-row actions (Hide, Delete, Duplicate, Fit to View, Rename) - Right panel Path Properties: Stitch type, Density, Color, Sat width - EditorContextMenu (per #191): Delete Path, Duplicate Path, Add Node, Convert Node Type, Fit to View - Keyboard: D, A, C, P, S, M, Z, Tab, F, etc. A user wanting to do something specific (e.g., "I want to align these 3 paths") has to know which surface has the operation. `grep -rn 'operations\|allOperations' src/components/editor/` returns 0. The fix is a unified "Operations" menu (e.g., a "..." button in the path list) that lists all available operations. ## Where - Right panel: `src/components/editor/EditorRightPanel.tsx` - EditorContextMenu: `src/components/editor/EditorContextMenu.tsx` - Keyboard: `src/components/editor/useKeyboardShortcuts.ts` - No unified menu: `grep -rn 'operations' src/components/editor/` returns 0 ## Suggested fix shape 1. **UI**: a "..." button in the path list row (or in the right panel's header) that opens a dropdown with all available operations: ```tsx <DropdownMenu> <DropdownMenuTrigger> <MoreVertical size={12} /> </DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuItem onClick={onDuplicate}>Duplicate (Cmd+D)</DropdownMenuItem> <DropdownMenuItem onClick={onDelete}>Delete (Del)</DropdownMenuItem> <DropdownMenuItem onClick={onReverse}>Reverse</DropdownMenuItem> <DropdownMenuItem onClick={onClose}>Close path</DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem onClick={onFitToView}>Fit to view (F)</DropdownMenuItem> <DropdownMenuItem onClick={onSetAsBackground}>Set as background</DropdownMenuItem> <DropdownMenuItem onClick={onLock}>Lock</DropdownMenuItem> <DropdownMenuItem onClick={onBringToFront}>Bring to front</DropdownMenuItem> <DropdownMenuItem onClick={onSendToBack}>Send to back</DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem onClick={onSimplify}>Simplify (Douglas-Peucker)</DropdownMenuItem> <DropdownMenuItem onClick={onOffset}>Offset...</DropdownMenuItem> <DropdownMenuItem onClick={onBoolean('union')}>Boolean: Union</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ``` 2. **Sections**: the menu is grouped (Edit, View, Modify, Boolean). 3. **Disabled state**: items that don't apply to the current selection are disabled (e.g., Boolean is disabled for < 2 paths). 4. **Discoverability**: the user can browse all operations without remembering keyboard shortcuts. ## Severity Low. The user knows the operations they need. New users notice the discoverability gap. ## Discovered by Gap analysis (2026-10-02) of editor path operations. ## Related - The keyboard shortcuts (per the help page) document the operations. - The EditorContextMenu (per #191) is the right-click version; this is the explicit version. - Figma/Illustrator have similar "Object" / "Modify" menus in the top bar.