Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor's Path Properties section has no 'reverse this path's color order' (swap start/end colors for two-color paths) — user with a path that has a gradient (start color → end color) can't reverse the gradient #350

New issue

Closed

opened 2026-10-04 03:55:54 +00:00 by Mark · 1 comment

Mark commented

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

Owner

Finding

grep -rn 'reverseGradient\|swapColors' src/components/editor/ returns 0. The editor has no gradient color reversal.

A user with a satin path:

Set the start color to red, end color to blue
Has a red→blue gradient
Wants to swap: blue→red
Currently: no way; would have to delete and recreate

The fix is a "Swap colors" button.

Where

Path Properties: src/components/editor/EditorRightPanel.tsx
No swap: grep -rn 'swapColors' src/components/editor/ returns 0
The gradient: per the path's startColor / endColor (let me check)

Actually, the editor's path type may not have a gradient. The thread color is a single hex. Gradients would be a new feature.

This may be filed as a feature request, not a bug.

Suggested fix shape

Type: add startColor: string and endColor: string to the StitchPath type (in addition to threadColor for backward compat).
Render: the path is drawn with a gradient from start to end.
UI: a "Swap colors" button in the Path Properties section:

<button onClick={onSwapColors} data-testid="swap-colors">
  <ArrowRightLeft size={12} /> Swap
</button>

onSwapColors swaps startColor and endColor. The path is re-rendered with the new gradient.

Use cases:

The user wants to flip a design horizontally (visually) and the colors should also flip
A/B comparison: which color direction looks better?

History: single undoable action.

Severity

Low. The user can delete and recreate. Power users with gradients notice.

Discovered by

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

#316 (open) — Reverse path. The geometry reverse; this is the color reverse.
The path type may need a gradient field added.
Most embroidery software supports gradients in satin columns.

## Finding `grep -rn 'reverseGradient\|swapColors' src/components/editor/` returns 0. The editor has no gradient color reversal. A user with a satin path: - Set the start color to red, end color to blue - Has a red→blue gradient - Wants to swap: blue→red - Currently: no way; would have to delete and recreate The fix is a "Swap colors" button. ## Where - Path Properties: `src/components/editor/EditorRightPanel.tsx` - No swap: `grep -rn 'swapColors' src/components/editor/` returns 0 - The gradient: per the path's `startColor` / `endColor` (let me check) Actually, the editor's path type may not have a gradient. The thread color is a single hex. Gradients would be a new feature. This may be filed as a feature request, not a bug. ## Suggested fix shape 1. **Type**: add `startColor: string` and `endColor: string` to the StitchPath type (in addition to `threadColor` for backward compat). 2. **Render**: the path is drawn with a gradient from start to end. 3. **UI**: a "Swap colors" button in the Path Properties section: ```tsx <button onClick={onSwapColors} data-testid="swap-colors"> <ArrowRightLeft size={12} /> Swap </button> ``` `onSwapColors` swaps `startColor` and `endColor`. The path is re-rendered with the new gradient. 4. **Use cases**: - The user wants to flip a design horizontally (visually) and the colors should also flip - A/B comparison: which color direction looks better? 5. **History**: single undoable action. ## Severity Low. The user can delete and recreate. Power users with gradients notice. ## Discovered by Gap analysis (2026-10-02) of editor color operations. ## Related - #316 (open) — Reverse path. The geometry reverse; this is the color reverse. - The path type may need a `gradient` field added. - Most embroidery software supports gradients in satin columns.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue

2026-10-05 11:08:57 +00:00

Add optional gradient: { startColor, endColor } field to StitchPath type (#350 type layer) #393

Mark referenced this issue

2026-10-05 11:09:32 +00:00

Renderer layer: satinRenderer.ts + fillRenderer.ts consume the optional gradient field (#350 renderer layer) #394

Mark referenced this issue

2026-10-05 11:09:52 +00:00

EditorRightPanel: Path Properties gets Start/End color inputs + 'Swap colors' button (#350 UI layer) #395

Mark commented

2026-10-05 11:10:09 +00:00

Author

Owner

Decomposed into 3 sibling issues (run in this order — each child references the prior):

#393 — Type layer: add optional gradient?: { startColor, endColor } to StitchPath in src/components/editor/types.ts. Data-model only, no rendering, no UI.
#394 — Renderer layer: satinRenderer.ts + fillRenderer.ts consume the new gradient field. Solid-color paths unchanged. New tests cover the gradient branch.
#395 — UI layer: Path Properties section in EditorRightPanel.tsx gets Start Color + End Color inputs and a "Swap colors" button (the literal feature #350's title asks for). One setPaths + pushHistory pair → one undoable Ctrl+Z.

Dependency chain: #393 → #394 → #395. Each ships independently and is verifiable in isolation.

Closing this parent — the work lives on the children. The original "swap start/end colors" feature has no way to land without first giving the path type a gradient field (the body itself flagged: "The thread color is a single hex. Gradients would be a new feature."), so this is the right decomposition.

— triage-runner @ 2026-10-05

Decomposed into 3 sibling issues (run in this order — each child references the prior): 1. **#393** — Type layer: add optional `gradient?: { startColor, endColor }` to `StitchPath` in `src/components/editor/types.ts`. Data-model only, no rendering, no UI. 2. **#394** — Renderer layer: `satinRenderer.ts` + `fillRenderer.ts` consume the new `gradient` field. Solid-color paths unchanged. New tests cover the gradient branch. 3. **#395** — UI layer: Path Properties section in `EditorRightPanel.tsx` gets Start Color + End Color inputs and a "Swap colors" button (the literal feature #350's title asks for). One `setPaths + pushHistory` pair → one undoable Ctrl+Z. Dependency chain: #393 → #394 → #395. Each ships independently and is verifiable in isolation. Closing this parent — the work lives on the children. The original "swap start/end colors" feature has no way to land without first giving the path type a gradient field (the body itself flagged: "The thread color is a single hex. Gradients would be a new feature."), so this is the right decomposition. — triage-runner @ 2026-10-05

Mark closed this issue

2026-10-05 11:10:12 +00:00

Mark referenced this issue from a commit

2026-10-05 21:12:08 +00:00

feat(#350): optional gradient field on StitchPath type layer

Mark referenced this issue

2026-10-05 21:12:23 +00:00

Add optional gradient: { startColor, endColor } field to StitchPath type (#350 type layer) #393

Mark referenced this issue from a commit

2026-10-05 21:20:55 +00:00

feat(#350): renderer layer consumes optional gradient field on service stitch objects

Mark referenced this issue from a commit