Utils

addEdge()

This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.

Various events on the ReactFlow component can produce an EdgeChange that describes how to update the edges of your flow in some way. If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.

applyNodeChanges()

Various events on the ReactFlow component can produce an NodeChange that describes how to update the edges of your flow in some way. If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.

getBezierPath()

The getBezierPath util returns everything you need to render a bezier edge between two nodes.

getConnectedEdges()

Given an array of nodes that may be connected to one another and an array of all your edges, this util gives you an array of edges that connect any of the given nodes together.

getIncomers()

This util is used to tell you what nodes, if any, are connected to the given node as the source of an edge.

getMarkerEnd()

Helper that returns internal marker id or user defined marker id.

getNodesBounds()

Returns the bounding box that contains all the given nodes in an array. This can be useful when combined with getTransformForBounds to calculate the correct transform to fit the given nodes in a viewport.

getOutgoers()

This util is used to tell you what nodes, if any, are connected to the given node as a the target of an edge.

getRectOfNodes()

getSimpleBezierPath()

The getSimpleBezierPath util returns everything you need to render a simple bezier edge between two nodes.

getSmoothStepPath()

The getSmoothStepPath util returns everything you need to render a stepped path between two nodes. The borderRadius property can be used to choose how rounded the corners of those steps are.

getStraightPath()

Calculates the straight line path between two points.

getTransformForBounds()

This util tells you what to set the viewport to in order to fit the given bounds. You might use this to pre-calculate the viewport for a given set of nodes on the server or calculate the viewport for the given bounds _without_ changing the viewport directly.