#329 - 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 - Mark/Kimi_Agent_Brother_10_Digitizing_App - cyguin git: Adlerian Hierarchical Self-Actualization Syllogism

Mark commented

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

Owner

Finding

grep -rn 'direction.*arrow\|pathDirection' src/components/editor/ returns 0. The editor has no direction indicator.

For circular or closed paths, the stitch direction (clockwise vs counter-clockwise) affects:

Satin stitch appearance (light reflection)
Fill stitch direction (the "grain" of the fill)
Embroidery convention (most fabrics have a "right side up")

A user with a closed path:

Doesn't know which way the nodes go
Can't control the direction

The fix is a small arrow at each node, or a single arrow on the path's first segment, showing the direction.

Where

canvasRenderer: src/components/editor/canvasRenderer.ts (where nodes are drawn)
No direction indicator: grep -rn 'directionArrow' src/components/editor/ returns 0

Suggested fix shape

Toggle: a "Show direction" toggle in the editor's settings or toolbar:

<button
  onClick={() => setShowDirection((v) => !v)}
  data-testid="show-direction"
  title="Show path direction"
>
  <ArrowRight size={12} />
</button>

Render: when showDirection is true, draw small arrows on the path:

// At the midpoint of each segment, draw a small arrow
for (let i = 0; i < p.nodes.length - 1; i++) {
  const mid = midpoint(p.nodes[i], p.nodes[i + 1]);
  const angle = atan2(p.nodes[i + 1].y - p.nodes[i].y, p.nodes[i + 1].x - p.nodes[i].x);
  drawArrow(ctx, mid, angle);
}

Use cases:

Verify the direction is correct (e.g., the "outside" of a letter is on the right side of the path)
Reverse the direction (per #316) and see the change visually
Match the direction to a reference image

History: no history needed (it's a visual aid).

Severity

Low. The user can infer direction. Power users with stitch-direction needs notice.

Discovered by

Gap analysis (2026-10-02) of editor preview affordances.

#316 (open) — Reverse path. The action is the response to "wrong direction."
#293 (open) — Set as background. The visual aid is the parallel.
Figma's path direction indicator is the reference.

## Finding `grep -rn 'direction.*arrow\|pathDirection' src/components/editor/` returns 0. The editor has no direction indicator. For circular or closed paths, the stitch direction (clockwise vs counter-clockwise) affects: - Satin stitch appearance (light reflection) - Fill stitch direction (the "grain" of the fill) - Embroidery convention (most fabrics have a "right side up") A user with a closed path: - Doesn't know which way the nodes go - Can't control the direction The fix is a small arrow at each node, or a single arrow on the path's first segment, showing the direction. ## Where - canvasRenderer: `src/components/editor/canvasRenderer.ts` (where nodes are drawn) - No direction indicator: `grep -rn 'directionArrow' src/components/editor/` returns 0 ## Suggested fix shape 1. **Toggle**: a "Show direction" toggle in the editor's settings or toolbar: ```tsx <button onClick={() => setShowDirection((v) => !v)} data-testid="show-direction" title="Show path direction" > <ArrowRight size={12} /> </button> ``` 2. **Render**: when `showDirection` is true, draw small arrows on the path: ```ts // At the midpoint of each segment, draw a small arrow for (let i = 0; i < p.nodes.length - 1; i++) { const mid = midpoint(p.nodes[i], p.nodes[i + 1]); const angle = atan2(p.nodes[i + 1].y - p.nodes[i].y, p.nodes[i + 1].x - p.nodes[i].x); drawArrow(ctx, mid, angle); } ``` 3. **Use cases**: - Verify the direction is correct (e.g., the "outside" of a letter is on the right side of the path) - Reverse the direction (per #316) and see the change visually - Match the direction to a reference image 4. **History**: no history needed (it's a visual aid). ## Severity Low. The user can infer direction. Power users with stitch-direction needs notice. ## Discovered by Gap analysis (2026-10-02) of editor preview affordances. ## Related - #316 (open) — Reverse path. The action is the response to "wrong direction." - #293 (open) — Set as background. The visual aid is the parallel. - Figma's path direction indicator is the reference.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue

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

Editor's Path Properties has 'Path length' but no 'path direction' visualization — user with a closed circular path can't tell which way the path goes (clockwise vs counter-clockwise) without zooming in #380

Mark referenced this issue

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

Editor's Path Properties has 'Path length' but no 'path direction' visualization — user with a closed circular path can't tell which way the path goes (clockwise vs counter-clockwise) without zooming in #380

Mark referenced this issue from a commit

2026-10-05 02:15:28 +00:00

feat(#329): editor Show Direction toggle for segment direction arrows

Mark commented

2026-10-05 02:19:31 +00:00

Author

Owner

Shipped in commit 65f33b1 on main. Adds a right-panel "Show Direction" toggle (snap-settings family, default off) and a drawDirectionArrows helper that paints a small arrow at the midpoint of every segment pointing from nodes[i] to nodes[i+1].

Implementation mirrors the #325 Show Satin Preview pattern: optional SnapSettings.showDirection (back-compat default false), gated render between the satin band pass and the centerline pass so the arrows sit on top of the satin band but under the centerline stroke. z-order: grid → satin band → direction arrows → centerline → node handles → snap indicator.

Matters most for closed paths (where the first and last node are the same point) so the user can tell clockwise from counter-clockwise without tracing the node list. Also serves as visual confirmation that reverse-path (#316) actually flipped the node order.

Tests: 2131 passed (173 files) including new issue-329.test.tsx (6), canvasRenderer.test.ts #329 block (7), EditorCanvas.test.tsx #329 wiring (3). tsc clean.

Shipped in commit 65f33b1 on main. Adds a right-panel "Show Direction" toggle (snap-settings family, default off) and a `drawDirectionArrows` helper that paints a small arrow at the midpoint of every segment pointing from `nodes[i]` to `nodes[i+1]`. Implementation mirrors the #325 Show Satin Preview pattern: optional `SnapSettings.showDirection` (back-compat default false), gated render between the satin band pass and the centerline pass so the arrows sit on top of the satin band but under the centerline stroke. z-order: grid → satin band → direction arrows → centerline → node handles → snap indicator. Matters most for closed paths (where the first and last node are the same point) so the user can tell clockwise from counter-clockwise without tracing the node list. Also serves as visual confirmation that reverse-path (#316) actually flipped the node order. Tests: 2131 passed (173 files) including new issue-329.test.tsx (6), canvasRenderer.test.ts #329 block (7), EditorCanvas.test.tsx #329 wiring (3). tsc clean.

Mark closed this issue

2026-10-05 02:19:40 +00:00

Mark referenced this issue

2026-10-05 02:59:21 +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-05 03:10:18 +00:00

feat(#333): editor Highlight Selected Node toggle + 'Node X of Y' label

Mark referenced this issue

2026-10-05 13:46:28 +00:00

Editor's Node Properties section has 'X' and 'Y' displays but no 'X input' / 'Y input' to type a precise position — user wanting to nudge a node by 0.5mm has to drag (low precision) #360

Mark referenced this issue from a commit