@xyflow/react 12.0.0-next.14 → 12.0.0-next.16

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cc from 'classcat';
-import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, nodeToRect, isRectObject, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, getNodeDimensions, nodeHasDimensions, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserNodes, devWarn, updateNodeInternals, updateAbsolutePositions, handleParentExpand, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, getInternalNodesBounds, 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, evaluateAbsolutePosition, nodeToRect, isRectObject, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, nodeHasDimensions, getNodeDimensions, clampPosition, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserNodes, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodesBounds, getNodeToolbarTransform } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, updateEdge } from '@xyflow/system';
 import { createContext, useContext, useMemo, useEffect, useRef, useState, forwardRef, useLayoutEffect, useCallback, memo } from 'react';
 import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
@@ -40,7 +40,6 @@ function useStoreApi() {
         getState: store.getState,
         setState: store.setState,
         subscribe: store.subscribe,
-        destroy: store.destroy,
     }), [store]);
 }
 
@@ -82,10 +81,21 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
     return (jsx(Panel, { position: position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) }));
 }
 
-const selector$o = (s) => ({
-    selectedNodes: Array.from(s.nodeLookup.values()).filter((n) => n.selected),
-    selectedEdges: s.edges.filter((e) => e.selected),
-});
+const selector$o = (s) => {
+    const selectedNodes = [];
+    const selectedEdges = [];
+    for (const [, node] of s.nodeLookup) {
+        if (node.selected) {
+            selectedNodes.push(node.internals.userNode);
+        }
+    }
+    for (const [, edge] of s.edgeLookup) {
+        if (edge.selected) {
+            selectedEdges.push(edge);
+        }
+    }
+    return { selectedNodes, selectedEdges };
+};
 const selectId = (obj) => obj.id;
 function areEqual(a, b) {
     return (shallow(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) &&
@@ -548,7 +558,7 @@ function applyChange(change, element) {
                 element.measured ??= {};
                 element.measured.width = change.dimensions.width;
                 element.measured.height = change.dimensions.height;
-                if (change.resizing) {
+                if (change.setAttributes) {
                     element.width = change.dimensions.width;
                     element.height = change.dimensions.height;
                 }
@@ -615,8 +625,8 @@ function createSelectionChange(id, selected) {
 }
 function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false) {
     const changes = [];
-    for (const [, item] of items) {
-        const willBeSelected = selectedIds.has(item.id);
+    for (const [id, item] of items) {
+        const willBeSelected = selectedIds.has(id);
         // we don't want to set all items to selected=false on the first selection
         if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {
             if (mutateItem) {
@@ -634,7 +644,8 @@ function getElementsDiffChanges({ items = [], lookup, }) {
     const changes = [];
     const itemsLookup = new Map(items.map((item) => [item.id, item]));
     for (const item of items) {
-        const storeItem = lookup.get(item.id);
+        const lookupItem = lookup.get(item.id);
+        const storeItem = lookupItem?.internals?.userNode ?? lookupItem;
         if (storeItem !== undefined && storeItem !== item) {
             changes.push({ id: item.id, item: item, type: 'replace' });
         }
@@ -677,33 +688,22 @@ function fixedForwardRef(render) {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 /**
- * Hook for accessing the ReactFlow instance.
+ * This hook returns a queue that can be used to batch updates.
  *
- * @public
- * @returns ReactFlowInstance
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
  */
-function useReactFlow() {
-    const viewportHelper = useViewportHelper();
-    const store = useStoreApi();
-    const getNodes = useCallback(() => store.getState().nodes.map((n) => ({ ...n })), []);
-    const getInternalNode = useCallback((id) => store.getState().nodeLookup.get(id), []);
-    const getNode = useCallback((id) => getInternalNode(id)?.internals.userNode, [getInternalNode]);
-    const getEdges = useCallback(() => {
-        const { edges = [] } = store.getState();
-        return edges.map((e) => ({ ...e }));
-    }, []);
-    const getEdge = useCallback((id) => {
-        const { edges = [] } = store.getState();
-        return edges.find((e) => e.id === id);
-    }, []);
-    // 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: [] });
+function useQueue(runQueue) {
     // 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);
+    const [shouldFlush, setShouldFlush] = useState(false);
+    // A reference of all the batched updates to process before the next render. We
+    // want a reference here so multiple synchronous calls to `setNodes` etc can be
+    // batched together.
+    const [queue] = useState(() => createQueue(() => setShouldFlush(true)));
     // 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`).
@@ -712,70 +712,123 @@ function useReactFlow() {
         // 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: [] };
+        if (!shouldFlush) {
+            queue.reset();
             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(next);
-            }
-            else if (onNodesChange) {
-                onNodesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: nodeLookup,
-                }));
-            }
-            setElementsQueue.current.nodes = [];
-        }
-        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(next);
-            }
-            else if (onEdgesChange) {
-                onEdgesChange(getElementsDiffChanges({
-                    items: next,
-                    lookup: edgeLookup,
-                }));
-            }
-            setElementsQueue.current.edges = [];
+        const queueItems = queue.get();
+        if (queueItems.length) {
+            runQueue(queueItems);
+            queue.reset();
         }
         // Beacuse we're using reactive state to trigger this effect, we need to flip
         // it back to false.
-        setShouldFlushQueue(false);
-    }, [shouldFlushQueue]);
+        setShouldFlush(false);
+    }, [shouldFlush]);
+    return queue;
+}
+function createQueue(cb) {
+    let queue = [];
+    return {
+        get: () => queue,
+        reset: () => {
+            queue = [];
+        },
+        push: (item) => {
+            queue.push(item);
+            cb();
+        },
+    };
+}
+
+const BatchContext = createContext(null);
+/**
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
+ *
+ * @internal
+ */
+function BatchProvider({ children, }) {
+    const store = useStoreApi();
+    const nodeQueueHandler = useCallback((queueItems) => {
+        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 queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
+        if (hasDefaultNodes) {
+            setNodes(next);
+        }
+        else if (onNodesChange) {
+            onNodesChange(getElementsDiffChanges({
+                items: next,
+                lookup: nodeLookup,
+            }));
+        }
+    }, []);
+    const nodeQueue = useQueue(nodeQueueHandler);
+    const edgeQueueHandler = useCallback((queueItems) => {
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        let next = edges;
+        for (const payload of queueItems) {
+            next = typeof payload === 'function' ? payload(next) : payload;
+        }
+        if (hasDefaultEdges) {
+            setEdges(next);
+        }
+        else if (onEdgesChange) {
+            onEdgesChange(getElementsDiffChanges({
+                items: next,
+                lookup: edgeLookup,
+            }));
+        }
+    }, []);
+    const edgeQueue = useQueue(edgeQueueHandler);
+    const value = useMemo(() => ({ nodeQueue, edgeQueue }), []);
+    return jsx(BatchContext.Provider, { value: value, children: children });
+}
+function useBatchContext() {
+    const batchContext = useContext(BatchContext);
+    if (!batchContext) {
+        throw new Error('useBatchContext must be used within a BatchProvider');
+    }
+    return batchContext;
+}
+
+/**
+ * Hook for accessing the ReactFlow instance.
+ *
+ * @public
+ * @returns ReactFlowInstance
+ */
+function useReactFlow() {
+    const viewportHelper = useViewportHelper();
+    const store = useStoreApi();
+    const batchContext = useBatchContext();
+    const getNodes = useCallback(() => store.getState().nodes.map((n) => ({ ...n })), []);
+    const getInternalNode = useCallback((id) => store.getState().nodeLookup.get(id), []);
+    const getNode = useCallback((id) => getInternalNode(id)?.internals.userNode, [getInternalNode]);
+    const getEdges = useCallback(() => {
+        const { edges = [] } = store.getState();
+        return edges.map((e) => ({ ...e }));
+    }, []);
+    const getEdge = useCallback((id) => store.getState().edgeLookup.get(id), []);
     const setNodes = useCallback((payload) => {
-        setElementsQueue.current.nodes.push(payload);
-        setShouldFlushQueue(true);
+        batchContext.nodeQueue.push(payload);
     }, []);
     const setEdges = useCallback((payload) => {
-        setElementsQueue.current.edges.push(payload);
-        setShouldFlushQueue(true);
+        batchContext.edgeQueue.push(payload);
     }, []);
     const addNodes = useCallback((payload) => {
         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);
+        batchContext.nodeQueue.push((nodes) => [...nodes, ...newNodes]);
     }, []);
     const addEdges = useCallback((payload) => {
         const newEdges = Array.isArray(payload) ? payload : [payload];
-        setElementsQueue.current.edges.push((edges) => [...edges, ...newEdges]);
-        setShouldFlushQueue(true);
+        batchContext.edgeQueue.push((edges) => [...edges, ...newEdges]);
     }, []);
     const toObject = useCallback(() => {
         const { nodes = [], edges = [], transform } = store.getState();
@@ -825,13 +878,25 @@ function useReactFlow() {
         }
         return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
     }, []);
-    const getNodeRect = useCallback(({ id }) => {
-        const internalNode = store.getState().nodeLookup.get(id);
-        return internalNode ? nodeToRect(internalNode) : null;
+    const getNodeRect = useCallback((node) => {
+        const { nodeLookup, nodeOrigin } = store.getState();
+        const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
+        const position = nodeToUse.parentId
+            ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
+            : nodeToUse.position;
+        const nodeWithPosition = {
+            id: nodeToUse.id,
+            position,
+            width: nodeToUse.measured?.width ?? nodeToUse.width,
+            height: nodeToUse.measured?.height ?? nodeToUse.height,
+            data: nodeToUse.data,
+        };
+        return nodeToRect(nodeWithPosition);
     }, []);
     const getIntersectingNodes = useCallback((nodeOrRect, partially = true, nodes) => {
         const isRect = isRectObject(nodeOrRect);
         const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+        const hasNodesOption = nodes !== undefined;
         if (!nodeRect) {
             return [];
         }
@@ -840,7 +905,7 @@ function useReactFlow() {
             if (internalNode && !isRect && (n.id === nodeOrRect.id || !internalNode.internals.positionAbsolute)) {
                 return false;
             }
-            const currNodeRect = nodeToRect(n);
+            const currNodeRect = nodeToRect(hasNodesOption ? n : internalNode);
             const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
             const partiallyVisible = partially && overlappingArea > 0;
             return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
@@ -856,7 +921,7 @@ function useReactFlow() {
         const partiallyVisible = partially && overlappingArea > 0;
         return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     }, []);
-    const updateNode = useCallback((id, nodeUpdate, options = { replace: true }) => {
+    const updateNode = useCallback((id, nodeUpdate, options = { replace: false }) => {
         setNodes((prevNodes) => prevNodes.map((node) => {
             if (node.id === id) {
                 const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node) : nodeUpdate;
@@ -1100,6 +1165,7 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
     const prevSelectedNodesCount = useRef(0);
     const prevSelectedEdgesCount = useRef(0);
     const containerBounds = useRef();
+    const edgeIdLookup = useRef(new Map());
     const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$j, shallow);
     const resetUserSelection = () => {
         store.setState({ userSelectionActive: false, userSelectionRect: null });
@@ -1120,7 +1186,7 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
     };
     const onWheel = onPaneScroll ? (event) => onPaneScroll(event) : undefined;
     const onMouseDown = (event) => {
-        const { resetSelectedElements, domNode } = store.getState();
+        const { resetSelectedElements, domNode, edgeLookup } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
         if (!elementsSelectable ||
             !isSelecting ||
@@ -1129,6 +1195,11 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
             !containerBounds.current) {
             return;
         }
+        edgeIdLookup.current = new Map();
+        for (const [id, edge] of edgeLookup) {
+            edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id]));
+            edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id]));
+        }
         const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
         resetSelectedElements();
         store.setState({
@@ -1148,24 +1219,24 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         if (!isSelecting || !containerBounds.current || !userSelectionRect) {
             return;
         }
-        store.setState({ userSelectionActive: true, nodesSelectionActive: false });
-        const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
-        const startX = userSelectionRect.startX ?? 0;
-        const startY = userSelectionRect.startY ?? 0;
+        const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
+        const { startX, startY } = userSelectionRect;
         const nextUserSelectRect = {
-            ...userSelectionRect,
-            x: mousePos.x < startX ? mousePos.x : startX,
-            y: mousePos.y < startY ? mousePos.y : startY,
-            width: Math.abs(mousePos.x - startX),
-            height: Math.abs(mousePos.y - startY),
+            startX,
+            startY,
+            x: mouseX < startX ? mouseX : startX,
+            y: mouseY < startY ? mouseY : startY,
+            width: Math.abs(mouseX - startX),
+            height: Math.abs(mouseY - startY),
         };
         const selectedNodes = getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true, nodeOrigin);
         const selectedEdgeIds = new Set();
         const selectedNodeIds = new Set();
         for (const selectedNode of selectedNodes) {
             selectedNodeIds.add(selectedNode.id);
-            for (const [edgeId, edge] of edgeLookup) {
-                if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
+            const edgeIds = edgeIdLookup.current.get(selectedNode.id);
+            if (edgeIds) {
+                for (const edgeId of edgeIds) {
                     selectedEdgeIds.add(edgeId);
                 }
             }
@@ -1182,6 +1253,8 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         }
         store.setState({
             userSelectionRect: nextUserSelectRect,
+            userSelectionActive: true,
+            nodesSelectionActive: false,
         });
     };
     const onMouseUp = (event) => {
@@ -1288,7 +1361,7 @@ function useMoveSelectedNodes() {
     const store = useStoreApi();
     const moveSelectedNodes = useCallback((params) => {
         const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } = store.getState();
-        const nodeUpdates = [];
+        const nodeUpdates = new Map();
         const isSelected = selectedAndDraggable(nodesDraggable);
         // by default a node moves 5px on each key press
         // if snap grid is enabled, we use that for the velocity
@@ -1317,7 +1390,7 @@ function useMoveSelectedNodes() {
             });
             node.position = position;
             node.internals.positionAbsolute = positionAbsolute;
-            nodeUpdates.push(node);
+            nodeUpdates.set(node.id, node);
         }
         updateNodePositions(nodeUpdates);
     }, []);
@@ -1515,13 +1588,10 @@ function getNodeInlineStyleDimensions(node) {
 }
 
 const selector$h = (s) => {
-    const selectedNodes = [];
-    for (const [, node] of s.nodeLookup) {
-        if (node.selected) {
-            selectedNodes.push(node);
-        }
-    }
-    const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
+    const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
+        nodeOrigin: s.nodeOrigin,
+        filter: (node) => !!node.selected,
+    });
     return {
         width,
         height,
@@ -1605,12 +1675,11 @@ function useVisibleNodeIds(onlyRenderVisible) {
 const selector$e = (s) => s.updateNodeInternals;
 function useResizeObserver() {
     const updateNodeInternals = useStore(selector$e);
-    const resizeObserverRef = useRef();
-    const resizeObserver = useMemo(() => {
+    const [resizeObserver] = useState(() => {
         if (typeof ResizeObserver === 'undefined') {
             return null;
         }
-        const observer = new ResizeObserver((entries) => {
+        return new ResizeObserver((entries) => {
             const updates = new Map();
             entries.forEach((entry) => {
                 const id = entry.target.getAttribute('data-id');
@@ -1621,31 +1690,74 @@ function useResizeObserver() {
             });
             updateNodeInternals(updates);
         });
-        resizeObserverRef.current = observer;
-        return observer;
-    }, []);
+    });
     useEffect(() => {
         return () => {
-            resizeObserverRef?.current?.disconnect();
+            resizeObserver?.disconnect();
         };
-    }, []);
+    }, [resizeObserver]);
     return resizeObserver;
 }
 
+/**
+ * Hook to handle the resize observation + internal updates for the passed node.
+ *
+ * @internal
+ * @returns nodeRef - reference to the node element
+ */
+function useNodeObserver({ node, nodeType, hasDimensions, resizeObserver, }) {
+    const store = useStoreApi();
+    const nodeRef = useRef(null);
+    const observedNode = useRef(null);
+    const prevSourcePosition = useRef(node.sourcePosition);
+    const prevTargetPosition = useRef(node.targetPosition);
+    const prevType = useRef(nodeType);
+    const isInitialized = hasDimensions && !!node.internals.handleBounds && !node.hidden;
+    useEffect(() => {
+        if (nodeRef.current && (!isInitialized || observedNode.current !== nodeRef.current)) {
+            if (observedNode.current) {
+                resizeObserver?.unobserve(observedNode.current);
+            }
+            resizeObserver?.observe(nodeRef.current);
+            observedNode.current = nodeRef.current;
+        }
+    }, [isInitialized]);
+    useEffect(() => {
+        return () => {
+            if (observedNode.current) {
+                resizeObserver?.unobserve(observedNode.current);
+                observedNode.current = null;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (nodeRef.current) {
+            // when the user programmatically changes the source or handle position, we need to update the internals
+            // to make sure the edges are updated correctly
+            const typeChanged = prevType.current !== nodeType;
+            const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
+            const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
+            if (typeChanged || sourcePosChanged || targetPosChanged) {
+                prevType.current = nodeType;
+                prevSourcePosition.current = node.sourcePosition;
+                prevTargetPosition.current = node.targetPosition;
+                store
+                    .getState()
+                    .updateNodeInternals(new Map([[node.id, { id: node.id, nodeElement: nodeRef.current, force: true }]]));
+            }
+        }
+    }, [node.id, nodeType, node.sourcePosition, node.targetPosition]);
+    return nodeRef;
+}
+
 function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeExtent, nodeOrigin, onError, }) {
-    const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
+    const { node, internals, isParent } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const positionAbsolute = nodeExtent
-            ? clampPosition(node.internals.positionAbsolute, nodeExtent)
-            : node.internals.positionAbsolute || { x: 0, y: 0 };
+        const isParent = s.parentLookup.has(id);
         return {
             node,
-            // we are mutating positionAbsolute, z and isParent attributes for sub flows
-            // so we we need to force a re-render when some change
-            positionAbsoluteX: positionAbsolute.x,
-            positionAbsoluteY: positionAbsolute.y,
-            zIndex: node.internals.z,
-            isParent: node.internals.isParent,
+            internals: node.internals,
+            isParent,
         };
     }, shallow);
     let nodeType = node.type || 'default';
@@ -1660,50 +1772,8 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
     const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
     const store = useStoreApi();
-    const nodeRef = useRef(null);
-    const prevSourcePosition = useRef(node.sourcePosition);
-    const prevTargetPosition = useRef(node.targetPosition);
-    const prevType = useRef(nodeType);
-    const nodeDimensions = getNodeDimensions(node);
-    const inlineDimensions = getNodeInlineStyleDimensions(node);
-    const initialized = nodeHasDimensions(node);
-    const hasHandleBounds = !!node.internals.handleBounds;
-    const moveSelectedNodes = useMoveSelectedNodes();
-    useEffect(() => {
-        const currNode = nodeRef.current;
-        return () => {
-            if (currNode) {
-                resizeObserver?.unobserve(currNode);
-            }
-        };
-    }, []);
-    useEffect(() => {
-        if (nodeRef.current && !node.hidden) {
-            const currNode = nodeRef.current;
-            if (!initialized || !hasHandleBounds) {
-                resizeObserver?.unobserve(currNode);
-                resizeObserver?.observe(currNode);
-            }
-        }
-    }, [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;
-        const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
-        const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
-        if (nodeRef.current && (typeChanged || sourcePosChanged || targetPosChanged)) {
-            if (typeChanged) {
-                prevType.current = nodeType;
-            }
-            if (sourcePosChanged) {
-                prevSourcePosition.current = node.sourcePosition;
-            }
-            if (targetPosChanged) {
-                prevTargetPosition.current = node.targetPosition;
-            }
-            store.getState().updateNodeInternals(new Map([[id, { id, nodeElement: nodeRef.current, force: true }]]));
-        }
-    }, [id, nodeType, node.sourcePosition, node.targetPosition]);
+    const hasDimensions = nodeHasDimensions(node);
+    const nodeRef = useNodeObserver({ node, nodeType, hasDimensions, resizeObserver });
     const dragging = useDrag({
         nodeRef,
         disabled: node.hidden || !isDraggable,
@@ -1712,12 +1782,17 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         nodeId: id,
         isSelectable,
     });
+    const moveSelectedNodes = useMoveSelectedNodes();
     if (node.hidden) {
         return null;
     }
-    const positionAbsoluteOrigin = getPositionWithOrigin({
-        x: positionAbsoluteX,
-        y: positionAbsoluteY,
+    const nodeDimensions = getNodeDimensions(node);
+    const inlineDimensions = getNodeInlineStyleDimensions(node);
+    const clampedPosition = nodeExtent
+        ? clampPosition(internals.positionAbsolute, nodeExtent)
+        : internals.positionAbsolute;
+    const positionWithOrigin = getPositionWithOrigin({
+        ...clampedPosition,
         ...nodeDimensions,
         origin: node.origin || nodeOrigin,
     });
@@ -1759,7 +1834,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             store.setState({
                 ariaLiveMessage: `Moved selected node ${event.key
                     .replace('Arrow', '')
-                    .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
+                    .toLowerCase()}. New position, x: ${~~clampedPosition.x}, y: ${~~clampedPosition.y}`,
             });
             moveSelectedNodes({
                 direction: arrowKeyDiffs[event.key],
@@ -1783,13 +1858,13 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
                 dragging,
             },
         ]), ref: nodeRef, style: {
-            zIndex,
-            transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+            zIndex: internals.z,
+            transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
-            visibility: initialized ? 'visible' : 'hidden',
+            visibility: hasDimensions ? 'visible' : 'hidden',
             ...node.style,
             ...inlineDimensions,
-        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, positionAbsoluteX: positionAbsoluteX, positionAbsoluteY: positionAbsoluteY, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: zIndex, ...nodeDimensions }) }) }));
+        }, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, positionAbsoluteX: clampedPosition.x, positionAbsoluteY: clampedPosition.y, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: internals.z, ...nodeDimensions }) }) }));
 }
 
 const selector$d = (s) => ({
@@ -2460,20 +2535,23 @@ const GraphView = memo(GraphViewComponent);
 
 const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, } = {}) => {
     const nodeLookup = new Map();
+    const parentLookup = new Map();
     const connectionLookup = new Map();
     const edgeLookup = new Map();
     const storeEdges = defaultEdges ?? edges ?? [];
     const storeNodes = defaultNodes ?? nodes ?? [];
     updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-    adoptUserNodes(storeNodes, nodeLookup, {
+    adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
         nodeOrigin: [0, 0],
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
-        const nodesWithDimensions = storeNodes.filter((node) => (node.width || node.initialWidth) && (node.height || node.initialHeight));
         // @todo users nodeOrigin should be used here
-        const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
+        const bounds = getInternalNodesBounds(nodeLookup, {
+            nodeOrigin: [0, 0],
+            filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
+        });
         const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
         transform = [x, y, zoom];
     }
@@ -2484,6 +2562,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         transform,
         nodes: storeNodes,
         nodeLookup,
+        parentLookup,
         edges: storeEdges,
         edgeLookup,
         connectionLookup,
@@ -2538,17 +2617,17 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     };
 };
 
