Editor's Path Properties has 'Stitch type' but no 'preview on canvas' (per #297) — user hovers an option, no preview of what the path would look like with that type #387

New issue

Open

opened 2026-10-04 04:01:40 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 04:01:40 +00:00

Owner

Finding"

This is similar to #297, but more specific. The implementation is: when the user hovers a dropdown option, the canvas temporarily renders the path with that stitch type (no commit).

grep -rn 'previewStitch\|liveStitchPreview' src/components/editor/ returns 0.

A user hovering "Fill" in the dropdown:

Sees the option highlighted
Doesn't see the canvas change
Has to click, see, decide

The fix is a live preview.

Where

Path Properties: src/components/editor/EditorRightPanel.tsx
The dropdown: same file
No preview: grep -rn 'previewStitch' src/components/editor/ returns 0

Suggested fix shape

State: a previewStitchType: UserFacingStitchType | null state (set on hover, cleared on leave).
Render: when previewStitchType is set, the canvas renders the path with that stitch type (overriding the actual p.stitchType):

const renderStitchType = previewStitchType ?? p.stitchType;

UI: the dropdown options have onMouseEnter / onMouseLeave:

<option
  onMouseEnter={() => setPreviewStitchType('satin')}
  onMouseLeave={() => setPreviewStitchType(null)}
>
  Satin
</option>

Performance: the re-render is fast (just a parameter change), but for complex designs, debounce or use a throttled update.
Use cases:

The user is comparing 5 stitch types
The user wants to see which looks best

Severity**

Low. The user can experiment. Power users notice.

Discovered by

Gap analysis (2026-10-02) of editor path properties.

#297 (open) — Stitch type preview. Same surface.
#298 (open) — Live preview for path properties. Same family.
Figma's live preview is the parallel.

## Finding" This is similar to #297, but more specific. The implementation is: when the user hovers a dropdown option, the canvas temporarily renders the path with that stitch type (no commit). `grep -rn 'previewStitch\|liveStitchPreview' src/components/editor/` returns 0. A user hovering "Fill" in the dropdown: - Sees the option highlighted - Doesn't see the canvas change - Has to click, see, decide The fix is a live preview. ## Where - Path Properties: `src/components/editor/EditorRightPanel.tsx` - The dropdown: same file - No preview: `grep -rn 'previewStitch' src/components/editor/` returns 0 ## Suggested fix shape 1. **State**: a `previewStitchType: UserFacingStitchType | null` state (set on hover, cleared on leave). 2. **Render**: when `previewStitchType` is set, the canvas renders the path with that stitch type (overriding the actual `p.stitchType`): ```ts const renderStitchType = previewStitchType ?? p.stitchType; ``` 3. **UI**: the dropdown options have `onMouseEnter` / `onMouseLeave`: ```tsx <option onMouseEnter={() => setPreviewStitchType('satin')} onMouseLeave={() => setPreviewStitchType(null)} > Satin </option> ``` 4. **Performance**: the re-render is fast (just a parameter change), but for complex designs, debounce or use a throttled update. 5. **Use cases**: - The user is comparing 5 stitch types - The user wants to see which looks best ## Severity** Low. The user can experiment. Power users notice. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related** - #297 (open) — Stitch type preview. Same surface. - #298 (open) — Live preview for path properties. Same family. - Figma's live preview is the parallel.