@xyflow/react 12.0.0-next.7 → 12.0.0-next.9

package/dist/esm/index.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, forwardRef, memo } from 'react';
+import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, useLayoutEffect, forwardRef, memo } from 'react';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
+import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, devWarn, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol, updateEdge } from '@xyflow/system';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/shallow';
@@ -106,6 +106,9 @@ function SelectionListener({ onSelectionChange }) {
     return null;
 }
 
+const defaultNodeOrigin = [0, 0];
+const defaultViewport = { x: 0, y: 0, zoom: 1 };
+
 /*
  * This component helps us to update the store with the vlues coming from the user.
  * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)
@@ -171,35 +174,37 @@ const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
 const selector$n = (s) => ({
     setNodes: s.setNodes,
     setEdges: s.setEdges,
-    setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
     setMinZoom: s.setMinZoom,
     setMaxZoom: s.setMaxZoom,
     setTranslateExtent: s.setTranslateExtent,
     setNodeExtent: s.setNodeExtent,
     reset: s.reset,
+    setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
 });
+const initPrevValues = {
+    // these are values that are also passed directly to other components
+    // than the StoreUpdater. We can reduce the number of setStore calls
+    // by setting the same values here as prev fields.
+    translateExtent: infiniteExtent,
+    nodeOrigin: defaultNodeOrigin,
+    minZoom: 0.5,
+    maxZoom: 2,
+    elementsSelectable: true,
+    noPanClassName: 'nopan',
+    rfId: '1',
+};
 function StoreUpdater(props) {
-    const { setNodes, setEdges, setDefaultNodesAndEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, } = useStore(selector$n, shallow);
+    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$n, shallow);
     const store = useStoreApi();
     useEffect(() => {
-        const edgesWithDefaults = props.defaultEdges?.map((e) => ({ ...e, ...props.defaultEdgeOptions }));
-        setDefaultNodesAndEdges(props.defaultNodes, edgesWithDefaults);
+        setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
         return () => {
+            // when we reset the store we also need to reset the previous fields
+            previousFields.current = initPrevValues;
             reset();
         };
     }, []);
-    const previousFields = useRef({
-        // these are values that are also passed directly to other components
-        // than the StoreUpdater. We can reduce the number of setStore calls
-        // by setting the same values here as prev fields.
-        translateExtent: infiniteExtent,
-        nodeOrigin: initNodeOrigin,
-        minZoom: 0.5,
-        maxZoom: 2,
-        elementsSelectable: true,
-        noPanClassName: 'nopan',
-        rfId: '1',
-    });
+    const previousFields = useRef(initPrevValues);
     useEffect(() => {
         for (const fieldName of fieldsToTrack) {
             const fieldValue = props[fieldName];
@@ -333,6 +338,10 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
                 else {
                     pressedKeys.current.delete(event[keyOrCode]);
                 }
+                // fix for Mac: when cmd key is pressed, keyup is not triggered for any other key, see: https://stackoverflow.com/questions/27380018/when-cmd-key-is-kept-pressed-keyup-is-not-triggered-for-any-other-key
+                if (event.key === 'Meta') {
+                    pressedKeys.current.clear();
+                }
                 modifierPressed.current = false;
             };
             const resetHandler = () => {
@@ -424,25 +433,25 @@ const useViewportHelper = () => {
                 const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
                 panZoom?.setViewport(viewport, { duration: options?.duration });
             },
-            screenToFlowPosition: (position, options = { snapToGrid: true }) => {
+            screenToFlowPosition: (clientPosition, options = { snapToGrid: true }) => {
                 const { transform, snapGrid, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return clientPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
                 const correctedPosition = {
-                    x: position.x - domX,
-                    y: position.y - domY,
+                    x: clientPosition.x - domX,
+                    y: clientPosition.y - domY,
                 };
                 return pointToRendererPoint(correctedPosition, transform, options.snapToGrid, snapGrid);
             },
-            flowToScreenPosition: (position) => {
+            flowToScreenPosition: (flowPosition) => {
                 const { transform, domNode } = store.getState();
                 if (!domNode) {
-                    return position;
+                    return flowPosition;
                 }
                 const { x: domX, y: domY } = domNode.getBoundingClientRect();
-                const rendererPosition = rendererPointToPoint(position, transform);
+                const rendererPosition = rendererPointToPoint(flowPosition, transform);
                 return {
                     x: rendererPosition.x + domX,
                     y: rendererPosition.y + domY,
@@ -458,9 +467,7 @@ function handleParentExpand(updatedElements, updateItem) {
     for (const [index, item] of updatedElements.entries()) {
         if (item.id === updateItem.parentNode) {
             const parent = { ...item };
-            if (!parent.computed) {
-                parent.computed = {};
-            }
+            parent.computed ??= {};
             const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
             const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
             if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
@@ -543,7 +550,7 @@ function applyChanges(changes, elements) {
         /// each _mutate_ this object, so there's only ever one copy.
         const updatedElement = { ...element };
         for (const change of changes) {
-            applyChange(change, updatedElement, elements);
+            applyChange(change, updatedElement, updatedElements);
         }
         updatedElements.push(updatedElement);
     }
@@ -638,11 +645,13 @@ function applyNodeChanges(changes, nodes) {
 function applyEdgeChanges(changes, edges) {
     return applyChanges(changes, edges);
 }
-const createSelectionChange = (id, selected) => ({
-    id,
-    type: 'select',
-    selected,
-});
+function createSelectionChange(id, selected) {
+    return {
+        id,
+        type: 'select',
+        selected,
+    };
+}
 function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false) {
     const changes = [];
     for (const item of items) {
@@ -721,73 +730,86 @@ function useReactFlow() {
         const { edges = [] } = store.getState();
         return edges.find((e) => e.id === id);
     }, []);
-    // this is used to handle multiple syncronous setNodes calls
-    const setNodesData = useRef();
-    const setNodesTimeout = useRef();
-    const setNodes = useCallback((payload) => {
-        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
-        const nextNodes = typeof payload === 'function' ? payload(setNodesData.current || nodes) : payload;
-        setNodesData.current = nextNodes;
-        if (setNodesTimeout.current) {
-            clearTimeout(setNodesTimeout.current);
-        }
-        // if there are multiple synchronous setNodes calls, we only want to call onNodesChange once
-        // for this, we use a timeout to wait for the last call and store updated nodes in setNodesData
-        // this is not perfect, but should work in most cases
-        setNodesTimeout.current = setTimeout(() => {
+    // A reference of all the batched updates to process before the next render. We
+    // want a mutable reference here so multiple synchronous calls to `setNodes` etc
+    // can be batched together.
+    const setElementsQueue = useRef({ nodes: [], edges: [] });
+    // Because we're using a ref above, we need some way to let React know when to
+    // actually process the queue. We flip this bit of state to `true` any time we
+    // mutate the queue and then flip it back to `false` after flushing the queue.
+    const [shouldFlushQueue, setShouldFlushQueue] = useState(false);
+    // Layout effects are guaranteed to run before the next render which means we
+    // shouldn't run into any issues with stale state or weird issues that come from
+    // rendering things one frame later than expected (we used to use `setTimeout`).
+    useLayoutEffect(() => {
+        // Because we need to flip the state back to false after flushing, this should
+        // trigger the hook again (!). If the hook is being run again we know that any
+        // updates should have been processed by now and we can safely clear the queue
+        // and bail early.
+        if (!shouldFlushQueue) {
+            setElementsQueue.current = { nodes: [], edges: [] };
+            return;
+        }
+        if (setElementsQueue.current.nodes.length) {
+            const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = 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
+            // array methods where we can.
+            let next = nodes;
+            for (const payload of setElementsQueue.current.nodes) {
+                next = typeof payload === 'function' ? payload(next) : payload;
+            }
             if (hasDefaultNodes) {
-                setNodes(nextNodes);
+                setNodes(next);
             }
             else if (onNodesChange) {
-                const changes = getElementsDiffChanges({ items: setNodesData.current, lookup: nodeLookup });
-                onNodesChange(changes);
+                onNodesChange(getElementsDiffChanges({
+                    items: next,
+                    lookup: nodeLookup,
+                }));
             }
-            setNodesData.current = undefined;
-        }, 0);
-    }, []);
-    // this is used to handle multiple syncronous setEdges calls
-    const setEdgesData = useRef();
-    const setEdgesTimeout = useRef();
-    const setEdges = useCallback((payload) => {
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
-        const nextEdges = typeof payload === 'function' ? payload(setEdgesData.current || edges) : payload;
-        setEdgesData.current = nextEdges;
-        if (setEdgesTimeout.current) {
-            clearTimeout(setEdgesTimeout.current);
+            setElementsQueue.current.nodes = [];
         }
-        setEdgesTimeout.current = setTimeout(() => {
+        if (setElementsQueue.current.edges.length) {
+            const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+            let next = edges;
+            for (const payload of setElementsQueue.current.edges) {
+                next = typeof payload === 'function' ? payload(next) : payload;
+            }
             if (hasDefaultEdges) {
-                setEdges(nextEdges);
+                setEdges(next);
             }
             else if (onEdgesChange) {
-                const changes = getElementsDiffChanges({ items: nextEdges, lookup: edgeLookup });
-                onEdgesChange(changes);
+                onEdgesChange(getElementsDiffChanges({
+                    items: next,
+                    lookup: edgeLookup,
+                }));
             }
-            setEdgesData.current = undefined;
-        }, 0);
+            setElementsQueue.current.edges = [];
+        }
+        // Beacuse we're using reactive state to trigger this effect, we need to flip
+        // it back to false.
+        setShouldFlushQueue(false);
+    }, [shouldFlushQueue]);
+    const setNodes = useCallback((payload) => {
+        setElementsQueue.current.nodes.push(payload);
+        setShouldFlushQueue(true);
+    }, []);
+    const setEdges = useCallback((payload) => {
+        setElementsQueue.current.edges.push(payload);
+        setShouldFlushQueue(true);
     }, []);
     const addNodes = useCallback((payload) => {
-        const nodes = Array.isArray(payload) ? payload : [payload];
-        const { nodes: currentNodes, hasDefaultNodes, onNodesChange, setNodes } = store.getState();
-        if (hasDefaultNodes) {
-            const nextNodes = [...currentNodes, ...nodes];
-            setNodes(nextNodes);
-        }
-        else if (onNodesChange) {
-            const changes = nodes.map((node) => ({ item: node, type: 'add' }));
-            onNodesChange(changes);
-        }
+        const newNodes = Array.isArray(payload) ? payload : [payload];
+        // Queueing a functional update means that we won't worry about other calls
+        // to `setNodes` that might happen elsewhere.
+        setElementsQueue.current.nodes.push((nodes) => [...nodes, ...newNodes]);
+        setShouldFlushQueue(true);
     }, []);
     const addEdges = useCallback((payload) => {
-        const nextEdges = Array.isArray(payload) ? payload : [payload];
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
-        if (hasDefaultEdges) {
-            setEdges([...edges, ...nextEdges]);
-        }
-        else if (onEdgesChange) {
-            const changes = nextEdges.map((edge) => ({ item: edge, type: 'add' }));
-            onEdgesChange(changes);
-        }
+        const newEdges = Array.isArray(payload) ? payload : [payload];
+        setElementsQueue.current.edges.push((edges) => [...edges, ...newEdges]);
+        setShouldFlushQueue(true);
     }, []);
     const toObject = useCallback(() => {
         const { nodes = [], edges = [], transform } = store.getState();
@@ -1264,7 +1286,7 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
                     handleNodeClick({
                         id,
                         store,
-                        nodeRef: nodeRef,
+                        nodeRef,
                     });
                 },
                 onDragStart: () => {
@@ -1298,44 +1320,47 @@ function useDrag({ nodeRef, disabled = false, noDragClassName, handleSelector, n
 
 const selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'));
 /**
- * Hook for updating node positions.
+ * Hook for updating node positions by passing a direction and factor
  *
  * @internal
  * @returns function for updating node positions
  */
