Skip to main content

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 edge
Type:
(item: any) => element is Edge

isNode​

Description:
Returns true if the passed element is a node
Type:
(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
Type:
(edgeParams: Edge, edges: Edge[]): Edge[]

updateEdge​

Description:
Can be used as a helper for onEdgeUpdate. Returns the edges with the updated edge
Type:
(oldEdge: Edge, newConnection: Connection, edges: Edge[]) => void

getOutgoers​

Description:
Returns all direct child nodes of the passed node
Type:
(node: Node, nodes: Node[], edges: Edge[]) => Node[]

getIncomers​

Description:
Returns all direct incoming nodes of the passed node
Type:
(node: Node, nodes: Node[], edges: Edge[]) => Node[]

getConnectedEdges​

Description:
Returns all edges that are connected to the passed nodes
Type:
(nodes: Node[], edges: Edge[]) => Edge[]

getTransformForBounds​

Description:
Returns the Transform ([x, y, zoom]) for the passed params
Type:
(bounds: Rect, width: number, height: number, minZoom: number, maxZoom: number, padding: number = 0.1) => Transform

getRectOfNodes​

Description:
Returns the rect ({ x: number, y: number, width: number, height: number }) for the passed nodes array
Type:
(nodes: Node[]) => Rect