Step 16 - connectors
1 min read
Implement the 'connection' element type and connect tool.
Model:
a connection stores ONLY fromId, toId, optional text label, color, dashed - never coordinates. The route is derived at draw time from the two elements' current bounds, so it can never go stale.
Routing (util module, with specs):
pick the best side of each node (nearest facing sides), then draw an orthogonal elbow path between the two anchor points with an arrowhead at the target; degenerate to a straight line when the nodes are roughly aligned on an axis. Center the label on the longest segment with a background pill for legibility.
Connect tool:
click a source element (highlight it), then click a target - creates the connection; Escape cancels a pending connect. Clicking the same pair again does not duplicate (dedupe on from+to). Double-click a connection to edit its label in the floating editor.
Integration with existing behavior:
- Connections live in the middle paint band (already handled by orderForDraw).
- Deleting or erasing a node deletes its dangling connections (withDanglingConnections from prompt 08 now applies everywhere).
- Duplicate/paste already remaps fromId/toId (prompt 08) - verify with a spec.
- Connection-align snap: while dragging a node that has connections, snap its center to a connected neighbor's center axis within 16 world units, so the elbow collapses into a satisfying straight line.
- Dashed toggle and color apply.
Acceptance: connect two notes, drag one around - the elbow re-routes live and snaps straight when aligned; deleting a node removes its arrows; labels edit and render on the route.
Discussion
0 commentsNo comments yet. Start the discussion.