-function useUpdateNodePositions() {
+function useMoveSelectedNodes() {
     const store = useStoreApi();
-    const updatePositions = useCallback((params) => {
-        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = store.getState();
+    const moveSelectedNodes = useCallback((params) => {
+        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin, } = store.getState();
         const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
-        // by default a node moves 5px on each key press, or 20px if shift is pressed
-        // if snap grid is enabled, we use that for the velocity.
+        // by default a node moves 5px on each key press
+        // if snap grid is enabled, we use that for the velocity
         const xVelo = snapToGrid ? snapGrid[0] : 5;
         const yVelo = snapToGrid ? snapGrid[1] : 5;
-        const factor = params.isShiftPressed ? 4 : 1;
-        const xDiff = params.x * xVelo * factor;
-        const yDiff = params.y * yVelo * factor;
+        const xDiff = params.direction.x * xVelo * params.factor;
+        const yDiff = params.direction.y * yVelo * params.factor;
         const nodeUpdates = selectedNodes.map((node) => {
             if (node.computed?.positionAbsolute) {
                 let nextPosition = {
-                    x: node.computed?.positionAbsolute.x + xDiff,
-                    y: node.computed?.positionAbsolute.y + yDiff,
+                    x: node.computed.positionAbsolute.x + xDiff,
+                    y: node.computed.positionAbsolute.y + yDiff,
                 };
                 if (snapToGrid) {
                     nextPosition = snapPosition(nextPosition, snapGrid);
                 }
-                const { positionAbsolute, position } = calcNextPosition(node, nextPosition, nodes, nodeExtent, undefined, onError);
+                const { position, positionAbsolute } = calculateNodePosition({
+                    nodeId: node.id,
+                    nextPosition,
+                    nodeLookup,
+                    nodeExtent,
+                    nodeOrigin,
+                    onError,
+                });
                 node.position = position;
-                if (!node.computed) {
-                    node.computed = {};
-                }
                 node.computed.positionAbsolute = positionAbsolute;
             }
             return node;
         });
-        updateNodePositions(nodeUpdates, true, false);
+        updateNodePositions(nodeUpdates);
     }, []);
-    return updatePositions;
+    return moveSelectedNodes;
 }
 
 const NodeIdContext = createContext(null);
@@ -1470,6 +1495,9 @@ const HandleComponent = forwardRef(({ type = 'source', position = Position.Top,
         ]), onMouseDown: onPointerDown, onTouchStart: onPointerDown, onClick: connectOnClick ? onClick : undefined, ref: ref, ...rest, children: children }));
 });
 HandleComponent.displayName = 'Handle';
