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

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 "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, 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';
@@ -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 = () => {
@@ -636,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) {
@@ -719,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();
@@ -1296,23 +1320,22 @@ 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 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 = {
@@ -1335,9 +1358,9 @@ function useUpdateNodePositions() {
             }
             return node;
         });
-        updateNodePositions(nodeUpdates, true, false);
+        updateNodePositions(nodeUpdates);
     }, []);
-    return updatePositions;
+    return moveSelectedNodes;
 }
 
 const NodeIdContext = createContext(null);
@@ -1519,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) {
@@ -1542,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,
             });
         }
     };
@@ -1653,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;
@@ -1690,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,
@@ -1701,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;
@@ -1745,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,
             });
         }
     };
@@ -2200,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;
     }
@@ -2442,37 +2473,14 @@ 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,
     });
@@ -2491,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,
@@ -2544,8 +2552,8 @@ const getInitialState = ({ nodes = [], edges = [], width, height, fitView, } = {
     };
 };
 
-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:
@@ -2554,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 });
     },
@@ -2563,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
@@ -2621,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();
@@ -2717,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();
@@ -2781,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,
@@ -2804,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%',
@@ -2823,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';
 
@@ -3011,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
@@ -3244,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);
@@ -3302,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);
@@ -3337,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) {
@@ -3363,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: () => {