Graph Util Functions
If you are working with a controlled flow and you want to apply the changes to select, drag or remove a node or edge or if you want to connect two nodes with each other you need to pass the onNodesChange
/ onEdgesChange
and onConnect
handlers. In order to simplify this process there are some helper functions you can use:
import ReactFlow, { isNode, isEdge, applyNodeChanges, applyEdgeChanges, addEdge } from 'reactflow';
isEdge
Description:
Returns
true
if the passed element is an edgeType:
(item: any) => element is Edge
isNode
Description:
Returns
true
if the passed element is a nodeType:
(item: any) => element is Node
applyNodeChanges
Description:
Returns an array of nodes with the applied changes
Type:
(changes: NodeChange[], nodes: Node[]) => Node[]
applyEdgeChanges
Description:
Returns an array of edges with the applied changes
Type:
(changes: EdgeChange[], edges: Edge[]) => Edge[]
addEdge
Description:
Returns an array of edges with the added edge
updateEdge
Description:
Can be used as a helper for
onEdgeUpdate
. Returns the edges with the updated edgeType:
(oldEdge: Edge, newConnection: Connection, edges: Edge[]) => void
getOutgoers
Description:
Returns all direct child nodes of the passed node
getIncomers
Description:
Returns all direct incoming nodes of the passed node
getConnectedEdges
Description:
Returns all edges that are connected to the passed nodes
getTransformForBounds
Description:
Returns the Transform (
[x, y, zoom]
) for the passed params