+/**
+ * The Handle component is the part of a node that can be used to connect nodes.
+ */
 const Handle = memo(HandleComponent);
 
 function InputNode({ data, isConnectable, sourcePosition = Position.Bottom }) {
@@ -1503,7 +1531,7 @@ const builtinNodeTypes = {
 
 const selector$h = (s) => {
     const selectedNodes = s.nodes.filter((n) => n.selected);
-    const { width, height, x, y } = getNodesBounds(selectedNodes, s.nodeOrigin);
+    const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
     return {
         width,
         height,
@@ -1514,7 +1542,7 @@ const selector$h = (s) => {
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }) {
     const store = useStoreApi();
     const { width, height, transformString, userSelectionActive } = useStore(selector$h, shallow);
-    const updatePositions = useUpdateNodePositions();
+    const moveSelectedNodes = useMoveSelectedNodes();
     const nodeRef = useRef(null);
     useEffect(() => {
         if (!disableKeyboardA11y) {
@@ -1537,10 +1565,9 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
         : undefined;
     const onKeyDown = (event) => {
         if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
-            updatePositions({
-                x: arrowKeyDiffs[event.key].x,
-                y: arrowKeyDiffs[event.key].y,
-                isShiftPressed: event.shiftKey,
+            moveSelectedNodes({
+                direction: arrowKeyDiffs[event.key],
+                factor: event.shiftKey ? 4 : 1,
             });
         }
     };
@@ -1552,14 +1579,16 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
             } }) }));
 }
 
-const selector$g = (s) => s.nodesSelectionActive;
+const selector$g = (s) => {
+    return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
+};
 const FlowRendererComponent = ({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, 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 = useStore(selector$g);
+    const { nodesSelectionActive, userSelectionActive } = useStore(selector$g);
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const panActivationKeyPressed = useKeyPress(panActivationKeyCode);
     const panOnDrag = panActivationKeyPressed || _panOnDrag;
     const panOnScroll = panActivationKeyPressed || _panOnScroll;
-    const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true);
+    const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
     useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
     return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
 };
@@ -1646,14 +1675,29 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     const prevSourcePosition = useRef(node.sourcePosition);
     const prevTargetPosition = useRef(node.targetPosition);
     const prevType = useRef(nodeType);
-    const updatePositions = useUpdateNodePositions();
+    const width = node.width ?? undefined;
+    const height = node.height ?? undefined;
+    const computedWidth = node.computed?.width;
+    const computedHeight = node.computed?.height;
+    const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
+    const hasHandleBounds = !!node[internalsSymbol]?.handleBounds;
+    const moveSelectedNodes = useMoveSelectedNodes();
+    useEffect(() => {
+        return () => {
+            if (nodeRef.current) {
+                resizeObserver?.unobserve(nodeRef.current);
+            }
+        };
+    }, []);
     useEffect(() => {
         if (nodeRef.current && !node.hidden) {
             const currNode = nodeRef.current;
-            resizeObserver?.observe(currNode);
-            return () => resizeObserver?.unobserve(currNode);
+            if (!initialized || !hasHandleBounds) {
+                resizeObserver?.unobserve(currNode);
+                resizeObserver?.observe(currNode);
+            }
         }
-    }, [node.hidden]);
+    }, [node.hidden, initialized, hasHandleBounds]);
     useEffect(() => {
         // when the user programmatically changes the source or handle position, we re-initialize the node
         const typeChanged = prevType.current !== nodeType;
@@ -1683,10 +1727,6 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     if (node.hidden) {
         return null;
     }
-    const width = node.width ?? undefined;
-    const height = node.height ?? undefined;
-    const computedWidth = node.computed?.width;
-    const computedHeight = node.computed?.height;
     const positionAbsoluteOrigin = getPositionWithOrigin({
         x: positionAbsoluteX,
         y: positionAbsoluteY,
@@ -1694,7 +1734,6 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         height: computedHeight ?? height ?? 0,
         origin: node.origin || nodeOrigin,
     });
-    const initialized = (!!computedWidth && !!computedHeight) || (!!width && !!height);
     const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
     const onMouseEnterHandler = onMouseEnter ? (event) => onMouseEnter(event, { ...node }) : undefined;
     const onMouseMoveHandler = onMouseMove ? (event) => onMouseMove(event, { ...node }) : undefined;
@@ -1738,10 +1777,9 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                     .replace('Arrow', '')
                     .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
             });
