Add Node On Edge Drop
You can create a new node when you drop the connection line on the pane by using the onConnectionStart
and onConnectionStop
handlers.
import React, { useCallback, useRef } from 'react'; import ReactFlow, { useNodesState, useEdgesState, addEdge, useReactFlow, ReactFlowProvider, } from 'react-flow-renderer'; import './index.css'; const initialNodes = [ { id: '0', type: 'input', data: { label: 'Node' }, position: { x: 0, y: 50 }, }, ]; let id = 1; const getId = () => `${id++}`; const fitViewOptions = { padding: 3, }; const AddNodeOnEdgeDrop = () => { const reactFlowWrapper = useRef(null); const connectingNodeId = useRef(null); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const { project } = useReactFlow(); const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []); const onConnectStart = useCallback((_, { nodeId }) => { connectingNodeId.current = nodeId; }, []); const onConnectStop = useCallback( (event) => { const targetIsPane = event.target.classList.contains('react-flow__pane'); if (targetIsPane) { // we need to remove the wrapper bounds, in order to get the correct position const { top, left } = reactFlowWrapper.current.getBoundingClientRect(); const id = getId(); const newNode = { id, // we are removing the half of the node width (75) to center the new node position: project({ x: event.clientX - left - 75, y: event.clientY - top }), data: { label: `Node ${id}` }, }; setNodes((nds) => nds.concat(newNode)); setEdges((eds) => eds.concat({ id, source: connectingNodeId.current, target: id }) ); } }, [project] ); return ( <div className="wrapper" ref={reactFlowWrapper}> <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} onConnectStart={onConnectStart} onConnectStop={onConnectStop} fitView fitViewOptions={fitViewOptions} /> </div> ); }; export default () => ( <ReactFlowProvider> <AddNodeOnEdgeDrop /> </ReactFlowProvider> );