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