@xyflow/react 12.9.3 → 12.10.1

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, useCallback, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, mergeAriaLabelConfig, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, withResolvers, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, defaultAriaLabelConfig, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform, getEdgeToolbarTransform } from '@xyflow/system';
+import { errorMessages, mergeAriaLabelConfig, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, withResolvers, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, defaultAriaLabelConfig, updateNodeInternals, updateAbsolutePositions, getHandlePosition, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform, getEdgeToolbarTransform } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
@@ -239,6 +239,7 @@ const reactFlowFieldsToTrack = [
     'debug',
     'autoPanSpeed',
     'ariaLabelConfig',
+    'zIndexMode',
 ];
 // rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
 const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
@@ -676,9 +677,9 @@ function applyChange(change, element) {
         }
         case 'dimensions': {
             if (typeof change.dimensions !== 'undefined') {
-                element.measured ??= {};
-                element.measured.width = change.dimensions.width;
-                element.measured.height = change.dimensions.height;
+                element.measured = {
+                    ...change.dimensions,
+                };
                 if (change.setAttributes) {
                     if (change.setAttributes === true || change.setAttributes === 'width') {
                         element.width = change.dimensions.width;
@@ -931,7 +932,7 @@ const BatchContext = createContext(null);
 function BatchProvider({ children, }) {
     const store = useStoreApi();
     const nodeQueueHandler = useCallback((queueItems) => {
-        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued } = store.getState();
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued, onNodesChangeMiddlewareMap, } = store.getState();
         /*
          * This is essentially an `Array.reduce` in imperative clothing. Processing
          * this queue is a relatively hot path so we'd like to avoid the overhead of
@@ -941,10 +942,13 @@ function BatchProvider({ children, }) {
         for (const payload of queueItems) {
             next = typeof payload === 'function' ? payload(next) : payload;
         }
-        const changes = getElementsDiffChanges({
+        let changes = getElementsDiffChanges({
             items: next,
             lookup: nodeLookup,
         });
+        for (const middleware of onNodesChangeMiddlewareMap.values()) {
+            changes = middleware(changes);
+        }
         if (hasDefaultNodes) {
             setNodes(next);
         }
@@ -1297,7 +1301,7 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
                 maxZoom,
                 translateExtent,
                 viewport: defaultViewport,
-                onDraggingChange: (paneDragging) => store.setState({ paneDragging }),
+                onDraggingChange: (paneDragging) => store.setState((prevState) => prevState.paneDragging === paneDragging ? prevState : { paneDragging }),
                 onPanZoomStart: (event, vp) => {
                     const { onViewportChangeStart, onMoveStart } = store.getState();
                     onMoveStart?.(event, vp);
@@ -1601,23 +1605,21 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
         });
     }, []);
     useEffect(() => {
-        if (disabled) {
-            xyDrag.current?.destroy();
-        }
-        else if (nodeRef.current) {
-            xyDrag.current?.update({
-                noDragClassName,
-                handleSelector,
-                domNode: nodeRef.current,
-                isSelectable,
-                nodeId,
-                nodeClickDistance,
-            });
-            return () => {
-                xyDrag.current?.destroy();
-            };
+        if (disabled || !nodeRef.current || !xyDrag.current) {
+            return;
         }
-    }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId]);
+        xyDrag.current.update({
+            noDragClassName,
+            handleSelector,
+            domNode: nodeRef.current,
+            isSelectable,
+            nodeId,
+            nodeClickDistance,
+        });
+        return () => {
+            xyDrag.current?.destroy();
+        };
+    }, [noDragClassName, handleSelector, disabled, isSelectable, nodeRef, nodeId, nodeClickDistance]);
     return dragging;
 }
 
@@ -1773,10 +1775,10 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
                 panBy: currentStore.panBy,
                 cancelConnection: currentStore.cancelConnection,
                 onConnectStart: currentStore.onConnectStart,
-                onConnectEnd: currentStore.onConnectEnd,
+                onConnectEnd: (...args) => store.getState().onConnectEnd?.(...args),
                 updateConnection: currentStore.updateConnection,
                 onConnect: onConnectExtended,
-                isValidConnection: isValidConnection || currentStore.isValidConnection,
+                isValidConnection: isValidConnection || ((...args) => store.getState().isValidConnection?.(...args) ?? true),
                 getTransform: () => store.getState().transform,
                 getFromHandle: () => store.getState().connection.fromHandle,
                 autoPanSpeed: currentStore.autoPanSpeed,
@@ -1944,10 +1946,12 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
             });
         }
     }, [disableKeyboardA11y]);
+    const shouldRender = !userSelectionActive && width !== null && height !== null;
     useDrag({
         nodeRef,
+        disabled: !shouldRender,
     });
-    if (userSelectionActive || !width || !height) {
+    if (!shouldRender) {
         return null;
     }
     const onContextMenu = onSelectionContextMenu
@@ -1978,7 +1982,7 @@ const selector$e = (s) => {
     return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
 };
 function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) {
-    const { nodesSelectionActive, userSelectionActive } = useStore(selector$e);
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$e, shallow);
     const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
@@ -2742,7 +2746,7 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, connectionMode, connectionRadius, lib, onConnectStart, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
         const isTarget = oppositeHandle.type === 'target';
         const _onReconnectEnd = (evt, connectionState) => {
             setReconnecting(false);
@@ -2768,10 +2772,10 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
             flowId,
             cancelConnection,
             panBy,
-            isValidConnection,
+            isValidConnection: (...args) => store.getState().isValidConnection?.(...args) ?? true,
             onConnect: onConnectEdge,
             onConnectStart: _onConnectStart,
-            onConnectEnd,
+            onConnectEnd: (...args) => store.getState().onConnectEnd?.(...args),
             onReconnectEnd: _onReconnectEnd,
             updateConnection,
             getTransform: () => store.getState().transform,
@@ -2830,6 +2834,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
             sourceNode,
             targetNode,
             elevateOnSelect: store.elevateEdgesOnSelect,
+            zIndexMode: store.zIndexMode,
         });
         return {
             zIndex,
@@ -3119,7 +3124,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
 GraphViewComponent.displayName = 'GraphView';
 const GraphView = memo(GraphViewComponent);
 
-const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, zIndexMode = 'basic', } = {}) => {
     const nodeLookup = new Map();
     const parentLookup = new Map();
     const connectionLookup = new Map();
@@ -3132,7 +3137,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
         nodeOrigin: storeNodeOrigin,
         nodeExtent: storeNodeExtent,
-        elevateNodesOnSelect: false,
+        zIndexMode,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
@@ -3182,7 +3187,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         edgesReconnectable: true,
         elementsSelectable: true,
         elevateNodesOnSelect: true,
-        elevateEdgesOnSelect: false,
+        elevateEdgesOnSelect: true,
         selectNodesOnDrag: true,
         multiSelectionActive: false,
         fitViewQueued: fitView ?? false,
@@ -3203,10 +3208,13 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         lib: 'react',
         debug: false,
         ariaLabelConfig: defaultAriaLabelConfig,
+        zIndexMode,
+        onNodesChangeMiddlewareMap: new Map(),
+        onEdgesChangeMiddlewareMap: new Map(),
     };
 };
 
-const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, }) => createWithEqualityFn((set, get) => {
     async function resolveFitView() {
         const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
         if (!panZoom) {
@@ -3241,9 +3249,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             nodeExtent,
             defaultNodes,
             defaultEdges,
+            zIndexMode,
         }),
         setNodes: (nodes) => {
-            const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
+            const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode } = get();
             /*
              * setNodes() is called exclusively in response to user actions:
              * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
@@ -3257,6 +3266,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
                 nodeExtent,
                 elevateNodesOnSelect,
                 checkEquality: true,
+                zIndexMode,
             });
             if (fitViewQueued && nodesInitialized) {
                 resolveFitView();
@@ -3289,12 +3299,12 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
          * new dimensions and update the nodes.
          */
         updateNodeInternals: (updates) => {
-            const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued } = get();
-            const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent);
+            const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued, zIndexMode, } = get();
+            const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, zIndexMode);
             if (!updatedInternals) {
                 return;
             }
-            updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
+            updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent, zIndexMode });
             if (fitViewQueued) {
                 resolveFitView();
                 set({ fitViewQueued: false, fitViewOptions: undefined });
@@ -3312,8 +3322,8 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
         },
         updateNodePositions: (nodeDragItems, dragging = false) => {
             const parentExpandChildren = [];
-            const changes = [];
-            const { nodeLookup, triggerNodeChanges } = get();
+            let changes = [];
+            const { nodeLookup, triggerNodeChanges, connection, updateConnection, onNodesChangeMiddlewareMap } = get();
             for (const [id, dragItem] of nodeDragItems) {
                 // we are using the nodelookup to be sure to use the current expandParent and parentId value
                 const node = nodeLookup.get(id);
@@ -3329,6 +3339,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
                         : dragItem.position,
                     dragging,
                 };
+                if (node && connection.inProgress && connection.fromNode.id === node.id) {
+                    const updatedFrom = getHandlePosition(node, connection.fromHandle, Position.Left, true);
+                    updateConnection({ ...connection, from: updatedFrom });
+                }
                 if (expandParent && node.parentId) {
                     parentExpandChildren.push({
                         id,
@@ -3347,6 +3361,9 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
                 const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
                 changes.push(...parentExpandChanges);
             }
+            for (const middleware of onNodesChangeMiddlewareMap.values()) {
+                changes = middleware(changes);
+            }
             triggerNodeChanges(changes);
         },
         triggerNodeChanges: (changes) => {
@@ -3399,8 +3416,12 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
             const nodesToUnselect = nodes ? nodes : storeNodes;
             const edgesToUnselect = edges ? edges : storeEdges;
-            const nodeChanges = nodesToUnselect.map((n) => {
-                const internalNode = nodeLookup.get(n.id);
+            const nodeChanges = [];
+            for (const node of nodesToUnselect) {
+                if (!node.selected) {
+                    continue; // skip changing nodes that are not selected
+                }
+                const internalNode = nodeLookup.get(node.id);
                 if (internalNode) {
                     /*
                      * we need to unselect the internal node that was selected previously before we
@@ -3408,9 +3429,15 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
                      */
                     internalNode.selected = false;
                 }
-                return createSelectionChange(n.id, false);
-            });
-            const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
+                nodeChanges.push(createSelectionChange(node.id, false));
+            }
+            const edgeChanges = [];
+            for (const edge of edgesToUnselect) {
+                if (!edge.selected) {
+                    continue; // skip changing edges that are not selected
+                }
+                edgeChanges.push(createSelectionChange(edge.id, false));
+            }
             triggerNodeChanges(nodeChanges);
             triggerEdgeChanges(edgeChanges);
         },
@@ -3439,7 +3466,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
             triggerEdgeChanges(edgeChanges);
         },
         setNodeExtent: (nextNodeExtent) => {
-            const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent } = get();
+            const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent, zIndexMode } = get();
             if (nextNodeExtent[0][0] === nodeExtent[0][0] &&
                 nextNodeExtent[0][1] === nodeExtent[0][1] &&
                 nextNodeExtent[1][0] === nodeExtent[1][0] &&
@@ -3451,6 +3478,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
                 nodeExtent: nextNodeExtent,
                 elevateNodesOnSelect,
                 checkEquality: false,
+                zIndexMode,
             });
             set({ nodeExtent: nextNodeExtent });
         },
@@ -3517,7 +3545,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
  * your router. If you have multiple flows on the same page you will need to use a separate
  * `<ReactFlowProvider />` for each flow.
  */
-function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }) {
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, zIndexMode, children, }) {
     const [store] = useState(() => createStore({
         nodes,
         edges,
@@ -3531,11 +3559,12 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
         fitViewOptions,
         nodeOrigin,
         nodeExtent,
+        zIndexMode,
     }));
     return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
 
-function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         /*
@@ -3544,7 +3573,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
          */
         return jsx(Fragment, { children: children });
     }
-    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, initialFitViewOptions: fitViewOptions, initialMinZoom: minZoom, initialMaxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
+    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, initialFitViewOptions: fitViewOptions, initialMinZoom: minZoom, initialMaxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, zIndexMode: zIndexMode, children: children }));
 }
 
 const wrapperStyle = {
@@ -3554,7 +3583,7 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0,
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, ...rest }, ref) {
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, zIndexMode = 'basic', ...rest }, ref) {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
     // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
@@ -3562,7 +3591,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
         e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
         onScroll?.(e);
     }, [onScroll]);
-    return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, autoPanOnNodeFocus: autoPanOnNodeFocus, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug, ariaLabelConfig: ariaLabelConfig }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+    return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, zIndexMode: zIndexMode, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, autoPanOnNodeFocus: autoPanOnNodeFocus, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug, ariaLabelConfig: ariaLabelConfig, zIndexMode: zIndexMode }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
 }
 /**
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -4180,6 +4209,48 @@ function useInternalNode(id) {
     return node;
 }
 
+/**
+ * Registers a middleware function to transform node changes.
+ *
+ * @public
+ * @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
+ */
+function experimental_useOnNodesChangeMiddleware(fn) {
+    const store = useStoreApi();
+    const [symbol] = useState(() => Symbol());
+    useEffect(() => {
+        const { onNodesChangeMiddlewareMap } = store.getState();
+        onNodesChangeMiddlewareMap.set(symbol, fn);
+    }, [fn]);
+    useEffect(() => {
+        const { onNodesChangeMiddlewareMap } = store.getState();
+        return () => {
+            onNodesChangeMiddlewareMap.delete(symbol);
+        };
+    }, []);
+}
+
+/**
+ * Registers a middleware function to transform edge changes.
+ *
+ * @public
+ * @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
+ */
+function experimental_useOnEdgesChangeMiddleware(fn) {
+    const store = useStoreApi();
+    const [symbol] = useState(() => Symbol());
+    useEffect(() => {
+        const { onEdgesChangeMiddlewareMap } = store.getState();
+        onEdgesChangeMiddlewareMap.set(symbol, fn);
+    }, [fn]);
+    useEffect(() => {
+        const { onEdgesChangeMiddlewareMap } = store.getState();
+        return () => {
+            onEdgesChangeMiddlewareMap.delete(symbol);
+        };
+    }, []);
+}
+
 function LinePattern({ dimensions, lineWidth, variant, className }) {
     return (jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(['react-flow__background-pattern', variant, className]) }));
 }
