Editor has no color picker to change a path's color from the right panel — user must go back to the Workspace to change thread colors #185

New issue

Closed

opened 2026-10-03 23:20:47 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 23:20:47 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx exposes for a selected path:

Stitch type (5 options: satin, fill, running, cross-stitch, zigzag)
Density (slider 0.1-1.0)
Path info: total nodes, path length, stitches

It does NOT expose a color picker. The user can't change a path's colorId (which maps to the catalog color and the eventual thread stop) from the editor.

grep -n 'onUpdateColor\|onChangeColor\|onSetColor' src/components/editor/ returns 0 matches. The right panel has no callback prop for color changes.

The workspace's right panel lets the user change colors via the stitch object's colorId (RightPanel.tsx:onChange in the per-object section). The editor's right panel doesn't have a parallel affordance.

Where

src/components/editor/EditorRightPanel.tsx — the "Path Properties" section

Suggested fix shape

Add a "Thread Color" row to the Path Properties section:

<ColorSwatchRow
  label="Thread Color"
  hex={selectedPath.hex}
  catalog={catalog}
  onPick={(color) => onUpdateColor(selectedPath.id, color)}
/>

The onUpdateColor callback dispatches setPaths with the new colorId. The catalog comes from the same useThreadLibrary hook the workspace uses.

The component renders a horizontal scroll of thread color swatches (matching the Workspace's pattern). Click one, the path's color updates. The right panel already has the data plumbing; the UI is the missing piece.

Severity

Low. The user can re-edit in the Workspace. Power users want this in the Editor; casual users don't care.

Discovered by

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

#128 (closed) — BottomThreadBar ΔE display + alternatives popover. The color picker is the read-side; this is the write-side.

## Finding `src/components/editor/EditorRightPanel.tsx` exposes for a selected path: - Stitch type (5 options: satin, fill, running, cross-stitch, zigzag) - Density (slider 0.1-1.0) - Path info: total nodes, path length, stitches It does NOT expose a color picker. The user can't change a path's `colorId` (which maps to the catalog color and the eventual thread stop) from the editor. `grep -n 'onUpdateColor\|onChangeColor\|onSetColor' src/components/editor/` returns 0 matches. The right panel has no callback prop for color changes. The workspace's right panel lets the user change colors via the stitch object's colorId (`RightPanel.tsx:onChange` in the per-object section). The editor's right panel doesn't have a parallel affordance. ## Where `src/components/editor/EditorRightPanel.tsx` — the "Path Properties" section ## Suggested fix shape Add a "Thread Color" row to the Path Properties section: ```tsx <ColorSwatchRow label="Thread Color" hex={selectedPath.hex} catalog={catalog} onPick={(color) => onUpdateColor(selectedPath.id, color)} /> ``` The `onUpdateColor` callback dispatches `setPaths` with the new colorId. The `catalog` comes from the same `useThreadLibrary` hook the workspace uses. The component renders a horizontal scroll of thread color swatches (matching the Workspace's pattern). Click one, the path's color updates. The right panel already has the data plumbing; the UI is the missing piece. ## Severity Low. The user can re-edit in the Workspace. Power users want this in the Editor; casual users don't care. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related - #128 (closed) — BottomThreadBar ΔE display + alternatives popover. The color picker is the read-side; this is the write-side.

Mark added the

feature-request

triage-approved

labels

2026-10-03 23:20:47 +00:00

Mark referenced this issue from a commit

2026-10-03 23:29:21 +00:00

fix(#185): Editor right panel now has a Thread Color picker for the selected path

Mark commented

2026-10-03 23:29:49 +00:00

Author

Owner

Closed by commit ff2d01a (fix(#185): Editor right panel now has a Thread Color picker for the selected path).

The Editor right panel Path Properties section now has a Thread Color row showing the current swatch + a Change color (N) toggle that opens a 5-column grid sourced from the same useThreadLibrary() catalog the workspace uses. Clicking a swatch calls onUpdateSelectedPathColor, which the Editor wires into a setPaths() dispatch that updates both threadColor (hex) and threadIndex (palette position) on the selected path. Picker is hidden when no path is selected; the grid closes after a commit so the user sees the updated swatch immediately.

7 new tests in EditorRightPanel.test.tsx (#185 block); all 28 panel tests pass.

Closed by commit ff2d01a (`fix(#185): Editor right panel now has a Thread Color picker for the selected path`). The Editor right panel Path Properties section now has a Thread Color row showing the current swatch + a Change color (N) toggle that opens a 5-column grid sourced from the same `useThreadLibrary()` catalog the workspace uses. Clicking a swatch calls `onUpdateSelectedPathColor`, which the Editor wires into a `setPaths()` dispatch that updates both `threadColor` (hex) and `threadIndex` (palette position) on the selected path. Picker is hidden when no path is selected; the grid closes after a commit so the user sees the updated swatch immediately. 7 new tests in `EditorRightPanel.test.tsx` (#185 block); all 28 panel tests pass.

Mark closed this issue

2026-10-03 23:29:58 +00:00

Mark referenced this issue

2026-10-03 23:59:32 +00:00

Editor has no path mirror/flip/rotate — no way to reflect a path horizontally, vertically, or rotate around its bounding box center #205

Mark referenced this issue

2026-10-04 00:02:06 +00:00

Editor has no 'apply same settings to all paths' — user with 10 paths that should all be fill / red / density 0.5 must edit each path one at a time #212

Mark referenced this issue

2026-10-04 00:04:20 +00:00

Editor has no way to add a new thread stop from the thread bar — workspace has ADD_THREAD_STOP but the editor's EditorThreadBar is read-only (select only) #217

Mark referenced this issue