@xyflow/react 12.0.0-next.12 → 12.0.0-next.13

package/dist/esm/index.mjs

@@ -1,8 +1,8 @@
 "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, nodeHasDimensions, nodeToRect, isRectObject, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getNodesBounds, clampPosition, internalsSymbol, getNodeDimensions, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, devWarn, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol, updateEdge } from '@xyflow/system';
+import { 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, updateNodeDimensions, 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';
+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';
 import { shallow } from 'zustand/shallow';
@@ -83,7 +83,7 @@ function Attribution({ proOptions, position = 'bottom-right' }) {
 }
 
 const selector$o = (s) => ({
-    selectedNodes: s.nodes.filter((n) => n.selected),
+    selectedNodes: Array.from(s.nodeLookup.values()).filter((n) => n.selected),
     selectedEdges: s.edges.filter((e) => e.selected),
 });
 const selectId = (obj) => obj.id;
@@ -356,10 +356,12 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
             target?.addEventListener('keydown', downHandler);
             target?.addEventListener('keyup', upHandler);
             window.addEventListener('blur', resetHandler);
+            window.addEventListener('contextmenu', resetHandler);
             return () => {
                 target?.removeEventListener('keydown', downHandler);
                 target?.removeEventListener('keyup', upHandler);
                 window.removeEventListener('blur', resetHandler);
+                window.removeEventListener('contextmenu', resetHandler);
             };
         }
     }, [keyCode, setKeyPressed]);
@@ -409,10 +411,10 @@ const useViewportHelper = () => {
                 return { x, y, zoom };
             },
             fitView: (options) => {
-                const { nodes, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
+                const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
                 return panZoom
                     ? fitView({
-                        nodes,
+                        nodeLookup,
                         width,
                         height,
                         nodeOrigin,
@@ -468,42 +470,6 @@ const useViewportHelper = () => {
     return viewportHelperFunctions;
 };
 
-function handleParentExpand(updatedElements, updateItem) {
-    for (const [index, item] of updatedElements.entries()) {
-        if (item.id === updateItem.parentNode) {
-            const parent = { ...item };
-            parent.computed ??= {};
-            const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
-            const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
-            if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
-                parent.width = parent.width ?? parent.computed.width;
-                parent.height = parent.height ?? parent.computed.height;
-                if (extendWidth > 0) {
-                    parent.width += extendWidth;
-                }
-                if (extendHeight > 0) {
-                    parent.height += extendHeight;
-                }
-                if (updateItem.position.x < 0) {
-                    const xDiff = Math.abs(updateItem.position.x);
-                    parent.position.x = parent.position.x - xDiff;
-                    parent.width += xDiff;
-                    updateItem.position.x = 0;
-                }
-                if (updateItem.position.y < 0) {
-                    const yDiff = Math.abs(updateItem.position.y);
-                    parent.position.y = parent.position.y - yDiff;
-                    parent.height += yDiff;
-                    updateItem.position.y = 0;
-                }
-                parent.computed.width = parent.width;
-                parent.computed.height = parent.height;
-                updatedElements[index] = parent;
-            }
-            break;
-        }
-    }
-}
 // This function applies changes to nodes or edges that are triggered by React Flow internally.
 // When you drag a node for example, React Flow will send a position change update.
 // This function then applies the changes and returns the updated elements.
@@ -555,14 +521,14 @@ function applyChanges(changes, elements) {
         /// each _mutate_ this object, so there's only ever one copy.
         const updatedElement = { ...element };
         for (const change of changes) {
-            applyChange(change, updatedElement, updatedElements);
+            applyChange(change, updatedElement);
         }
         updatedElements.push(updatedElement);
     }
     return updatedElements;
 }
 // Applies a single change to an element. This is a *mutable* update.
-function applyChange(change, element, elements = []) {
+function applyChange(change, element) {
     switch (change.type) {
         case 'select': {
             element.selected = change.selected;
@@ -572,23 +538,16 @@ function applyChange(change, element, elements = []) {
             if (typeof change.position !== 'undefined') {
                 element.position = change.position;
             }
-            if (typeof change.positionAbsolute !== 'undefined') {
-                element.computed ??= {};
-                element.computed.positionAbsolute = change.positionAbsolute;
-            }
             if (typeof change.dragging !== 'undefined') {
                 element.dragging = change.dragging;
             }
-            if (element.expandParent) {
-                handleParentExpand(elements, element);
-            }
             break;
         }
         case 'dimensions': {
             if (typeof change.dimensions !== 'undefined') {
-                element.computed ??= {};
-                element.computed.width = change.dimensions.width;
-                element.computed.height = change.dimensions.height;
+                element.measured ??= {};
+                element.measured.width = change.dimensions.width;
+                element.measured.height = change.dimensions.height;
                 if (change.resizing) {
                     element.width = change.dimensions.width;
                     element.height = change.dimensions.height;
@@ -597,9 +556,6 @@ function applyChange(change, element, elements = []) {
             if (typeof change.resizing === 'boolean') {
                 element.resizing = change.resizing;
             }
-            if (element.expandParent) {
-                handleParentExpand(elements, element);
-            }
             break;
         }
     }
@@ -659,7 +615,7 @@ function createSelectionChange(id, selected) {
 }
 function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false) {
     const changes = [];
-    for (const item of items) {
+    for (const [, item] of items) {
         const willBeSelected = selectedIds.has(item.id);
         // we don't want to set all items to selected=false on the first selection
         if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {
@@ -729,12 +685,9 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffec
 function useReactFlow() {
     const viewportHelper = useViewportHelper();
     const store = useStoreApi();
-    const getNodes = useCallback(() => {
-        return store.getState().nodes.map((n) => ({ ...n }));
-    }, []);
-    const getNode = useCallback((id) => {
-        return store.getState().nodeLookup.get(id);
-    }, []);
+    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 }));
@@ -872,11 +825,9 @@ function useReactFlow() {
         }
         return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
     }, []);
-    const getNodeRect = useCallback((nodeOrRect) => {
-        const node = isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect)
-            ? nodeOrRect
-            : store.getState().nodeLookup.get(nodeOrRect.id);
-        return node ? nodeToRect(node) : null;
+    const getNodeRect = useCallback(({ id }) => {
+        const internalNode = store.getState().nodeLookup.get(id);
+        return internalNode ? nodeToRect(internalNode) : null;
     }, []);
     const getIntersectingNodes = useCallback((nodeOrRect, partially = true, nodes) => {
         const isRect = isRectObject(nodeOrRect);
@@ -885,7 +836,8 @@ function useReactFlow() {
             return [];
         }
         return (nodes || store.getState().nodes).filter((n) => {
-            if (!isRect && (n.id === nodeOrRect.id || !n.computed?.positionAbsolute)) {
+            const internalNode = store.getState().nodeLookup.get(n.id);
+            if (internalNode && !isRect && (n.id === nodeOrRect.id || !internalNode.internals.positionAbsolute)) {
                 return false;
             }
             const currNodeRect = nodeToRect(n);
@@ -924,6 +876,7 @@ function useReactFlow() {
             ...viewportHelper,
             getNodes,
             getNode,
+            getInternalNode,
             getEdges,
             getEdge,
             setNodes,
@@ -941,6 +894,7 @@ function useReactFlow() {
         viewportHelper,
         getNodes,
         getNode,
+        getInternalNode,
         getEdges,
         getEdge,
         setNodes,
@@ -1190,7 +1144,7 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
         onSelectionStart?.(event);
     };
     const onMouseMove = (event) => {
-        const { userSelectionRect, edges, transform, nodeOrigin, nodes, triggerNodeChanges, triggerEdgeChanges } = store.getState();
+        const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = store.getState();
         if (!isSelecting || !containerBounds.current || !userSelectionRect) {
             return;
         }
@@ -1205,25 +1159,25 @@ function Pane({ isSelecting, selectionMode = SelectionMode.Full, panOnDrag, onSe
             width: Math.abs(mousePos.x - startX),
             height: Math.abs(mousePos.y - startY),
         };
-        const selectedNodes = getNodesInside(nodes, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true, nodeOrigin);
+        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 edge of edges) {
+            for (const [edgeId, edge] of edgeLookup) {
                 if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
-                    selectedEdgeIds.add(edge.id);
+                    selectedEdgeIds.add(edgeId);
                 }
             }
         }
         if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
             prevSelectedNodesCount.current = selectedNodeIds.size;
-            const changes = getSelectionChanges(nodes, selectedNodeIds, true);
+            const changes = getSelectionChanges(nodeLookup, selectedNodeIds, true);
             triggerNodeChanges(changes);
         }
         if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
             prevSelectedEdgesCount.current = selectedEdgeIds.size;
-            const changes = getSelectionChanges(edges, selectedEdgeIds);
+            const changes = getSelectionChanges(edgeLookup, selectedEdgeIds);
             triggerEdgeChanges(changes);
         }
         store.setState({
@@ -1333,36 +1287,38 @@ const selectedAndDraggable = (nodesDraggable) => (n) => n.selected && (n.draggab
 function useMoveSelectedNodes() {
     const store = useStoreApi();
     const moveSelectedNodes = useCallback((params) => {
-        const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin, } = store.getState();
-        const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
+        const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } = store.getState();
+        const nodeUpdates = [];
+        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
         const xVelo = snapToGrid ? snapGrid[0] : 5;
         const yVelo = snapToGrid ? snapGrid[1] : 5;
         const xDiff = params.direction.x * xVelo * params.factor;
         const yDiff = params.direction.y * yVelo * params.factor;
-        const nodeUpdates = selectedNodes.map((node) => {
-            if (node.computed?.positionAbsolute) {
-                let nextPosition = {
-                    x: node.computed.positionAbsolute.x + xDiff,
-                    y: node.computed.positionAbsolute.y + yDiff,
-                };
-                if (snapToGrid) {
-                    nextPosition = snapPosition(nextPosition, snapGrid);
-                }
-                const { position, positionAbsolute } = calculateNodePosition({
-                    nodeId: node.id,
-                    nextPosition,
-                    nodeLookup,
-                    nodeExtent,
-                    nodeOrigin,
-                    onError,
-                });
-                node.position = position;
-                node.computed.positionAbsolute = positionAbsolute;
+        for (const [, node] of nodeLookup) {
+            if (!isSelected(node)) {
+                continue;
             }
-            return node;
-        });
+            let nextPosition = {
+                x: node.internals.positionAbsolute.x + xDiff,
+                y: node.internals.positionAbsolute.y + yDiff,
+            };
+            if (snapToGrid) {
+                nextPosition = snapPosition(nextPosition, snapGrid);
+            }
+            const { position, positionAbsolute } = calculateNodePosition({
+                nodeId: node.id,
+                nextPosition,
+                nodeLookup,
+                nodeExtent,
+                nodeOrigin,
+                onError,
+            });
+            node.position = position;
+            node.internals.positionAbsolute = positionAbsolute;
+            nodeUpdates.push(node);
+        }
         updateNodePositions(nodeUpdates);
     }, []);
     return moveSelectedNodes;
@@ -1431,7 +1387,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
                 connectionMode: currentStore.connectionMode,
                 connectionRadius: currentStore.connectionRadius,
                 domNode: currentStore.domNode,
-                nodes: currentStore.nodes,
+                nodeLookup: currentStore.nodeLookup,
                 lib: currentStore.lib,
                 isTarget,
                 handleId,
@@ -1546,7 +1502,7 @@ const builtinNodeTypes = {
     group: GroupNode,
 };
 function getNodeInlineStyleDimensions(node) {
-    if (!node.computed) {
+    if (node.internals.handleBounds === undefined) {
         return {
             width: node.width ?? node.initialWidth ?? node.style?.width,
             height: node.height ?? node.initialHeight ?? node.style?.height,
@@ -1559,7 +1515,12 @@ function getNodeInlineStyleDimensions(node) {
 }
 
 const selector$h = (s) => {
-    const selectedNodes = s.nodes.filter((n) => n.selected);
+    const selectedNodes = [];
+    for (const [, node] of s.nodeLookup) {
+        if (node.selected) {
+            selectedNodes.push(node);
+        }
+    }
     const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
     return {
         width,
@@ -1626,7 +1587,7 @@ const FlowRenderer = memo(FlowRendererComponent);
 
 const selector$f = (onlyRenderVisible) => (s) => {
     return onlyRenderVisible
-        ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map((node) => node.id)
+        ? getNodesInside(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map((node) => node.id)
         : Array.from(s.nodeLookup.keys());
 };
 /**
@@ -1656,7 +1617,6 @@ function useResizeObserver() {
                 updates.set(id, {
                     id,
                     nodeElement: entry.target,
-                    forceUpdate: true,
                 });
             });
             updateNodeDimensions(updates);
@@ -1676,16 +1636,16 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
         const node = s.nodeLookup.get(id);
         const positionAbsolute = nodeExtent
-            ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
-            : node.computed?.positionAbsolute || { x: 0, y: 0 };
+            ? clampPosition(node.internals.positionAbsolute, nodeExtent)
+            : node.internals.positionAbsolute || { x: 0, y: 0 };
         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[internalsSymbol]?.z ?? 0,
-            isParent: !!node[internalsSymbol]?.isParent,
+            zIndex: node.internals.z,
+            isParent: node.internals.isParent,
         };
     }, shallow);
     let nodeType = node.type || 'default';
@@ -1707,12 +1667,13 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
     const nodeDimensions = getNodeDimensions(node);
     const inlineDimensions = getNodeInlineStyleDimensions(node);
     const initialized = nodeHasDimensions(node);
-    const hasHandleBounds = !!node[internalsSymbol]?.handleBounds;
+    const hasHandleBounds = !!node.internals.handleBounds;
     const moveSelectedNodes = useMoveSelectedNodes();
     useEffect(() => {
+        const currNode = nodeRef.current;
         return () => {
-            if (nodeRef.current) {
-                resizeObserver?.unobserve(nodeRef.current);
+            if (currNode) {
+                resizeObserver?.unobserve(currNode);
             }
         };
     }, []);
@@ -1740,7 +1701,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
             if (targetPosChanged) {
                 prevTargetPosition.current = node.targetPosition;
             }
-            store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, forceUpdate: true }]]));
+            store.getState().updateNodeDimensions(new Map([[id, { id, nodeElement: nodeRef.current, force: true }]]));
         }
     }, [id, nodeType, node.sourcePosition, node.targetPosition]);
     const dragging = useDrag({
@@ -2163,7 +2124,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
         if (event.button !== 0) {
             return;
         }
-        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodes, rfId: flowId, panBy, updateConnection, } = store.getState();
+        const { autoPanOnConnect, domNode, isValidConnection, connectionMode, connectionRadius, lib, onConnectStart, onConnectEnd, cancelConnection, nodeLookup, rfId: flowId, panBy, updateConnection, } = store.getState();
         const nodeId = isSourceHandle ? edge.target : edge.source;
         const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
         const handleType = isSourceHandle ? 'target' : 'source';
@@ -2182,7 +2143,7 @@ function EdgeUpdateAnchors({ isUpdatable, edgeUpdaterRadius, edge, targetHandleI
             domNode,
             handleId,
             nodeId,
-            nodes,
+            nodeLookup,
             isTarget,
             edgeUpdaterType: handleType,
             lib,
@@ -2403,7 +2364,7 @@ const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.B
         toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
         connectionMode: s.connectionMode,
     }), [nodeId]), shallow);
-    const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+    const fromHandleBounds = fromNode?.internals?.handleBounds;
     let handleBounds = fromHandleBounds?.[handleType];
     if (connectionMode === ConnectionMode.Loose) {
         handleBounds = handleBounds ? handleBounds : fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'];
@@ -2412,10 +2373,10 @@ const ConnectionLine = ({ nodeId, handleType, style, type = ConnectionLineType.B
         return null;
     }
     const fromHandle = handleId ? handleBounds.find((d) => d.id === handleId) : handleBounds[0];
-    const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.computed?.width ?? 0) / 2;
-    const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
-    const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
-    const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
+    const fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2;
+    const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0;
+    const fromX = (fromNode.internals.positionAbsolute.x ?? 0) + fromHandleX;
+    const fromY = (fromNode.internals.positionAbsolute.y ?? 0) + fromHandleY;
     const fromPosition = fromHandle?.position;
     const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
     if (!fromPosition || !toPosition) {
@@ -2504,13 +2465,13 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     const storeEdges = defaultEdges ?? edges ?? [];
     const storeNodes = defaultNodes ?? nodes ?? [];
     updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-    const nextNodes = adoptUserProvidedNodes(storeNodes, nodeLookup, {
+    adoptUserNodes(storeNodes, nodeLookup, {
         nodeOrigin: [0, 0],
         elevateNodesOnSelect: false,
     });
     let transform = [0, 0, 1];
     if (fitView && width && height) {
-        const nodesWithDimensions = nextNodes.filter((node) => (node.width || node.initialWidth) && (node.height || node.initialHeight));
+        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 { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
@@ -2521,7 +2482,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         width: 0,
         height: 0,
         transform,
-        nodes: nextNodes,
+        nodes: storeNodes,
         nodeLookup,
         edges: storeEdges,
         edgeLookup,
@@ -2587,8 +2548,8 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         //
         // When this happens, we take the note objects passed by the user and extend them with fields
         // relevant for internal React Flow operations.
-        const nodesWithInternalData = adoptUserProvidedNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
-        set({ nodes: nodesWithInternalData });
+        adoptUserNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
+        set({ nodes });
     },
     setEdges: (edges) => {
         const { connectionLookup, edgeLookup } = get();
@@ -2611,25 +2572,18 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
     // changes its dimensions, this function is called to measure the
     // new dimensions and update the nodes.
     updateNodeDimensions: (updates) => {
-        const { onNodesChange, fitView, nodes, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
-        const changes = [];
-        const updatedNodes = updateNodeDimensions(updates, nodes, nodeLookup, domNode, nodeOrigin, (id, dimensions) => {
-            changes.push({
-                id: id,
-                type: 'dimensions',
-                dimensions,
-            });
-        });
-        if (!updatedNodes) {
+        const { onNodesChange, fitView, nodeLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, } = get();
+        const changes = updateNodeDimensions(updates, nodeLookup, domNode, nodeOrigin);
+        if (changes.length === 0) {
             return;
         }
-        const nextNodes = updateAbsolutePositions(updatedNodes, nodeLookup, nodeOrigin);
+        updateAbsolutePositions(nodeLookup, { nodeOrigin });
         // we call fitView once initially after all dimensions are set
         let nextFitViewDone = fitViewDone;
         if (!fitViewDone && fitViewOnInit) {
-            nextFitViewDone = fitView(nextNodes, {
+            nextFitViewDone = fitView({
                 ...fitViewOnInitOptions,
-                nodes: fitViewOnInitOptions?.nodes || nextNodes,
+                nodes: fitViewOnInitOptions?.nodes,
             });
         }
         // here we are cirmumventing the onNodesChange handler
@@ -2637,7 +2591,7 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         // has not provided an onNodesChange handler.
         // Nodes are only rendered if they have a width and height
         // attribute which they get from this handler.
-        set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
+        set({ fitViewDone: nextFitViewDone });
         if (changes?.length > 0) {
             if (debug) {
                 console.log('React Flow: trigger node changes', changes);
@@ -2646,16 +2600,35 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         }
     },
     updateNodePositions: (nodeDragItems, dragging = false) => {
+        const { nodeLookup } = get();
+        const triggerChangeNodes = [];
         const changes = nodeDragItems.map((node) => {
+            // @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,
                 type: 'position',
                 position: node.position,
-                positionAbsolute: node.computed?.positionAbsolute,
                 dragging,
             };
+            if (internalNode?.expandParent && change.position) {
+                triggerChangeNodes.push({
+                    ...internalNode,
+                    position: change.position,
+                    internals: {
+                        ...internalNode.internals,
+                        positionAbsolute: node.internals.positionAbsolute,
+                    },
+                });
+                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(...parentExpandChanges);
+        }
         get().triggerNodeChanges(changes);
     },
     triggerNodeChanges: (changes) => {
@@ -2685,24 +2658,24 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         }
     },
     addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
             const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
             triggerNodeChanges(nodeChanges);
             return;
         }
-        triggerNodeChanges(getSelectionChanges(nodes, new Set([...selectedNodeIds]), true));
-        triggerEdgeChanges(getSelectionChanges(edges));
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
+        triggerEdgeChanges(getSelectionChanges(edgeLookup));
     },
     addSelectedEdges: (selectedEdgeIds) => {
-        const { multiSelectionActive, edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
         if (multiSelectionActive) {
             const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
             triggerEdgeChanges(changedEdges);
             return;
         }
-        triggerEdgeChanges(getSelectionChanges(edges, new Set([...selectedEdgeIds])));
-        triggerNodeChanges(getSelectionChanges(nodes, new Set(), true));
+        triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
     },
     unselectNodesAndEdges: ({ nodes, edges } = {}) => {
         const { edges: storeEdges, nodes: storeNodes, triggerNodeChanges, triggerEdgeChanges } = get();
@@ -2738,32 +2711,32 @@ const createRFStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height
         triggerEdgeChanges(edgeChanges);
     },
     setNodeExtent: (nodeExtent) => {
-        const { nodes } = get();
+        const { nodeLookup } = get();
+        for (const [, node] of nodeLookup) {
+            const positionAbsolute = clampPosition(node.position, nodeExtent);
+            nodeLookup.set(node.id, {
+                ...node,
+                internals: {
+                    ...node.internals,
+                    positionAbsolute,
+                },
+            });
+        }
         set({
             nodeExtent,
-            nodes: nodes.map((node) => {
-                const positionAbsolute = clampPosition(node.position, nodeExtent);
-                return {
-                    ...node,
-                    computed: {
-                        ...node.computed,
-                        positionAbsolute,
-                    },
-                };
-            }),
         });
     },
     panBy: (delta) => {
         const { transform, width, height, panZoom, translateExtent } = get();
         return panBy({ delta, panZoom, transform, translateExtent, width, height });
     },
-    fitView: (nodes, options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get();
+    fitView: (options) => {
+        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin, nodeLookup } = get();
         if (!panZoom) {
             return false;
         }
         return fitView({
-            nodes,
+            nodeLookup,
             width,
             height,
             panZoom,
@@ -2861,7 +2834,7 @@ function useUpdateNodeInternals() {
         updateIds.forEach((updateId) => {
             const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`);
             if (nodeElement) {
-                updates.set(updateId, { id: updateId, nodeElement, forceUpdate: true });
+                updates.set(updateId, { id: updateId, nodeElement, force: true });
             }
         });
         requestAnimationFrame(() => updateNodeDimensions(updates));
@@ -2973,12 +2946,12 @@ function useOnSelectionChange({ onChange }) {
 }
 
 const selector$6 = (options) => (s) => {
-    if (s.nodes.length === 0) {
+    if (s.nodeLookup.size === 0) {
         return false;
     }
-    for (const node of s.nodes) {
+    for (const [, node] of s.nodeLookup) {
         if (options.includeHiddenNodes || !node.hidden) {
-            if (node[internalsSymbol]?.handleBounds === undefined) {
+            if (node.internals.handleBounds === undefined) {
                 return false;
             }
         }
@@ -3066,6 +3039,18 @@ function useConnection() {
     return ongoingConnection;
 }
 
+/**
+ * Hook for getting an internal node by id
+ *
+ * @public
+ * @param id - id of the node
+ * @returns array with visible node ids
+ */
+function useInternalNode(id) {
+    const node = useStore(useCallback((s) => s.nodeLookup.get(id), [id]), shallow);
+    return node;
+}
+
 function LinePattern({ dimensions, lineWidth, variant, className }) {
     return (jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(['react-flow__background-pattern', variant, className]) }));
 }
@@ -3143,7 +3128,7 @@ const selector$3 = (s) => ({
     minZoomReached: s.transform[2] <= s.minZoom,
     maxZoomReached: s.transform[2] >= s.maxZoom,
 });
-function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', 'aria-label': ariaLabel = 'React Flow controls', }) {
+function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', orientation = 'vertical', 'aria-label': ariaLabel = 'React Flow controls', }) {
     const store = useStoreApi();
     const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow);
     const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -3167,7 +3152,8 @@ function ControlsComponent({ style, showZoom = true, showFitView = true, showInt
         });
         onInteractiveChange?.(!isInteractive);
     };
-    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
+    const orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
+    return (jsxs(Panel, { className: cc(['react-flow__controls', orientationClass, className]), position: position, style: style, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
 }
 ControlsComponent.displayName = 'Controls';
 const Controls = memo(ControlsComponent);
@@ -3234,7 +3220,9 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
+        boundingRect: s.nodeLookup.size > 0
+            ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
+            : viewBB,
         rfId: s.rfId,
         nodeOrigin: s.nodeOrigin,
         panZoom: s.panZoom,
@@ -3441,12 +3429,12 @@ function NodeToolbarPortal({ children }) {
     return createPortal(children, wrapperRef);
 }
 
-const nodeEqualityFn = (a, b) => a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
-    a?.computed?.positionAbsolute?.y !== b?.computed?.positionAbsolute?.y ||
-    a?.computed?.width !== b?.computed?.width ||
-    a?.computed?.height !== b?.computed?.height ||
+const nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x ||
+    a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y ||
+    a?.measured.width !== b?.measured.width ||
+    a?.measured.height !== b?.measured.height ||
     a?.selected !== b?.selected ||
-    a?.[internalsSymbol]?.z !== b?.[internalsSymbol]?.z;
+    a?.internals.z !== b?.internals.z;
 const nodesEqualityFn = (a, b) => {
     if (a.length !== b.length) {
         return false;
@@ -3482,7 +3470,7 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
         return null;
     }
     const nodeRect = getNodesBounds(nodes, { nodeOrigin });
-    const zIndex = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
+    const zIndex = Math.max(...nodes.map((node) => (node.internals?.z || 1) + 1));
     const wrapperStyle = {
         position: 'absolute',
         transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
@@ -3492,4 +3480,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
     return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
 }
 
-export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, handleParentExpand, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
+export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };