Temporary Edges

In React Flow, almost everything is built around the concepts of nodes and edges. Edges are the connections between nodes, but what if we want to create an edge that is only connected to one node? What about an "edge" not connected to any nodes at all?

This example shows how to create an "incomplete" edge when a user releases a connection line without making a connection. A ghost node is rendered where the connection line was released, and a temporary edge is added to the flow. Making use of editable edges, the user can pick the edge back up and complete the connection at which point the ghost node is removed!

We've defined a useIncompleteEdge hook that encapsulates the logic for creating and managing a "ghost node". It returns a number of event handlers intended to be passed to the <ReactFlow /> component.

• onConnectStart is called when the user starts dragging a new connection line. It updates a connectingNodeId ref with the id of the source node.

• onConnect is called when a complete connection is made. It updates the connectingNodeId ref to null.

• onConnectEnd is called when the user releases a connection line. This callback creates a ghost node and a temporary edge from the connectingNodeId to that ghost node. The temporary edge is marked as reconnectable so that the user can pick it back up and complete the connection.

• onReconnect is called when a complete reconnection is made. It updates the connectingNodeId ref to null.

• onReconnectEnd is called when the user releases a reconnection line. This callback removes the ghost node and temporary edge. A new one may be added back when onConnectEnd is called.