Custom Connection Line
The connection line is the line that gets drawn while you connect two nodes with each other.
You can adjust the connection line by using the props documented in the connection line options section. If you want to implement a custom connection line, you can pass a React component to the connectionLineComponent
prop. The connection line component will receive the following props:
Connection Line Component Props
fromX
Description:
x position of the source handle
Type:
number
fromY
Description:
y position of the source handle
Type:
number
fromPosition
Description:
position of the source handle
Type:
Position
toX
Description:
x position of the target handle
Type:
number
toY
Description:
y position of the target handle
Type:
number
toPosition
Description:
position of the target handle
Type:
Position
connectionLineType
Description:
type
Type:
ConnectionLineType
connectionLineStyle
Description:
style
Type:
CSS.Properties
fromNode
Description:
the node where the connection comes from
Type:
Node
fromHandle
Description:
the handle where the connection comes from
Type:
HandleElement
You can find an implementation in the custom connection line example.