Editor has no mouse position readout — user designing precise shapes has no way to read the cursor's canvas coordinates, even though the state is tracked #221

New issue

Closed

opened 2026-10-04 00:06:21 +00:00 by Mark · 1 comment

Mark commented

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

Owner

Finding

src/components/editor/EditorCanvas.tsx tracks mousePos: Point (per the prop type and setMousePos call). The state is updated on every canvas pointer move. The header (EditorHeader.tsx) shows paths/stitches/stops counts but does NOT show the current mouse position.

A user designing a precise shape (e.g., a 100mm × 100mm square with corners at exactly (0,0), (100,0), (100,100), (0,100)):

Hovers the cursor over the canvas
Wants to know "is this position 95.4, 100.2? Should I nudge?"
Has no readout
Must click the canvas (which adds a node or finishes an action depending on the tool) to commit the position, then read it from the right panel after selecting the new node

Most vector editors show mouse coordinates in the status bar at the bottom of the canvas. The convention is "X, Y" in the document units (mm for this app, per MM_TO_PX).

Where

mousePos state: src/components/editor/EditorCanvas.tsx (set on pointer move)
Header: src/components/editor/EditorHeader.tsx (no position readout)
Bottom bar: src/components/editor/EditorThreadBar.tsx (the bottom bar shows thread stops, not cursor position)
MM_TO_PX: src/components/editor/constants.ts (the conversion)

Suggested fix shape

Add a small position readout to the bottom of the editor (next to or after the thread bar):

<div className="text-[12px] font-mono" style={{ color: '#A8A29E' }}>
  {Math.round(mousePos.x)} mm, {Math.round(mousePos.y)} mm
</div>

Plumb mousePos to the editor page (it's already in the canvas's state) and pass to a new bottom position bar or to the existing thread bar.

Optionally: also show "snapped to: nearest node 0.8mm" when the snap indicator is active.

Severity

Low. The user can click + read. Power users with precise work notice.

Discovered by

Gap analysis (2026-10-02) of editor status bar.

#170 (closed) — Editor snap toggles. The snap indicator is a separate visual; the position readout complements it.
#215 (open) — Editor save indicator. Same status bar / header area.

## Finding `src/components/editor/EditorCanvas.tsx` tracks `mousePos: Point` (per the prop type and `setMousePos` call). The state is updated on every canvas pointer move. The header (`EditorHeader.tsx`) shows paths/stitches/stops counts but does NOT show the current mouse position. A user designing a precise shape (e.g., a 100mm × 100mm square with corners at exactly (0,0), (100,0), (100,100), (0,100)): - Hovers the cursor over the canvas - Wants to know "is this position 95.4, 100.2? Should I nudge?" - Has no readout - Must click the canvas (which adds a node or finishes an action depending on the tool) to commit the position, then read it from the right panel after selecting the new node Most vector editors show mouse coordinates in the status bar at the bottom of the canvas. The convention is "X, Y" in the document units (mm for this app, per `MM_TO_PX`). ## Where - mousePos state: `src/components/editor/EditorCanvas.tsx` (set on pointer move) - Header: `src/components/editor/EditorHeader.tsx` (no position readout) - Bottom bar: `src/components/editor/EditorThreadBar.tsx` (the bottom bar shows thread stops, not cursor position) - MM_TO_PX: `src/components/editor/constants.ts` (the conversion) ## Suggested fix shape Add a small position readout to the bottom of the editor (next to or after the thread bar): ```tsx <div className="text-[12px] font-mono" style={{ color: '#A8A29E' }}> {Math.round(mousePos.x)} mm, {Math.round(mousePos.y)} mm </div> ``` Plumb `mousePos` to the editor page (it's already in the canvas's state) and pass to a new bottom position bar or to the existing thread bar. Optionally: also show "snapped to: nearest node 0.8mm" when the snap indicator is active. ## Severity Low. The user can click + read. Power users with precise work notice. ## Discovered by Gap analysis (2026-10-02) of editor status bar. ## Related - #170 (closed) — Editor snap toggles. The snap indicator is a separate visual; the position readout complements it. - #215 (open) — Editor save indicator. Same status bar / header area.

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue

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

Gallery has no filter by stitch count range, by thread count range, by hoop size, or by date range — only text search and favorites-only #223

Mark referenced this issue from a commit

2026-10-04 04:50:29 +00:00

feat(#221): Editor bottom-bar shows cursor mm position readout

Mark commented

2026-10-04 04:50:32 +00:00

Author

Owner

Shipped in commit 621351d on main.

Added src/components/editor/EditorPositionBar.tsx (small bottom-bar component that takes mousePos: Point and renders X mm, Y mm rounded to integers), wired it into src/pages/Editor.tsx just below the existing thread bar (so both bottom-bar surfaces look like one panel), and added a 4-test file at src/components/editor/EditorPositionBar.test.tsx. Full suite is green (1088 passing; the +4 from this card) and tsc -b + eslint on the touched files are clean.

No snap-distance companion readout was added in this pass — happy to follow up if you want the second half ("snapped to: nearest node 0.8 mm") wired up against the snap-indicator state.

Shipped in commit 621351d on main. Added `src/components/editor/EditorPositionBar.tsx` (small bottom-bar component that takes `mousePos: Point` and renders `X mm, Y mm` rounded to integers), wired it into `src/pages/Editor.tsx` just below the existing thread bar (so both bottom-bar surfaces look like one panel), and added a 4-test file at `src/components/editor/EditorPositionBar.test.tsx`. Full suite is green (1088 passing; the +4 from this card) and `tsc -b` + `eslint` on the touched files are clean. No snap-distance companion readout was added in this pass — happy to follow up if you want the second half ("snapped to: nearest node 0.8 mm") wired up against the snap-indicator state.

Mark closed this issue

2026-10-04 04:50:39 +00:00