-const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, }) => createWithEqualityFn((set, get) => ({
+const createStore = ({ 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();
+        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
         // - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
         // - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        adoptUserNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
+        adoptUserNodes(nodes, nodeLookup, parentLookup, { nodeOrigin, elevateNodesOnSelect, checkEquality: true });
         set({ nodes });
     },
     setEdges: (edges) => {
@@ -2572,8 +2651,8 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
     // changes its dimensions, this function is called to measure the
     // new dimensions and update the nodes.
     updateNodeInternals: (updates) => {
-        const { onNodesChange, fitView, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
-        const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, domNode, nodeOrigin);
+        const { onNodesChange, fitView, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
+        const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin);
         if (!updatedInternals) {
             return;
         }
@@ -2600,33 +2679,34 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         }
     },
     updateNodePositions: (nodeDragItems, dragging = false) => {
-        const { nodeLookup } = get();
-        const triggerChangeNodes = [];
-        const changes = nodeDragItems.map((node) => {
+        const parentExpandChildren = [];
+        const changes = [];
+        for (const [id, dragItem] of nodeDragItems) {
             // @todo add expandParent to drag item so that we can get rid of the look up here
-            const internalNode = nodeLookup.get(node.id);
             const change = {
-                id: node.id,
+                id,
                 type: 'position',
-                position: node.position,
+                position: dragItem.position,
                 dragging,
             };
-            if (internalNode?.expandParent && change.position) {
-                triggerChangeNodes.push({
-                    ...internalNode,
-                    position: change.position,
-                    internals: {
-                        ...internalNode.internals,
-                        positionAbsolute: node.internals.positionAbsolute,
+            if (dragItem?.expandParent && dragItem?.parentId && change.position) {
+                parentExpandChildren.push({
+                    id,
+                    parentId: dragItem.parentId,
+                    rect: {
+                        ...dragItem.internals.positionAbsolute,
+                        width: dragItem.measured.width,
+                        height: dragItem.measured.height,
                     },
                 });
                 change.position.x = Math.max(0, change.position.x);
                 change.position.y = Math.max(0, change.position.y);
             }
-            return change;
-        });
-        if (triggerChangeNodes.length > 0) {
-            const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+            changes.push(change);
+        }
+        if (parentExpandChildren.length > 0) {
+            const { nodeLookup, parentLookup } = get();
+            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
             changes.push(...parentExpandChanges);
         }
         get().triggerNodeChanges(changes);
@@ -2761,20 +2841,17 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
     reset: () => set({ ...getInitialState() }),
 }), Object.is);
 
-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,
-        });
-    }
-    return jsx(Provider$1, { value: storeRef.current, children: children });
+function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, children, }) {
+    const [store] = useState(() => createStore({
+        nodes,
+        edges,
+        defaultNodes,
+        defaultEdges,
+        width,
+        height,
+        fitView,
+    }));
+    return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
 }
 
 function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, }) {
@@ -2949,9 +3026,9 @@ const selector$6 = (options) => (s) => {
     if (s.nodeLookup.size === 0) {
         return false;
     }
-    for (const [, node] of s.nodeLookup) {
-        if (options.includeHiddenNodes || !node.hidden) {
-            if (node.internals.handleBounds === undefined) {
+    for (const [, { hidden, internals }] of s.nodeLookup) {
+        if (options.includeHiddenNodes || !hidden) {
+            if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
                 return false;
             }
         }
@@ -3193,7 +3270,7 @@ nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
 function NodeComponentWrapperInner({ id, nodeOrigin, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y } = useStore((s) => {
         const node = s.nodeLookup.get(id);
-        const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
+        const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
         return {
             node,
             x,
@@ -3333,24 +3410,43 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                     };
                 },
                 onChange: (change, childChanges) => {
-                    const { triggerNodeChanges } = store.getState();
+                    const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
                     const changes = [];
-                    if (change.isXPosChange || change.isYPosChange) {
+                    const nextPosition = { x: change.x, y: change.y };
+                    const node = nodeLookup.get(id);
+                    if (node && node.expandParent && node.parentId) {
+                        const child = {
+                            id: node.id,
+                            parentId: node.parentId,
+                            rect: {
+                                width: change.width ?? node.measured.width,
+                                height: change.height ?? node.measured.height,
+                                ...evaluateAbsolutePosition({
+                                    x: change.x ?? node.position.x,
+                                    y: change.y ?? node.position.y,
+                                }, node.parentId, nodeLookup, node.origin ?? nodeOrigin),
+                            },
+                        };
+                        const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
+                        changes.push(...parentExpandChanges);
+                        // when the parent was expanded by the child node, its position will be clamped at 0,0
+                        nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
+                        nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
+                    }
+                    if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
                         const positionChange = {
                             id,
                             type: 'position',
-                            position: {
-                                x: change.x,
-                                y: change.y,
-                            },
+                            position: { ...nextPosition },
                         };
                         changes.push(positionChange);
                     }
-                    if (change.isWidthChange || change.isHeightChange) {
+                    if (change.width !== undefined && change.height !== undefined) {
                         const dimensionChange = {
                             id,
                             type: 'dimensions',
                             resizing: true,
+                            setAttributes: true,
                             dimensions: {
                                 width: change.width,
                                 height: change.height,