-            updatePositions({
-                x: arrowKeyDiffs[event.key].x,
-                y: arrowKeyDiffs[event.key].y,
-                isShiftPressed: event.shiftKey,
+            moveSelectedNodes({
+                direction: arrowKeyDiffs[event.key],
+                factor: event.shiftKey ? 4 : 1,
             });
         }
     };
@@ -1884,18 +1922,21 @@ const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 's
     }
     return (jsx("marker", { className: "react-flow__arrowhead", id: id, markerWidth: `${width}`, markerHeight: `${height}`, viewBox: "-10 -10 20 20", markerUnits: markerUnits, orient: orient, refX: "0", refY: "0", children: jsx(Symbol, { color: color, strokeWidth: strokeWidth }) }));
 };
-const markerSelector = ({ defaultColor, rfId }) => (s) => {
-    const markers = createMarkerIds(s.edges, { id: rfId, defaultColor });
-    return markers;
-};
-const markersEqual = (a, b) => 
-// the id includes all marker options, so we just need to look at that part of the marker
-!(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
 // when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
 // when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
 // that we can then use for creating our unique marker ids
 const MarkerDefinitions = ({ defaultColor, rfId }) => {
-    const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
+    const edges = useStore((s) => s.edges);
+    const defaultEdgeOptions = useStore((s) => s.defaultEdgeOptions);
+    const markers = useMemo(() => {
+        const markers = createMarkerIds(edges, {
+            id: rfId,
+            defaultColor,
+            defaultMarkerStart: defaultEdgeOptions?.markerStart,
+            defaultMarkerEnd: defaultEdgeOptions?.markerEnd,
+        });
+        return markers;
+    }, [edges, defaultEdgeOptions, rfId, defaultColor]);
     if (!markers.length) {
         return null;
     }
@@ -2190,8 +2231,8 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
             ...(edgePosition || nullPosition),
         };
     }, [edge.source, edge.target, edge.sourceHandle, edge.targetHandle, edge.selected, edge.zIndex]), shallow);
