Utils
Last updated on
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.
Read moreVarious 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 behavior, this util can be used to take an array of these changes and apply them to your edges.
Read moreVarious events on the ReactFlow component can produce a NodeChange that describes how to update the nodes of your flow in some way. If you don't need any custom behavior, this util can be used to take an array of these changes and apply them to your nodes.
Read moreThe getBezierPath util returns everything you need to render a bezier edge between two nodes.
Read moreGiven 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.
Read moreThis util is used to tell you what nodes, if any, are connected to the given node as the source of an edge.
Read moreReturns the bounding box that contains all the given nodes in an array. This can be useful when combined with `getViewportForBounds` to calculate the correct transform to fit the given nodes in a viewport.
Read moreThis util is used to tell you what nodes, if any, are connected to the given node as the target of an edge.
Read moreThe getSimpleBezierPath util returns everything you need to render a simple bezier edge between two nodes.
Read moreThe 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.
Read moreCalculates the straight line path between two points.
Read moreThis util returns the viewport for 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.
Read moreTest whether an object is usable as an Edge. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true.
Read moreTest whether an object is usable as a Node. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true.
Read moreA handy utility to reconnect an existing Edge with new properties. This searches your edge array for an edge with a matching id and updates its properties with the connection you provide.
Read more