Editor has no 'measure distance' tool — user wanting to know the distance between two points (e.g., 'how wide is this path?') has to select both and read the right panel, no in-canvas measurement #304

New issue

Closed

opened 2026-10-04 03:49:06 +00:00 by Mark · 0 comments

Mark commented

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

Owner

Finding

grep -rn 'measure\|measureDistance' src/components/editor/ returns 0. The editor has no measure tool.

A user wanting to know:

"How wide is this path?"
"What's the distance from this point to that point?"
"What's the area of this shape?"

Has to:

Select the path
Read the right panel's "Path length" and "Total nodes"
But the panel may not show width/height directly

The fix is a measure tool: click two points, see the distance.

Where

Editor toolbar: src/components/editor/EditorToolbar.tsx (8 tools: select_nodes, add_node, delete_node, convert_node, draw_path, scissors, smooth, zoom)
No measure: grep -rn 'measure' src/components/editor/ returns 0
The geometry module: src/components/editor/geometry.ts

Suggested fix shape

Add to tool modes: add 'measure' to EditorToolMode:

export type EditorToolMode =
  | 'select_nodes'
  | 'add_node'
  | 'delete_node'
  | 'convert_node'
  | 'draw_path'
  | 'scissors'
  | 'smooth'
  | 'zoom'
  | 'measure';  // new

UI: a ruler icon in the toolbar, mapped to keyboard 'R'.
Behavior: when the measure tool is active:

Click first point: anchor
Move mouse: live distance shown next to cursor
Click second point: distance locked in, shown in a small badge near the click
ESC: clear

Output: a small "Length: 24.5 mm" text near the second point. Optionally draw a faint line between the two points with the distance labeled.
Multi-segment: clicking multiple times builds a polyline, and the total length is shown.

Severity

Low. The user can read the right panel. Power users with precise measurements notice.

Discovered by

Gap analysis (2026-10-02) of editor tools.

The 8 existing tools (per the type). Adding a 9th.
#260 (open) — Hoop size mismatch. The measure tool can show "your path is 4.2 mm outside the hoop" inline.
Figma/Illustrator have measure tools. Standard.

## Finding `grep -rn 'measure\|measureDistance' src/components/editor/` returns 0. The editor has no measure tool. A user wanting to know: - "How wide is this path?" - "What's the distance from this point to that point?" - "What's the area of this shape?" Has to: - Select the path - Read the right panel's "Path length" and "Total nodes" - But the panel may not show width/height directly The fix is a measure tool: click two points, see the distance. ## Where - Editor toolbar: `src/components/editor/EditorToolbar.tsx` (8 tools: select_nodes, add_node, delete_node, convert_node, draw_path, scissors, smooth, zoom) - No measure: `grep -rn 'measure' src/components/editor/` returns 0 - The geometry module: `src/components/editor/geometry.ts` ## Suggested fix shape 1. **Add to tool modes**: add 'measure' to `EditorToolMode`: ```ts export type EditorToolMode = | 'select_nodes' | 'add_node' | 'delete_node' | 'convert_node' | 'draw_path' | 'scissors' | 'smooth' | 'zoom' | 'measure'; // new ``` 2. **UI**: a ruler icon in the toolbar, mapped to keyboard 'R'. 3. **Behavior**: when the measure tool is active: - Click first point: anchor - Move mouse: live distance shown next to cursor - Click second point: distance locked in, shown in a small badge near the click - ESC: clear 4. **Output**: a small "Length: 24.5 mm" text near the second point. Optionally draw a faint line between the two points with the distance labeled. 5. **Multi-segment**: clicking multiple times builds a polyline, and the total length is shown. ## Severity Low. The user can read the right panel. Power users with precise measurements notice. ## Discovered by Gap analysis (2026-10-02) of editor tools. ## Related - The 8 existing tools (per the type). Adding a 9th. - #260 (open) — Hoop size mismatch. The measure tool can show "your path is 4.2 mm outside the hoop" inline. - Figma/Illustrator have measure tools. Standard.