simplified handleExpandParent, removed isParent, improved some functions

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

@@ -10,7 +10,8 @@ import {
   type NodeDimensionChange,
   type NodePositionChange,
   handleExpandParent,
-  evaluateNodePosition,
+  evaluateAbsolutePosition,
+  ParentExpandChild,
 } from '@xyflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -67,36 +68,32 @@ function ResizeControl({
           };
         },
         onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
-          const { triggerNodeChanges, nodeLookup, parentLookup } = store.getState();
+          const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
 
           const changes: NodeChange[] = [];
           const newPosition = { x: change.x, y: change.y };
 
           const node = nodeLookup.get(id);
           if (node && node.expandParent && node.parentId) {
-            // 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,
+            const child: ParentExpandChild = {
+              id: node.id,
+              parentId: node.parentId,
+              rect: {
+                width: change.width ?? node.measured.width!,
+                height: change.height ?? node.measured.height!,
+                ...evaluateAbsolutePosition(
+                  {
+                    x: change.x ?? node.position.x,
+                    y: change.y ?? node.position.y,
+                  },
+                  node.parentId,
+                  nodeLookup,
+                  node.origin ?? nodeOrigin
+                ),
               },
-              measured: {
-                width: change.width,
-                height: change.height,
-              },
-              width: change.width,
-              height: change.height,
             };
 
-            // ...determine its new absolute position...
-            nodeWithChange.internals = {
-              ...nodeWithChange.internals,
-              positionAbsolute: evaluateNodePosition(nodeWithChange, nodeLookup),
-            };
-
-            // ... and use it to expand the parent
-            const parentExpandChanges = handleExpandParent([nodeWithChange], nodeLookup, parentLookup);
+            const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
             changes.push(...parentExpandChanges);
 
             // when the parent was expanded by the child node, its position will be clamped at 0,0

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

@@ -42,12 +42,14 @@ export function NodeWrapper<NodeType extends Node>({
   nodeOrigin,
   onError,
 }: NodeWrapperProps<NodeType>) {
-  const { node, internals } = useStore((s) => {
+  const { node, internals, isParent } = useStore((s) => {
     const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
+    const isParent = s.parentLookup.has(id);
 
     return {
       node,
       internals: node.internals,
+      isParent,
     };
   }, shallow);
 
@@ -209,7 +211,7 @@ export function NodeWrapper<NodeType extends Node>({
         {
           selected: node.selected,
           selectable: isSelectable,
-          parent: internals.isParent,
+          parent: isParent,
           draggable: isDraggable,
           dragging,
         },

packages/react/src/hooks/useReactFlow.ts

@@ -1,9 +1,8 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import {
-  evaluateNodePosition,
+  evaluateAbsolutePosition,
   getElementsToRemove,
   getOverlappingArea,
-  isInternalNodeBase,
   isRectObject,
   nodeToRect,
   type Rect,
@@ -233,12 +232,15 @@ 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<NodeType>(node) ? node : nodeLookup.get(node.id)!;
-    const positionAbsolute = evaluateNodePosition(nodeToUse, nodeLookup, nodeOrigin);
+    const position = nodeToUse.parentId
+      ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
+      : nodeToUse.position;
 
     const nodeWithPosition = {
       id: nodeToUse.id,
-      position: positionAbsolute,
+      position,
       width: nodeToUse.measured?.width ?? nodeToUse.width,
       height: nodeToUse.measured?.height ?? nodeToUse.height,
       data: nodeToUse.data,

packages/react/src/store/index.ts

@@ -11,6 +11,7 @@ import {
   NodeChange,
   EdgeSelectionChange,
   NodeSelectionChange,
+  ParentExpandChild,
 } from '@xyflow/system';
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -124,8 +125,7 @@ const createRFStore = ({
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {
         const { nodeLookup, parentLookup } = get();
-        type ExpandParentInternalNode = InternalNode & { parentId: string; expandParent: true };
-        const expandParentNodes: ExpandParentInternalNode[] = [];
+        const parentExpandChildren: ParentExpandChild[] = [];
 
         const changes: NodeChange[] = nodeDragItems.map((node) => {
           // @todo add expandParent to drag item so that we can get rid of the look up here
@@ -138,14 +138,15 @@ const createRFStore = ({
           };
 
           if (internalNode?.expandParent && internalNode?.parentId && change.position) {
-            expandParentNodes.push({
-              ...internalNode,
-              position: { ...node.position },
-              internals: {
-                ...internalNode.internals,
-                positionAbsolute: node.internals.positionAbsolute,
+            parentExpandChildren.push({
+              id: internalNode.id,
+              parentId: internalNode.parentId,
+              rect: {
+                ...node.internals.positionAbsolute,
+                width: internalNode.measured.width!,
+                height: internalNode.measured.height!,
               },
-            } as ExpandParentInternalNode);
+            });
 
             change.position.x = Math.max(0, change.position.x);
             change.position.y = Math.max(0, change.position.y);
@@ -154,8 +155,8 @@ const createRFStore = ({
           return change;
         });
 
-        if (expandParentNodes.length > 0) {
-          const parentExpandChanges = handleExpandParent(expandParentNodes, nodeLookup, parentLookup);
+        if (parentExpandChildren.length > 0) {
+          const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
           changes.push(...parentExpandChanges);
         }