Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

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

New issue

Closed

opened 2026-10-05 11:08:57 +00:00 by Mark · 1 comment

Mark commented

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

Owner

Parent-Issue: #350

Scope (type layer only — no rendering, no UI)

Add an optional gradient field to the StitchPath interface in src/components/editor/types.ts. This is the data-model prerequisite for the gradient feature (#350) and for the Swap Colors UI.

Concrete change

In src/components/editor/types.ts (around the existing threadColor: string field on line 18), add:

// (#350) Optional two-color gradient. When present, renderers draw
// the path with a linear gradient from startColor to endColor
// instead of the solid `threadColor`. Both colors default to
// `threadColor` at the UI layer when the field is first set.
// Optional for back-compat with persisted designs predating
// gradients — when undefined, renderers fall back to solid
// `threadColor` (unchanged behavior). `startColor === endColor`
// is valid and renders as a solid color (no perf hit; the
// renderer can short-circuit).
gradient?: { startColor: string; endColor: string };

Files to touch

src/components/editor/types.ts — add the field (the one file)
(No renderer changes; no UI changes; no test changes beyond a type-check pass.)

Acceptance

pnpm tsc --noEmit (or npm run typecheck) exits 0.
pnpm test passes with zero new tests required (type-only change).
No existing call sites break — gradient is optional, all consumers keep using threadColor.

Out of scope (handled in sibling issues)

Renderer changes (satinRenderer.ts, fillRenderer.ts) — see #350 renderer-layer child issue
EditorRightPanel.tsx UI (start/end color inputs, Swap button) — see #350 UI-layer child issue

Reference patterns

Mirror the optional-field + back-compat comment style already used in this file for satinWidth? (#314, lines 23-35), closed? (#209, lines 37-41), groupId? (#259, lines 42-50), locked? (#289, lines 51-69), and others. The pattern is consistent — copy it.

Discovery check

Confirm before starting:

grep -rn "gradient\|startColor\|endColor" src/ --include="*.ts" --include="*.tsx"

should return ONLY the existing UI-background gradients (linear-gradient(...) in Home.tsx / Help.tsx / CanvasArea.tsx — those are CSS-only) and the new field added by this issue. No type-level or domain-level gradient exists yet — verified 2026-10-05.

**Parent-Issue:** #350 ## Scope (type layer only — no rendering, no UI) Add an optional `gradient` field to the `StitchPath` interface in `src/components/editor/types.ts`. This is the data-model prerequisite for the gradient feature (#350) and for the Swap Colors UI. ## Concrete change In `src/components/editor/types.ts` (around the existing `threadColor: string` field on line 18), add: ```ts // (#350) Optional two-color gradient. When present, renderers draw // the path with a linear gradient from startColor to endColor // instead of the solid `threadColor`. Both colors default to // `threadColor` at the UI layer when the field is first set. // Optional for back-compat with persisted designs predating // gradients — when undefined, renderers fall back to solid // `threadColor` (unchanged behavior). `startColor === endColor` // is valid and renders as a solid color (no perf hit; the // renderer can short-circuit). gradient?: { startColor: string; endColor: string }; ``` ## Files to touch - `src/components/editor/types.ts` — add the field (the one file) - (No renderer changes; no UI changes; no test changes beyond a type-check pass.) ## Acceptance - `pnpm tsc --noEmit` (or `npm run typecheck`) exits 0. - `pnpm test` passes with zero new tests required (type-only change). - No existing call sites break — `gradient` is optional, all consumers keep using `threadColor`. ## Out of scope (handled in sibling issues) - Renderer changes (satinRenderer.ts, fillRenderer.ts) — see #350 renderer-layer child issue - EditorRightPanel.tsx UI (start/end color inputs, Swap button) — see #350 UI-layer child issue ## Reference patterns Mirror the optional-field + back-compat comment style already used in this file for `satinWidth?` (#314, lines 23-35), `closed?` (#209, lines 37-41), `groupId?` (#259, lines 42-50), `locked?` (#289, lines 51-69), and others. The pattern is consistent — copy it. ## Discovery check Confirm before starting: ``` grep -rn "gradient\|startColor\|endColor" src/ --include="*.ts" --include="*.tsx" ``` should return ONLY the existing UI-background gradients (`linear-gradient(...)` in Home.tsx / Help.tsx / CanvasArea.tsx — those are CSS-only) and the new field added by this issue. No type-level or domain-level `gradient` exists yet — verified 2026-10-05.

Mark added the

feature-request

triage-approved

labels

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

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 referenced this issue

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

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

Mark commented

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

Author

Owner

Closed by commit ab81a69 on origin/main.

Type-layer only — added optional gradient?: { startColor: string; endColor: string } to the StitchPath interface in src/components/editor/types.ts. Back-compat shape matches the established pattern in this file (satinWidth #314, fillAngle/fillSpacing #373, crossStitchSize #390, etc.).

Sister issues still open for the renderer layer (satinRenderer.ts / fillRenderer.ts) and EditorRightPanel.tsx UI (start/end color inputs + Swap button) per #350.

Acceptance: tsc --noEmit clean. Pre-existing baseline test failures (20 in EditorRightPanel #329/#331/#333/#334 curves) verified unrelated — same count on stashed baseline.

Closed by commit ab81a69 on origin/main. Type-layer only — added optional `gradient?: { startColor: string; endColor: string }` to the StitchPath interface in src/components/editor/types.ts. Back-compat shape matches the established pattern in this file (satinWidth #314, fillAngle/fillSpacing #373, crossStitchSize #390, etc.). Sister issues still open for the renderer layer (satinRenderer.ts / fillRenderer.ts) and EditorRightPanel.tsx UI (start/end color inputs + Swap button) per #350. Acceptance: tsc --noEmit clean. Pre-existing baseline test failures (20 in EditorRightPanel #329/#331/#333/#334 curves) verified unrelated — same count on stashed baseline.

Mark closed this issue

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

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

2026-10-05 21:47:21 +00:00

feat(#350): EditorRightPanel Gradient section — Start/End pickers, Swap button, Use-gradient toggle