-    const markerStartUrl = useMemo(() => (edge.markerStart ? `url(#${getMarkerId(edge.markerStart, rfId)})` : undefined), [edge.markerStart, rfId]);
-    const markerEndUrl = useMemo(() => (edge.markerEnd ? `url(#${getMarkerId(edge.markerEnd, rfId)})` : undefined), [edge.markerEnd, rfId]);
+    const markerStartUrl = useMemo(() => (edge.markerStart ? `url('#${getMarkerId(edge.markerStart, rfId)}')` : undefined), [edge.markerStart, rfId]);
+    const markerEndUrl = useMemo(() => (edge.markerEnd ? `url('#${getMarkerId(edge.markerEnd, rfId)}')` : undefined), [edge.markerEnd, rfId]);
     if (edge.hidden || !sourceX || !sourceY || !targetX || !targetY) {
         return null;
     }
@@ -2259,6 +2300,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesUpdatable, elementsSelectable, o
                     animated: edge.animated,
                     inactive: !isSelectable && !onClick,
                     updating: updateHover,
+                    selectable: isSelectable,
                 },
             ]), onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, onMouseEnter: onEdgeMouseEnter, onMouseMove: onEdgeMouseMove, onMouseLeave: onEdgeMouseLeave, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : 'img', "data-id": id, "data-testid": `rf__edge-${id}`, "aria-label": edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, ref: edgeRef, children: [!updating && (jsx(EdgeComponent, { id: id, source: edge.source, target: edge.target, selected: edge.selected, animated: edge.animated, label: edge.label, labelStyle: edge.labelStyle, labelShowBg: edge.labelShowBg, labelBgStyle: edge.labelBgStyle, labelBgPadding: edge.labelBgPadding, labelBgBorderRadius: edge.labelBgBorderRadius, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, data: edge.data, style: edge.style, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle, markerStart: markerStartUrl, markerEnd: markerEndUrl, pathOptions: 'pathOptions' in edge ? edge.pathOptions : undefined, interactionWidth: edge.interactionWidth })), isUpdatable && (jsx(EdgeUpdateAnchors, { edge: edge, isUpdatable: isUpdatable, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY, sourcePosition: sourcePosition, targetPosition: targetPosition, setUpdateHover: setUpdateHover, setUpdating: setUpdating, sourceHandleId: edge.sourceHandle, targetHandleId: edge.targetHandle }))] }) }));
 }
@@ -2431,44 +2473,22 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
 GraphViewComponent.displayName = 'GraphView';
 const GraphView = memo(GraphViewComponent);
 
-function handleControlledSelectionChange(changes, items) {
-    return items.map((item) => {
-        const change = changes.find((change) => change.id === item.id);
-        if (change) {
-            item.selected = change.selected;
-        }
-        return item;
-    });
-}
-function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }) {
-    const { nodes, edges, onNodesChange, onEdgesChange, hasDefaultNodes, hasDefaultEdges } = get();
-    if (changedNodes?.length) {
-        if (hasDefaultNodes) {
-            set({ nodes: handleControlledSelectionChange(changedNodes, nodes) });
-        }
-        onNodesChange?.(changedNodes);
-    }
-    if (changedEdges?.length) {
-        if (hasDefaultEdges) {
-            set({ edges: handleControlledSelectionChange(changedEdges, edges) });
-        }
-        onEdgesChange?.(changedEdges);
-    }
-}
-
-const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {}) => {
+const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, } = {}) => {
     const nodeLookup = new Map();
     const connectionLookup = new Map();
     const edgeLookup = new Map();
-    updateConnectionLookup(connectionLookup, edgeLookup, edges);
-    const nextNodes = adoptUserProvidedNodes(nodes, nodeLookup, {
+    const storeEdges = defaultEdges ?? edges ?? [];
+    const storeNodes = defaultNodes ?? nodes ?? [];
+    updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
+    const nextNodes = adoptUserProvidedNodes(storeNodes, nodeLookup, {
         nodeOrigin: [0, 0],
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
         const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
-        const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
+        // @todo users nodeOrigin should be used here
+        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
         transform = [x, y, zoom];
     }
@@ -2479,13 +2499,13 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         transform,
         nodes: nextNodes,
         nodeLookup,
-        edges,
+        edges: storeEdges,
         edgeLookup,
         connectionLookup,
         onNodesChange: null,
         onEdgesChange: null,
-        hasDefaultNodes: false,
-        hasDefaultEdges: false,
+        hasDefaultNodes: defaultNodes !== undefined,
+        hasDefaultEdges: defaultEdges !== undefined,
         panZoom: null,
         minZoom: 0.5,
         maxZoom: 2,
@@ -2525,15 +2545,15 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
         autoPanOnConnect: true,
         autoPanOnNodeDrag: true,
         connectionRadius: 20,
-        onError: () => null,
+        onError: devWarn,
         isValidConnection: undefined,
         onSelectionChangeHandlers: [],
         lib: 'react',
     };
 };
 
-const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
-    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1 }),
+const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
+    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, defaultNodes, defaultEdges }),
     setNodes: (nodes) => {
         const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
@@ -2542,7 +2562,6 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        // TODO: consider updating the types to reflect the distinction between user-provided nodes and internal nodes.
         const nodesWithInternalData = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
         set({ nodes: nodesWithInternalData });
     },
