use evaluateNodePosition for parentExpand

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

@@ -10,12 +10,13 @@ import {
   type NodeDimensionChange,
   type NodePositionChange,
   handleParentExpand,
+  evaluateNodePosition,
 } from '@xyflow/system';
 
 import { useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import type { ResizeControlProps, ResizeControlLineProps } from './types';
-import { InternalNode } from '../../types';
+import { InternalNode, Node } from '../../types';
 
 type InternalNodeWithParentExpand = InternalNode & { expandParent: true; parentId: string };
 
@@ -73,32 +74,25 @@ function ResizeControl({
 
           const node = nodeLookup.get(id);
           if (node && node.expandParent && node.parentId) {
-            const nodeWithChange = {
+            const nodeWithChange: Node = {
               ...node,
               position: {
-                x: change.x,
+                x: change.x ?? node.position.x,
-                y: change.y,
+                y: change.y ?? node.position.y,
               },
               width: change.width,
               height: change.height,
-              measured: {
+            };
-                width: change.width ?? node.measured?.width,
-                height: change.height ?? node.measured?.height,
-              },
-            } as InternalNodeWithParentExpand;
 
-            const parentExpandChanges = handleParentExpand([nodeWithChange], nodeLookup);
+            const nodeWith = evaluateNodePosition(nodeWithChange, nodeLookup) as InternalNodeWithParentExpand;
-            if (parentExpandChanges.length > 0) {
+
-              newPosition.x = change.x && change.x < 0 ? 0 : change.x;
+            const parentExpandChanges = handleParentExpand([nodeWith], nodeLookup);
-              newPosition.y = change.y && change.y < 0 ? 0 : change.y;
-            } else {
-              console.log('there was no parent expand');
-            }
             changes.push(...parentExpandChanges);
+            newPosition.x = change.x ? Math.max(0, change.x) : undefined;
+            newPosition.y = change.y ? Math.max(0, change.y) : undefined;
           }
 
           if (change.x !== undefined && change.y !== undefined) {
-            console.log(newPosition);
             const positionChange: NodePositionChange = {
               id,
               type: 'position',

packages/react/src/store/index.ts

@@ -117,7 +117,8 @@ const createRFStore = ({
       },
       updateNodePositions: (nodeDragItems, dragging = false) => {
         const { nodeLookup } = get();
-        const triggerChangeNodes: InternalNode[] = [];
+        type ExpandParentInternalNode = InternalNode & { parentId: string; expandParent: true };
+        const expandParentNodes: ExpandParentInternalNode[] = [];
 
         const changes: NodeChange[] = nodeDragItems.map((node) => {
           // @todo add expandParent to drag item so that we can get rid of the look up here
@@ -129,15 +130,15 @@ const createRFStore = ({
             dragging,
           };
 
-          if (internalNode?.expandParent && change.position) {
+          if (internalNode?.expandParent && internalNode?.parentId && change.position) {
-            triggerChangeNodes.push({
+            expandParentNodes.push({
               ...internalNode,
-              position: change.position,
+              position: { ...node.position },
               internals: {
                 ...internalNode.internals,
                 positionAbsolute: node.internals.positionAbsolute,
               },
-            });
+            } as ExpandParentInternalNode);
 
             change.position.x = Math.max(0, change.position.x);
             change.position.y = Math.max(0, change.position.y);
@@ -146,8 +147,8 @@ const createRFStore = ({
           return change;
         });
 
-        if (triggerChangeNodes.length > 0) {
+        if (expandParentNodes.length > 0) {
-          const parentExpandChanges = handleParentExpand(triggerChangeNodes, nodeLookup);
+          const parentExpandChanges = handleParentExpand(expandParentNodes, nodeLookup);
           changes.push(...parentExpandChanges);
         }
 

packages/system/src/utils/store.ts

@@ -145,10 +145,10 @@ function calculateXYZPosition<NodeType extends NodeBase>(
   );
 }
 
-type NodeWithExpandParent<NodeType> = NodeType & { parentId: string; expandParent: true };
+type ExpandParentNode<NodeType> = NodeType & { parentId: string; expandParent: true };
 
 export function handleParentExpand(
-  nodes: NodeWithExpandParent<InternalNodeBase>[],
+  nodes: ExpandParentNode<InternalNodeBase>[],
   nodeLookup: NodeLookup
 ): (NodeDimensionChange | NodePositionChange)[] {
   const changes: (NodeDimensionChange | NodePositionChange)[] = [];
@@ -160,7 +160,7 @@ export function handleParentExpand(
       continue;
     }
 
-    const parentRect = chilNodeRects.get(node.parentId) || nodeToRect(parentNode, node.origin);
+    const parentRect = chilNodeRects.get(node.parentId) ?? nodeToRect(parentNode, node.origin);
     const expandedRect = getBoundsOfRects(parentRect, nodeToRect(node, node.origin));
     chilNodeRects.set(node.parentId, expandedRect);
   }
@@ -171,10 +171,9 @@ export function handleParentExpand(
       const { position } = getNodePositionWithOrigin(origParent, origParent.origin);
       const dimensions = getNodeDimensions(origParent);
 
-      if (rect.x < position.x || rect.y < position.y) {
+      let xChange = rect.x < position.x ? Math.round(Math.abs(position.x - rect.x)) : 0;
-        const xChange = Math.round(Math.abs(position.x - rect.x));
+      let yChange = rect.y < position.y ? Math.round(Math.abs(position.y - rect.y)) : 0;
-        const yChange = Math.round(Math.abs(position.y - rect.y));
+      if (xChange > 0 || yChange > 0) {
-
         changes.push({
           id,
           type: 'position',
@@ -183,25 +182,16 @@ export function handleParentExpand(
             y: position.y - yChange,
           },
         });
-
-        changes.push({
-          id,
-          type: 'dimensions',
-          resizing: true,
-          dimensions: {
-            width: dimensions.width + xChange,
-            height: dimensions.height + yChange,
-          },
-        });
       }
+
       if (dimensions.width < rect.width || dimensions.height < rect.height) {
         changes.push({
           id,
           type: 'dimensions',
           resizing: true,
           dimensions: {
-            width: Math.max(dimensions.width, rect.width),
+            width: Math.max(dimensions.width, Math.round(rect.width)),
-            height: Math.max(dimensions.height, rect.height),
+            height: Math.max(dimensions.height, Math.round(rect.height)),
           },
         });
       }
@@ -228,7 +218,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
   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 parentExpandNodes: NodeWithExpandParent<NodeType>[] = [];
+  const parentExpandNodes: ExpandParentNode<NodeType>[] = [];
 
   updates.forEach((update) => {
     const node = nodeLookup.get(update.id);
@@ -275,7 +265,7 @@ export function updateNodeInternals<NodeType extends InternalNodeBase>(
           });
 
           if (newNode.expandParent && newNode.parentId) {
-            parentExpandNodes.push(newNode as NodeWithExpandParent<NodeType>);
+            parentExpandNodes.push(newNode as ExpandParentNode<NodeType>);
           }
         }
       }