fixed bug with expanding parent, made adjustments to evaluateNodePosition

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

@@ -9,7 +9,7 @@ import {
   type NodeChange,
   type NodeDimensionChange,
   type NodePositionChange,
-  handleParentExpand,
+  handleExpandParent,
   evaluateNodePosition,
 } from '@xyflow/system';
 
@@ -74,20 +74,32 @@ function ResizeControl({
 
           const node = nodeLookup.get(id);
           if (node && node.expandParent && node.parentId) {
-            const nodeWithChange: Node = {
-              ...node,
+            // We create a new node that will be used to handleExpandParent ...
+            const nodeWithChange = {
+              ...(node as InternalNodeWithParentExpand),
               position: {
                 x: change.x ?? node.position.x,
                 y: change.y ?? node.position.y,
               },
+              measured: {
+                width: change.width,
+                height: change.height,
+              },
               width: change.width,
               height: change.height,
             };
 
-            const nodeWith = evaluateNodePosition(nodeWithChange, nodeLookup) as InternalNodeWithParentExpand;
+            // ...determine its new absolute position...
+            nodeWithChange.internals = {
+              ...nodeWithChange.internals,
+              positionAbsolute: evaluateNodePosition(nodeWithChange, nodeLookup),
+            };
 
-            const parentExpandChanges = handleParentExpand([nodeWith], nodeLookup, parentLookup);
+            // ... and use it to expand the parent
+            const parentExpandChanges = handleExpandParent([nodeWithChange], nodeLookup, parentLookup);
             changes.push(...parentExpandChanges);
+
+            // when the parent was expanded by the child node, its position will be clamped at 0,0
             newPosition.x = change.x ? Math.max(0, change.x) : undefined;
             newPosition.y = change.y ? Math.max(0, change.y) : undefined;
           }

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

@@ -42,22 +42,12 @@ export function NodeWrapper<NodeType extends Node>({
   nodeOrigin,
   onError,
 }: NodeWrapperProps<NodeType>) {
-  const { node, positionAbsoluteX, positionAbsoluteY, internals } = useStore((s) => {
+  const { node, internals } = useStore((s) => {
     const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
 
-    const positionAbsolute = nodeExtent
-      ? clampPosition(node.internals.positionAbsolute, nodeExtent)
-      : node.internals.positionAbsolute || { x: 0, y: 0 };
-
     return {
       node,
-      // we are mutating positionAbsolute, z and isParent attributes for sub flows
-      // so we we need to force a re-render when some change
-      positionAbsoluteX: positionAbsolute.x,
-      positionAbsoluteY: positionAbsolute.y,
       internals: node.internals,
-      // zIndex: node.internals.z,
-      // isParent: node.internals.isParent,
     };
   }, shallow);
 
@@ -141,10 +131,15 @@ export function NodeWrapper<NodeType extends Node>({
     return null;
   }
 
-  const positionAbsoluteOrigin = getPositionWithOrigin({
-    x: positionAbsoluteX,
-    y: positionAbsoluteY,
-    ...nodeDimensions,
+  const positionAbsolute = nodeExtent
+    ? clampPosition(node.internals.positionAbsolute, nodeExtent)
+    : node.internals.positionAbsolute || { x: 0, y: 0 };
+
+  const positionWithOrigin = getPositionWithOrigin({
+    x: positionAbsolute.x,
+    y: positionAbsolute.y,
+    width: nodeDimensions.width,
+    height: nodeDimensions.height,
     origin: node.origin || nodeOrigin,
   });
   const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
@@ -191,7 +186,7 @@ export function NodeWrapper<NodeType extends Node>({
       store.setState({
         ariaLiveMessage: `Moved selected node ${event.key
           .replace('Arrow', '')
-          .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`,
+          .toLowerCase()}. New position, x: ${~~positionAbsolute.x}, y: ${~~positionAbsolute.y}`,
       });
 
       moveSelectedNodes({
@@ -222,7 +217,7 @@ export function NodeWrapper<NodeType extends Node>({
       ref={nodeRef}
       style={{
         zIndex: internals.z,
-        transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
+        transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
         pointerEvents: hasPointerEvents ? 'all' : 'none',
         visibility: initialized ? 'visible' : 'hidden',
         ...node.style,
@@ -247,8 +242,8 @@ export function NodeWrapper<NodeType extends Node>({
           id={id}
           data={node.data}
           type={nodeType}
-          positionAbsoluteX={positionAbsoluteX}
-          positionAbsoluteY={positionAbsoluteY}
+          positionAbsoluteX={positionAbsolute.x}
+          positionAbsoluteY={positionAbsolute.y}
           selected={node.selected}
           isConnectable={isConnectable}
           sourcePosition={node.sourcePosition}

packages/react/src/hooks/useReactFlow.ts

@@ -3,6 +3,7 @@ import {
   evaluateNodePosition,
   getElementsToRemove,
   getOverlappingArea,
+  isInternalNodeBase,
   isRectObject,
   nodeToRect,
   type Rect,
@@ -232,10 +233,18 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
   const getNodeRect = useCallback((node: NodeType | { id: string }): Rect | null => {
     const { nodeLookup, nodeOrigin } = store.getState();
-    const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id)!;
-    const nodeWithPos = evaluateNodePosition(nodeToUse, nodeLookup, nodeOrigin);
+    const nodeToUse = isNode<NodeType>(node) ? node : nodeLookup.get(node.id)!;
+    const positionAbsolute = evaluateNodePosition(nodeToUse, nodeLookup, nodeOrigin);
 
-    return nodeWithPos ? nodeToRect(nodeWithPos) : null;
+    const nodeWithPosition = {
+      id: nodeToUse.id,
+      position: positionAbsolute,
+      width: nodeToUse.measured?.width ?? nodeToUse.width,
+      height: nodeToUse.measured?.height ?? nodeToUse.height,
+      data: nodeToUse.data,
+    };
+
+    return nodeToRect(nodeWithPosition);
   }, []);
 
   const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(

packages/react/src/store/index.ts

@@ -7,7 +7,7 @@ import {
   panBy as panBySystem,
   updateNodeInternals as updateNodeInternalsSystem,
   updateConnectionLookup,
-  handleParentExpand,
+  handleExpandParent,
   NodeChange,
   EdgeSelectionChange,
   NodeSelectionChange,
@@ -155,7 +155,7 @@ const createRFStore = ({
         });
 
         if (expandParentNodes.length > 0) {
-          const parentExpandChanges = handleParentExpand(expandParentNodes, nodeLookup, parentLookup);
+          const parentExpandChanges = handleExpandParent(expandParentNodes, nodeLookup, parentLookup);
           changes.push(...parentExpandChanges);
         }