@@ -4429,12 +4500,15 @@ nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
 }
 function NodeComponentWrapperInner({ id, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y, width, height } = useStore((s) => {
-        const { internals } = s.nodeLookup.get(id);
-        const node = internals.userNode;
-        const { x, y } = internals.positionAbsolute;
-        const { width, height } = getNodeDimensions(node);
+        const node = s.nodeLookup.get(id);
+        if (!node) {
+            return { node: undefined, x: 0, y: 0, width: 0, height: 0 };
+        }
+        const userNode = node.internals.userNode;
+        const { x, y } = node.internals.positionAbsolute;
+        const { width, height } = getNodeDimensions(userNode);
         return {
-            node,
+            node: userNode,
             x,
             y,
             width,
@@ -4561,7 +4635,7 @@ MiniMapComponent.displayName = 'MiniMap';
  *
  *export default function Flow() {
  *  return (
- *    <ReactFlow nodes={[...]]} edges={[...]]}>
+ *    <ReactFlow nodes={[...]} edges={[...]}>
  *      <MiniMap nodeStrokeWidth={3} />
  *    </ReactFlow>
  *  );
@@ -4898,4 +4972,4 @@ function EdgeToolbar({ edgeId, x, y, children, className, style, isVisible, alig
             }, className: cc(['react-flow__edge-toolbar', className]), "data-id": edge?.id ?? '', ...rest, children: children }) }));
 }
 
-export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, EdgeToolbar, Handle, MiniMap, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, EdgeToolbar, Handle, MiniMap, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, experimental_useOnEdgesChangeMiddleware, experimental_useOnNodesChangeMiddleware, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };