fix(subflows): adjust positions before call fit view closes #2737

examples/vite-app/src/examples/Subflow/index.tsx

@@ -22,7 +22,6 @@ const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
 const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
-
 const initialNodes: Node[] = [
   {
     id: '1',

packages/core/src/store/index.ts

@@ -3,7 +3,7 @@ import { createStore } from 'zustand';
 import { clampPosition, getDimensions, internalsSymbol } from '../utils';
 import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import { getHandleBounds } from '../components/Nodes/utils';
-import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils';
+import { createNodeInternals, fitView, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils';
 import initialState from './initialState';
 import type {
   ReactFlowState,
@@ -99,6 +99,8 @@ const createRFStore = () =>
         return res;
       }, []);
 
+      updateAbsoluteNodePositions(nodeInternals, nodeOrigin);
+
       const nextFitViewOnInitDone =
         fitViewOnInitDone ||
         (fitViewOnInit && !fitViewOnInitDone && fitView(get, { initial: true, ...fitViewOnInitOptions }));

packages/core/src/store/utils.ts

@@ -20,7 +20,6 @@ type ParentNodes = Record<string, boolean>;
 function calculateXYZPosition(
   node: Node,
   nodeInternals: NodeInternals,
-  parentNodes: ParentNodes,
   result: XYZPosition,
   nodeOrigin: NodeOrigin
 ): XYZPosition {
@@ -33,7 +32,6 @@ function calculateXYZPosition(
   return calculateXYZPosition(
     parentNode,
     nodeInternals,
-    parentNodes,
     {
       x: (result.x ?? 0) + parentNodePosition.x,
       y: (result.y ?? 0) + parentNodePosition.y,
@@ -43,6 +41,41 @@ function calculateXYZPosition(
   );
 }
 
+export function updateAbsoluteNodePositions(
+  nodeInternals: NodeInternals,
+  nodeOrigin: NodeOrigin,
+  parentNodes?: ParentNodes
+) {
+  nodeInternals.forEach((node) => {
+    if (node.parentNode && !nodeInternals.has(node.parentNode)) {
+      throw new Error(`Parent node ${node.parentNode} not found`);
+    }
+
+    if (node.parentNode || parentNodes?.[node.id]) {
+      const { x, y, z } = calculateXYZPosition(
+        node,
+        nodeInternals,
+        {
+          ...node.position,
+          z: node[internalsSymbol]?.z ?? 0,
+        },
+        nodeOrigin
+      );
+
+      node.positionAbsolute = {
+        x,
+        y,
+      };
+
+      node[internalsSymbol]!.z = z;
+
+      if (parentNodes?.[node.id]) {
+        node[internalsSymbol]!.isParent = true;
+      }
+    }
+  });
+}
+
 export function createNodeInternals(
   nodes: Node[],
   nodeInternals: NodeInternals,
@@ -83,35 +116,7 @@ export function createNodeInternals(
     nextNodeInternals.set(node.id, internals);
   });
 
-  nextNodeInternals.forEach((node) => {
+  updateAbsoluteNodePositions(nextNodeInternals, nodeOrigin, parentNodes);
-    if (node.parentNode && !nextNodeInternals.has(node.parentNode)) {
-      throw new Error(`Parent node ${node.parentNode} not found`);
-    }
-
-    if (node.parentNode || parentNodes[node.id]) {
-      const { x, y, z } = calculateXYZPosition(
-        node,
-        nextNodeInternals,
-        parentNodes,
-        {
-          ...node.position,
-          z: node[internalsSymbol]?.z ?? 0,
-        },
-        nodeOrigin
-      );
-
-      node.positionAbsolute = {
-        x,
-        y,
-      };
-
-      node[internalsSymbol]!.z = z;
-
-      if (parentNodes[node.id]) {
-        node[internalsSymbol]!.isParent = true;
-      }
-    }
-  });
 
   return nextNodeInternals;
 }
@@ -142,6 +147,7 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
 
       if (nodes.length > 0 && nodesInitialized) {
         const bounds = getRectOfNodes(nodes, nodeOrigin);
+
         const [x, y, zoom] = getTransformForBounds(
           bounds,
           width,