Editor has no real-time stitch-by-stitch preview animation — SequenceState type and DEFAULT_SEQUENCE_STATE const exist, no consumer reads them #164

New issue

Closed

opened 2026-10-03 17:30:28 +00:00 by Mark · 0 comments

Mark commented

2026-10-03 17:30:28 +00:00

Owner

Finding

src/components/editor/types.ts:55-60 defines SequenceState:

export interface SequenceState {
  isPlaying: boolean;
  speed: number;
  currentPathIndex: number;
  progress: number;
}

src/components/editor/constants.ts:21-26 defines DEFAULT_SEQUENCE_STATE with isPlaying: false, speed: 2, currentPathIndex: 0, progress: 0.

A grep -rn 'sequenceState\|setSequenceState\|SequenceState' src/ returns 3 references, all in types.ts and constants.ts — no component, hook, or context reads the values. The type and default exist; nothing consumes them.

The Home page feature grid advertises:

Real-time stitch preview: See every stitch update live as you adjust density, colors, and parameters.

The "real-time" preview that's actually wired is the color quantization preview (ColorPreview in the RightPanel, per #121). The user sees what the k-means quantization will produce. That's NOT a stitch-by-stitch preview. The Home page claim is partially fulfilled (colors update) but the stitch geometry doesn't animate.

Where

src/components/editor/types.ts:55-60 — SequenceState interface
src/components/editor/constants.ts:21-26 — DEFAULT_SEQUENCE_STATE
Home page claim: src/pages/Home.tsx (the "Real-time stitch preview" feature card)
No consumer: nowhere in src/components/editor/, src/pages/Editor.tsx, or anywhere else

Suggested fix shape

Two options:

Implement the animation.
- Add a useState<SequenceState> to the Editor, init from DEFAULT_SEQUENCE_STATE.
- Add a play/pause button to the EditorToolbar (or the EditorRightPanel). When playing, requestAnimationFrame advances progress and currentPathIndex over time at speed stitches per second.
- In the canvas render path, highlight only the stitches at or before the current progress (dim the rest). This is the "playback" of the design.
- The Home page claim is then accurate.
Remove the dead types and update the Home page.
- Delete SequenceState from types.ts and DEFAULT_SEQUENCE_STATE from constants.ts (if nothing depends on them).
- Update the Home page text: "Live parameter preview: See how density and color choices affect the design before you export." — narrower claim, fulfilled by the color preview.

Option 1 is the right product move. A stitch-by-stitch preview is a real differentiator for embroidery software and a meaningful UX win. The Editor has the data (the paths with their node positions); the rendering layer is already drawn per-stitch; adding a progress-based filter is small.

Severity

Medium. The feature is advertised but doesn't exist. The user expects to see stitches animate; nothing animates.

Discovered by

Gap analysis (2026-10-02) of editor animation state.

#121 (closed) — Color Sensitivity preview (the live k-means preview). The "stitch preview" claim is misattributed to this.

## Finding `src/components/editor/types.ts:55-60` defines `SequenceState`: ```ts export interface SequenceState { isPlaying: boolean; speed: number; currentPathIndex: number; progress: number; } ``` `src/components/editor/constants.ts:21-26` defines `DEFAULT_SEQUENCE_STATE` with `isPlaying: false, speed: 2, currentPathIndex: 0, progress: 0`. A `grep -rn 'sequenceState\|setSequenceState\|SequenceState' src/` returns 3 references, all in `types.ts` and `constants.ts` — no component, hook, or context reads the values. The type and default exist; nothing consumes them. The Home page feature grid advertises: > **Real-time stitch preview**: See every stitch update live as you adjust density, colors, and parameters. The "real-time" preview that's actually wired is the color quantization preview (`ColorPreview` in the RightPanel, per #121). The user sees what the k-means quantization will produce. That's NOT a stitch-by-stitch preview. The Home page claim is partially fulfilled (colors update) but the stitch geometry doesn't animate. ## Where - `src/components/editor/types.ts:55-60` — `SequenceState` interface - `src/components/editor/constants.ts:21-26` — `DEFAULT_SEQUENCE_STATE` - Home page claim: `src/pages/Home.tsx` (the "Real-time stitch preview" feature card) - No consumer: nowhere in `src/components/editor/`, `src/pages/Editor.tsx`, or anywhere else ## Suggested fix shape Two options: 1. **Implement the animation.** - Add a `useState<SequenceState>` to the Editor, init from `DEFAULT_SEQUENCE_STATE`. - Add a play/pause button to the EditorToolbar (or the EditorRightPanel). When playing, `requestAnimationFrame` advances `progress` and `currentPathIndex` over time at `speed` stitches per second. - In the canvas render path, highlight only the stitches at or before the current `progress` (dim the rest). This is the "playback" of the design. - The Home page claim is then accurate. 2. **Remove the dead types and update the Home page.** - Delete `SequenceState` from `types.ts` and `DEFAULT_SEQUENCE_STATE` from `constants.ts` (if nothing depends on them). - Update the Home page text: "**Live parameter preview**: See how density and color choices affect the design before you export." — narrower claim, fulfilled by the color preview. Option 1 is the right product move. A stitch-by-stitch preview is a real differentiator for embroidery software and a meaningful UX win. The Editor has the data (the paths with their node positions); the rendering layer is already drawn per-stitch; adding a progress-based filter is small. ## Severity Medium. The feature is advertised but doesn't exist. The user expects to see stitches animate; nothing animates. ## Discovered by Gap analysis (2026-10-02) of editor animation state. ## Related - #121 (closed) — Color Sensitivity preview (the live k-means preview). The "stitch preview" claim is misattributed to this.