Editor's Path Properties section has no 'selected node' indicator when a single node is selected — user can't tell which node in the path is currently active (vs the others), no visual highlight #333

New issue

Closed

opened 2026-10-04 03:53:41 +00:00 by Mark · 0 comments

Mark commented

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

Owner

Finding

grep -rn 'selectedNode.*indicator\|highlightNode' src/components/editor/ returns 0. The selected node is the one with the handle drawn larger, but the visual difference is subtle.

A user with a path of 20 nodes:

Selects node 7 (Tab to it)
Wants to verify "yes, node 7 is selected"
The visual is subtle — node 7 is a slightly bigger circle
Hard to tell

The fix is a stronger visual highlight for the selected node(s).

Where

canvasRenderer: src/components/editor/canvasRenderer.ts (where nodes are drawn)
Subtle indicator: grep -rn 'selectedNode' src/components/editor/ returns 0 for visual styling

Suggested fix shape

Render: the selected node is drawn with:

A larger circle (2x the size)
A bright color (gold, '#E6A948', matching the brand)
A halo or ring around it
An animated pulse for high visibility

Hover state: when hovering a node (without selecting), show a faint highlight (e.g., 1.2x the size, light gold).
Multi-select: when multiple nodes are selected, draw each with the highlight.
Polish: a small label "Node 7 of 20" near the selected node (per #305's coordinates).

Severity

Low. The user can verify via the right panel. Power users with complex paths notice.

Discovered by

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

#305 (open) — Show coordinates. Same node; the coords are the read.
#311 (open) — Node input. Same node; the input is the write.
The Tab cycle (per #194) is the navigation; the highlight is the visual feedback.

## Finding `grep -rn 'selectedNode.*indicator\|highlightNode' src/components/editor/` returns 0. The selected node is the one with the handle drawn larger, but the visual difference is subtle. A user with a path of 20 nodes: - Selects node 7 (Tab to it) - Wants to verify "yes, node 7 is selected" - The visual is subtle — node 7 is a slightly bigger circle - Hard to tell The fix is a stronger visual highlight for the selected node(s). ## Where - canvasRenderer: `src/components/editor/canvasRenderer.ts` (where nodes are drawn) - Subtle indicator: `grep -rn 'selectedNode' src/components/editor/` returns 0 for visual styling ## Suggested fix shape 1. **Render**: the selected node is drawn with: - A larger circle (2x the size) - A bright color (gold, '#E6A948', matching the brand) - A halo or ring around it - An animated pulse for high visibility 2. **Hover state**: when hovering a node (without selecting), show a faint highlight (e.g., 1.2x the size, light gold). 3. **Multi-select**: when multiple nodes are selected, draw each with the highlight. 4. **Polish**: a small label "Node 7 of 20" near the selected node (per #305's coordinates). ## Severity Low. The user can verify via the right panel. Power users with complex paths notice. ## Discovered by Gap analysis (2026-10-02) of editor node affordances. ## Related - #305 (open) — Show coordinates. Same node; the coords are the read. - #311 (open) — Node input. Same node; the input is the write. - The Tab cycle (per #194) is the navigation; the highlight is the visual feedback.