@@ -2551,28 +2570,17 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         updateConnectionLookup(connectionLookup, edgeLookup, edges);
         set({ edges });
     },
-    // when the user works with an uncontrolled flow,
-    // we set a flag `hasDefaultNodes` / `hasDefaultEdges`
     setDefaultNodesAndEdges: (nodes, edges) => {
-        const hasDefaultNodes = typeof nodes !== 'undefined';
-        const hasDefaultEdges = typeof edges !== 'undefined';
-        const nextState = {
-            hasDefaultNodes,
-            hasDefaultEdges,
-        };
-        if (hasDefaultNodes) {
-            const { nodeLookup, nodeOrigin, elevateNodesOnSelect } = get();
-            nextState.nodes = adoptUserProvidedNodes(nodes, nodeLookup, {
-                nodeOrigin,
-                elevateNodesOnSelect,
-            });
+        if (nodes) {
+            const { setNodes } = get();
+            setNodes(nodes);
+            set({ hasDefaultNodes: true });
         }
-        if (hasDefaultEdges) {
-            const { connectionLookup, edgeLookup } = get();
-            updateConnectionLookup(connectionLookup, edgeLookup, edges);
-            nextState.edges = edges;
+        if (edges) {
+            const { setEdges } = get();
+            setEdges(edges);
+            set({ hasDefaultEdges: true });
         }
-        set(nextState);
     },
     // Every node gets registerd at a ResizeObserver. Whenever a node
     // changes its dimensions, this function is called to measure the
@@ -2609,86 +2617,70 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
             onNodesChange?.(changes);
         }
     },
-    updateNodePositions: (nodeDragItems, positionChanged = true, dragging = false) => {
+    updateNodePositions: (nodeDragItems, dragging = false) => {
         const changes = nodeDragItems.map((node) => {
             const change = {
                 id: node.id,
                 type: 'position',
+                position: node.position,
+                positionAbsolute: node.computed?.positionAbsolute,
                 dragging,
             };
-            if (positionChanged) {
-                change.positionAbsolute = node.computed?.positionAbsolute;
-                change.position = node.position;
-            }
             return change;
         });
         get().triggerNodeChanges(changes);
     },
     triggerNodeChanges: (changes) => {
-        const { onNodesChange, nodeLookup, nodes, hasDefaultNodes, nodeOrigin, elevateNodesOnSelect } = get();
+        const { onNodesChange, setNodes, nodes, hasDefaultNodes } = get();
         if (changes?.length) {
             if (hasDefaultNodes) {
                 const updatedNodes = applyNodeChanges(changes, nodes);
-                const nextNodes = adoptUserProvidedNodes(updatedNodes, nodeLookup, {
-                    nodeOrigin,
-                    elevateNodesOnSelect,
-                });
-                set({ nodes: nextNodes });
+                setNodes(updatedNodes);
             }
             onNodesChange?.(changes);
         }
     },
+    triggerEdgeChanges: (changes) => {
+        const { onEdgesChange, setEdges, edges, hasDefaultEdges } = get();
+        if (changes?.length) {
+            if (hasDefaultEdges) {
+                const updatedEdges = applyEdgeChanges(changes, edges);
+                setEdges(updatedEdges);
+            }
+            onEdgesChange?.(changes);
+        }
+    },
     addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, edges, nodes } = get();
-        let changedNodes;
-        let changedEdges = null;
+        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
-            changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            triggerNodeChanges(nodeChanges);
+            return;
         }
