wacrm/src/components/flows
Arnas Donauskas dcdfff938d
feat(flows): canvas / mind-map view (PR 2b of 3 — full editing)
Closes the editing-affordance gap from PR 2a. The canvas is now in
full parity with the list view for everything that fits in a node
graph: connections, deletes, and adding nodes all work on-canvas.

Adds:

  - Per-slot Handle components on the custom node renderer. Single-
    outgoing types get one handle on the right edge; condition gets
    `true` / `false` handles; send_buttons and send_list render slot
    rows inside the card with one handle each, so the user can SEE
    which button or list row they're wiring. Every non-start node
    gets a target handle on the left.

  - Drag-to-connect (`onConnect`). Looks up the source node, dispatches
    the right config patch via the new `applyEdgeConnection(node,
    sourceHandle, target)` helper, and routes through updateNodeConfig.
    Rejects self-loops silently (a button whose target is its own node
    = infinite reprompt).

  - Keyboard delete on nodes (Backspace + Delete, both for cross-OS
    parity). Routes through removeNode, which now ALSO unlinks every
    inbound reference via the new `unlinkNodeReferences(nodes, key)`
    helper. No more dangling arrows after a delete — the validator
    previously flagged these as errors and the user had to chase them
    down manually.

  - Edge delete. Selecting an edge + Delete clears just that slot's
    next_node_key (rather than removing anything), via the same
    applyEdgeConnection helper passing "" as the target.

  - Floating "+ Add node" button (React-Flow Panel, bottom-right).
    Same dropdown as the list view; drops the new node at the visible
    viewport center via reactFlow.screenToFlowPosition.

New pure helpers in src/lib/flows/edges.ts (no React, fully unit-
tested — 18 new tests, 319 total passing):

  - outgoingSlots(node) — list of {id, label} per outgoing slot.
  - applyEdgeConnection(node, sourceHandle, targetKey) — config patch
    for a drag-to-connect, or null for unrecognised handles.
  - unlinkNodeReferences(nodes, deletedKey) — clears every direct +
    nested reference to deletedKey. Returns nodes-by-identity when
    no reference matches to avoid needless re-renders.

The hook's removeNode is the only consumer of unlinkNodeReferences
right now, which means LIST-view deletes also stop leaving dangling
refs — strict improvement for both views.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-29 20:32:59 +02:00
..
forms feat(flows): canvas / mind-map view (PR 2a of 3 — editable foundation) 2026-05-29 20:17:15 +02:00
flow-builder.tsx feat(flows): canvas / mind-map view (PR 2a of 3 — editable foundation) 2026-05-29 20:17:15 +02:00
flow-canvas.tsx feat(flows): canvas / mind-map view (PR 2b of 3 — full editing) 2026-05-29 20:32:59 +02:00
flow-editor-shell.tsx feat(flows): canvas / mind-map view (PR 2a of 3 — editable foundation) 2026-05-29 20:17:15 +02:00
flow-editor-state.test.ts feat(flows): canvas / mind-map view (PR 2a of 3 — editable foundation) 2026-05-29 20:17:15 +02:00
flow-editor-state.tsx feat(flows): canvas / mind-map view (PR 2b of 3 — full editing) 2026-05-29 20:32:59 +02:00
shared.tsx feat(flows): canvas / mind-map view (PR 2a of 3 — editable foundation) 2026-05-29 20:17:15 +02:00