Updatable Edges
yh-flow provides an "Updatable Edge" feature that allows users to reassign the endpoints of an existing connection.
How it Works
When an edge is marked as updatable: true and is selected in the view, blue circular handles appear at both ends (source and target). Drag a handle to another node to update the connection. If you don’t see handles, click the edge first to select it.
Basic Usage
In the demo below the edge is selected by default, so blue handles are visible at both ends. Try dragging the target from Node B to Node C. If you click the pane and the edge is deselected, click the edge again to show the handles.
Interactive Edge Update
API Configuration
Edge Properties
Set the following properties in your Edge object:
| Property | Type | Default | Description |
|---|---|---|---|
updatable | boolean | 'source' | 'target' | false | Whether to enable reconnection handles. If set to 'source' or 'target', only that end can be updated. |
selected | boolean | false | Handles are shown only when the edge is selected. Set selected: true on the edge if you want handles visible on load. |
curvature | number | 0.25 | Curvature of the bezier path (0.0 to 1.0). |
labelShowBg | boolean | false | Whether to show the background color for the label (used with labelBgColor). |
Events
| Event | Payload | Description |
|---|---|---|
@edge-update | { edge: Edge, connection: Connection } | Emitted when a user finishes dragging an endpoint to a new anchor. |