Editor has no 'smart guides' / 'measurement annotations' during drag — user dragging a path sees no live distance to other paths, no 'this is 2mm from the hoop edge' annotation #334

New issue

Closed

opened 2026-10-04 03:53:41 +00:00 by Mark · 1 comment

Mark commented

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

Owner

Finding

grep -rn 'smartGuide\|measureAnnotation' src/components/editor/ returns 0. The editor has no smart guides.

A user dragging a path:

Wants to know "am I exactly 5mm from the edge?"
Currently: estimates by eye
Has to drop the path, read the right panel, adjust, repeat

The fix is smart guides: when the path is within 2mm of an edge, another path, or a snap target, show a small annotation: "5mm from top edge."

Where

canvasRenderer: src/components/editor/canvasRenderer.ts (where the guides would be drawn)
No smart guides: grep -rn 'smartGuide' src/components/editor/ returns 0

Suggested fix shape

During drag: while the user is dragging a path or node, check for snap candidates:

const candidates = [
  { type: 'hoop-edge', x: 0, y: 0, label: 'Hoop left edge' },
  { type: 'hoop-edge', x: hoopWidth, y: 0, label: 'Hoop right edge' },
  { type: 'other-path-node', x: node.x, y: node.y, label: 'Path 3, node 4' },
];

for (const candidate of candidates) {
  if (distance(dragPosition, candidate) < 5) {  // mm
    showGuide(candidate, distance(dragPosition, candidate));
  }
}

Render: a faint dashed line from the path to the snap target, with a small label "5.2 mm" near the target.
Use cases:

Aligning to the hoop edge
Aligning to another path's node
Distributing (equal spacing)

Performance: the check is per-mousemove; with 20 paths and 100 nodes, it's 2000 distance checks per move. Fast enough for 60fps.

Severity

Low. The user can verify visually. Power users with precise needs notice.

Discovered by

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

#303 (open) — Snap to other paths. Same family; the snap is the action, the guide is the visual.
#288 (open) — Grid. Same family; the grid is the static version.
Figma/Illustrator have smart guides; the editor's gap is the parallel.

## Finding `grep -rn 'smartGuide\|measureAnnotation' src/components/editor/` returns 0. The editor has no smart guides. A user dragging a path: - Wants to know "am I exactly 5mm from the edge?" - Currently: estimates by eye - Has to drop the path, read the right panel, adjust, repeat The fix is smart guides: when the path is within 2mm of an edge, another path, or a snap target, show a small annotation: "5mm from top edge." ## Where - canvasRenderer: `src/components/editor/canvasRenderer.ts` (where the guides would be drawn) - No smart guides: `grep -rn 'smartGuide' src/components/editor/` returns 0 ## Suggested fix shape 1. **During drag**: while the user is dragging a path or node, check for snap candidates: ```ts const candidates = [ { type: 'hoop-edge', x: 0, y: 0, label: 'Hoop left edge' }, { type: 'hoop-edge', x: hoopWidth, y: 0, label: 'Hoop right edge' }, { type: 'other-path-node', x: node.x, y: node.y, label: 'Path 3, node 4' }, ]; for (const candidate of candidates) { if (distance(dragPosition, candidate) < 5) { // mm showGuide(candidate, distance(dragPosition, candidate)); } } ``` 2. **Render**: a faint dashed line from the path to the snap target, with a small label "5.2 mm" near the target. 3. **Use cases**: - Aligning to the hoop edge - Aligning to another path's node - Distributing (equal spacing) 4. **Performance**: the check is per-mousemove; with 20 paths and 100 nodes, it's 2000 distance checks per move. Fast enough for 60fps. ## Severity Low. The user can verify visually. Power users with precise needs notice. ## Discovered by Gap analysis (2026-10-02) of editor drag affordances. ## Related - #303 (open) — Snap to other paths. Same family; the snap is the action, the guide is the visual. - #288 (open) — Grid. Same family; the grid is the static version. - Figma/Illustrator have smart guides; the editor's gap is the parallel.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue from a commit

2026-10-05 03:38:52 +00:00

feat(#334): editor Smart Guides — live distance pill between dragged node and snap target

Mark closed this issue

2026-10-05 03:49:06 +00:00

Mark commented

2026-10-05 03:49:11 +00:00

Author

Owner

Shipped as #334 → commit 0306b12 on origin/main ("feat(#334): editor Smart Guides — live distance pill between dragged node and snap target").

Adds an opt-in "Smart Guides" toggle in the right-panel Snap Settings that draws a faint amber dashed line + "X.X mm" pill between the node being dragged and the active snap target (hoop edge, another path's node, grid intersection). Default off so casual users see no canvas change.

Files touched: types.ts (SnapSettings.showSmartGuides), constants.ts (default false), canvasRenderer.ts (new drawSmartGuide helper), EditorCanvas.tsx (mirrors dragLastSnapTargetRef into snapSource state; gates drawSmartGuide on toggle + live snap state), EditorRightPanel.tsx (ToggleRow). 14 new tests (6 panel + 6 renderer + 2 wiring); full suite 2201 pass.

Shipped as #334 → commit 0306b12 on origin/main ("feat(#334): editor Smart Guides — live distance pill between dragged node and snap target"). Adds an opt-in "Smart Guides" toggle in the right-panel Snap Settings that draws a faint amber dashed line + "X.X mm" pill between the node being dragged and the active snap target (hoop edge, another path's node, grid intersection). Default off so casual users see no canvas change. Files touched: types.ts (SnapSettings.showSmartGuides), constants.ts (default false), canvasRenderer.ts (new drawSmartGuide helper), EditorCanvas.tsx (mirrors dragLastSnapTargetRef into snapSource state; gates drawSmartGuide on toggle + live snap state), EditorRightPanel.tsx (ToggleRow). 14 new tests (6 panel + 6 renderer + 2 wiring); full suite 2201 pass.