Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor's Path Properties section's 'stitch type' dropdown is set per-path but not visually previewed — user picking 'satin' vs 'fill' sees no preview of what each type looks like, just the names #297

New issue

Closed

opened 2026-10-04 03:48:00 +00:00 by Mark · 1 comment

Mark commented

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

Owner

Finding

src/components/editor/EditorRightPanel.tsx's Path Properties section has a stitch type dropdown with 5 options (satin, fill, running, cross-stitch, zigzag — per #198). The user picks a type, but no preview of what the type looks like is shown.

grep -rn 'stitchType.*preview\|previewStitch' src/components/editor/ returns 0.

A user with a path:

Wants to change from satin to fill
Opens the dropdown
Sees "Satin Stitch (Tatami)", "Fill Stitch (Tatami)", "Running Stitch", "Cross-Stitch", "Zigzag Stitch" — names only
Doesn't remember what each looks like
Has to pick one, close, see the canvas, change mind, repeat

The fix is a visual preview for each type in the dropdown (matching the help page's pattern previews).

Where

Path Properties section: src/components/editor/EditorRightPanel.tsx
Stitch type dropdown: same file
No preview: grep -rn 'previewStitch' src/components/editor/ returns 0
The help page's stitch type previews: src/pages/Help.tsx:80-100 (the patterns)

Suggested fix shape

Component: extract the pattern components from Help.tsx (SatinPattern, FillPattern, etc.) and reuse them in the dropdown.
UI: each option in the dropdown is a row with a 32x32 preview and the name:

<SelectItem value="satin">
  <div className="flex items-center gap-2">
    <SatinPattern size={32} />
    <span>Satin</span>
  </div>
</SelectItem>

Hover preview: when the user hovers an option (without selecting), the canvas shows a preview of what the path would look like with that stitch type. This is a "live preview" affordance.
Settings: a "Show preview in stitch type dropdown" toggle for users who prefer the compact list.

Severity

Low. The user can read the help page. Power users with many stitch types notice.

Discovered by

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

The help page's stitch type section is the reference for the previews.
#198 (open) — Path Defaults. The dropdown is in the right panel; the preview is the polish.
The density slider is also in the right panel; the same "live preview on canvas" pattern applies.

## Finding `src/components/editor/EditorRightPanel.tsx`'s Path Properties section has a stitch type dropdown with 5 options (satin, fill, running, cross-stitch, zigzag — per #198). The user picks a type, but no preview of what the type looks like is shown. `grep -rn 'stitchType.*preview\|previewStitch' src/components/editor/` returns 0. A user with a path: - Wants to change from satin to fill - Opens the dropdown - Sees "Satin Stitch (Tatami)", "Fill Stitch (Tatami)", "Running Stitch", "Cross-Stitch", "Zigzag Stitch" — names only - Doesn't remember what each looks like - Has to pick one, close, see the canvas, change mind, repeat The fix is a visual preview for each type in the dropdown (matching the help page's pattern previews). ## Where - Path Properties section: `src/components/editor/EditorRightPanel.tsx` - Stitch type dropdown: same file - No preview: `grep -rn 'previewStitch' src/components/editor/` returns 0 - The help page's stitch type previews: `src/pages/Help.tsx:80-100` (the patterns) ## Suggested fix shape 1. **Component**: extract the pattern components from Help.tsx (SatinPattern, FillPattern, etc.) and reuse them in the dropdown. 2. **UI**: each option in the dropdown is a row with a 32x32 preview and the name: ```tsx <SelectItem value="satin"> <div className="flex items-center gap-2"> <SatinPattern size={32} /> <span>Satin</span> </div> </SelectItem> ``` 3. **Hover preview**: when the user hovers an option (without selecting), the canvas shows a preview of what the path would look like with that stitch type. This is a "live preview" affordance. 4. **Settings**: a "Show preview in stitch type dropdown" toggle for users who prefer the compact list. ## Severity Low. The user can read the help page. Power users with many stitch types notice. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related - The help page's stitch type section is the reference for the previews. - #198 (open) — Path Defaults. The dropdown is in the right panel; the preview is the polish. - The density slider is also in the right panel; the same "live preview on canvas" pattern applies.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue

2026-10-04 03:55:35 +00:00

Editor's stitch type preview (per #297) for the dropdown options is missing — user picking between 'satin' and 'fill' has to remember what each looks like, no visual aid in the dropdown #347

Mark referenced this issue

2026-10-04 03:55:35 +00:00

Editor's Path Properties has 'Stitch type' but the dropdown uses internal IDs ('satin', 'fill') instead of human-readable labels ('Satin Stitch (Tatami)', 'Fill Stitch (Tatami)') — user has to map IDs to display names in their head #348

Mark referenced this issue

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

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

Mark referenced this issue from a commit

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

fix(#297): visual preview thumbnail next to editor's stitch-type select

Mark commented

2026-10-04 20:01:51 +00:00

Author

Owner

Shipped in 6bdef23 on origin/main.

A 40x28 SVG thumbnail now sits to the right of the stitch-type dropdown in the editor, reusing the help-page pattern SVG components (SatinPattern/FillPattern/RunningPattern/CrossStitchPattern/ZigzagPattern from src/components/help/StitchPatterns.tsx). The thumbnail swaps live as the user changes the dropdown value, so the dropdown becomes self-documenting — pick satin, see the satin pattern; pick fill, see the tatami fill; etc.

Hidden when the selection disagrees on stitch type (Mixed state), since there is no single pattern to show. data-testid gives downstream tests a stable handle per stitch type.

Files touched:

src/components/editor/EditorRightPanel.tsx (imports + thumbnail JSX in the stitch-type row)
src/components/editor/EditorRightPanel.test.tsx (4 new tests for the preview: satin, running, change-follows-selection, mixed-hidden)

Tests: 211/211 in EditorRightPanel.test.tsx pass. TypeScript clean, ESLint clean.

Shipped in 6bdef23 on origin/main. A 40x28 SVG thumbnail now sits to the right of the stitch-type dropdown in the editor, reusing the help-page pattern SVG components (SatinPattern/FillPattern/RunningPattern/CrossStitchPattern/ZigzagPattern from src/components/help/StitchPatterns.tsx). The thumbnail swaps live as the user changes the dropdown value, so the dropdown becomes self-documenting — pick satin, see the satin pattern; pick fill, see the tatami fill; etc. Hidden when the selection disagrees on stitch type (Mixed state), since there is no single pattern to show. data-testid gives downstream tests a stable handle per stitch type. Files touched: - src/components/editor/EditorRightPanel.tsx (imports + thumbnail JSX in the stitch-type row) - src/components/editor/EditorRightPanel.test.tsx (4 new tests for the preview: satin, running, change-follows-selection, mixed-hidden) Tests: 211/211 in EditorRightPanel.test.tsx pass. TypeScript clean, ESLint clean.

Mark closed this issue

2026-10-04 20:02:11 +00:00