Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor has no 'set as background' / 'use as reference' for a path — user wanting to trace over an existing path has to use the visibility toggle (hide/unhide to compare) or the lock, no separate 'background' state #293

New issue

Closed

opened 2026-10-04 03:47:23 +00:00 by Mark · 2 comments

Mark commented

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

Owner

Finding

The editor has a visibility toggle (hide/show) for paths. It does not have a "background" state (drawn behind everything else, at low opacity, not selectable).

grep -rn 'isBackground\|backgroundPath' src/components/editor/ returns 0.

A user with:

A traced SVG path (their source)
5 hand-drawn paths (the result)

Wants to:

Keep the SVG visible but NOT selectable (it's the reference)
Set it to 30% opacity (faded)
The hand-drawn paths are in the foreground, full color

The fix is a "Set as background" toggle on a path.

Where

Editor's path operations: src/components/editor/EditorRightPanel.tsx
No background: grep -rn 'isBackground' src/components/editor/ returns 0
Lock (per #289) is the parallel concern; background is the visual-only version

Suggested fix shape

Type: add isBackground: boolean to the StitchPath type:

export interface StitchPath {
  // ...
  isBackground: boolean;
}

UI: a "Set as background" button in the path list row (and in the EditorContextMenu per #191):

<button
  onClick={() => onSetAsBackground(path.id)}
  data-testid={`bg-${path.id}`}
  title="Set as background reference"
>
  <Image size={11} />
</button>

Render: background paths are drawn first (in the z-order), at 50% opacity, with a small dashed border.
Click behavior: clicking a background path doesn't select it. The user must toggle it back to foreground first.
Status: the path is still in the path list, but with a "BG" badge.
Note: this is similar to (but distinct from) the lock (per #289) and the reference image (per #245). The reference image is a raster; the background path is a vector with low opacity.

Severity

Low. The user can hide + lower opacity manually. Power users tracing over reference paths notice.

Discovered by

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

#289 (open) — Lock. Lock is "not editable"; background is "visual reference."
#245 (open) — Reference image backdrop. The reference image is a raster; this is the vector version.
The combination: set a path as background, lock it (not editable), and use the editor to draw new paths on top.

## Finding The editor has a visibility toggle (hide/show) for paths. It does not have a "background" state (drawn behind everything else, at low opacity, not selectable). `grep -rn 'isBackground\|backgroundPath' src/components/editor/` returns 0. A user with: - A traced SVG path (their source) - 5 hand-drawn paths (the result) Wants to: - Keep the SVG visible but NOT selectable (it's the reference) - Set it to 30% opacity (faded) - The hand-drawn paths are in the foreground, full color The fix is a "Set as background" toggle on a path. ## Where - Editor's path operations: `src/components/editor/EditorRightPanel.tsx` - No background: `grep -rn 'isBackground' src/components/editor/` returns 0 - Lock (per #289) is the parallel concern; background is the visual-only version ## Suggested fix shape 1. **Type**: add `isBackground: boolean` to the `StitchPath` type: ```ts export interface StitchPath { // ... isBackground: boolean; } ``` 2. **UI**: a "Set as background" button in the path list row (and in the EditorContextMenu per #191): ```tsx <button onClick={() => onSetAsBackground(path.id)} data-testid={`bg-${path.id}`} title="Set as background reference" > <Image size={11} /> </button> ``` 3. **Render**: background paths are drawn first (in the z-order), at 50% opacity, with a small dashed border. 4. **Click behavior**: clicking a background path doesn't select it. The user must toggle it back to foreground first. 5. **Status**: the path is still in the path list, but with a "BG" badge. 6. **Note**: this is similar to (but distinct from) the lock (per #289) and the reference image (per #245). The reference image is a raster; the background path is a vector with low opacity. ## Severity Low. The user can hide + lower opacity manually. Power users tracing over reference paths notice. ## Discovered by Gap analysis (2026-10-02) of editor path operations. ## Related - #289 (open) — Lock. Lock is "not editable"; background is "visual reference." - #245 (open) — Reference image backdrop. The reference image is a raster; this is the vector version. - The combination: set a path as background, lock it (not editable), and use the editor to draw new paths on top.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue

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

Editor's Path Properties section has no 'direction indicator' on the path — user with a closed circular path can't tell which way the nodes go (clockwise vs counterclockwise), matters for stitch direction #329

Mark referenced this issue

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

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

Mark referenced this issue from a commit

2026-10-04 18:54:20 +00:00

fix(#293): "Set as Background" path reference

Mark commented

2026-10-04 18:54:45 +00:00

Author

Owner

No description provided.

Mark commented

2026-10-04 18:55:01 +00:00

Author

Owner

Pushed fix(#293) at 4d0fe3c on origin/main.

Three observable behaviors distinguish background from the parallel lock (#289) affordance:

Canvas paints background paths FIRST (z-order back) so foreground paths paint on top.
drawPath halves globalAlpha (0.5 * opacity) for background paths so the reference stays visible enough to align against but does not compete with the foreground trace.
Faint dashed outline (rgba(110,86,207,0.6), [3,2] dash) along the path so a user can tell at a glance which shapes are background references vs regular foreground paths that share the same color.

Hit-testing (findNodeAt / findSegmentAt) skips background paths so clicking the reference falls through to the foreground path underneath (matches the locked-path fall-through).

Surfaces:

Right-panel per-row BG button (comfortable + compact views; icons-view gets a corner badge since the cell is too small). Uses ImageIcon to parallel the (#245) reference-image affordance; violet tint differentiates from the amber lock badge.
EditorContextMenu "Set as Background / Set as Foreground" item, single-path shape, gated on the optional onTogglePathBackground so older callers still type-check.
All toggles go through Editor.handleTogglePathBackground (pushHistory + setPaths + setIsDirty) so the operation is undoable via Ctrl+Z.

Tests:

src/components/editor/issue-293.test.tsx (8 tests) - panel button + icons-view badge.
src/components/editor/canvasRenderer.test.ts - 4 new tests pinning the dashed-outline / alpha-halving contract.
src/pages/issue-293.test.tsx (6 tests) - Editor wiring integration: setPaths + pushHistory + dirty path + no-op guards.
1743 + 18 = 1761 unit tests pass; the same pre-existing issue-240 flake remains (unrelated to this work).

No new lint errors; tsc -b clean.

Pushed fix(#293) at 4d0fe3c on origin/main. Three observable behaviors distinguish background from the parallel lock (#289) affordance: 1. Canvas paints background paths FIRST (z-order back) so foreground paths paint on top. 2. drawPath halves globalAlpha (0.5 * opacity) for background paths so the reference stays visible enough to align against but does not compete with the foreground trace. 3. Faint dashed outline (rgba(110,86,207,0.6), [3,2] dash) along the path so a user can tell at a glance which shapes are background references vs regular foreground paths that share the same color. Hit-testing (findNodeAt / findSegmentAt) skips background paths so clicking the reference falls through to the foreground path underneath (matches the locked-path fall-through). Surfaces: - Right-panel per-row BG button (comfortable + compact views; icons-view gets a corner badge since the cell is too small). Uses ImageIcon to parallel the (#245) reference-image affordance; violet tint differentiates from the amber lock badge. - EditorContextMenu "Set as Background / Set as Foreground" item, single-path shape, gated on the optional onTogglePathBackground so older callers still type-check. - All toggles go through Editor.handleTogglePathBackground (pushHistory + setPaths + setIsDirty) so the operation is undoable via Ctrl+Z. Tests: - src/components/editor/issue-293.test.tsx (8 tests) - panel button + icons-view badge. - src/components/editor/canvasRenderer.test.ts - 4 new tests pinning the dashed-outline / alpha-halving contract. - src/pages/issue-293.test.tsx (6 tests) - Editor wiring integration: setPaths + pushHistory + dirty path + no-op guards. - 1743 + 18 = 1761 unit tests pass; the same pre-existing issue-240 flake remains (unrelated to this work). No new lint errors; tsc -b clean.

Mark closed this issue

2026-10-04 18:55:05 +00:00

Mark referenced this issue

2026-10-04 19:24:16 +00:00

Editor's Bottom Thread Bar's thread stop order is the sewing order (per #222 / #190) but there's no drag-reorder for the user to fix the order manually — user wanting to reorder threads has to go to the workspace or use the editor's context menu (if … #295