Editor has no 'show stitched preview' option — paths render as smooth polylines, but a digitizer sees the actual stitch pattern (satin = parallel lines, fill = rows of stitches, etc.) as a dim overlay; no toggle to show full preview #214

New issue

Closed

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

Mark commented

2026-10-04 00:03:29 +00:00

Owner

Finding

src/components/editor/canvasRenderer.ts drawPath (line 81) renders paths as smooth polylines with control-point handles visible. The canvas comment at line 378 says "stitched — the dim is purely a preview cue, not a [real stitch render]."

A user with a fill path on the canvas sees a smooth curve. To see what the actual fill stitches would look like (the rows of stitches that the embroidery machine produces), the user has to:

Save the design
Go to the Workspace
Auto-digitize
View the digitized output
Compare mentally to the editor's smooth path

There's no "preview stitches" toggle in the editor that overlays the rendered stitch pattern on top of the smooth path.

grep -rn 'stitch.*preview\|preview.*stitch' src/components/editor/ returns 1 hit (the comment at line 378), no actual stitch preview renderer.

Where

Smooth path rendering: src/components/editor/canvasRenderer.ts:81 (drawPath)
Stitch pattern: src/components/editor/canvasRenderer.ts:298-340 (drawUnderlayPath — the only stitch-pattern render)
No preview toggle: grep -n 'previewStitches\|showStitches' src/components/editor/ returns 0

Suggested fix shape

Add a previewMode: 'smooth' | 'stitches' prop to the canvas (or EditorRightPanel).
The right panel's Path Properties section adds a toggle:

<ToggleRow
  label="Stitch Preview"
  checked={showStitchPreview}
  onChange={(v) => onPreviewModeChange(v ? 'stitches' : 'smooth')}
/>

In canvasRenderer.ts, when previewMode === 'stitches', dispatch to a per-stitch-type render function:
- satin → parallel diagonal lines along the path
- fill → rows of stitches perpendicular to the path direction
- running → single stitch per segment
- cross-stitch → X pattern at each node

The render function uses the same geometry.ts math the digitizer uses; the visual is the digitizer's output rendered onto the editor canvas. The path's stitchType and density already drive the per-stitch-type spacing.

This is a non-trivial feature (the stitch renderers need to be re-extracted from the workspace's auto-digitize path), but it's the right thing for the editor to do.

Severity

Medium-High. Power users with satin/fill/cross-stitch designs want to preview the actual stitch output without round-tripping to the Workspace.

Discovered by

Gap analysis (2026-10-02) of editor preview fidelity.

The Workspace's canvas renders the actual digitized output. The Editor's canvas is the design surface; the stitch pattern is a preview, not the source of truth.
#164 (closed) — Stitch-by-stitch playback. Same family of "what does the stitched output look like" but in motion.

## Finding `src/components/editor/canvasRenderer.ts` `drawPath` (line 81) renders paths as smooth polylines with control-point handles visible. The canvas comment at line 378 says "stitched — the dim is purely a preview cue, not a [real stitch render]." A user with a fill path on the canvas sees a smooth curve. To see what the actual fill stitches would look like (the rows of stitches that the embroidery machine produces), the user has to: 1. Save the design 2. Go to the Workspace 3. Auto-digitize 4. View the digitized output 5. Compare mentally to the editor's smooth path There's no "preview stitches" toggle in the editor that overlays the rendered stitch pattern on top of the smooth path. `grep -rn 'stitch.*preview\|preview.*stitch' src/components/editor/` returns 1 hit (the comment at line 378), no actual stitch preview renderer. ## Where - Smooth path rendering: `src/components/editor/canvasRenderer.ts:81` (`drawPath`) - Stitch pattern: `src/components/editor/canvasRenderer.ts:298-340` (`drawUnderlayPath` — the only stitch-pattern render) - No preview toggle: `grep -n 'previewStitches\|showStitches' src/components/editor/` returns 0 ## Suggested fix shape 1. Add a `previewMode: 'smooth' | 'stitches'` prop to the canvas (or `EditorRightPanel`). 2. The right panel's Path Properties section adds a toggle: ```tsx <ToggleRow label="Stitch Preview" checked={showStitchPreview} onChange={(v) => onPreviewModeChange(v ? 'stitches' : 'smooth')} /> ``` 3. In `canvasRenderer.ts`, when `previewMode === 'stitches'`, dispatch to a per-stitch-type render function: - satin → parallel diagonal lines along the path - fill → rows of stitches perpendicular to the path direction - running → single stitch per segment - cross-stitch → X pattern at each node The render function uses the same `geometry.ts` math the digitizer uses; the visual is the digitizer's output rendered onto the editor canvas. The path's `stitchType` and `density` already drive the per-stitch-type spacing. This is a non-trivial feature (the stitch renderers need to be re-extracted from the workspace's auto-digitize path), but it's the right thing for the editor to do. ## Severity Medium-High. Power users with satin/fill/cross-stitch designs want to preview the actual stitch output without round-tripping to the Workspace. ## Discovered by Gap analysis (2026-10-02) of editor preview fidelity. ## Related - The Workspace's canvas renders the actual digitized output. The Editor's canvas is the design surface; the stitch pattern is a preview, not the source of truth. - #164 (closed) — Stitch-by-stitch playback. Same family of "what does the stitched output look like" but in motion.