Editor Selected Nodes X/Y coordinate inputs are read-only (EditorRightPanel.tsx:178-198) — user can't enter numeric values, has to drag on canvas #141

New issue

Closed

opened 2026-10-03 04:07:30 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 04:07:30 +00:00

Owner

Finding

The Editor's Selected Nodes section has X and Y coordinate inputs (src/components/editor/EditorRightPanel.tsx:178-198) that are read-only. The user can see the node's coordinates but cannot edit them numerically — they have to drag the node on the canvas to move it.

For precision work (a user with a specific stitch placement in mind, or someone converting from another design tool with exact coordinates), numeric entry is the standard expectation. A read-only input labeled "X" / "Y" is misleading.

Where

src/components/editor/EditorRightPanel.tsx:178-198 — both the X and Y inputs have the readOnly attribute and onChange is not wired. The form is purely informational.

Suggested fix shape

Remove readOnly and add an onChange handler that calls onUpdateNodePosition(x, y) (or whatever the prop is named) when the user types a new value. The handler should:

Coerce to a number
Round or accept decimals based on the existing display (currently rounded to integers)
Debounce or commit on blur (don't update on every keystroke — the user is mid-typing)
Update the firstSelectedNode in the editor's state

If the architecture is set up so only the canvas can update node positions, the input change should call a new prop like onUpdateNodeCoordinates(nodeId, { x, y }) and the implementation in Editor.tsx calls the existing state setter.

Severity

Low. The canvas drag is functional; numeric entry is a power-user feature.

Discovered by

Gap analysis (2026-10-02) of editor right panel input handling.

The X/Y inputs being read-only may have been intentional to keep the canvas as the source of truth. If so, the fix is to add numeric entry on top of the canvas, not replace it.

## Finding The Editor's Selected Nodes section has X and Y coordinate inputs (`src/components/editor/EditorRightPanel.tsx:178-198`) that are **read-only**. The user can see the node's coordinates but cannot edit them numerically — they have to drag the node on the canvas to move it. For precision work (a user with a specific stitch placement in mind, or someone converting from another design tool with exact coordinates), numeric entry is the standard expectation. A read-only input labeled "X" / "Y" is misleading. ## Where `src/components/editor/EditorRightPanel.tsx:178-198` — both the X and Y inputs have the `readOnly` attribute and `onChange` is not wired. The form is purely informational. ## Suggested fix shape Remove `readOnly` and add an `onChange` handler that calls `onUpdateNodePosition(x, y)` (or whatever the prop is named) when the user types a new value. The handler should: - Coerce to a number - Round or accept decimals based on the existing display (currently rounded to integers) - Debounce or commit on blur (don't update on every keystroke — the user is mid-typing) - Update the `firstSelectedNode` in the editor's state If the architecture is set up so only the canvas can update node positions, the input change should call a new prop like `onUpdateNodeCoordinates(nodeId, { x, y })` and the implementation in `Editor.tsx` calls the existing state setter. ## Severity Low. The canvas drag is functional; numeric entry is a power-user feature. ## Discovered by Gap analysis (2026-10-02) of editor right panel input handling. ## Related - The X/Y inputs being read-only may have been intentional to keep the canvas as the source of truth. If so, the fix is to add numeric entry on top of the canvas, not replace it.

Mark added the

feature-request

triage-approved

labels

2026-10-03 04:07:30 +00:00

Mark referenced this issue from a commit

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

fix(#141): X/Y coordinate inputs in Selected Nodes are now editable

Mark commented

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

Author

Owner

Shipped in commit 5c6da6f on main.

The X and Y inputs in the Editor's 'Selected Nodes' section are now editable. Added a NodeCoordInput helper that:

Tracks a local edit buffer so typing isn't fought by parent re-renders.
Commits the rounded integer on blur; Enter blurs (commit), Escape reverts.
Re-seeds from props when the selected node changes or a canvas drag updates the position.
Routes through onUpdateNodePosition → handleUpdateNodePosition in Editor.tsx, which goes through pushHistory so undo works the same way as onUpdateNodeType and onNodeDrag.

8 new tests added (editable state, no-commit-on-keystroke, commit-on-blur, decimal rounding, unchanged-value skip, non-numeric revert, Enter commit, Escape revert). All 16 tests in EditorRightPanel.test.tsx pass; tsc + eslint clean.

**Shipped in commit 5c6da6f on main.** The X and Y inputs in the Editor's 'Selected Nodes' section are now editable. Added a `NodeCoordInput` helper that: - Tracks a local edit buffer so typing isn't fought by parent re-renders. - Commits the rounded integer on blur; Enter blurs (commit), Escape reverts. - Re-seeds from props when the selected node changes or a canvas drag updates the position. - Routes through `onUpdateNodePosition` → `handleUpdateNodePosition` in Editor.tsx, which goes through `pushHistory` so undo works the same way as `onUpdateNodeType` and `onNodeDrag`. 8 new tests added (editable state, no-commit-on-keystroke, commit-on-blur, decimal rounding, unchanged-value skip, non-numeric revert, Enter commit, Escape revert). All 16 tests in `EditorRightPanel.test.tsx` pass; tsc + eslint clean.

Mark closed this issue

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

Mark referenced this issue

2026-10-04 22:15:03 +00:00

Editor has no 'node' input modal — user wanting to precisely set a node's (x, y) coordinates (vs dragging) has to drag and read the right panel, no in-canvas input field #311