-        else {
-            changedNodes = getSelectionChanges(nodes, new Set([...selectedNodeIds]), true);
-            changedEdges = getSelectionChanges(edges);
-        }
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        triggerNodeChanges(getSelectionChanges(nodes, new Set([...selectedNodeIds]), true));
+        triggerEdgeChanges(getSelectionChanges(edges));
     },
     addSelectedEdges: (selectedEdgeIds) => {
-        const { multiSelectionActive, edges, nodes } = get();
-        let changedEdges;
-        let changedNodes = null;
+        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
-            changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+            const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+            triggerEdgeChanges(changedEdges);
+            return;
         }
-        else {
-            changedEdges = getSelectionChanges(edges, new Set([...selectedEdgeIds]));
-            changedNodes = getSelectionChanges(nodes, new Set(), true);
-        }
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        triggerEdgeChanges(getSelectionChanges(edges, new Set([...selectedEdgeIds])));
+        triggerNodeChanges(getSelectionChanges(nodes, new Set(), true));
     },
     unselectNodesAndEdges: ({ nodes, edges } = {}) => {
-        const { edges: storeEdges, nodes: storeNodes } = get();
+        const { edges: storeEdges, nodes: storeNodes, triggerNodeChanges, triggerEdgeChanges } = get();
         const nodesToUnselect = nodes ? nodes : storeNodes;
         const edgesToUnselect = edges ? edges : storeEdges;
-        const changedNodes = nodesToUnselect.map((n) => {
+        const nodeChanges = nodesToUnselect.map((n) => {
             n.selected = false;
             return createSelectionChange(n.id, false);
         });
-        const changedEdges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
-        updateNodesAndEdgesSelections({
-            changedNodes,
-            changedEdges,
-            get,
-            set,
-        });
+        const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
+        triggerNodeChanges(nodeChanges);
+        triggerEdgeChanges(edgeChanges);
     },
     setMinZoom: (minZoom) => {
         const { panZoom, maxZoom } = get();
@@ -2705,19 +2697,11 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         set({ translateExtent });
     },
     resetSelectedElements: () => {
-        const { edges, nodes } = get();
-        const nodesToUnselect = nodes
-            .filter((e) => e.selected)
-            .map((n) => createSelectionChange(n.id, false));
-        const edgesToUnselect = edges
-            .filter((e) => e.selected)
-            .map((e) => createSelectionChange(e.id, false));
-        updateNodesAndEdgesSelections({
-            changedNodes: nodesToUnselect,
-            changedEdges: edgesToUnselect,
-            get,
-            set,
-        });
+        const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
+        const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
+        triggerNodeChanges(nodeChanges);
+        triggerEdgeChanges(edgeChanges);
     },
     setNodeExtent: (nodeExtent) => {
         const { nodes } = get();
@@ -2769,21 +2753,17 @@ const createRFStore = ({ nodes, edges, width, height, fitView: fitView$1, }) =>
         };
         set(currentConnection);
     },
-    reset: () => {
-        // @todo: what should we do about this? Do we still need it?
-        // if you are on a SPA with multiple flows, we want to make sure that the store gets resetted
-        // when you switch pages. Does this reset solves this? Currently it always gets called. This
-        // leads to an emtpy nodes array at the beginning.
-        // set({ ...getInitialState() });
-    },
+    reset: () => set({ ...getInitialState() }),
 }), Object.is);
 
