Merge pull request #4105 from xyflow/refactor/internal-nodes

React Flow 12: separate user nodes and internal nodes

examples/react/cypress/components/hooks/useNodes.cy.tsx

@@ -15,8 +15,7 @@ const initialNodes: Node[] = nodes.map((n) => ({
 
 const expectedNodes: Node[] = initialNodes.map((n) => ({
   ...n,
-  computed: {
+  measured: {
-    positionAbsolute: n.position,
     ...nodeDimensions,
   },
 }));

examples/react/cypress/components/reactflow/on-nodes-change.cy.tsx

@@ -48,7 +48,7 @@ describe('<ReactFlow />: onNodesChange', () => {
         id: '1',
         item: {
           ...nodes[0],
-          computed: { positionAbsolute: nodes[0].position, width: 200, height: 100 },
+          measured: { width: 200, height: 100 },
           style: { width: 200, height: 100 },
         },
       },

examples/react/cypress/components/utils/apply-changes.cy.ts

@@ -136,8 +136,8 @@ describe('applyChanges Testing', () => {
     ];
     const nextNodes = applyNodeChanges(nodeChanges, nodes);
 
-    expect(nodes[0].computed).to.be.undefined;
+    expect(nodes[0].measured).to.be.undefined;
-    expect(nextNodes[0].computed).to.be.deep.equal({ width: newWidth, height: newHeight });
+    expect(nextNodes[0].measured).to.be.deep.equal({ width: newWidth, height: newHeight });
     expect(nextNodes[0].width).to.be.undefined;
     expect(nextNodes[0].height).to.be.undefined;
   });
@@ -153,7 +153,7 @@ describe('applyChanges Testing', () => {
     const nextNodes = applyNodeChanges(nodeChanges, nodes);
 
     expect(nextNodes[0].position).to.be.deep.equal(newPosition);
-    expect(nextNodes[0].computed).to.be.deep.equal({ width: newWidth, height: newHeight });
+    expect(nextNodes[0].measured).to.be.deep.equal({ width: newWidth, height: newHeight });
   });
 
   it('replaces nodes/edges', () => {

examples/react/src/examples/Basic/index.tsx

@@ -56,18 +56,19 @@ const initialEdges: Edge[] = [
 const defaultEdgeOptions = {};
 
 const BasicFlow = () => {
-  const { setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } =
+  const { addNodes, setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } =
     useReactFlow();
 
   const updatePos = () => {
     setNodes((nodes) =>
       nodes.map((node) => {
-        node.position = {
+        return {
-          x: Math.random() * 400,
+          ...node,
-          y: Math.random() * 400,
+          position: {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          },
         };
-
-        return node;
       })
     );
   };
@@ -78,9 +79,10 @@ const BasicFlow = () => {
   const toggleClassnames = () => {
     setNodes((nodes) =>
       nodes.map((node) => {
-        node.className = node.className === 'light' ? 'dark' : 'light';
+        return {
-
+          ...node,
-        return node;
+          className: node.className === 'light' ? 'dark' : 'light',
+        };
       })
     );
   };
@@ -108,6 +110,14 @@ const BasicFlow = () => {
     updateNodeData('1', { label: 'update' });
     updateNodeData('2', { label: 'update' });
   };
+  const addNode = () => {
+    addNodes({
+      id: `${Math.random()}`,
+      data: { label: 'Node' },
+      position: { x: Math.random() * 300, y: Math.random() * 300 },
+      className: 'light',
+    });
+  };
 
   return (
     <ReactFlow
@@ -144,6 +154,7 @@ const BasicFlow = () => {
         <button onClick={deleteSomeElements}>deleteSomeElements</button>
         <button onClick={onSetNodes}>setNodes</button>
         <button onClick={onUpdateNode}>updateNode</button>
+        <button onClick={addNode}>addNode</button>
       </Panel>
     </ReactFlow>
   );

examples/react/src/examples/EasyConnect/utils.tsx

@@ -9,8 +9,8 @@ function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
     width: intersectionNodeWidth,
     height: intersectionNodeHeight,
     positionAbsolute: intersectionNodePosition,
-  } = intersectionNode.computed || {};
+  } = intersectionNode.measured || {};
-  const targetPosition = targetNode.computed?.positionAbsolute!;
+  const targetPosition = targetNode.measured?.positionAbsolute!;
 
   const w = intersectionNodeWidth! / 2;
   const h = intersectionNodeHeight! / 2;
@@ -33,7 +33,7 @@ function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
 
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
 function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
-  const n = { ...node.computed?.positionAbsolute, ...node };
+  const n = { ...node.measured?.positionAbsolute, ...node };
   const nx = Math.round(n.x!);
   const ny = Math.round(n.y!);
   const px = Math.round(intersectionPoint.x);
@@ -42,13 +42,13 @@ function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
   if (px <= nx + 1) {
     return Position.Left;
   }
-  if (px >= nx + n.computed?.width! - 1) {
+  if (px >= nx + n.measured?.width! - 1) {
     return Position.Right;
   }
   if (py <= ny + 1) {
     return Position.Top;
   }
-  if (py >= n.y! + n.computed?.height! - 1) {
+  if (py >= n.y! + n.measured?.height! - 1) {
     return Position.Bottom;
   }
 

examples/react/src/examples/FloatingEdges/FloatingEdge.tsx

@@ -5,8 +5,8 @@ import { getEdgeParams } from './utils';
 
 const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   const { sourceNode, targetNode } = useStore((s) => {
-    const sourceNode = s.nodes.find((n) => n.id === source);
+    const sourceNode = s.nodeLookup.get(source);
-    const targetNode = s.nodes.find((n) => n.id === target);
+    const targetNode = s.nodeLookup.get(target);
 
     return { sourceNode, targetNode };
   });

examples/react/src/examples/FloatingEdges/utils.ts

@@ -1,4 +1,4 @@
-import { Position, XYPosition, Node, Edge } from '@xyflow/react';
+import { Position, XYPosition, Node, Edge, InternalNode } from '@xyflow/react';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
@@ -6,7 +6,7 @@ function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPositi
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
 
   const { position: intersectionNodePosition } = intersectionNode;
-  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.computed ?? {
+  const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.measured ?? {
     width: 0,
     height: 0,
   };
@@ -42,13 +42,13 @@ function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
   if (px <= nx + 1) {
     return Position.Left;
   }
-  if (px >= nx + (n.computed?.width ?? 0) - 1) {
+  if (px >= nx + (n.measured?.width ?? 0) - 1) {
     return Position.Right;
   }
   if (py <= ny + 1) {
     return Position.Top;
   }
-  if (py >= n.y + (n.computed?.height ?? 0) - 1) {
+  if (py >= n.y + (n.measured?.height ?? 0) - 1) {
     return Position.Bottom;
   }
 
@@ -56,7 +56,7 @@ function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
 }
 
 // returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source: Node, target: Node) {
+export function getEdgeParams(source: InternalNode, target: InternalNode) {
   const sourceIntersectionPoint = getNodeIntersection(source, target);
   const targetIntersectionPoint = getNodeIntersection(target, source);
 

examples/react/src/examples/NodeResizer/index.tsx

@@ -137,7 +137,7 @@ const initialNodes: Node[] = [
       label: 'Child with extent: parent',
     },
     position: { x: 50, y: 50 },
-    parentNode: '5',
+    parentId: '5',
     extent: 'parent',
     width: 50,
     height: 100,
@@ -148,7 +148,7 @@ const initialNodes: Node[] = [
     type: 'defaultResizer',
     data: { label: 'Child with expandParent' },
     position: { x: 150, y: 100 },
-    parentNode: '5',
+    parentId: '5',
     expandParent: true,
     style: { ...nodeStyle },
   },
@@ -157,7 +157,7 @@ const initialNodes: Node[] = [
     type: 'defaultResizer',
     data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true },
     position: { x: 25, y: 200 },
-    parentNode: '5',
+    parentId: '5',
     expandParent: true,
     style: { ...nodeStyle },
   },

examples/react/src/examples/Subflow/index.tsx

@@ -50,7 +50,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 4a' },
     position: { x: 15, y: 15 },
     className: 'light',
-    parentNode: '4',
+    parentId: '4',
     origin: [0.5, 0.5],
 
     extent: [
@@ -68,21 +68,21 @@ const initialNodes: Node[] = [
       height: 200,
       width: 300,
     },
-    parentNode: '4',
+    parentId: '4',
   },
   {
     id: '4b1',
     data: { label: 'Node 4b1' },
     position: { x: 40, y: 20 },
     className: 'light',
-    parentNode: '4b',
+    parentId: '4b',
   },
   {
     id: '4b2',
     data: { label: 'Node 4b2' },
     position: { x: 20, y: 100 },
     className: 'light',
-    parentNode: '4b',
+    parentId: '4b',
   },
   {
     id: '5',
@@ -98,7 +98,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 5a' },
     position: { x: 0, y: 0 },
     className: 'light',
-    parentNode: '5',
+    parentId: '5',
     extent: 'parent',
   },
   {
@@ -106,7 +106,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 5b' },
     position: { x: 225, y: 50 },
     className: 'light',
-    parentNode: '5',
+    parentId: '5',
     expandParent: true,
   },
   {
@@ -160,7 +160,7 @@ const Subflow = () => {
   const updatePos = () => {
     setNodes((nds) => {
       return nds.map((n) => {
-        if (!n.parentNode) {
+        if (!n.parentId) {
           return {
             ...n,
             position: {
@@ -194,7 +194,7 @@ const Subflow = () => {
       return nds.map((n) => {
         return {
           ...n,
-          hidden: !!n.parentNode && !n.hidden,
+          hidden: !!n.parentId && !n.hidden,
         };
       });
     });

examples/svelte/src/routes/examples/node-resizer/+page.svelte

@@ -113,7 +113,7 @@
 			type: 'defaultResizer',
 			data: { label: 'Child with extent parent' },
 			position: { x: 50, y: 50 },
-			parentNode: '5',
+			parentId: '5',
 			extent: 'parent',
 			style: nodeStyle
 		},
@@ -122,7 +122,7 @@
 			type: 'defaultResizer',
 			data: { label: 'Child' },
 			position: { x: 100, y: 100 },
-			parentNode: '5',
+			parentId: '5',
 			style: nodeStyle
 		}
 	]);

examples/svelte/src/routes/examples/subflows/+page.svelte

@@ -36,7 +36,7 @@
 			id: '4a',
 			data: { label: 'Node 4a' },
 			position: { x: 15, y: 15 },
-			parentNode: '4',
+			parentId: '4',
 			extent: [
 				[0, 0],
 				[100, 100]
@@ -47,19 +47,19 @@
 			data: { label: 'Node 4b' },
 			position: { x: 100, y: 60 },
 			style: 'width: 300px; height: 200px;',
-			parentNode: '4'
+			parentId: '4'
 		},
 		{
 			id: '4b1',
 			data: { label: 'Node 4b1' },
 			position: { x: 40, y: 20 },
-			parentNode: '4b'
+			parentId: '4b'
 		},
 		{
 			id: '4b2',
 			data: { label: 'Node 4b2' },
 			position: { x: 20, y: 100 },
-			parentNode: '4b'
+			parentId: '4b'
 		},
 		{
 			id: '5',
@@ -73,14 +73,14 @@
 			id: '5a',
 			data: { label: 'Node 5a' },
 			position: { x: 0, y: 0 },
-			parentNode: '5',
+			parentId: '5',
 			extent: 'parent'
 		},
 		{
 			id: '5b',
 			data: { label: 'Node 5b' },
 			position: { x: 225, y: 50 },
-			parentNode: '5',
+			parentId: '5',
 			expandParent: true
 		},
 		{

packages/react/src/additional-components/MiniMap/MiniMap.tsx

@@ -3,7 +3,7 @@
 import { memo, useEffect, useRef, type MouseEvent, useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
+import { getInternalNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { Panel } from '../../components/Panel';
@@ -26,7 +26,9 @@ const selector = (s: ReactFlowState) => {
   return {
     viewBB,
     boundingRect:
-      s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, { nodeOrigin: s.nodeOrigin }), viewBB) : viewBB,
+      s.nodeLookup.size > 0
+        ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
+        : viewBB,
     rfId: s.rfId,
     nodeOrigin: s.nodeOrigin,
     panZoom: s.panZoom,

packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx

@@ -6,7 +6,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
 import { MiniMapNode } from './MiniMapNode';
-import type { ReactFlowState, Node } from '../../types';
+import type { ReactFlowState, Node, InternalNode } from '../../types';
 import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';
 
 declare const window: any;
@@ -85,7 +85,7 @@ function NodeComponentWrapperInner<NodeType extends Node>({
   shapeRendering: string;
 }) {
   const { node, x, y } = useStore((s) => {
-    const node = s.nodeLookup.get(id) as NodeType;
+    const node = s.nodeLookup.get(id) as InternalNode<NodeType>;
     const { x, y } = getNodePositionWithOrigin(node, node?.origin || nodeOrigin).positionAbsolute;
 
     return {

packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx

@@ -5,12 +5,14 @@ import {
   ResizeControlVariant,
   type XYResizerInstance,
   type XYResizerChange,
-  XYResizerChildChange,
+  type XYResizerChildChange,
+  type NodeChange,
+  type NodeDimensionChange,
+  type NodePositionChange,
 } from '@xyflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import type { NodeChange, NodeDimensionChange, NodePositionChange } from '../../types';
 import type { ResizeControlProps, ResizeControlLineProps } from './types';
 
 function ResizeControl({

packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx

@@ -1,23 +1,23 @@
 import { useCallback, CSSProperties } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-import { getNodesBounds, Rect, Position, internalsSymbol, getNodeToolbarTransform } from '@xyflow/system';
+import { Rect, Position, getNodeToolbarTransform, getNodesBounds } from '@xyflow/system';
 
-import { Node, ReactFlowState } from '../../types';
+import { InternalNode, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { NodeToolbarPortal } from './NodeToolbarPortal';
 import type { NodeToolbarProps } from './types';
 
-const nodeEqualityFn = (a?: Node, b?: Node) =>
+const nodeEqualityFn = (a?: InternalNode, b?: InternalNode) =>
-  a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
+  a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x ||
-  a?.computed?.positionAbsolute?.y !== b?.computed?.positionAbsolute?.y ||
+  a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y ||
-  a?.computed?.width !== b?.computed?.width ||
+  a?.measured.width !== b?.measured.width ||
-  a?.computed?.height !== b?.computed?.height ||
+  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: Node[], b: Node[]) => {
+const nodesEqualityFn = (a: InternalNode[], b: InternalNode[]) => {
   if (a.length !== b.length) {
     return false;
   }
@@ -49,10 +49,10 @@ export function NodeToolbar({
   const contextNodeId = useNodeId();
 
   const nodesSelector = useCallback(
-    (state: ReactFlowState): Node[] => {
+    (state: ReactFlowState): InternalNode[] => {
       const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
 
-      return nodeIds.reduce<Node[]>((acc, id) => {
+      return nodeIds.reduce<InternalNode[]>((acc, id) => {
         const node = state.nodeLookup.get(id);
         if (node) {
           acc.push(node);
@@ -74,7 +74,7 @@ export function NodeToolbar({
   }
 
   const nodeRect: Rect = getNodesBounds(nodes, { nodeOrigin });
-  const zIndex: number = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
+  const zIndex: number = Math.max(...nodes.map((node) => (node.internals?.z || 1) + 1));
 
   const wrapperStyle: CSSProperties = {
     position: 'absolute',

packages/react/src/components/ConnectionLine/index.tsx

@@ -2,7 +2,6 @@ import { CSSProperties, useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
 import {
-  internalsSymbol,
   Position,
   ConnectionLineType,
   ConnectionMode,
@@ -53,7 +52,7 @@ const ConnectionLine = ({
     ),
     shallow
   );
-  const fromHandleBounds = fromNode?.[internalsSymbol]?.handleBounds;
+  const fromHandleBounds = fromNode?.internals?.handleBounds;
   let handleBounds = fromHandleBounds?.[handleType];
 
   if (connectionMode === ConnectionMode.Loose) {
@@ -65,10 +64,10 @@ const ConnectionLine = ({
   }
 
   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 fromHandleX = fromHandle ? fromHandle.x + fromHandle.width / 2 : (fromNode.measured.width ?? 0) / 2;
-  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.computed?.height ?? 0;
+  const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode.measured.height ?? 0;
-  const fromX = (fromNode.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
+  const fromX = (fromNode.internals.positionAbsolute.x ?? 0) + fromHandleX;
-  const fromY = (fromNode.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
+  const fromY = (fromNode.internals.positionAbsolute.y ?? 0) + fromHandleY;
   const fromPosition = fromHandle?.position;
   const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
 

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -54,7 +54,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       onConnectStart,
       onConnectEnd,
       cancelConnection,
-      nodes,
+      nodeLookup,
       rfId: flowId,
       panBy,
       updateConnection,
@@ -82,7 +82,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       domNode,
       handleId,
       nodeId,
-      nodes,
+      nodeLookup,
       isTarget,
       edgeUpdaterType: handleType,
       lib,

packages/react/src/components/Handle/index.tsx

@@ -126,7 +126,7 @@ function HandleComponent(
         connectionMode: currentStore.connectionMode,
         connectionRadius: currentStore.connectionRadius,
         domNode: currentStore.domNode,
-        nodes: currentStore.nodes,
+        nodeLookup: currentStore.nodeLookup,
         lib: currentStore.lib,
         isTarget,
         handleId,

packages/react/src/components/NodeWrapper/index.tsx

@@ -7,7 +7,6 @@ import {
   errorMessages,
   getNodeDimensions,
   getPositionWithOrigin,
-  internalsSymbol,
   isInputDOMNode,
   nodeHasDimensions,
 } from '@xyflow/system';
@@ -19,7 +18,7 @@ import { useDrag } from '../../hooks/useDrag';
 import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { handleNodeClick } from '../Nodes/utils';
 import { arrowKeyDiffs, builtinNodeTypes, getNodeInlineStyleDimensions } from './utils';
-import type { Node, NodeWrapperProps } from '../../types';
+import type { InternalNode, Node, NodeWrapperProps } from '../../types';
 
 export function NodeWrapper<NodeType extends Node>({
   id,
@@ -44,11 +43,11 @@ export function NodeWrapper<NodeType extends Node>({
   onError,
 }: NodeWrapperProps<NodeType>) {
   const { node, positionAbsoluteX, positionAbsoluteY, zIndex, isParent } = useStore((s) => {
-    const node = s.nodeLookup.get(id)! as NodeType;
+    const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
 
     const positionAbsolute = nodeExtent
-      ? clampPosition(node.computed?.positionAbsolute, nodeExtent)
+      ? clampPosition(node.internals.positionAbsolute, nodeExtent)
-      : node.computed?.positionAbsolute || { x: 0, y: 0 };
+      : node.internals.positionAbsolute || { x: 0, y: 0 };
 
     return {
       node,
@@ -56,8 +55,8 @@ export function NodeWrapper<NodeType extends Node>({
       // so we we need to force a re-render when some change
       positionAbsoluteX: positionAbsolute.x,
       positionAbsoluteY: positionAbsolute.y,
-      zIndex: node[internalsSymbol]?.z ?? 0,
+      zIndex: node.internals.z,
-      isParent: !!node[internalsSymbol]?.isParent,
+      isParent: node.internals.isParent,
     };
   }, shallow);
 
@@ -84,14 +83,16 @@ export function NodeWrapper<NodeType extends Node>({
   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) {
+      if (currNode) {
-        resizeObserver?.unobserve(nodeRef.current);
+        resizeObserver?.unobserve(currNode);
       }
     };
   }, []);
@@ -123,7 +124,7 @@ export function NodeWrapper<NodeType extends Node>({
       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]);
 

packages/react/src/components/NodeWrapper/utils.tsx

@@ -4,7 +4,7 @@ import { InputNode } from '../Nodes/InputNode';
 import { DefaultNode } from '../Nodes/DefaultNode';
 import { GroupNode } from '../Nodes/GroupNode';
 import { OutputNode } from '../Nodes/OutputNode';
-import type { Node, NodeTypes } from '../../types';
+import type { InternalNode, Node, NodeTypes } from '../../types';
 
 export const arrowKeyDiffs: Record<string, XYPosition> = {
   ArrowUp: { x: 0, y: -1 },
@@ -21,12 +21,12 @@ export const builtinNodeTypes: NodeTypes = {
 };
 
 export function getNodeInlineStyleDimensions<NodeType extends Node = Node>(
-  node: NodeType
+  node: InternalNode<NodeType>
 ): {
   width: number | string | undefined;
   height: number | string | undefined;
 } {
-  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,

packages/react/src/components/NodesSelection/index.tsx

@@ -11,7 +11,7 @@ import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useDrag } from '../../hooks/useDrag';
 import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes';
 import { arrowKeyDiffs } from '../NodeWrapper/utils';
-import type { Node, ReactFlowState } from '../../types';
+import type { InternalNode, Node, ReactFlowState } from '../../types';
 
 export type NodesSelectionProps<NodeType> = {
   onSelectionContextMenu?: (event: MouseEvent, nodes: NodeType[]) => void;
@@ -20,7 +20,13 @@ export type NodesSelectionProps<NodeType> = {
 };
 
 const selector = (s: ReactFlowState) => {
-  const selectedNodes = s.nodes.filter((n) => n.selected);
+  const selectedNodes: InternalNode[] = [];
+  for (const [, node] of s.nodeLookup) {
+    if (node.selected) {
+      selectedNodes.push(node);
+    }
+  }
+
   const { width, height, x, y } = getNodesBounds(selectedNodes, { nodeOrigin: s.nodeOrigin });
 
   return {

packages/react/src/components/SelectionListener/index.tsx

@@ -15,7 +15,7 @@ type SelectionListenerProps = {
 };
 
 const selector = (s: ReactFlowState) => ({
-  selectedNodes: s.nodes.filter((n) => n.selected),
+  selectedNodes: Array.from(s.nodeLookup.values()).filter((n) => n.selected),
   selectedEdges: s.edges.filter((e) => e.selected),
 });
 

packages/react/src/components/StoreUpdater/index.tsx

@@ -138,7 +138,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
 
         if (fieldValue === previousFieldValue) continue;
         if (typeof props[fieldName] === 'undefined') continue;
-
         // Custom handling with dedicated setters for some fields
         if (fieldName === 'nodes') setNodes(fieldValue as Node[]);
         else if (fieldName === 'edges') setEdges(fieldValue as Edge[]);

packages/react/src/container/NodeRenderer/useResizeObserver.ts

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef } from 'react';
 
 import { ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
+import { NodeDimensionUpdate } from '@xyflow/system';
 
 const selector = (s: ReactFlowState) => s.updateNodeDimensions;
 
@@ -15,14 +16,13 @@ export function useResizeObserver() {
     }
 
     const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      const updates = new Map();
+      const updates = new Map<string, NodeDimensionUpdate>();
 
       entries.forEach((entry: ResizeObserverEntry) => {
         const id = entry.target.getAttribute('data-id') as string;
         updates.set(id, {
           id,
           nodeElement: entry.target as HTMLDivElement,
-          forceUpdate: true,
         });
       });
 

packages/react/src/container/Pane/index.tsx

@@ -5,13 +5,13 @@
 import { useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system';
+import { getNodesInside, getEventPosition, SelectionMode, type NodeChange, type EdgeChange } from '@xyflow/system';
 
 import { UserSelection } from '../../components/UserSelection';
 import { containerStyle } from '../../styles/utils';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges } from '../../utils';
-import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types';
+import type { ReactFlowProps, ReactFlowState } from '../../types';
 
 type PaneProps = {
   isSelecting: boolean;
@@ -128,7 +128,7 @@ export function Pane({
   };
 
   const onMouseMove = (event: ReactMouseEvent): void => {
-    const { userSelectionRect, edges, transform, nodeOrigin, nodes, triggerNodeChanges, triggerEdgeChanges } =
+    const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
       store.getState();
     if (!isSelecting || !containerBounds.current || !userSelectionRect) {
       return;
@@ -149,7 +149,7 @@ export function Pane({
     };
 
     const selectedNodes = getNodesInside(
-      nodes,
+      nodeLookup,
       nextUserSelectRect,
       transform,
       selectionMode === SelectionMode.Partial,
@@ -163,22 +163,22 @@ export function Pane({
     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) as NodeChange[];
+      const changes = getSelectionChanges(nodeLookup, selectedNodeIds, true) as NodeChange[];
       triggerNodeChanges(changes);
     }
 
     if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
       prevSelectedEdgesCount.current = selectedEdgeIds.size;
-      const changes = getSelectionChanges(edges, selectedEdgeIds) as EdgeChange[];
+      const changes = getSelectionChanges(edgeLookup, selectedEdgeIds) as EdgeChange[];
       triggerEdgeChanges(changes);
     }
 

packages/react/src/hooks/useInternalNode.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useStore } from './useStore';
+import type { InternalNode, Node } from '../types';
+
+/**
+ * Hook for getting an internal node by id
+ *
+ * @public
+ * @param id - id of the node
+ * @returns array with visible node ids
+ */
+export function useInternalNode<NodeType extends Node = Node>(id: string): InternalNode<NodeType> | undefined {
+  const node = useStore(
+    useCallback((s) => s.nodeLookup.get(id) as InternalNode<NodeType> | undefined, [id]),
+    shallow
+  );
+
+  return node;
+}

packages/react/src/hooks/useMoveSelectedNodes.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { calculateNodePosition, snapPosition, type XYPosition } from '@xyflow/system';
 
-import { Node } from '../types';
+import { type Node } from '../types';
 import { useStoreApi } from './useStore';
 
 const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) =>
@@ -17,18 +17,11 @@ export function useMoveSelectedNodes() {
   const store = useStoreApi();
 
   const moveSelectedNodes = useCallback((params: { direction: XYPosition; factor: number }) => {
-    const {
+    const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } =
-      nodeExtent,
+      store.getState();
-      nodes,
+    const nodeUpdates = [];
-      snapToGrid,
+    const isSelected = selectedAndDraggable(nodesDraggable);
-      snapGrid,
+
-      nodesDraggable,
-      onError,
-      updateNodePositions,
-      nodeLookup,
-      nodeOrigin,
-    } = store.getState();
-    const selectedNodes = nodes.filter(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;
@@ -37,32 +30,34 @@ export function useMoveSelectedNodes() {
     const xDiff = params.direction.x * xVelo * params.factor;
     const yDiff = params.direction.y * yVelo * params.factor;
 
-    const nodeUpdates = selectedNodes.map((node) => {
+    for (const [, node] of nodeLookup) {
-      if (node.computed?.positionAbsolute) {
+      if (!isSelected(node)) {
-        let nextPosition = {
+        continue;
-          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;
       }
 
-      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);
   }, []);

packages/react/src/hooks/useNodesInitialized.ts

@@ -1,5 +1,3 @@
-import { internalsSymbol } from '@xyflow/system';
-
 import { useStore } from './useStore';
 import type { ReactFlowState } from '../types';
 
@@ -8,13 +6,13 @@ export type UseNodesInitializedOptions = {
 };
 
 const selector = (options: UseNodesInitializedOptions) => (s: ReactFlowState) => {
-  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;
       }
     }

packages/react/src/hooks/useReactFlow.ts

@@ -1,16 +1,9 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
-import {
+import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
-  getElementsToRemove,
-  getOverlappingArea,
-  isRectObject,
-  nodeHasDimensions,
-  nodeToRect,
-  type Rect,
-} from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from './useStore';
-import type { ReactFlowInstance, Instance, Node, Edge } from '../types';
+import type { ReactFlowInstance, Instance, Node, Edge, InternalNode } from '../types';
 import { getElementsDiffChanges, isNode } from '../utils';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
@@ -27,13 +20,20 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
   const viewportHelper = useViewportHelper();
   const store = useStoreApi();
 
-  const getNodes = useCallback<Instance.GetNodes<NodeType>>(() => {
+  const getNodes = useCallback<Instance.GetNodes<NodeType>>(
-    return store.getState().nodes.map((n) => ({ ...n })) as NodeType[];
+    () => store.getState().nodes.map((n) => ({ ...n })) as NodeType[],
-  }, []);
+    []
+  );
 
-  const getNode = useCallback<Instance.GetNode<NodeType>>((id) => {
+  const getInternalNode = useCallback<Instance.GetInternalNode<NodeType>>(
-    return store.getState().nodeLookup.get(id) as NodeType;
+    (id) => store.getState().nodeLookup.get(id) as InternalNode<NodeType>,
-  }, []);
+    []
+  );
+
+  const getNode = useCallback<Instance.GetNode<NodeType>>(
+    (id) => getInternalNode(id)?.internals.userNode as NodeType,
+    [getInternalNode]
+  );
 
   const getEdges = useCallback<Instance.GetEdges<EdgeType>>(() => {
     const { edges = [] } = store.getState();
@@ -223,13 +223,9 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
     []
   );
 
-  const getNodeRect = useCallback((nodeOrRect: NodeType | { id: NodeType['id'] }): Rect | null => {
+  const getNodeRect = useCallback(({ id }: { id: string }): Rect | null => {
-    const node =
+    const internalNode = store.getState().nodeLookup.get(id);
-      isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect)
+    return internalNode ? nodeToRect(internalNode) : null;
-        ? nodeOrRect
-        : (store.getState().nodeLookup.get(nodeOrRect.id) as NodeType);
-
-    return node ? nodeToRect(node) : null;
   }, []);
 
   const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(
@@ -242,7 +238,9 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
       }
 
       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;
         }
 
@@ -308,6 +306,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
       ...viewportHelper,
       getNodes,
       getNode,
+      getInternalNode,
       getEdges,
       getEdge,
       setNodes,
@@ -325,6 +324,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
     viewportHelper,
     getNodes,
     getNode,
+    getInternalNode,
     getEdges,
     getEdge,
     setNodes,

packages/react/src/hooks/useUpdateNodeInternals.ts

@@ -21,7 +21,7 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
       const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
 
       if (nodeElement) {
-        updates.set(updateId, { id: updateId, nodeElement, forceUpdate: true });
+        updates.set(updateId, { id: updateId, nodeElement, force: true });
       }
     });
 

packages/react/src/hooks/useViewportHelper.ts

@@ -48,12 +48,12 @@ const useViewportHelper = (): ViewportHelperFunctions => {
         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,

packages/react/src/hooks/useVisibleNodeIds.ts

@@ -1,13 +1,13 @@
-import { getNodesInside } from '@xyflow/system';
+import { useCallback } from 'react';
 import { shallow } from 'zustand/shallow';
+import { getNodesInside } from '@xyflow/system';
 
 import { useStore } from './useStore';
 import type { Node, ReactFlowState } from '../types';
-import { useCallback } from 'react';
 
 const selector = (onlyRenderVisible: boolean) => (s: ReactFlowState) => {
   return onlyRenderVisible
-    ? getNodesInside<Node>(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map(
+    ? getNodesInside<Node>(s.nodeLookup, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true).map(
         (node) => node.id
       )
     : Array.from(s.nodeLookup.keys());

packages/react/src/index.ts

@@ -26,9 +26,10 @@ export { useNodesInitialized, type UseNodesInitializedOptions } from './hooks/us
 export { useHandleConnections } from './hooks/useHandleConnections';
 export { useNodesData } from './hooks/useNodesData';
 export { useConnection } from './hooks/useConnection';
+export { useInternalNode } from './hooks/useInternalNode';
 export { useNodeId } from './contexts/NodeIdContext';
 
-export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/changes';
+export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { isNode, isEdge } from './utils/general';
 
 export * from './additional-components';
@@ -103,5 +104,4 @@ export {
   addEdge,
   updateEdge,
   getConnectedEdges,
-  internalsSymbol,
 } from '@xyflow/system';

packages/react/src/store/index.ts

@@ -2,27 +2,20 @@ import { createWithEqualityFn } from 'zustand/traditional';
 import {
   clampPosition,
   fitView as fitViewSystem,
-  adoptUserProvidedNodes,
+  adoptUserNodes,
   updateAbsolutePositions,
   panBy as panBySystem,
-  Dimensions,
   updateNodeDimensions as updateNodeDimensionsSystem,
   updateConnectionLookup,
+  handleParentExpand,
+  NodeChange,
+  EdgeSelectionChange,
+  NodeSelectionChange,
 } from '@xyflow/system';
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import getInitialState from './initialState';
-import type {
+import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions, InternalNode } from '../types';
-  ReactFlowState,
-  Node,
-  Edge,
-  NodeDimensionChange,
-  EdgeSelectionChange,
-  NodeSelectionChange,
-  NodePositionChange,
-  UnselectNodesAndEdgesParams,
-  FitViewOptions,
-} from '../types';
 
 const createRFStore = ({
   nodes,
@@ -52,9 +45,9 @@ const createRFStore = ({
         //
         // 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 });
+        adoptUserNodes(nodes, nodeLookup, { nodeOrigin, elevateNodesOnSelect });
 
-        set({ nodes: nodesWithInternalData });
+        set({ nodes });
       },
       setEdges: (edges: Edge[]) => {
         const { connectionLookup, edgeLookup } = get();
@@ -82,7 +75,6 @@ const createRFStore = ({
         const {
           onNodesChange,
           fitView,
-          nodes,
           nodeLookup,
           fitViewOnInit,
           fitViewDone,
@@ -91,35 +83,21 @@ const createRFStore = ({
           nodeOrigin,
           debug,
         } = get();
-        const changes: NodeDimensionChange[] = [];
 
-        const updatedNodes = updateNodeDimensionsSystem(
+        const changes = updateNodeDimensionsSystem(updates, nodeLookup, domNode, nodeOrigin);
-          updates,
-          nodes,
-          nodeLookup,
-          domNode,
-          nodeOrigin,
-          (id: string, dimensions: Dimensions) => {
-            changes.push({
-              id: id,
-              type: 'dimensions',
-              dimensions,
-            });
-          }
-        );
 
-        if (!updatedNodes) {
+        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,
           });
         }
 
@@ -128,7 +106,7 @@ const createRFStore = ({
         // 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) {
@@ -138,18 +116,41 @@ const createRFStore = ({
         }
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {
-        const changes = nodeDragItems.map((node) => {
+        const { nodeLookup } = get();
-          const change: NodePositionChange = {
+        const triggerChangeNodes: InternalNode[] = [];
+
+        const changes: NodeChange[] = 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: NodeChange = {
             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) => {
@@ -185,7 +186,7 @@ const createRFStore = ({
         }
       },
       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));
@@ -193,11 +194,11 @@ const createRFStore = ({
           return;
         }
 
-        triggerNodeChanges(getSelectionChanges(nodes, new Set([...selectedNodeIds]), true));
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
-        triggerEdgeChanges(getSelectionChanges(edges));
+        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));
@@ -205,8 +206,8 @@ const createRFStore = ({
           return;
         }
 
-        triggerEdgeChanges(getSelectionChanges(edges, new Set([...selectedEdgeIds])));
+        triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
-        triggerNodeChanges(getSelectionChanges(nodes, new Set(), true));
+        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
       },
       unselectNodesAndEdges: ({ nodes, edges }: UnselectNodesAndEdgesParams = {}) => {
         const { edges: storeEdges, nodes: storeNodes, triggerNodeChanges, triggerEdgeChanges } = get();
@@ -255,29 +256,30 @@ const createRFStore = ({
         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): boolean => {
         const { transform, width, height, panZoom, translateExtent } = get();
         return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
       },
-      fitView: (nodes: Node[], options?: FitViewOptions): boolean => {
+      fitView: (options?: FitViewOptions): boolean => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin } = get();
+        const { panZoom, width, height, minZoom, maxZoom, nodeOrigin, nodeLookup } = get();
 
         if (!panZoom) {
           return false;
@@ -285,7 +287,7 @@ const createRFStore = ({
 
         return fitViewSystem(
           {
-            nodes,
+            nodeLookup,
             width,
             height,
             panZoom,

packages/react/src/store/initialState.ts

@@ -1,7 +1,7 @@
 import {
   infiniteExtent,
   ConnectionMode,
-  adoptUserProvidedNodes,
+  adoptUserNodes,
   getNodesBounds,
   getViewportForBounds,
   Transform,
@@ -35,7 +35,7 @@ const getInitialState = ({
   const storeNodes = defaultNodes ?? nodes ?? [];
 
   updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-  const nextNodes = adoptUserProvidedNodes(storeNodes, nodeLookup, {
+  adoptUserNodes(storeNodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false,
   });
@@ -43,7 +43,7 @@ const getInitialState = ({
   let transform: Transform = [0, 0, 1];
 
   if (fitView && width && height) {
-    const nodesWithDimensions = nextNodes.filter(
+    const nodesWithDimensions = storeNodes.filter(
       (node) => (node.width || node.initialWidth) && (node.height || node.initialHeight)
     );
     // @todo users nodeOrigin should be used here
@@ -57,7 +57,7 @@ const getInitialState = ({
     width: 0,
     height: 0,
     transform,
-    nodes: nextNodes,
+    nodes: storeNodes,
     nodeLookup,
     edges: storeEdges,
     edgeLookup,

packages/react/src/types/general.ts

@@ -12,9 +12,11 @@ import {
   XYPosition,
   OnBeforeDeleteBase,
   Connection,
+  NodeChange,
+  EdgeChange,
 } from '@xyflow/system';
 
-import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
+import type { Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
 
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;

packages/react/src/types/index.ts

@@ -1,6 +1,5 @@
 export * from './nodes';
 export * from './edges';
-export * from './changes';
 export * from './component-props';
 export * from './general';
 export * from './store';

packages/react/src/types/instance.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 import type { Rect, Viewport } from '@xyflow/system';
-import type { Node, Edge, ViewportHelperFunctions } from '.';
+import type { Node, Edge, ViewportHelperFunctions, InternalNode } from '.';
 
 export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
   nodes: NodeType[];
@@ -20,6 +20,7 @@ export namespace Instance {
   ) => void;
   export type AddNodes<NodeType extends Node = Node> = (payload: NodeType[] | NodeType) => void;
   export type GetNode<NodeType extends Node = Node> = (id: string) => NodeType | undefined;
+  export type GetInternalNode<NodeType extends Node = Node> = (id: string) => InternalNode<NodeType> | undefined;
   export type GetEdges<EdgeType extends Edge = Edge> = () => EdgeType[];
   export type SetEdges<EdgeType extends Edge = Edge> = (
     payload: EdgeType[] | ((edges: EdgeType[]) => EdgeType[])
@@ -83,6 +84,13 @@ export type ReactFlowInstance<NodeType extends Node = Node, EdgeType extends Edg
    * @returns the node or undefined if no node was found
    */
   getNode: Instance.GetNode<NodeType>;
+  /**
+   * Returns an internal node by id.
+   *
+   * @param id - the node id
+   * @returns the internal node or undefined if no node was found
+   */
+  getInternalNode: Instance.GetInternalNode<NodeType>;
   /**
    * Returns edges.
    *

packages/react/src/types/nodes.ts

@@ -1,5 +1,12 @@
 import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import type { CoordinateExtent, NodeBase, NodeOrigin, OnError, NodeProps as NodePropsBase } from '@xyflow/system';
+import type {
+  CoordinateExtent,
+  NodeBase,
+  NodeOrigin,
+  OnError,
+  NodeProps as NodePropsBase,
+  InternalNodeBase,
+} from '@xyflow/system';
 
 import { NodeTypes } from './general';
 
@@ -17,6 +24,8 @@ export type Node<
   focusable?: boolean;
 };
 
+export type InternalNode<NodeType extends Node = Node> = InternalNodeBase<NodeType>;
+
 export type NodeMouseHandler<NodeType extends Node = Node> = (event: ReactMouseEvent, node: NodeType) => void;
 export type SelectionDragHandler<NodeType extends Node = Node> = (event: ReactMouseEvent, nodes: NodeType[]) => void;
 export type OnNodeDrag<NodeType extends Node = Node> = (

packages/react/src/types/store.ts

@@ -25,12 +25,13 @@ import {
   type EdgeLookup,
   type ConnectionLookup,
   type NodeLookup,
+  NodeChange,
+  EdgeChange,
 } from '@xyflow/system';
 
 import type {
   Edge,
   Node,
-  NodeChange,
   OnNodesChange,
   OnEdgesChange,
   DefaultEdgeOptions,
@@ -43,7 +44,7 @@ import type {
   OnNodeDrag,
   OnBeforeDelete,
   IsValidConnection,
-  EdgeChange,
+  InternalNode,
 } from '.';
 
 export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
@@ -52,7 +53,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   height: number;
   transform: Transform;
   nodes: NodeType[];
-  nodeLookup: NodeLookup<NodeType>;
+  nodeLookup: NodeLookup<InternalNode<NodeType>>;
   edges: Edge[];
   edgeLookup: EdgeLookup<EdgeType>;
   connectionLookup: ConnectionLookup;
@@ -169,7 +170,7 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   triggerNodeChanges: (changes: NodeChange<NodeType>[]) => void;
   triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
   panBy: PanBy;
-  fitView: (nodes: NodeType[], options?: FitViewOptions) => boolean;
+  fitView: (options?: FitViewOptions) => boolean;
 };
 
 export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<

packages/react/src/utils/changes.ts

@@ -1,51 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { EdgeLookup, NodeLookup } from '@xyflow/system';
+import {
-import type { Node, Edge, EdgeChange, NodeChange, NodeSelectionChange, EdgeSelectionChange } from '../types';
+  EdgeLookup,
-
+  NodeLookup,
-export function handleParentExpand(updatedElements: any[], updateItem: any) {
+  EdgeChange,
-  for (const [index, item] of updatedElements.entries()) {
+  NodeChange,
-    if (item.id === updateItem.parentNode) {
+  NodeSelectionChange,
-      const parent = { ...item };
+  EdgeSelectionChange,
-      parent.computed ??= {};
+} from '@xyflow/system';
-
+import type { Node, Edge, InternalNode } from '../types';
-      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.
@@ -103,7 +65,7 @@ function applyChanges(changes: any[], elements: any[]): any[] {
     const updatedElement = { ...element };
 
     for (const change of changes) {
-      applyChange(change, updatedElement, updatedElements);
+      applyChange(change, updatedElement);
     }
 
     updatedElements.push(updatedElement);
@@ -113,7 +75,7 @@ function applyChanges(changes: any[], elements: any[]): any[] {
 }
 
 // Applies a single change to an element. This is a *mutable* update.
-function applyChange(change: any, element: any, elements: any[] = []): any {
+function applyChange(change: any, element: any): any {
   switch (change.type) {
     case 'select': {
       element.selected = change.selected;
@@ -125,26 +87,18 @@ function applyChange(change: any, element: any, elements: any[] = []): any {
         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.measured ??= {};
-        element.computed.width = change.dimensions.width;
+        element.measured.width = change.dimensions.width;
-        element.computed.height = change.dimensions.height;
+        element.measured.height = change.dimensions.height;
 
         if (change.resizing) {
           element.width = change.dimensions.width;
@@ -156,10 +110,6 @@ function applyChange(change: any, element: any, elements: any[] = []): any {
         element.resizing = change.resizing;
       }
 
-      if (element.expandParent) {
-        handleParentExpand(elements, element);
-      }
-
       break;
     }
   }
@@ -228,13 +178,13 @@ export function createSelectionChange(id: string, selected: boolean): NodeSelect
 }
 
 export function getSelectionChanges(
-  items: any[],
+  items: Map<string, any>,
   selectedIds: Set<string> = new Set(),
   mutateItem = false
 ): NodeSelectionChange[] | EdgeSelectionChange[] {
   const changes: NodeSelectionChange[] | EdgeSelectionChange[] = [];
 
-  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
@@ -266,7 +216,7 @@ export function getElementsDiffChanges({
   lookup,
 }: {
   items: Node[] | undefined;
-  lookup: NodeLookup<Node>;
+  lookup: NodeLookup<InternalNode<Node>>;
 }): NodeChange[];
 export function getElementsDiffChanges({
   items,

packages/svelte/src/lib/store/utils.ts

@@ -7,7 +7,7 @@ import {
   type Writable
 } from 'svelte/store';
 import {
-  adoptUserProvidedNodes,
+  adoptUserNodes,
   updateConnectionLookup,
   type Viewport,
   type PanZoomInstance,
@@ -141,7 +141,7 @@ export const createNodesStore = (
   let elevateNodesOnSelect = true;
 
   const _set = (nds: Node[]): Node[] => {
-    const nextNodes = adoptUserProvidedNodes(nds, nodeLookup, {
+    const nextNodes = adoptUserNodes(nds, nodeLookup, {
       elevateNodesOnSelect,
       defaults
     });

packages/system/src/constants.ts

@@ -25,8 +25,6 @@ export const errorMessages = {
     `Node with id "${id}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
 };
 
-export const internalsSymbol = Symbol.for('internals');
-
 export const infiniteExtent: CoordinateExtent = [
   [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
   [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],

packages/system/src/types/changes.ts

@@ -1,6 +1,4 @@
-import type { XYPosition, Dimensions } from '@xyflow/system';
+import type { XYPosition, Dimensions, NodeBase, EdgeBase } from '.';
-
-import type { Node, Edge } from '.';
 
 export type NodeDimensionChange = {
   id: string;
@@ -28,12 +26,12 @@ export type NodeRemoveChange = {
   type: 'remove';
 };
 
-export type NodeAddChange<NodeType extends Node = Node> = {
+export type NodeAddChange<NodeType extends NodeBase = NodeBase> = {
   item: NodeType;
   type: 'add';
 };
 
-export type NodeReplaceChange<NodeType extends Node = Node> = {
+export type NodeReplaceChange<NodeType extends NodeBase = NodeBase> = {
   id: string;
   item: NodeType;
   type: 'replace';
@@ -43,7 +41,7 @@ export type NodeReplaceChange<NodeType extends Node = Node> = {
  * Union type of all possible node changes.
  * @public
  */
-export type NodeChange<NodeType extends Node = Node> =
+export type NodeChange<NodeType extends NodeBase = NodeBase> =
   | NodeDimensionChange
   | NodePositionChange
   | NodeSelectionChange
@@ -53,18 +51,18 @@ export type NodeChange<NodeType extends Node = Node> =
 
 export type EdgeSelectionChange = NodeSelectionChange;
 export type EdgeRemoveChange = NodeRemoveChange;
-export type EdgeAddChange<EdgeType extends Edge = Edge> = {
+export type EdgeAddChange<EdgeType extends EdgeBase = EdgeBase> = {
   item: EdgeType;
   type: 'add';
 };
 
-export type EdgeReplaceChange<EdgeType extends Edge = Edge> = {
+export type EdgeReplaceChange<EdgeType extends EdgeBase = EdgeBase> = {
   id: string;
   item: EdgeType;
   type: 'replace';
 };
 
-export type EdgeChange<EdgeType extends Edge = Edge> =
+export type EdgeChange<EdgeType extends EdgeBase = EdgeBase> =
   | EdgeSelectionChange
   | EdgeRemoveChange
   | EdgeAddChange<EdgeType>

packages/system/src/types/general.ts

@@ -2,7 +2,7 @@
 import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
 
 import type { XYPosition, Rect } from './utils';
-import type { NodeBase, NodeDragItem, NodeOrigin } from './nodes';
+import type { InternalNodeBase, NodeBase, NodeDragItem, NodeOrigin } from './nodes';
 import type { ConnectingHandle, HandleType } from './handles';
 import { PanZoomInstance } from './panzoom';
 import { EdgeBase } from '..';
@@ -52,7 +52,7 @@ export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
 export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;
 
 export type FitViewParamsBase<NodeType extends NodeBase> = {
-  nodes: NodeType[];
+  nodeLookup: Map<string, InternalNodeBase<NodeType>>;
   width: number;
   height: number;
   panZoom: PanZoomInstance;
@@ -127,7 +127,7 @@ export type SelectionRect = Rect & {
 
 export type OnError = (id: string, message: string) => void;
 
-export type UpdateNodePositions = (dragItems: NodeDragItem[] | NodeBase[], dragging?: boolean) => void;
+export type UpdateNodePositions = (dragItems: NodeDragItem[] | InternalNodeBase[], dragging?: boolean) => void;
 export type PanBy = (delta: XYPosition) => boolean;
 
 export type UpdateConnection = (params: {

packages/system/src/types/index.ts

@@ -1,3 +1,4 @@
+export * from './changes';
 export * from './general';
 export * from './nodes';
 export * from './edges';

packages/system/src/types/nodes.ts

@@ -1,4 +1,3 @@
-import { internalsSymbol } from '../constants';
 import type { XYPosition, Position, CoordinateExtent, HandleElement } from '.';
 import { Optional } from '../utils/types';
 
@@ -44,7 +43,7 @@ export type NodeBase<
   initialWidth?: number;
   initialHeight?: number;
   /** Parent node id, used for creating sub-flows */
-  parentNode?: string;
+  parentId?: string;
   zIndex?: number;
   /** Boundary a node can be moved in
    * @example 'parent' or [[0, 0], [100, 100]]
@@ -60,21 +59,26 @@ export type NodeBase<
    */
   origin?: NodeOrigin;
   handles?: NodeHandle[];
-  computed?: {
+  measured?: {
     width?: number;
     height?: number;
-    positionAbsolute?: XYPosition;
   };
+};
 
-  // Only used internally
+export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = NodeType & {
-  [internalsSymbol]?: {
+  measured: {
-    z?: number;
+    width?: number;
+    height?: number;
+  };
+  internals: {
+    positionAbsolute: XYPosition;
+    z: number;
+    // @todo should we rename this to "handles" and use same type as node.handles?
+    isParent: boolean;
+    /** Holds a reference to the original node object provided by the user.
+     * Used as an optimization to avoid certain operations. */
+    userNode: NodeType;
     handleBounds?: NodeHandleBounds;
-    isParent?: boolean;
-    /** Holds a reference to the original node object provided by the user
-     * (which may lack some fields, like `computed` or `[internalSymbol]`. Used
-     * as an optimization to avoid certain operations. */
-    userProvidedNode: NodeBase<NodeData, NodeType>;
   };
 };
 
@@ -104,7 +108,7 @@ export type NodeHandleBounds = {
 export type NodeDimensionUpdate = {
   id: string;
   nodeElement: HTMLDivElement;
-  forceUpdate?: boolean;
+  force?: boolean;
 };
 
 export type NodeBounds = XYPosition & {
@@ -117,13 +121,15 @@ export type NodeDragItem = {
   position: XYPosition;
   // distance from the mouse cursor to the node when start dragging
   distance: XYPosition;
-  computed: {
+  measured: {
     width: number | null;
     height: number | null;
+  };
+  internals: {
     positionAbsolute: XYPosition;
   };
   extent?: 'parent' | CoordinateExtent;
-  parentNode?: string;
+  parentId?: string;
   dragging?: boolean;
   origin?: NodeOrigin;
   expandParent?: boolean;
@@ -137,4 +143,4 @@ export type NodeHandle = Optional<HandleElement, 'width' | 'height'>;
 
 export type Align = 'center' | 'start' | 'end';
 
-export type NodeLookup<NodeType extends NodeBase = NodeBase> = Map<string, NodeType>;
+export type NodeLookup<NodeType extends InternalNodeBase = InternalNodeBase> = Map<string, NodeType>;

packages/system/src/utils/edges/general.ts

@@ -1,5 +1,4 @@
-import { Connection, Transform, errorMessages, internalsSymbol, isEdgeBase } from '../..';
+import { Connection, InternalNodeBase, Transform, errorMessages, isEdgeBase, EdgeBase } from '../..';
-import { EdgeBase, NodeBase } from '../../types';
 import { getOverlappingArea, boxToRect, nodeToBox, getBoundsOfBoxes, devWarn } from '../general';
 
 // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
@@ -24,8 +23,8 @@ export function getEdgeCenter({
 }
 
 export type GetEdgeZIndexParams = {
-  sourceNode: NodeBase;
+  sourceNode: InternalNodeBase;
-  targetNode: NodeBase;
+  targetNode: InternalNodeBase;
   selected?: boolean;
   zIndex?: number;
   elevateOnSelect?: boolean;
@@ -43,14 +42,14 @@ export function getElevatedEdgeZIndex({
   }
 
   const edgeOrConnectedNodeSelected = selected || targetNode.selected || sourceNode.selected;
-  const selectedZIndex = Math.max(sourceNode[internalsSymbol]?.z || 0, targetNode[internalsSymbol]?.z || 0, 1000);
+  const selectedZIndex = Math.max(sourceNode.internals.z || 0, targetNode.internals.z || 0, 1000);
 
   return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
 }
 
 type IsEdgeVisibleParams = {
-  sourceNode: NodeBase;
+  sourceNode: InternalNodeBase;
-  targetNode: NodeBase;
+  targetNode: InternalNodeBase;
   width: number;
   height: number;
   transform: Transform;

packages/system/src/utils/edges/positions.ts

@@ -1,25 +1,26 @@
 import { EdgePosition } from '../../types/edges';
 import { ConnectionMode, OnError } from '../../types/general';
-import { NodeBase, NodeHandle } from '../../types/nodes';
+import { InternalNodeBase, NodeHandle } from '../../types/nodes';
 import { Position } from '../../types/utils';
-import { errorMessages, internalsSymbol } from '../../constants';
+import { errorMessages } from '../../constants';
 import { HandleElement } from '../../types';
 import { getNodeDimensions } from '../general';
 
 export type GetEdgePositionParams = {
   id: string;
-  sourceNode: NodeBase;
+  sourceNode: InternalNodeBase;
   sourceHandle: string | null;
-  targetNode: NodeBase;
+  targetNode: InternalNodeBase;
   targetHandle: string | null;
   connectionMode: ConnectionMode;
   onError?: OnError;
 };
 
-function isNodeInitialized(node: NodeBase): boolean {
+function isNodeInitialized(node: InternalNodeBase): boolean {
   return (
-    !!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) &&
+    node &&
-    !!(node?.computed?.width || node?.width || node?.initialWidth)
+    !!(node.internals.handleBounds || node.handles?.length) &&
+    !!(node.measured.width || node.width || node.initialWidth)
   );
 }
 
@@ -30,8 +31,8 @@ export function getEdgePosition(params: GetEdgePositionParams): EdgePosition | n
     return null;
   }
 
-  const sourceHandleBounds = sourceNode[internalsSymbol]?.handleBounds || toHandleBounds(sourceNode.handles);
+  const sourceHandleBounds = sourceNode.internals.handleBounds || toHandleBounds(sourceNode.handles);
-  const targetHandleBounds = targetNode[internalsSymbol]?.handleBounds || toHandleBounds(targetNode.handles);
+  const targetHandleBounds = targetNode.internals.handleBounds || toHandleBounds(targetNode.handles);
 
   const sourceHandle = getHandle(sourceHandleBounds?.source ?? [], params.sourceHandle);
   const targetHandle = getHandle(
@@ -95,9 +96,9 @@ function toHandleBounds(handles?: NodeHandle[]) {
   };
 }
 
-function getHandlePosition(position: Position, node: NodeBase, handle: HandleElement | null = null): number[] {
+function getHandlePosition(position: Position, node: InternalNodeBase, handle: HandleElement | null = null): number[] {
-  const x = (handle?.x ?? 0) + (node.computed?.positionAbsolute?.x ?? 0);
+  const x = (handle?.x ?? 0) + (node.internals.positionAbsolute?.x ?? 0);
-  const y = (handle?.y ?? 0) + (node.computed?.positionAbsolute?.y ?? 0);
+  const y = (handle?.y ?? 0) + (node.internals.positionAbsolute?.y ?? 0);
   const { width, height } = handle ?? getNodeDimensions(node);
 
   switch (position) {

packages/system/src/utils/general.ts

@@ -8,6 +8,7 @@ import type {
   NodeOrigin,
   SnapGrid,
   Transform,
+  InternalNodeBase,
 } from '../types';
 import { type Viewport } from '../types';
 import { getNodePositionWithOrigin } from './graph';
@@ -65,23 +66,23 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
   height: y2 - y,
 });
 
-export const nodeToRect = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
+export const nodeToRect = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Rect => {
   const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
 
   return {
     ...positionAbsolute,
-    width: node.computed?.width ?? node.width ?? 0,
+    width: node.measured?.width ?? node.width ?? 0,
-    height: node.computed?.height ?? node.height ?? 0,
+    height: node.measured?.height ?? node.height ?? 0,
   };
 };
 
-export const nodeToBox = (node: NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
+export const nodeToBox = (node: InternalNodeBase | NodeBase, nodeOrigin: NodeOrigin = [0, 0]): Box => {
   const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
 
   return {
     ...positionAbsolute,
-    x2: positionAbsolute.x + (node.computed?.width ?? node.width ?? 0),
+    x2: positionAbsolute.x + (node.measured?.width ?? node.width ?? 0),
-    y2: positionAbsolute.y + (node.computed?.height ?? node.height ?? 0),
+    y2: positionAbsolute.y + (node.measured?.height ?? node.height ?? 0),
   };
 };
 
@@ -207,14 +208,14 @@ export function getNodeDimensions<NodeType extends NodeBase = NodeBase>(
   node: NodeType
 ): { width: number; height: number } {
   return {
-    width: node.computed?.width ?? node.width ?? node.initialWidth ?? 0,
+    width: node.measured?.width ?? node.width ?? node.initialWidth ?? 0,
-    height: node.computed?.height ?? node.height ?? node.initialHeight ?? 0,
+    height: node.measured?.height ?? node.height ?? node.initialHeight ?? 0,
   };
 }
 
 export function nodeHasDimensions<NodeType extends NodeBase = NodeBase>(node: NodeType): boolean {
   return (
-    (node.computed?.width ?? node.width ?? node.initialWidth) !== undefined &&
+    (node.measured?.width ?? node.width ?? node.initialWidth) !== undefined &&
-    (node.computed?.height ?? node.height ?? node.initialHeight) !== undefined
+    (node.measured?.height ?? node.height ?? node.initialHeight) !== undefined
   );
 }

packages/system/src/utils/graph.ts

@@ -24,6 +24,7 @@ import {
   OnError,
   OnBeforeDeleteBase,
   NodeLookup,
+  InternalNodeBase,
 } from '../types';
 import { errorMessages } from '../constants';
 
@@ -47,6 +48,10 @@ export const isEdgeBase = <EdgeType extends EdgeBase = EdgeBase>(element: any):
 export const isNodeBase = <NodeType extends NodeBase = NodeBase>(element: any): element is NodeType =>
   'id' in element && 'position' in element && !('source' in element) && !('target' in element);
 
+export const isInternalNodeBase = <NodeType extends InternalNodeBase = InternalNodeBase>(
+  element: any
+): element is NodeType => 'id' in element && 'internals' in element && !('source' in element) && !('target' in element);
+
 /**
  * Pass in a node, and get connected nodes where edge.source === node.id
  * @public
@@ -101,7 +106,7 @@ export const getIncomers = <NodeType extends NodeBase = NodeBase, EdgeType exten
 };
 
 export const getNodePositionWithOrigin = (
-  node: NodeBase | undefined,
+  node: InternalNodeBase | NodeBase | undefined,
   nodeOrigin: NodeOrigin = [0, 0]
 ): { position: XYPosition; positionAbsolute: XYPosition } => {
   if (!node) {
@@ -128,12 +133,13 @@ export const getNodePositionWithOrigin = (
 
   return {
     position,
-    positionAbsolute: node.computed?.positionAbsolute
+    positionAbsolute:
-      ? {
+      'internals' in node
-          x: node.computed.positionAbsolute.x - offsetX,
+        ? {
-          y: node.computed.positionAbsolute.y - offsetY,
+            x: node.internals.positionAbsolute.x - offsetX,
-        }
+            y: node.internals.positionAbsolute.y - offsetY,
-      : position,
+          }
+        : position,
   };
 };
 
@@ -151,6 +157,7 @@ export type GetNodesBoundsParams = {
  * @param params.useRelativePosition - Whether to use the relative or absolute node positions
  * @returns Bounding box enclosing all nodes
  */
+// @todo how to handle this if users do not have absolute positions?
 export const getNodesBounds = (
   nodes: NodeBase[],
   params: GetNodesBoundsParams = { nodeOrigin: [0, 0], useRelativePosition: false }
@@ -176,8 +183,47 @@ export const getNodesBounds = (
   return boxToRect(box);
 };
 
-export const getNodesInside = <NodeType extends NodeBase>(
+export type GetInternalNodesBoundsParams = {
-  nodes: NodeType[],
+  nodeOrigin?: NodeOrigin;
+  useRelativePosition?: boolean;
+  filter?: (node: NodeBase) => boolean;
+};
+
+/**
+ * Determines a bounding box that contains all given nodes in an array
+ * @internal
+ */
+export const getInternalNodesBounds = (
+  nodeLookup: NodeLookup,
+  params: GetInternalNodesBoundsParams = {
+    nodeOrigin: [0, 0],
+    useRelativePosition: false,
+  }
+): Rect => {
+  if (nodeLookup.size === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+
+  let box = { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity };
+
+  nodeLookup.forEach((node) => {
+    if (params.filter == undefined || params.filter(node)) {
+      const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
+      box = getBoundsOfBoxes(
+        box,
+        rectToBox({
+          ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
+          ...getNodeDimensions(node),
+        })
+      );
+    }
+  });
+
+  return boxToRect(box);
+};
+
+export const getNodesInside = <NodeType extends NodeBase = NodeBase>(
+  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
   rect: Rect,
   [tx, ty, tScale]: Transform = [0, 0, 1],
   partially = false,
@@ -191,13 +237,15 @@ export const getNodesInside = <NodeType extends NodeBase>(
     height: rect.height / tScale,
   };
 
-  const visibleNodes = nodes.reduce<NodeType[]>((res, node) => {
+  const visibleNodes: NodeType[] = [];
-    const { computed, selectable = true, hidden = false } = node;
+
-    const width = computed?.width ?? node.width ?? node.initialWidth ?? null;
+  for (const [, node] of nodeLookup) {
-    const height = computed?.height ?? node.height ?? node.initialHeight ?? null;
+    const { measured, selectable = true, hidden = false } = node;
+    const width = measured.width ?? node.width ?? node.initialWidth ?? null;
+    const height = measured.height ?? node.height ?? node.initialHeight ?? null;
 
     if ((excludeNonSelectableNodes && !selectable) || hidden) {
-      return res;
+      continue;
     }
 
     const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
@@ -208,11 +256,9 @@ export const getNodesInside = <NodeType extends NodeBase>(
     const isVisible = notInitialized || partiallyVisible || overlappingArea >= area;
 
     if (isVisible || node.dragging) {
-      res.push(node);
+      visibleNodes.push(node);
     }
-
+  }
-    return res;
-  }, []);
 
   return visibleNodes;
 };
@@ -236,17 +282,20 @@ export const getConnectedEdges = <NodeType extends NodeBase = NodeBase, EdgeType
 };
 
 export function fitView<Params extends FitViewParamsBase<NodeBase>, Options extends FitViewOptionsBase<NodeBase>>(
-  { nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
+  { nodeLookup, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
   options?: Options
 ) {
-  const filteredNodes = nodes.filter((n) => {
+  const filteredNodes: InternalNodeBase[] = [];
-    const isVisible = n.computed?.width && n.computed?.height && (options?.includeHiddenNodes || !n.hidden);
 
-    if (options?.nodes?.length) {
+  nodeLookup.forEach((n) => {
-      return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
+    const isVisible = n.measured.width && n.measured.height && (options?.includeHiddenNodes || !n.hidden);
+
+    if (
+      isVisible &&
+      (!options?.nodes || (options?.nodes.length && options?.nodes.some((optionNode) => optionNode.id === n.id)))
+    ) {
+      filteredNodes.push(n);
     }
-
-    return isVisible;
   });
 
   if (filteredNodes.length > 0) {
@@ -284,7 +333,7 @@ function clampNodeExtent<NodeType extends NodeBase>(
   if (!extent || extent === 'parent') {
     return extent;
   }
-  return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
+  return [extent[0], [extent[1][0] - (node.measured?.width ?? 0), extent[1][1] - (node.measured?.height ?? 0)]];
 }
 
 /**
@@ -303,26 +352,27 @@ export function calculateNodePosition<NodeType extends NodeBase>({
 }: {
   nodeId: string;
   nextPosition: XYPosition;
-  nodeLookup: NodeLookup<NodeType>;
+  nodeLookup: NodeLookup<InternalNodeBase<NodeType>>;
   nodeOrigin?: NodeOrigin;
   nodeExtent?: CoordinateExtent;
   onError?: OnError;
 }): { position: XYPosition; positionAbsolute: XYPosition } {
   const node = nodeLookup.get(nodeId)!;
-  const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : undefined;
+  const parentNode = node.parentId ? nodeLookup.get(node.parentId) : undefined;
   const { x: parentX, y: parentY } = parentNode
     ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
     : { x: 0, y: 0 };
+
   let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
 
   if (node.extent === 'parent' && !node.expandParent) {
     if (!parentNode) {
       onError?.('005', errorMessages['error005']());
     } else {
-      const nodeWidth = node.computed?.width;
+      const nodeWidth = node.measured.width;
-      const nodeHeight = node.computed?.height;
+      const nodeHeight = node.measured.height;
-      const parentWidth = parentNode?.computed?.width;
+      const parentWidth = parentNode.measured.width;
-      const parentHeight = parentNode?.computed?.height;
+      const parentHeight = parentNode.measured.height;
 
       if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
         const currNodeOrigin = node.origin || nodeOrigin;
@@ -390,7 +440,7 @@ export async function getElementsToRemove<NodeType extends NodeBase = NodeBase,
     }
 
     const isIncluded = nodeIds.includes(node.id);
-    const parentHit = !isIncluded && node.parentNode && matchingNodes.find((n) => n.id === node.parentNode);
+    const parentHit = !isIncluded && node.parentId && matchingNodes.find((n) => n.id === node.parentId);
 
     if (isIncluded || parentHit) {
       matchingNodes.push(node);

packages/system/src/utils/store.ts

@@ -1,8 +1,6 @@
-import { internalsSymbol } from '../constants';
 import {
   NodeBase,
   CoordinateExtent,
-  Dimensions,
   NodeDimensionUpdate,
   NodeOrigin,
   PanZoomInstance,
@@ -12,54 +10,58 @@ import {
   ConnectionLookup,
   EdgeBase,
   EdgeLookup,
+  InternalNodeBase,
+  NodeChange,
+  NodeLookup,
+  Rect,
 } from '../types';
 import { getDimensions, getHandleBounds } from './dom';
-import { isNumeric } from './general';
+import { getBoundsOfRects, getNodeDimensions, isNumeric, nodeToRect } from './general';
 import { getNodePositionWithOrigin } from './graph';
 
-type ParentNodes = Record<string, boolean>;
-
 export function updateAbsolutePositions<NodeType extends NodeBase>(
-  nodes: NodeType[],
+  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
-  nodeLookup: Map<string, NodeType>,
+  options: UpdateNodesOptions<NodeType> = {
-  nodeOrigin: NodeOrigin = [0, 0],
+    nodeOrigin: [0, 0] as NodeOrigin,
-  parentNodes?: ParentNodes
+    elevateNodesOnSelect: true,
+    defaults: {},
+  },
+  parentNodeIds?: Set<string>
 ) {
-  return nodes.map((node) => {
+  const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
-    if (node.parentNode && !nodeLookup.has(node.parentNode)) {
+
-      throw new Error(`Parent node ${node.parentNode} not found`);
+  for (const [id, node] of nodeLookup) {
+    const parentId = node.parentId;
+
+    if (parentId && !nodeLookup.has(parentId)) {
+      throw new Error(`Parent node ${parentId} not found`);
     }
 
-    if (node.parentNode || parentNodes?.[node.id]) {
+    if (parentId || node.internals.isParent || parentNodeIds?.has(id)) {
-      const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : null;
+      const parentNode = parentId ? nodeLookup.get(parentId) : null;
       const { x, y, z } = calculateXYZPosition(
         node,
-        nodes,
         nodeLookup,
         {
           ...node.position,
-          z: node[internalsSymbol]?.z ?? 0,
+          z: (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0),
         },
-        parentNode?.origin || nodeOrigin
+        parentNode?.origin || options.nodeOrigin
       );
 
-      const positionChanged = x !== node.computed?.positionAbsolute?.x || y !== node.computed?.positionAbsolute?.y;
+      const currPosition = node.internals.positionAbsolute;
-      node.computed!.positionAbsolute = positionChanged
+      const positionChanged = x !== currPosition.x || y !== currPosition.y;
-        ? {
-            x,
-            y,
-          }
-        : node.computed?.positionAbsolute;
 
-      node[internalsSymbol]!.z = z;
+      node.internals.positionAbsolute = positionChanged ? { x, y } : currPosition;
+      node.internals.z = z;
 
-      if (parentNodes?.[node.id]) {
+      if (parentNodeIds !== undefined) {
-        node[internalsSymbol]!.isParent = true;
+        node.internals.isParent = !!parentNodeIds?.has(id);
       }
-    }
 
-    return node;
+      nodeLookup.set(id, node);
-  });
+    }
+  }
 }
 
 type UpdateNodesOptions<NodeType extends NodeBase> = {
@@ -68,128 +70,188 @@ type UpdateNodesOptions<NodeType extends NodeBase> = {
   defaults?: Partial<NodeType>;
 };
 
-export function adoptUserProvidedNodes<NodeType extends NodeBase>(
+export function adoptUserNodes<NodeType extends NodeBase>(
   nodes: NodeType[],
-  nodeLookup: Map<string, NodeType>,
+  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
   options: UpdateNodesOptions<NodeType> = {
     nodeOrigin: [0, 0] as NodeOrigin,
     elevateNodesOnSelect: true,
     defaults: {},
   }
-): NodeType[] {
+) {
   const tmpLookup = new Map(nodeLookup);
   nodeLookup.clear();
-  const parentNodes: ParentNodes = {};
   const selectedNodeZ: number = options?.elevateNodesOnSelect ? 1000 : 0;
+  const parentNodeIds = new Set<string>();
 
-  const nextNodes = nodes.map((n) => {
+  nodes.forEach((userNode) => {
-    const currentStoreNode = tmpLookup.get(n.id);
+    const currentStoreNode = tmpLookup.get(userNode.id);
-    if (n === currentStoreNode?.[internalsSymbol]?.userProvidedNode) {
+
-      nodeLookup.set(n.id, currentStoreNode);
+    if (userNode.parentId) {
-      return currentStoreNode;
+      parentNodeIds.add(userNode.parentId);
     }
 
-    const node: NodeType = {
+    if (userNode === currentStoreNode?.internals.userNode) {
-      ...options.defaults,
+      nodeLookup.set(userNode.id, currentStoreNode);
-      ...n,
+    } else {
-      computed: {
+      nodeLookup.set(userNode.id, {
-        positionAbsolute: n.position,
+        ...options.defaults,
-        width: n.computed?.width,
+        ...userNode,
-        height: n.computed?.height,
+        measured: {
-      },
+          width: userNode.measured?.width,
-    };
+          height: userNode.measured?.height,
-    const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
+        },
-    const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol];
+        internals: {
-
+          positionAbsolute: userNode.position,
-    if (node.parentNode) {
+          handleBounds: currentStoreNode?.internals?.handleBounds,
-      parentNodes[node.parentNode] = true;
+          z: (isNumeric(userNode.zIndex) ? userNode.zIndex : 0) + (userNode.selected ? selectedNodeZ : 0),
+          userNode,
+          isParent: false,
+        },
+      });
     }
-
-    Object.defineProperty(node, internalsSymbol, {
-      enumerable: false,
-      value: {
-        handleBounds: currInternals?.handleBounds,
-        z,
-        userProvidedNode: n,
-      },
-    });
-
-    nodeLookup.set(node.id, node);
-
-    return node;
   });
 
-  const nodesWithPositions = updateAbsolutePositions(nextNodes, nodeLookup, options.nodeOrigin, parentNodes);
+  if (parentNodeIds.size > 0) {
-
+    updateAbsolutePositions(nodeLookup, options, parentNodeIds);
-  return nodesWithPositions;
+  }
 }
 
 function calculateXYZPosition<NodeType extends NodeBase>(
   node: NodeType,
-  nodes: NodeType[],
+  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
-  nodeLookup: Map<string, NodeType>,
   result: XYZPosition,
-  nodeOrigin: NodeOrigin
+  nodeOrigin: NodeOrigin = [0, 0]
 ): XYZPosition {
-  if (!node.parentNode) {
+  if (!node.parentId) {
     return result;
   }
 
-  const parentNode = nodeLookup.get(node.parentNode)!;
+  const parentNode = nodeLookup.get(node.parentId)!;
   const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
 
   return calculateXYZPosition(
     parentNode,
-    nodes,
     nodeLookup,
     {
       x: (result.x ?? 0) + parentNodePosition.x,
       y: (result.y ?? 0) + parentNodePosition.y,
-      z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+      z: (parentNode.internals.z ?? 0) > (result.z ?? 0) ? parentNode.internals.z ?? 0 : result.z ?? 0,
     },
     parentNode.origin || nodeOrigin
   );
 }
 
-export function updateNodeDimensions<NodeType extends NodeBase>(
+export function handleParentExpand(nodes: InternalNodeBase[], nodeLookup: NodeLookup): NodeChange[] {
+  const changes: NodeChange[] = [];
+  const chilNodeRects = new Map<string, Rect>();
+
+  nodes.forEach((node) => {
+    const parentId = node.parentId;
+    if (node.expandParent && parentId) {
+      const parentNode = nodeLookup.get(parentId);
+
+      if (parentNode) {
+        const parentRect = chilNodeRects.get(parentId) || nodeToRect(parentNode, node.origin);
+        const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
+        chilNodeRects.set(parentId, expandedRect);
+      }
+    }
+  });
+
+  if (chilNodeRects.size > 0) {
+    chilNodeRects.forEach((rect, id) => {
+      const origParent = nodeLookup.get(id)!;
+      const { position } = getNodePositionWithOrigin(origParent, origParent.origin);
+      const dimensions = getNodeDimensions(origParent);
+
+      if (rect.x < position.x || rect.y < position.y) {
+        const xChange = Math.round(Math.abs(position.x - rect.x));
+        const yChange = Math.round(Math.abs(position.y - rect.y));
+
+        changes.push({
+          id,
+          type: 'position',
+          position: {
+            x: position.x - xChange,
+            y: position.y - yChange,
+          },
+        });
+
+        changes.push({
+          id,
+          type: 'dimensions',
+          resizing: true,
+          dimensions: {
+            width: dimensions.width + xChange,
+            height: dimensions.height + yChange,
+          },
+        });
+
+        // @todo we need to reset child node positions if < 0
+      } else if (dimensions.width < rect.width || dimensions.height < rect.height) {
+        changes.push({
+          id,
+          type: 'dimensions',
+          resizing: true,
+          dimensions: {
+            width: Math.max(dimensions.width, rect.width),
+            height: Math.max(dimensions.height, rect.height),
+          },
+        });
+      }
+    });
+  }
+
+  return changes;
+}
+
+export function updateNodeDimensions<NodeType extends InternalNodeBase>(
   updates: Map<string, NodeDimensionUpdate>,
-  nodes: NodeType[],
   nodeLookup: Map<string, NodeType>,
   domNode: HTMLElement | null,
-  nodeOrigin?: NodeOrigin,
+  nodeOrigin?: NodeOrigin
-  onUpdate?: (id: string, dimensions: Dimensions) => void
+): NodeChange[] {
-): NodeType[] | null {
   const viewportNode = domNode?.querySelector('.xyflow__viewport');
 
   if (!viewportNode) {
-    return null;
+    return [];
   }
 
+  const changes: NodeChange[] = [];
   const style = window.getComputedStyle(viewportNode);
   const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
+  // in this array we collect nodes, that might trigger changes (like expanding parent)
+  const triggerChangeNodes: NodeType[] = [];
 
-  const nextNodes = nodes.map((node) => {
+  updates.forEach((update) => {
-    const update = updates.get(node.id);
+    const node = nodeLookup.get(update.id);
 
-    if (update) {
+    if (node?.hidden) {
+      nodeLookup.set(node.id, {
+        ...node,
+        internals: {
+          ...node.internals,
+          handleBounds: undefined,
+        },
+      });
+    } else if (node) {
       const dimensions = getDimensions(update.nodeElement);
       const doUpdate = !!(
         dimensions.width &&
         dimensions.height &&
-        (node.computed?.width !== dimensions.width || node.computed?.height !== dimensions.height || update.forceUpdate)
+        (node.measured?.width !== dimensions.width || node.measured?.height !== dimensions.height || update.force)
       );
 
       if (doUpdate) {
-        onUpdate?.(node.id, dimensions);
-
         const newNode = {
           ...node,
-          computed: {
+          measured: {
-            ...node.computed,
+            ...node.measured,
             ...dimensions,
           },
-          [internalsSymbol]: {
+          internals: {
-            ...node[internalsSymbol],
+            ...node.internals,
             handleBounds: {
               source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
               target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
@@ -199,14 +261,25 @@ export function updateNodeDimensions<NodeType extends NodeBase>(
 
         nodeLookup.set(node.id, newNode);
 
-        return newNode;
+        changes.push({
+          id: newNode.id,
+          type: 'dimensions',
+          dimensions,
+        });
+
+        if (newNode.expandParent) {
+          triggerChangeNodes.push(newNode);
+        }
       }
     }
-
-    return node;
   });
 
-  return nextNodes;
+  if (triggerChangeNodes.length > 0) {
+    const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+    changes.push(...parentExpandChanges);
+  }
+
+  return changes;
 }
 
 export function panBy({

packages/system/src/xydrag/XYDrag.ts

@@ -26,13 +26,14 @@ import type {
   OnSelectionDrag,
   UpdateNodePositions,
   Box,
+  InternalNodeBase,
 } from '../types';
 
 export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void;
 
 type StoreItems<OnNodeDrag> = {
   nodes: NodeBase[];
-  nodeLookup: Map<string, NodeBase>;
+  nodeLookup: Map<string, InternalNodeBase>;
   edges: EdgeBase[];
   nodeExtent: CoordinateExtent;
   snapGrid: SnapGrid;
@@ -130,19 +131,23 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
 
         // if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
         // based on its position so that the node stays at it's position relative to the selection.
-        const adjustedNodeExtent: CoordinateExtent = [
+        let adjustedNodeExtent: CoordinateExtent = [
           [nodeExtent[0][0], nodeExtent[0][1]],
           [nodeExtent[1][0], nodeExtent[1][1]],
         ];
 
         if (dragItems.length > 1 && nodeExtent && !n.extent) {
-          adjustedNodeExtent[0][0] = n.computed.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
+          const { positionAbsolute } = n.internals;
-          adjustedNodeExtent[1][0] =
+          const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
-            n.computed.positionAbsolute.x + (n.computed?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
+          const x2 = positionAbsolute.x + (n.measured?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
 
-          adjustedNodeExtent[0][1] = n.computed.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
+          const y1 = positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
-          adjustedNodeExtent[1][1] =
+          const y2 = positionAbsolute.y + (n.measured?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
-            n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
+
+          adjustedNodeExtent = [
+            [x1, y1],
+            [x2, y2],
+          ];
         }
 
         const { position, positionAbsolute } = calculateNodePosition({
@@ -158,7 +163,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         hasChange = hasChange || n.position.x !== position.x || n.position.y !== position.y;
 
         n.position = position;
-        n.computed.positionAbsolute = positionAbsolute;
+        n.internals.positionAbsolute = positionAbsolute;
 
         return n;
       });
@@ -208,7 +213,6 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
 
     function startDrag(event: UseDragEvent) {
       const {
-        nodes,
         nodeLookup,
         multiSelectionActive,
         nodesDraggable,
@@ -236,7 +240,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
 
       const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
       lastPos = pointerPos;
-      dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
+      dragItems = getDragItems(nodeLookup, nodesDraggable, pointerPos, nodeId);
 
       if (dragItems.length > 0 && (onDragStart || onNodeDragStart || (!nodeId && onSelectionDragStart))) {
         const [currentNode, currentNodes] = getEventHandlerParams({

packages/system/src/xydrag/utils.ts

@@ -1,15 +1,15 @@
-import { type NodeDragItem, type XYPosition, NodeBase } from '../types';
+import { type NodeDragItem, type XYPosition, InternalNodeBase, NodeBase, NodeLookup } from '../types';
 
 export function wrapSelectionDragFunc(selectionFunc?: (event: MouseEvent, nodes: NodeBase[]) => void) {
   return (event: MouseEvent, _: NodeBase, nodes: NodeBase[]) => selectionFunc?.(event, nodes);
 }
 
-export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodes: NodeType[]): boolean {
+export function isParentSelected<NodeType extends NodeBase>(node: NodeType, nodeLookup: NodeLookup): boolean {
-  if (!node.parentNode) {
+  if (!node.parentId) {
     return false;
   }
 
-  const parentNode = nodes.find((node) => node.id === node.parentNode);
+  const parentNode = nodeLookup.get(node.parentId);
 
   if (!parentNode) {
     return false;
@@ -19,7 +19,7 @@ export function isParentSelected<NodeType extends NodeBase>(node: NodeType, node
     return true;
   }
 
-  return isParentSelected(parentNode, nodes);
+  return isParentSelected(parentNode, nodeLookup);
 }
 
 export function hasSelector(target: Element, selector: string, domNode: Element): boolean {
@@ -36,39 +36,43 @@ export function hasSelector(target: Element, selector: string, domNode: Element)
 
 // looks for all selected nodes and created a NodeDragItem for each of them
 export function getDragItems<NodeType extends NodeBase>(
-  nodes: NodeType[],
+  nodeLookup: Map<string, InternalNodeBase<NodeType>>,
   nodesDraggable: boolean,
   mousePos: XYPosition,
   nodeId?: string
 ): NodeDragItem[] {
-  return nodes
+  const dragItems: NodeDragItem[] = [];
-    .filter(
+
-      (n) =>
+  for (const [id, node] of nodeLookup) {
-        (n.selected || n.id === nodeId) &&
+    if (
-        (!n.parentNode || !isParentSelected(n, nodes)) &&
+      (node.selected || node.id === nodeId) &&
-        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined'))
+      (!node.parentId || !isParentSelected(node, nodeLookup)) &&
-    )
+      (node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'))
-    .map((n) => ({
+    ) {
-      id: n.id,
+      const internalNode = nodeLookup.get(id)!;
-      position: n.position || { x: 0, y: 0 },
+
-      distance: {
+      dragItems.push({
-        x: mousePos.x - (n.computed?.positionAbsolute?.x ?? 0),
+        id: internalNode.id,
-        y: mousePos.y - (n.computed?.positionAbsolute?.y ?? 0),
+        position: internalNode.position || { x: 0, y: 0 },
-      },
+        distance: {
-      delta: {
+          x: mousePos.x - (internalNode.internals.positionAbsolute?.x ?? 0),
-        x: 0,
+          y: mousePos.y - (internalNode.internals.positionAbsolute?.y ?? 0),
-        y: 0,
+        },
-      },
+        extent: internalNode.extent,
-      extent: n.extent,
+        parentId: internalNode.parentId,
-      parentNode: n.parentNode,
+        origin: internalNode.origin,
-      origin: n.origin,
+        expandParent: internalNode.expandParent,
-      expandParent: n.expandParent,
+        internals: {
-      computed: {
+          positionAbsolute: internalNode.internals.positionAbsolute || { x: 0, y: 0 },
-        positionAbsolute: n.computed?.positionAbsolute || { x: 0, y: 0 },
+        },
-        width: n.computed?.width || 0,
+        measured: {
-        height: n.computed?.height || 0,
+          width: internalNode.measured.width || 0,
-      },
+          height: internalNode.measured.height || 0,
-    }));
+        },
+      });
+    }
+  }
+  return dragItems;
 }
 
 // returns two params:
@@ -89,9 +93,8 @@ export function getEventHandlerParams<NodeType extends NodeBase>({
     return {
       ...node,
       position: n.position,
-      computed: {
+      measured: {
-        ...n.computed,
+        ...n.measured,
-        positionAbsolute: n.computed.positionAbsolute,
       },
     };
   });

packages/system/src/xyhandle/XYHandle.ts

@@ -6,13 +6,13 @@ import {
   type HandleType,
   type Connection,
   type PanBy,
-  type NodeBase,
   type Transform,
   type ConnectingHandle,
   type OnConnectEnd,
   type UpdateConnection,
   type IsValidConnection,
   type ConnectionHandle,
+  NodeLookup,
 } from '../types';
 
 import { getClosestHandle, getConnectionStatus, getHandleLookup, getHandleType } from './utils';
@@ -25,7 +25,7 @@ export type OnPointerDownParams = {
   handleId: string | null;
   nodeId: string;
   isTarget: boolean;
-  nodes: NodeBase[];
+  nodeLookup: NodeLookup;
   lib: string;
   flowId: string | null;
   edgeUpdaterType?: HandleType;
@@ -79,7 +79,7 @@ function onPointerDown(
     edgeUpdaterType,
     isTarget,
     domNode,
-    nodes,
+    nodeLookup,
     lib,
     autoPanOnConnect,
     flowId,
@@ -116,7 +116,7 @@ function onPointerDown(
   let handleDomNode: Element | null = null;
 
   const handleLookup = getHandleLookup({
-    nodes,
+    nodeLookup,
     nodeId,
     handleId,
     handleType,

packages/system/src/xyhandle/utils.ts

@@ -3,15 +3,15 @@ import {
   type HandleType,
   type NodeHandleBounds,
   type XYPosition,
-  type NodeBase,
   type ConnectionHandle,
+  InternalNodeBase,
+  NodeLookup,
 } from '../types';
-import { internalsSymbol } from '../constants';
 
 // this functions collects all handles and adds an absolute position
 // so that we can later find the closest handle to the mouse position
 export function getHandles(
-  node: NodeBase,
+  node: InternalNodeBase,
   handleBounds: NodeHandleBounds,
   type: HandleType,
   currentHandle: string
@@ -22,8 +22,8 @@ export function getHandles(
         id: h.id || null,
         type,
         nodeId: node.id,
-        x: (node.computed?.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
+        x: (node.internals.positionAbsolute.x ?? 0) + h.x + h.width / 2,
-        y: (node.computed?.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
+        y: (node.internals.positionAbsolute.y ?? 0) + h.y + h.height / 2,
       });
     }
     return res;
@@ -62,28 +62,30 @@ export function getClosestHandle(
 }
 
 type GetHandleLookupParams = {
-  nodes: NodeBase[];
+  nodeLookup: NodeLookup;
   nodeId: string;
   handleId: string | null;
   handleType: string;
 };
 
-export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHandleLookupParams) {
+export function getHandleLookup({
-  return nodes.reduce<ConnectionHandle[]>((res, node) => {
+  nodeLookup,
-    if (node[internalsSymbol]) {
+  nodeId,
-      const { handleBounds } = node[internalsSymbol];
+  handleId,
-      let sourceHandles: ConnectionHandle[] = [];
+  handleType,
-      let targetHandles: ConnectionHandle[] = [];
+}: GetHandleLookupParams): ConnectionHandle[] {
+  const connectionHandles: ConnectionHandle[] = [];
 
-      if (handleBounds) {
+  for (const [, node] of nodeLookup) {
-        sourceHandles = getHandles(node, handleBounds, 'source', `${nodeId}-${handleId}-${handleType}`);
+    if (node.internals.handleBounds) {
-        targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`);
+      const id = `${nodeId}-${handleId}-${handleType}`;
-      }
+      const sourceHandles = getHandles(node, node.internals.handleBounds, 'source', id);
-
+      const targetHandles = getHandles(node, node.internals.handleBounds, 'target', id);
-      res.push(...sourceHandles, ...targetHandles);
+      connectionHandles.push(...sourceHandles, ...targetHandles);
     }
-    return res;
+  }
-  }, []);
+
+  return connectionHandles;
 }
 
 export function getHandleType(

packages/system/src/xyresizer/XYResizer.ts

@@ -71,15 +71,15 @@ export type XYResizerInstance = {
 function nodeToParentExtent(node: NodeBase): CoordinateExtent {
   return [
     [0, 0],
-    [node.computed!.width!, node.computed!.height!],
+    [node.measured!.width!, node.measured!.height!],
   ];
 }
 
 function nodeToChildExtent(child: NodeBase, parent: NodeBase, nodeOrigin: NodeOrigin): CoordinateExtent {
   const x = parent.position.x + child.position.x;
   const y = parent.position.y + child.position.y;
-  const width = child.computed!.width! ?? 0;
+  const width = child.measured!.width! ?? 0;
-  const height = child.computed!.height! ?? 0;
+  const height = child.measured!.height! ?? 0;
   const originOffsetX = nodeOrigin[0] * width;
   const originOffsetY = nodeOrigin[1] * height;
 
@@ -121,8 +121,8 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
           const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
 
           prevValues = {
-            width: node.computed?.width ?? 0,
+            width: node.measured?.width ?? 0,
-            height: node.computed?.height ?? 0,
+            height: node.measured?.height ?? 0,
             x: node.position.x ?? 0,
             y: node.position.y ?? 0,
           };
@@ -136,7 +136,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
 
           parentNode = undefined;
           if (node.extent === 'parent' || node.expandParent) {
-            parentNode = nodeLookup.get(node.parentNode!);
+            parentNode = nodeLookup.get(node.parentId!);
             if (parentNode && node.extent === 'parent') {
               parentExtent = nodeToParentExtent(parentNode);
             }
@@ -148,7 +148,7 @@ export function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResize
           childExtent = undefined;
 
           for (const [childId, child] of nodeLookup) {
-            if (child.parentNode === nodeId) {
+            if (child.parentId === nodeId) {
               childNodes.push({
                 id: childId,
                 position: { ...child.position },