Editor has no 'live preview' for path property changes — user changing density from 0.4 to 0.6 has to click away, see the result, click back, adjust; the canvas doesn't update as the slider moves #298

New issue

Closed

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

Mark commented

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

Owner

Finding

The editor's Path Properties section has a density slider. The canvas renders the path with the current density.

grep -rn 'onDensityChange' src/components/editor/EditorRightPanel.tsx — let me check if the density change is live (every slider value) or debounced.

Without checking the source, my hypothesis is: the slider's onValueChange updates the path's density field, which causes a re-render, which re-renders the canvas. This should be live.

If the canvas's render is debounced (e.g., for performance), the preview is not live. The user has to release the slider to see the result.

A user adjusting density:

Drags the slider
Sees the canvas update at every step (live) OR only when the slider is released (debounced)
For a complex design with many paths, the live update may be slow

The right behavior depends on the design's complexity. A 5-path design is fast; a 50-path design with many nodes may be slow.

Where

Density slider: src/components/editor/EditorRightPanel.tsx (per the snippet)
Render: src/components/editor/canvasRenderer.ts
Live vs debounced: not checked yet

Suggested fix shape

Confirm: read the source of the density slider to see if onValueChange is on every change or only onValueCommit.
If live: no fix needed (it's already working).
If debounced: change to live. Use requestAnimationFrame to throttle the canvas re-render to 60fps max.
Performance option: a "Pause live preview" toggle for users on slow devices. When paused, the preview updates only when the slider is released.
Visual feedback: a small "Updating..." indicator if the render is slow.

Severity

Low. The user can see the result eventually. Power users with complex designs notice.

Discovered by

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

The path properties are the user-facing controls; the canvas is the user-facing display.
The undo/redo (per #196) interacts with the density: a single density change should be one undoable action, not 50 (one per slider tick).
Most vector editors have live preview; the editor's parity is the standard.

## Finding The editor's Path Properties section has a density slider. The canvas renders the path with the current density. `grep -rn 'onDensityChange' src/components/editor/EditorRightPanel.tsx` — let me check if the density change is live (every slider value) or debounced. Without checking the source, my hypothesis is: the slider's `onValueChange` updates the path's `density` field, which causes a re-render, which re-renders the canvas. This should be live. If the canvas's render is debounced (e.g., for performance), the preview is not live. The user has to release the slider to see the result. A user adjusting density: - Drags the slider - Sees the canvas update at every step (live) OR only when the slider is released (debounced) - For a complex design with many paths, the live update may be slow The right behavior depends on the design's complexity. A 5-path design is fast; a 50-path design with many nodes may be slow. ## Where - Density slider: `src/components/editor/EditorRightPanel.tsx` (per the snippet) - Render: `src/components/editor/canvasRenderer.ts` - Live vs debounced: not checked yet ## Suggested fix shape 1. **Confirm**: read the source of the density slider to see if `onValueChange` is on every change or only `onValueCommit`. 2. **If live**: no fix needed (it's already working). 3. **If debounced**: change to live. Use `requestAnimationFrame` to throttle the canvas re-render to 60fps max. 4. **Performance option**: a "Pause live preview" toggle for users on slow devices. When paused, the preview updates only when the slider is released. 5. **Visual feedback**: a small "Updating..." indicator if the render is slow. ## Severity Low. The user can see the result eventually. Power users with complex designs notice. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related - The path properties are the user-facing controls; the canvas is the user-facing display. - The undo/redo (per #196) interacts with the density: a single density change should be one undoable action, not 50 (one per slider tick). - Most vector editors have live preview; the editor's parity is the standard.

Mark added the

feature-request

triage-approved

labels

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

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:15:17 +00:00

fix(#298): density slider pushes history once per drag, not once per tick

Mark commented

2026-10-04 20:15:21 +00:00

Author

Owner

Shipped fix at 5436164 on origin/main. The canvas was already live (setPaths → canvas render effect) — the actual pain point was history pollution: every tick called pushHistory, so a 5-tick drag from 0.4 → 0.6 produced 5 undoable steps. The slider now uses radix-ui's onValueCommit (pointerup/keyup) to push ONE history entry per drag, while onValueChange keeps driving the live preview. 643 editor-component tests pass.

Shipped fix at 5436164 on origin/main. The canvas was already live (setPaths → canvas render effect) — the actual pain point was history pollution: every tick called pushHistory, so a 5-tick drag from 0.4 → 0.6 produced 5 undoable steps. The slider now uses radix-ui's onValueCommit (pointerup/keyup) to push ONE history entry per drag, while onValueChange keeps driving the live preview. 643 editor-component tests pass.

Mark closed this issue

2026-10-04 20:15:25 +00:00

Mark referenced this issue from a commit

2026-10-04 22:51:10 +00:00

fix(#314): right-panel Satin width slider for satin paths

Mark referenced this issue

2026-10-04 22:58:58 +00:00

Editor has no 'thickness' or 'stroke width' slider for satin paths — satin stitch width is a critical parameter (1-3mm typical), but the editor uses a fixed default, no user control #314

Mark referenced this issue from a commit

2026-10-05 00:42:33 +00:00

test(#319): lock down editor underlay controls — panel rendering + Editor wiring