Editor's Path Properties section has no 'apply color to similar colors' button — user with a path in red wanting to change all red paths to blue has to select each path and change individually #286

New issue

Closed

opened 2026-10-04 03:43:24 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:43:24 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx's color picker is per-path: when 2+ paths are selected, the picker changes color on all selected paths (per #212's "Apply to N paths" button).

But the picker doesn't have a "match similar" mode: change the color of all paths that match the currently selected color, regardless of selection.

grep -rn 'matchSimilar\|applyByColor' src/components/editor/ returns 0.

A user with 5 paths in red:

Selects one red path
Wants to change all 5 to blue
Currently has to select all 5 (which means multi-select, then pick blue)
Or: change the one selected, then select each of the other 4 and change each

The fix is a "Match similar colors" toggle in the color picker that, when active, changes the color of all paths with the same color as the currently selected path(s).

Where

Color picker: src/components/editor/EditorRightPanel.tsx (the 5-column grid)
"Apply to N paths" button: per #212 (already landed)
No match-similar: grep -rn 'matchSimilar' src/components/editor/ returns 0

Suggested fix shape

Toggle: in the color picker, add a small toggle:

<button
  onClick={() => setMatchSimilar(!matchSimilar)}
  title="Apply color to all paths with the same color as the selected"
  data-testid="match-similar-toggle"
  style={{ backgroundColor: matchSimilar ? '#E6A948' : 'transparent' }}
>
  <PaintBucket size={12} /> Match similar
</button>

Behavior: when the user picks a color from the grid:
- If matchSimilar is OFF: apply to selected paths (current behavior).
- If matchSimilar is ON: find all paths whose threadColor matches the first selected path's color; apply the new color to those.
Toast: "Updated 5 red paths to blue" (or similar).
History: single undoable action.

Severity

Low. The user can multi-select. Power users with many paths of the same color notice.

Discovered by

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

#212 (open) — Apply to N paths. Same multi-select; match-similar extends the operation.
The multi-select (#188) is the infrastructure; the color operations are the use case.
Figma/Illustrator have similar "find by attribute and change" tools; the "match similar" is the color-specific version.

## Finding `src/components/editor/EditorRightPanel.tsx`'s color picker is per-path: when 2+ paths are selected, the picker changes color on all selected paths (per #212's "Apply to N paths" button). But the picker doesn't have a "match similar" mode: change the color of all paths that match the currently selected color, regardless of selection. `grep -rn 'matchSimilar\|applyByColor' src/components/editor/` returns 0. A user with 5 paths in red: - Selects one red path - Wants to change all 5 to blue - Currently has to select all 5 (which means multi-select, then pick blue) - Or: change the one selected, then select each of the other 4 and change each The fix is a "Match similar colors" toggle in the color picker that, when active, changes the color of all paths with the same color as the currently selected path(s). ## Where - Color picker: `src/components/editor/EditorRightPanel.tsx` (the 5-column grid) - "Apply to N paths" button: per #212 (already landed) - No match-similar: `grep -rn 'matchSimilar' src/components/editor/` returns 0 ## Suggested fix shape 1. **Toggle**: in the color picker, add a small toggle: ```tsx <button onClick={() => setMatchSimilar(!matchSimilar)} title="Apply color to all paths with the same color as the selected" data-testid="match-similar-toggle" style={{ backgroundColor: matchSimilar ? '#E6A948' : 'transparent' }} > <PaintBucket size={12} /> Match similar </button> ``` 2. **Behavior**: when the user picks a color from the grid: - If `matchSimilar` is OFF: apply to selected paths (current behavior). - If `matchSimilar` is ON: find all paths whose `threadColor` matches the first selected path's color; apply the new color to those. 3. **Toast**: "Updated 5 red paths to blue" (or similar). 4. **History**: single undoable action. ## Severity Low. The user can multi-select. Power users with many paths of the same color notice. ## Discovered by Gap analysis (2026-10-02) of editor color operations. ## Related - #212 (open) — Apply to N paths. Same multi-select; match-similar extends the operation. - The multi-select (#188) is the infrastructure; the color operations are the use case. - Figma/Illustrator have similar "find by attribute and change" tools; the "match similar" is the color-specific version.