91 Arrow Binding. 91 of 95.
91/EDITOR GEOMETRY/91 of 95
Arrow Binding
Connectors should follow their nodes.
Best experienced with a pointer.
The problem
If connector ends stay fixed in canvas space, moving nodes leaves dangling arrows that no longer attach.
The solution
Arrows track node anchors and switch sides with sticky hysteresis.
Experiment
Play with the values
12px
0px
How it works
- A connector is bound to anchors on its two nodes, not to a freehand path.
- When either node moves, the connector follows that transform.
- The closest sides are recomputed so the arrow can switch edges.
- Hysteresis keeps the side from flickering when the pointer sits near a corner.
- The path is redrawn between the chosen anchors.
- The arrowhead stays oriented along the final segment.
Seen in
Flowcharts
Edges stay glued to boxes as the diagram is rearranged.
Architecture diagrams
Service connectors rebind to nearest sides without flicker.
Mind maps
Branches follow their nodes when clusters are dragged.
UML editors
Association lines track class boxes with stable side anchors.