Editor has no 'stroke' or 'outline' preview when hovering a path — user wanting to see the satin column at full width (vs just the centerline) has to render the design (slow) #325

New issue

Closed

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

Mark commented

2026-10-04 03:52:30 +00:00

Owner

Finding

The canvas renders paths as the centerline (the polyline through the nodes). The satin column (the actual stitches, which span the path's width) is computed at export time.

grep -rn 'satinPreview\|showSatin' src/components/editor/ returns 0.

A user with a satin path:

Sees a thin line on the canvas
Wants to see what the satin will look like (the wider column)
Currently: can't; has to render or export

The fix is a "Show satin preview" toggle that draws the satin column at the specified width.

Where

canvasRenderer: src/components/editor/canvasRenderer.ts (where the centerline is drawn)
No satin preview: grep -rn 'satinPreview' src/components/editor/ returns 0
Satin width (per #314): the parameter that defines the width

Suggested fix shape

Toggle: a "Show satin preview" toggle in the editor's settings or toolbar:

<button
  onClick={() => setShowSatinPreview((v) => !v)}
  data-testid="satin-preview"
  title="Show satin column preview"
>
  <Eye size={12} />
</button>

Render: when showSatinPreview is true, for each satin path, draw the column as a thicker line (the satin width):

if (showSatinPreview && p.stitchType === 'satin') {
  ctx.lineWidth = p.satinWidth ?? 2.0 * scale;  // mm to px
  ctx.strokeStyle = p.threadColor;
  ctx.beginPath();
  ctx.moveTo(p.nodes[0].x, p.nodes[0].y);
  for (let i = 1; i < p.nodes.length; i++) {
    ctx.lineTo(p.nodes[i].x, p.nodes[i].y);
  }
  ctx.stroke();
}

Z-order: the satin preview is drawn below the centerline (so the user can see both).
Performance: the preview is fast (no stitch computation, just a thick line).
Use cases: the user can see if the satin column overlaps with adjacent paths (which would cause stitching issues).

Severity

Low. The user can render to see. Power users with satin-heavy designs notice.

Discovered by

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

#314 (open) — Satin width. Same embroidery-specific parameters.
The render (slow) is the alternative; the preview is the fast version.
Figma's stroke preview (always on) is the parallel.

## Finding The canvas renders paths as the centerline (the polyline through the nodes). The satin column (the actual stitches, which span the path's width) is computed at export time. `grep -rn 'satinPreview\|showSatin' src/components/editor/` returns 0. A user with a satin path: - Sees a thin line on the canvas - Wants to see what the satin will look like (the wider column) - Currently: can't; has to render or export The fix is a "Show satin preview" toggle that draws the satin column at the specified width. ## Where - canvasRenderer: `src/components/editor/canvasRenderer.ts` (where the centerline is drawn) - No satin preview: `grep -rn 'satinPreview' src/components/editor/` returns 0 - Satin width (per #314): the parameter that defines the width ## Suggested fix shape 1. **Toggle**: a "Show satin preview" toggle in the editor's settings or toolbar: ```tsx <button onClick={() => setShowSatinPreview((v) => !v)} data-testid="satin-preview" title="Show satin column preview" > <Eye size={12} /> </button> ``` 2. **Render**: when `showSatinPreview` is true, for each satin path, draw the column as a thicker line (the satin width): ```ts if (showSatinPreview && p.stitchType === 'satin') { ctx.lineWidth = p.satinWidth ?? 2.0 * scale; // mm to px ctx.strokeStyle = p.threadColor; ctx.beginPath(); ctx.moveTo(p.nodes[0].x, p.nodes[0].y); for (let i = 1; i < p.nodes.length; i++) { ctx.lineTo(p.nodes[i].x, p.nodes[i].y); } ctx.stroke(); } ``` 3. **Z-order**: the satin preview is drawn below the centerline (so the user can see both). 4. **Performance**: the preview is fast (no stitch computation, just a thick line). 5. **Use cases**: the user can see if the satin column overlaps with adjacent paths (which would cause stitching issues). ## Severity Low. The user can render to see. Power users with satin-heavy designs notice. ## Discovered by Gap analysis (2026-10-02) of editor preview affordances. ## Related - #314 (open) — Satin width. Same embroidery-specific parameters. - The render (slow) is the alternative; the preview is the fast version. - Figma's stroke preview (always on) is the parallel.