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

New issue

Closed

opened 2026-10-04 03:57:16 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:57:16 +00:00

Owner

Finding

The Node Properties section shows the selected node's (x, y) as a display. It may or may not have input fields.

grep -rn 'onUpdateNodePosition' src/components/editor/EditorRightPanel.tsx returns 0. No input.

A user wanting to nudge a node by 0.5mm:

Has to drag
Drag is imprecise (0.5mm is hard to hit)
Has to drag, read, adjust, repeat

The fix is (x, y) input fields.

This is similar to #311 but specifically for the X/Y inputs (vs other node properties).

Where

Node Properties: src/components/editor/EditorRightPanel.tsx
No X/Y input: grep -rn 'onUpdateNodePosition' src/components/editor/ returns 0

Suggested fix shape

UI: two number inputs for x and y:

<div className="flex items-center gap-2">
  <label>X</label>
  <input
    type="number"
    step="0.1"
    value={node.x.toFixed(2)}
    onChange={(e) => onUpdateNodePosition(node.id, Number(e.target.value), node.y)}
    className="w-16 px-2 py-1 border rounded text-[11px]"
  />
  <label>Y</label>
  <input
    type="number"
    step="0.1"
    value={node.y.toFixed(2)}
    onChange={(e) => onUpdateNodePosition(node.id, node.x, Number(e.target.value))}
    className="w-16 px-2 py-1 border rounded text-[11px]"
  />
</div>

Validation: clamp to reasonable bounds. The user can type any value but extreme ones are clamped.
History: each input change is a single undoable action (debounce on Enter, not on every keystroke).
Visual feedback: the node moves to the new position in real time as the user types.
Use cases:

Precise positioning
Aligning to a specific coordinate
Matching a reference image

Severity

Low. The user can drag. Power users with precise needs notice.

Discovered by

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

#311 (open) — Node input. Same surface; this is the X/Y input specifically.
#353 (open) — Path position input. Same family; the path is the parent.
Figma/Illustrator have node position inputs. Standard.

## Finding The Node Properties section shows the selected node's (x, y) as a display. It may or may not have input fields. `grep -rn 'onUpdateNodePosition' src/components/editor/EditorRightPanel.tsx` returns 0. No input. A user wanting to nudge a node by 0.5mm: - Has to drag - Drag is imprecise (0.5mm is hard to hit) - Has to drag, read, adjust, repeat The fix is (x, y) input fields. This is similar to #311 but specifically for the X/Y inputs (vs other node properties). ## Where - Node Properties: `src/components/editor/EditorRightPanel.tsx` - No X/Y input: `grep -rn 'onUpdateNodePosition' src/components/editor/` returns 0 ## Suggested fix shape 1. **UI**: two number inputs for x and y: ```tsx <div className="flex items-center gap-2"> <label>X</label> <input type="number" step="0.1" value={node.x.toFixed(2)} onChange={(e) => onUpdateNodePosition(node.id, Number(e.target.value), node.y)} className="w-16 px-2 py-1 border rounded text-[11px]" /> <label>Y</label> <input type="number" step="0.1" value={node.y.toFixed(2)} onChange={(e) => onUpdateNodePosition(node.id, node.x, Number(e.target.value))} className="w-16 px-2 py-1 border rounded text-[11px]" /> </div> ``` 2. **Validation**: clamp to reasonable bounds. The user can type any value but extreme ones are clamped. 3. **History**: each input change is a single undoable action (debounce on Enter, not on every keystroke). 4. **Visual feedback**: the node moves to the new position in real time as the user types. 5. **Use cases**: - Precise positioning - Aligning to a specific coordinate - Matching a reference image ## Severity Low. The user can drag. Power users with precise needs notice. ## Discovered by Gap analysis (2026-10-02) of editor node properties. ## Related - #311 (open) — Node input. Same surface; this is the X/Y input specifically. - #353 (open) — Path position input. Same family; the path is the parent. - Figma/Illustrator have node position inputs. Standard.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:57:16 +00:00

Mark commented

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

Author

Owner

The (X, Y) input already exists in the Node Properties section. See src/components/editor/EditorRightPanel.tsx lines 2522-2537 (the two NodeCoordInput components, axis=x and axis=y, only when firstSelectedNode is set), backed by NodeCoordInput at line 5476 (controlled buffer, Enter commits, Escape reverts, NaN/empty-string guard, Math.round to 1mm precision). Wired into the Editor via handleUpdateNodePosition (src/pages/Editor.tsx line 1957, with pushHistory per change) and the onUpdateNodePosition prop (EditorRightPanel.tsx line 54, Editor.tsx line 4476). Pinned by tests in issue-298.test.tsx, issue-279, issue-280, issue-281, issue-287, issue-289, issue-293, issue-298, issue-299, issue-300, issue-314, issue-318, and ~20 other sibling files in src/components/editor/. The gap analysis in the issue body predates #211 / #318 / #329 / #342 / #353 etc. which added the Node Properties X/Y inputs. Sibling #353 (path X/Y Translate, just landed on main in d99fe73) followed the same pattern. Closing as already-shipped.

The (X, Y) input already exists in the Node Properties section. See `src/components/editor/EditorRightPanel.tsx` lines 2522-2537 (the two `NodeCoordInput` components, axis=`x` and axis=`y`, only when `firstSelectedNode` is set), backed by `NodeCoordInput` at line 5476 (controlled buffer, Enter commits, Escape reverts, NaN/empty-string guard, `Math.round` to 1mm precision). Wired into the Editor via `handleUpdateNodePosition` (`src/pages/Editor.tsx` line 1957, with `pushHistory` per change) and the `onUpdateNodePosition` prop (EditorRightPanel.tsx line 54, Editor.tsx line 4476). Pinned by tests in `issue-298.test.tsx`, `issue-279`, `issue-280`, `issue-281`, `issue-287`, `issue-289`, `issue-293`, `issue-298`, `issue-299`, `issue-300`, `issue-314`, `issue-318`, and ~20 other sibling files in `src/components/editor/`. The gap analysis in the issue body predates #211 / #318 / #329 / #342 / #353 etc. which added the Node Properties X/Y inputs. Sibling #353 (path X/Y Translate, just landed on main in `d99fe73`) followed the same pattern. Closing as already-shipped.

Mark closed this issue

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