Editor's right panel has no 'wireframe' / 'outline only' preview mode — user wanting to focus on the path geometry (vs the thread color rendering) has no toggle, the canvas always shows the thread color #331

New issue

Closed

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

Mark commented

2026-10-04 03:53:22 +00:00

Owner

Finding

grep -rn 'wireframe\|outlineOnly' src/components/editor/ returns 0. The editor has no wireframe mode.

A user with a design:

Wants to focus on the path geometry (e.g., to find overlaps, off-by-one errors)
The thread color is distracting
Wants to see the paths as gray lines

The fix is a "Wireframe" toggle in the canvas options.

Where

canvasRenderer: src/components/editor/canvasRenderer.ts
No wireframe: grep -rn 'wireframe' src/components/editor/ returns 0

Suggested fix shape

Toggle: a "Wireframe" toggle in the editor's view options:

<button
  onClick={() => setWireframe((v) => !v)}
  data-testid="wireframe-toggle"
  title="Show paths in wireframe (gray lines, no color)"
>
  <Spline size={12} />
</button>

Render: when wireframe is true:

Each path is drawn as a 1px gray line (#A8A29E)
Nodes are drawn as small circles
No fill, no thread color, no satin preview

Use cases:

Debugging path geometry
Comparing two designs
Spotting overlaps between paths
Educational (showing the structure)

Polymode: combine with "Show satin preview" (per #325) for a "wireframe + satin columns" view.

Severity

Low. The user can mentally filter. Power users debugging notice.

Discovered by

Gap analysis (2026-10-02) of editor view modes.

#325 (open) — Satin preview. Same view-mode family.
#288 (open) — Grid overlay. Same family.
#293 (open) — Background. Same family.
Figma's "Outline mode" (Ctrl/Cmd+Y) is the parallel.

## Finding `grep -rn 'wireframe\|outlineOnly' src/components/editor/` returns 0. The editor has no wireframe mode. A user with a design: - Wants to focus on the path geometry (e.g., to find overlaps, off-by-one errors) - The thread color is distracting - Wants to see the paths as gray lines The fix is a "Wireframe" toggle in the canvas options. ## Where - canvasRenderer: `src/components/editor/canvasRenderer.ts` - No wireframe: `grep -rn 'wireframe' src/components/editor/` returns 0 ## Suggested fix shape 1. **Toggle**: a "Wireframe" toggle in the editor's view options: ```tsx <button onClick={() => setWireframe((v) => !v)} data-testid="wireframe-toggle" title="Show paths in wireframe (gray lines, no color)" > <Spline size={12} /> </button> ``` 2. **Render**: when `wireframe` is true: - Each path is drawn as a 1px gray line (`#A8A29E`) - Nodes are drawn as small circles - No fill, no thread color, no satin preview 3. **Use cases**: - Debugging path geometry - Comparing two designs - Spotting overlaps between paths - Educational (showing the structure) 4. **Polymode**: combine with "Show satin preview" (per #325) for a "wireframe + satin columns" view. ## Severity Low. The user can mentally filter. Power users debugging notice. ## Discovered by Gap analysis (2026-10-02) of editor view modes. ## Related - #325 (open) — Satin preview. Same view-mode family. - #288 (open) — Grid overlay. Same family. - #293 (open) — Background. Same family. - Figma's "Outline mode" (Ctrl/Cmd+Y) is the parallel.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:53:22 +00:00

Mark referenced this issue from a commit

2026-10-05 02:59:07 +00:00

feat(#331): editor Wireframe toggle — gray centerline for path geometry focus

Mark commented

2026-10-05 02:59:21 +00:00

Author

Owner

Shipped #331. Wireframe toggle added to right-panel Snap Settings (sits next to Show Satin Preview / Show Direction in the same view-mode family).

When on:

Every path paints as a 1px neutral gray (#A8A29E) centerline, no thread color
Selection halo is suppressed (it would re-introduce per-path color)
The satin column preview is also suppressed (the satin stripe is itself a thread-colored band, so it would defeat the grayscale canvas)
The underlay lattice follows the gray too

When off: legacy thread-color behavior is exactly preserved (back-compat with designs persisted before #331 — the field is optional on SnapSettings).

Commit 89a5eab on origin/main. Full test suite (2175 tests) green.

Related: #325 (satin preview), #329 (show direction) — wireframe composes with both, but its primary goal is "all paths look the same, focus on geometry", mirroring Figma Outline mode (Ctrl/Cmd+Y). The issue's polymode note ("wireframe + satin columns") is intentionally not supported — that combo defeats wireframe's purpose, so the canvas gating is showSatinPreview && !wireframe.

Shipped #331. Wireframe toggle added to right-panel Snap Settings (sits next to Show Satin Preview / Show Direction in the same view-mode family). When on: - Every path paints as a 1px neutral gray (#A8A29E) centerline, no thread color - Selection halo is suppressed (it would re-introduce per-path color) - The satin column preview is also suppressed (the satin stripe is itself a thread-colored band, so it would defeat the grayscale canvas) - The underlay lattice follows the gray too When off: legacy thread-color behavior is exactly preserved (back-compat with designs persisted before #331 — the field is optional on SnapSettings). Commit 89a5eab on origin/main. Full test suite (2175 tests) green. Related: #325 (satin preview), #329 (show direction) — wireframe composes with both, but its primary goal is "all paths look the same, focus on geometry", mirroring Figma Outline mode (Ctrl/Cmd+Y). The issue's polymode note ("wireframe + satin columns") is intentionally not supported — that combo defeats wireframe's purpose, so the canvas gating is showSatinPreview && !wireframe.

Mark closed this issue

2026-10-05 02:59:23 +00:00