Editor has no 'step forward' / 'step backward' playback controls — user wanting to see one path at a time, in sequence, has to use the slow speed or play/pause repeatedly, no single-step button #292

New issue

Closed

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

Mark commented

2026-10-04 03:47:06 +00:00

Owner

Finding

The editor's playback (per #164) has play/pause and speed. It does not have step-by-step controls.

grep -rn 'stepForward\|stepBackward\|stepPath' src/components/editor/ returns 0.

A user wanting to inspect a 5-path design one path at a time:

Plays the animation
Tries to pause at path 3
Hard to time
Wishes for a "Step" button

The fix is two buttons: "Step Forward" and "Step Backward" that advance the playback by one path.

Where

Playback controls: src/components/editor/EditorRightPanel.tsx (per the snippet)
No step: grep -rn 'stepForward' src/components/editor/ returns 0

Suggested fix shape

State: no new state needed. The currentPathIndex is the step position.
UI: two buttons in the Playback section, next to the play/pause:

<button
  onClick={() => onStepBackward()}
  data-testid="step-backward"
  disabled={sequenceState.currentPathIndex === 0}
  title="Step backward (←)"
>
  <SkipBack size={12} />
</button>
<button
  onClick={() => onStepForward()}
  data-testid="step-forward"
  disabled={sequenceState.currentPathIndex >= playbackVisiblePaths.length - 1}
  title="Step forward (→)"
>
  <SkipForward size={12} />
</button>

Keyboard: bind ← and → keys to step.
Behavior: when stepping, if currently playing, pause; resume if the user clicks play.

Severity

Low. The user can use the slow speed. Power users debugging stitch sequences notice.

Discovered by

Gap analysis (2026-10-02) of editor playback.

#291 (open) — Loop. Same playback state; the controls are siblings.
Most video editors have step controls; the editor's playback is the parallel.
The step + loop combination allows precise debugging.

## Finding The editor's playback (per #164) has play/pause and speed. It does not have step-by-step controls. `grep -rn 'stepForward\|stepBackward\|stepPath' src/components/editor/` returns 0. A user wanting to inspect a 5-path design one path at a time: - Plays the animation - Tries to pause at path 3 - Hard to time - Wishes for a "Step" button The fix is two buttons: "Step Forward" and "Step Backward" that advance the playback by one path. ## Where - Playback controls: `src/components/editor/EditorRightPanel.tsx` (per the snippet) - No step: `grep -rn 'stepForward' src/components/editor/` returns 0 ## Suggested fix shape 1. **State**: no new state needed. The `currentPathIndex` is the step position. 2. **UI**: two buttons in the Playback section, next to the play/pause: ```tsx <button onClick={() => onStepBackward()} data-testid="step-backward" disabled={sequenceState.currentPathIndex === 0} title="Step backward (←)" > <SkipBack size={12} /> </button> <button onClick={() => onStepForward()} data-testid="step-forward" disabled={sequenceState.currentPathIndex >= playbackVisiblePaths.length - 1} title="Step forward (→)" > <SkipForward size={12} /> </button> ``` 3. **Keyboard**: bind ← and → keys to step. 4. **Behavior**: when stepping, if currently playing, pause; resume if the user clicks play. ## Severity Low. The user can use the slow speed. Power users debugging stitch sequences notice. ## Discovered by Gap analysis (2026-10-02) of editor playback. ## Related - #291 (open) — Loop. Same playback state; the controls are siblings. - Most video editors have step controls; the editor's playback is the parallel. - The step + loop combination allows precise debugging.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:47:06 +00:00

Mark referenced this issue

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

Editor's playback doesn't show a progress bar (which path is current, how many total) — user with 20 paths can see the play state but no visual indicator of progress through the playback #330

Mark referenced this issue from a commit

2026-10-04 18:41:23 +00:00

fix(#292): step forward/backward playback controls in editor

Mark commented

2026-10-04 18:42:21 +00:00

Author

Owner

Shipped fix(#292) at 6e01597 on origin/main.

Two icon buttons (Step Backward / Step Forward) in the editor Playback section advance sequenceState.currentPathIndex by ±1, reset progress to 0, and pause the rAF loop if it was playing. Disabled at the bounds (first / last visible path; no visible paths) so you get visual feedback that there is nowhere to go.

ArrowLeft and ArrowRight share the same handler. Plain arrows only — no Cmd / Ctrl / Alt / Shift modifier — so browser back/forward, word-jump, and selection-extension chords are not swallowed.

Parent owns the state (the Editor holds SequenceState + bounds clamping); the right panel only renders and dispatches. Same pattern as #291 (Loop) and #164 (Play / Reset / Speed).

12 new tests (6 panel + 6 keyboard shortcuts); 246/246 pass in the affected files.

Shipped fix(#292) at 6e01597 on origin/main. Two icon buttons (Step Backward / Step Forward) in the editor Playback section advance sequenceState.currentPathIndex by ±1, reset progress to 0, and pause the rAF loop if it was playing. Disabled at the bounds (first / last visible path; no visible paths) so you get visual feedback that there is nowhere to go. ArrowLeft and ArrowRight share the same handler. Plain arrows only — no Cmd / Ctrl / Alt / Shift modifier — so browser back/forward, word-jump, and selection-extension chords are not swallowed. Parent owns the state (the Editor holds SequenceState + bounds clamping); the right panel only renders and dispatches. Same pattern as #291 (Loop) and #164 (Play / Reset / Speed). 12 new tests (6 panel + 6 keyboard shortcuts); 246/246 pass in the affected files.

Mark closed this issue

2026-10-04 18:42:21 +00:00

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