Workspace has no 'compare before/after' view — user clicks Auto-Digitize and gets a new stitch layout, but has no way to compare the new result to the previous (e.g., a slider that fades between the two) #269

New issue

Closed

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

Mark commented

2026-10-04 03:40:15 +00:00

Owner

Finding

The workspace replaces the stitch objects when re-digitizing. The user can't compare the new result to the previous.

grep -rn 'compareMode' src/components/workspace/ returns 0.

A user who:

Loads a saved design with 200 stitches
Tweaks the auto-digitize settings
Clicks Re-Digitize
Gets a new stitch layout
Wants to compare: "Is this actually better than the original?"

Currently:

The new stitches replace the old ones
The old stitches are gone (Cmd+Z restores them but only shows the old state fully)

The fix is a "Compare" toggle that overlays the old and new with a fade slider.

Where

Workspace state: src/components/workspace/useWorkspace.ts (history is tracked, but the BEFORE-snapshot of just the stitch objects isn't separately tracked for comparison)
No compare UI: grep -rn 'compareMode' src/ returns 0

Suggested fix shape

State: add previousStitchObjects: StitchObject[] | null to the workspace state. Set it to the current stitchObjects BEFORE applying the new ones from auto-digitize.
UI: add a "Compare" toggle to the workspace's top toolbar:

<button
  onClick={() => setCompareMode((v) => !v)}
  disabled={!previousStitchObjects}
>
  <GitCompare size={14} /> Compare
</button>

Render: in canvasRenderer.ts, when compareMode is on, draw previousStitchObjects first (at 30% opacity, in a desaturated color), then the current stitchObjects on top (at 100%).
Slider: a bottom-of-canvas slider that controls the opacity of the previous.
Apply/Reject: two buttons next to the slider.

Severity

Low. The user can re-load the saved design to compare. Power users iterating notice.

Discovered by

Gap analysis (2026-10-02) of workspace comparison affordances.

The history mechanism (per #255) is the parallel; the compare view is a visual variant.
The color simplification preview (per #266) has a similar "preview then apply" pattern.
The Gallery's per-card thumbnail (when there are multiple versions) is the "compare across time" version.

## Finding The workspace replaces the stitch objects when re-digitizing. The user can't compare the new result to the previous. `grep -rn 'compareMode' src/components/workspace/` returns 0. A user who: - Loads a saved design with 200 stitches - Tweaks the auto-digitize settings - Clicks Re-Digitize - Gets a new stitch layout - Wants to compare: "Is this actually better than the original?" Currently: - The new stitches replace the old ones - The old stitches are gone (Cmd+Z restores them but only shows the old state fully) The fix is a "Compare" toggle that overlays the old and new with a fade slider. ## Where - Workspace state: `src/components/workspace/useWorkspace.ts` (history is tracked, but the BEFORE-snapshot of just the stitch objects isn't separately tracked for comparison) - No compare UI: `grep -rn 'compareMode' src/` returns 0 ## Suggested fix shape 1. **State**: add `previousStitchObjects: StitchObject[] | null` to the workspace state. Set it to the current `stitchObjects` BEFORE applying the new ones from auto-digitize. 2. **UI**: add a "Compare" toggle to the workspace's top toolbar: ```tsx <button onClick={() => setCompareMode((v) => !v)} disabled={!previousStitchObjects} > <GitCompare size={14} /> Compare </button> ``` 3. **Render**: in `canvasRenderer.ts`, when `compareMode` is on, draw `previousStitchObjects` first (at 30% opacity, in a desaturated color), then the current `stitchObjects` on top (at 100%). 4. **Slider**: a bottom-of-canvas slider that controls the opacity of the previous. 5. **Apply/Reject**: two buttons next to the slider. ## Severity Low. The user can re-load the saved design to compare. Power users iterating notice. ## Discovered by Gap analysis (2026-10-02) of workspace comparison affordances. ## Related - The history mechanism (per #255) is the parallel; the compare view is a visual variant. - The color simplification preview (per #266) has a similar "preview then apply" pattern. - The Gallery's per-card thumbnail (when there are multiple versions) is the "compare across time" version.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:40:15 +00:00

Mark referenced this issue

2026-10-04 03:51:57 +00:00

Gallery has no 'compare two designs side-by-side' view — user with two design variants wanting to see the differences at a glance has to flip between them #321

Mark referenced this issue from a commit

2026-10-04 13:11:57 +00:00

fix(#269): workspace Compare before/after view — fade between old and new digitize

Mark commented

2026-10-04 13:13:09 +00:00

Author

Owner

Shipped fix(#269) at ebea43c on main — workspace Compare before/after view.

The re-digitize path now captures the pre-replacement geometry into previousStitchObjects and surfaces a Compare toggle + bottom fade slider + Accept/Reject buttons so the user can decide whether to keep the new layout or restore the old.

Workspace toolbar (below the split-view toggle) gains a Compare button. Disabled until a snapshot exists; toggles compareMode.
When on, a bottom-of-canvas pill renders the fade slider + Reject / Accept buttons.
compareMode hides the existing Adjust Settings / Replace image / Confirm & Edit controls so the user can't accidentally save before deciding.
ACCEPT_COMPARE: clears the snapshot (new layout is the baseline). No history push (UI gesture, not a content edit).
REJECT_COMPARE: restores the snapshot as the current stitchObjects + 1 'Reject compare' history entry.
RESET / REPLACE_IMAGE / LOAD_DESIGN all clear the snapshot — the previous-layer belongs to the prior image / session, not the new one.
Canvas renderer draws the snapshot underneath the current stitches (desaturated, at compareOpacity) so it reads as a ghost overlay rather than a competing layout.

22 new tests pin: initialState defaults, commitDigitizedResult capture, SET_COMPARE_MODE gating (no-op without one), opacity clamp, ACCEPT_COMPARE, REJECT_COMPARE, REPLACE_IMAGE/RESET/LOAD_DESIGN reset, deep-clone immutability, CompareToolbar / CompareControls UI, renderCanvas signature compat. Total: 1468/1469 (was 1446/1447).

Shipped fix(#269) at ebea43c on main — workspace Compare before/after view. The re-digitize path now captures the pre-replacement geometry into previousStitchObjects and surfaces a Compare toggle + bottom fade slider + Accept/Reject buttons so the user can decide whether to keep the new layout or restore the old. - Workspace toolbar (below the split-view toggle) gains a Compare button. Disabled until a snapshot exists; toggles compareMode. - When on, a bottom-of-canvas pill renders the fade slider + Reject / Accept buttons. - compareMode hides the existing Adjust Settings / Replace image / Confirm & Edit controls so the user can't accidentally save before deciding. - ACCEPT_COMPARE: clears the snapshot (new layout is the baseline). No history push (UI gesture, not a content edit). - REJECT_COMPARE: restores the snapshot as the current stitchObjects + 1 'Reject compare' history entry. - RESET / REPLACE_IMAGE / LOAD_DESIGN all clear the snapshot — the previous-layer belongs to the prior image / session, not the new one. - Canvas renderer draws the snapshot underneath the current stitches (desaturated, at compareOpacity) so it reads as a ghost overlay rather than a competing layout. 22 new tests pin: initialState defaults, commitDigitizedResult capture, SET_COMPARE_MODE gating (no-op without one), opacity clamp, ACCEPT_COMPARE, REJECT_COMPARE, REPLACE_IMAGE/RESET/LOAD_DESIGN reset, deep-clone immutability, CompareToolbar / CompareControls UI, renderCanvas signature compat. Total: 1468/1469 (was 1446/1447).

Mark closed this issue

2026-10-04 13:13:17 +00:00

Mark referenced this issue from a commit

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

fix(#321): Gallery compare-two side-by-side view + test coverage