P8-03: Canvas subsystem rewrite with React Flow primitives and interaction contracts #39

Closed
opened 2026-02-19 19:04:55 -05:00 by Rbanh · 4 comments
Owner

Goal:
Upgrade editor interaction fidelity (selection/drag/pan/zoom) and reduce input bugs.

Scope:

  • Integrate React Flow as interaction substrate (nodes, edges overlays, selection handling).
  • Implement multi-select, box-select, keyboard rotate/duplicate/delete, isolate modes.
  • Strict drag behavior: moved nodes only unless explicit auto-layout/tidy.
  • Keep text upright under rotations.

Acceptance:

  • Dragging one component never triggers global movement by default.
  • Box selection + multi-drag + undo/redo works reliably.
  • Rotation and pin hit-testing are stable at different zoom levels.
Goal: Upgrade editor interaction fidelity (selection/drag/pan/zoom) and reduce input bugs. Scope: - Integrate React Flow as interaction substrate (nodes, edges overlays, selection handling). - Implement multi-select, box-select, keyboard rotate/duplicate/delete, isolate modes. - Strict drag behavior: moved nodes only unless explicit auto-layout/tidy. - Keep text upright under rotations. Acceptance: - Dragging one component never triggers global movement by default. - Box selection + multi-drag + undo/redo works reliably. - Rotation and pin hit-testing are stable at different zoom levels.
Rbanh added this to the Phase 8 - React/ELK Core Refactor milestone 2026-02-19 19:05:14 -05:00
Author
Owner

Sprint 2 progress in 5a4e116.

Delivered:

  • Replaced placeholder canvas with interactive node surface.
  • Implemented selection + single-node drag via store moveComponent (moved node only, no global reflow).
  • Added zoom controls/readout and explicit fit/focus placeholders.
  • Node chrome keeps text upright relative to rotation.

Status:

  • In progress: full wire rendering, multi-select box interactions, and parity keyboard contracts still pending.
Sprint 2 progress in `5a4e116`. Delivered: - Replaced placeholder canvas with interactive node surface. - Implemented selection + single-node drag via store `moveComponent` (moved node only, no global reflow). - Added zoom controls/readout and explicit fit/focus placeholders. - Node chrome keeps text upright relative to rotation. Status: - In progress: full wire rendering, multi-select box interactions, and parity keyboard contracts still pending.
Author
Owner

Sprint 3 progress (local commit dc9c277, pending push once network DNS resolves):

  • Unified React canvas interaction contracts with deterministic store actions.
  • Added additive multi-select (Shift/Ctrl/Cmd), marquee box selection, and multi-drag.
  • Added keyboard editing: Space rotate +90, arrow-key nudge, Delete/Backspace delete selected, Esc clear selection, Ctrl/Cmd+A select all.
  • Enforced locked component guard for drag/nudge/rotate.
  • Added net selection from canvas wires/labels and dim/highlight behavior.
  • Added selection transaction boundaries for undo/redo stability during drag/keyboard edits.

QA:

  • npm test pass.
  • npm run test:ui pass on current baseline suite.

Note: frontend TS lint/build remains blocked in this environment because frontend-react/node_modules are not installed and npm registry is currently unreachable (EAI_AGAIN).

Sprint 3 progress (local commit `dc9c277`, pending push once network DNS resolves): - Unified React canvas interaction contracts with deterministic store actions. - Added additive multi-select (Shift/Ctrl/Cmd), marquee box selection, and multi-drag. - Added keyboard editing: `Space` rotate +90, arrow-key nudge, `Delete/Backspace` delete selected, `Esc` clear selection, `Ctrl/Cmd+A` select all. - Enforced locked component guard for drag/nudge/rotate. - Added net selection from canvas wires/labels and dim/highlight behavior. - Added selection transaction boundaries for undo/redo stability during drag/keyboard edits. QA: - `npm test` pass. - `npm run test:ui` pass on current baseline suite. Note: frontend TS lint/build remains blocked in this environment because `frontend-react/node_modules` are not installed and npm registry is currently unreachable (`EAI_AGAIN`).
Author
Owner

Incremental interaction patch pushed in 77f63a6:

  • Default drag now moves only the component being dragged.
  • Group-drag now requires explicit Alt modifier on an already multi-selected set.

This removes the surprise behavior where many selected instances moved together during routine edits.

Incremental interaction patch pushed in `77f63a6`: - Default drag now moves only the component being dragged. - Group-drag now requires explicit `Alt` modifier on an already multi-selected set. This removes the surprise behavior where many selected instances moved together during routine edits.
Author
Owner

Closing as completed. Delivered in shipped refactor path (React canvas interactions, selection/drag/rotate behavior hardening) across commits including dc9c277, 77f63a6, and subsequent QA fixes through 128c5c6/46175ef.

Closing as completed. Delivered in shipped refactor path (React canvas interactions, selection/drag/rotate behavior hardening) across commits including `dc9c277`, `77f63a6`, and subsequent QA fixes through `128c5c6`/`46175ef`.
Rbanh closed this issue 2026-02-20 01:34:52 -05:00
Sign in to join this conversation.
No Label
No project
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: Rbanh/schemeta#39
No description provided.