-function ReactFlowProvider({ children, initialNodes, initialEdges, initialWidth, initialHeight, fitView, }) {
+function ReactFlowProvider({ children, initialNodes, initialEdges, defaultNodes, defaultEdges, initialWidth, initialHeight, fitView, }) {
     const storeRef = useRef(null);
     if (!storeRef.current) {
         storeRef.current = createRFStore({
             nodes: initialNodes,
             edges: initialEdges,
+            defaultNodes,
+            defaultEdges,
             width: initialWidth,
             height: initialHeight,
             fitView,
@@ -2792,18 +2772,16 @@ function ReactFlowProvider({ children, initialNodes, initialEdges, initialWidth,
     return jsx(Provider$1, { value: storeRef.current, children: children });
 }
 
-function Wrapper({ children, nodes, edges, width, height, fitView, }) {
+function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
     const isWrapped = useContext(StoreContext);
     if (isWrapped) {
         // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
         // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
         return jsx(Fragment, { children: children });
     }
-    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
+    return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, children: children }));
 }
 
-const initNodeOrigin = [0, 0];
-const initDefaultViewport = { x: 0, y: 0, zoom: 1 };
 const wrapperStyle = {
     width: '100%',
     height: '100%',
@@ -2811,10 +2789,10 @@ const wrapperStyle = {
     position: 'relative',
     zIndex: 0,
 };
-const ReactFlow = forwardRef(({ 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, nodesConnectable, nodesFocusable, nodeOrigin = initNodeOrigin, edgesFocusable, edgesUpdatable, elementsSelectable = true, defaultViewport = initDefaultViewport, 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, children, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', ...rest }, ref) => {
+const ReactFlow = forwardRef(({ 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, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesUpdatable, 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, children, onEdgeUpdate, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdateStart, onEdgeUpdateEnd, edgeUpdaterRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', ...rest }, ref) => {
     const rfId = id || '1';
     const colorModeClassName = useColorModeClass(colorMode);
-    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, 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, 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, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onEdgeUpdate: onEdgeUpdate, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, 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, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, 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, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
+    return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, width: width, height: height, fitView: fitView, 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, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onEdgeUpdate: onEdgeUpdate, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, edgeUpdaterRadius: edgeUpdaterRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, 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, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesUpdatable: edgesUpdatable, 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, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
 });
 ReactFlow.displayName = 'ReactFlow';
 
@@ -2948,7 +2926,7 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
  * Hook for registering an onSelectionChange handler.
  *
  * @public
- * @params params.onChange - The handler to register
+ * @param params.onChange - The handler to register
  */
 function useOnSelectionChange({ onChange }) {
     const store = useStoreApi();
@@ -2966,9 +2944,14 @@ const selector$6 = (options) => (s) => {
     if (s.nodes.length === 0) {
         return false;
     }
-    return s.nodes
-        .filter((n) => (options.includeHiddenNodes ? true : !n.hidden))
-        .every((n) => n[internalsSymbol]?.handleBounds !== undefined);
+    for (const node of s.nodes) {
+        if (options.includeHiddenNodes || !node.hidden) {
+            if (node[internalsSymbol]?.handleBounds === undefined) {
+                return false;
+            }
+        }
+    }
+    return true;
 };
 const defaultOptions = {
     includeHiddenNodes: false,
@@ -2986,7 +2969,7 @@ function useNodesInitialized(options = defaultOptions) {
 }
 
 /**
- *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
  *
  * @public
  * @param param.type - handle type 'source' or 'target'
@@ -2994,12 +2977,12 @@ function useNodesInitialized(options = defaultOptions) {
  * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
- * @returns an array with connections
+ * @returns an array with handle connections
  */
 function useHandleConnections({ type, id = null, nodeId, onConnect, onDisconnect, }) {
     const _nodeId = useNodeId();
+    const currentNodeId = nodeId ?? _nodeId;
     const prevConnections = useRef(null);
-    const currentNodeId = nodeId || _nodeId;
     const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}-${id}`), areConnectionMapsEqual);
     useEffect(() => {
         // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
@@ -3041,7 +3024,7 @@ const selector$5 = (s) => ({
  * Hook for accessing the ongoing connection.
  *
  * @public
- * @returns ongoing connection: startHandle, endHandle, status, position
+ * @returns ongoing connection
  */
 function useConnection() {
     const ongoingConnection = useStore(selector$5, shallow);
@@ -3214,7 +3197,7 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, s.nodeOrigin), viewBB) : viewBB,
+        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
         rfId: s.rfId,
         nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
@@ -3227,7 +3210,7 @@ const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth, 
 // We need to rename the prop to be `CapitalCase` so that JSX will render it as
 // a component properly.
-nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan, zoomStep = 10, offsetScale = 5, }) {
+nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan, zoomStep = 10, offsetScale = 5, }) {
     const store = useStoreApi();
     const svg = useRef(null);
     const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight } = useStore(selector$1, shallow);
@@ -3285,12 +3268,15 @@ nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, positio
         : undefined;
     return (jsx(Panel, { position: position, style: {
             ...style,
-            '--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+            '--xy-minimap-background-color-props': typeof bgColor === 'string' ? bgColor : undefined,
+            '--xy-minimap-mask-background-color-props': typeof maskColor === 'string' ? maskColor : undefined,
+            '--xy-minimap-mask-stroke-color-props': typeof maskStrokeColor === 'string' ? maskStrokeColor : undefined,
+            '--xy-minimap-mask-stroke-width-props': typeof maskStrokeWidth === 'number' ? maskStrokeWidth * viewScale : undefined,
             '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
             '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
             '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
-        }, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
-        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", stroke: maskStrokeColor, strokeWidth: maskStrokeWidth, pointerEvents: "none" })] }) }));
+        }, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, className: "react-flow__minimap-svg", role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+        M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", pointerEvents: "none" })] }) }));
 }
 MiniMapComponent.displayName = 'MiniMap';
 const MiniMap = memo(MiniMapComponent);
@@ -3320,7 +3306,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                         snapToGrid,
                     };
                 },
-                onChange: (change) => {
+                onChange: (change, childChanges) => {
                     const { triggerNodeChanges } = store.getState();
                     const changes = [];
                     if (change.isXPosChange || change.isYPosChange) {
@@ -3346,6 +3332,13 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                         };
                         changes.push(dimensionChange);
                     }
+                    for (const childChange of childChanges) {
+                        const positionChange = {
+                            ...childChange,
+                            type: 'position',
+                        };
+                        changes.push(positionChange);
+                    }
                     triggerNodeChanges(changes);
                 },
                 onEnd: () => {
@@ -3450,7 +3443,7 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     if (!isActive || !nodes.length) {
         return null;
     }
-    const nodeRect = getNodesBounds(nodes, nodeOrigin);
+    const nodeRect = getNodesBounds(nodes, { nodeOrigin });
     const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
     const wrapperStyle = {
         position: 'absolute',