Import it from @grafloria/renderer.
An edge, as a host hands it in. Node-to-node, like React Flow.
router (where the line goes) and connector (how it is drawn, by registered
name) are separate, per-link settings that round-trip through serialize(). metadata is how a link names its anchor and its connection-point strategy
(floating edges), and waypoints restore saved bends.
tsinterface EdgeSpec
Properties
| Name | Type | Default | Description |
|---|---|---|---|
id? | string | ||
source | string | Source NODE id (a port id also resolves, for full control). | |
target | string | Target NODE id. | |
sourceHandle? | string | Port id, or a bare side name ('right'). Naming a handle PINS the edge to that port. When neither handle is named the edge is PORT-FACING: it attaches to the node's real port on whichever side faces its partner (the 'port-facing' strategy), so a layouted tree connects bottom→top instead of looping out of a frozen right→left pick — and the endpoint always sits on a port, never sliding along the … | |
targetHandle? | string | Port id, a bare side name ('left'), or a side AT a point along it: 'left@36' (36 px down the left side), 'bottom@138' (138 px from the bottom's left end), 'right@50%'. See sourceHandle for the default. | |
type? | 'direct' | 'smooth' | 'orthogonal' | 'bezier' | ||
router? | LinkRouterName | WHERE the line goes: straight | orthogonal | manhattan | avoid | elk, or any router registered on the RoutingEngine. Unset = derived from type. | |
connector? | LinkConnectorName | HOW the polyline is drawn: straight | rounded | smooth | bezier, or any name passed to registerConnector. Unset = derived from type. | |
label? | string | ||
labelPlacement? | 'on' | 'above' | 'below' | Where the label sits: 'on' the line on its own little box (the default), or 'above' / 'below' it with no box — the labels of the diagrams AI tools draw. Decided against the line's direction where the label lands, so on a vertical run 'above' means to its left. | |
labelStyle? | LabelStyle | The label's own colour, size, weight, family, background ('none' for no box). | |
waypoints? | Point[] | The bends the line must take, in world coordinates — interior points only; its ends stay on their ports. Drawn as MANUAL waypoints (the user's own bends), so the router keeps them: "M580,264 V204 H850 V154" is waypoints: [{ x: 580, y: 204 }, { x: 850, y: 204 }]. | |
style? | Partial<LinkStyle> | ||
selected? | boolean | Select (or deselect) the edge. Omitted, the selection is left alone; see NodeSpec.selected. | |
data? | Record<string, any> | ||
metadata? | Record<string, any> | Link metadata. This is how a link names its sourceAnchor / targetAnchor and its connectionPoint strategy — i.e. how floating edges are turned on per link. | |
points? | Point[] | Explicit waypoints. Restores a user-edited route. |
Was this page helpful?