either trigger fitView after adoptUserNodes or after updateNodeInternals

examples/react/src/examples/Stress/index.tsx

@@ -12,6 +12,8 @@ import {
   Controls,
   Background,
   Panel,
+  ReactFlowProvider,
+  useReactFlow,
 } from '@xyflow/react';
 
 import { getNodesAndEdges } from './utils';
@@ -22,6 +24,7 @@ const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(25, 25);
 const StressFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
+  const { fitView } = useReactFlow();
   const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => addEdge(connection, eds));
   }, []);
@@ -191,12 +194,13 @@ const StressFlow = () => {
         return {
           ...n,
           position: {
-            x: Math.random() * window.innerWidth,
+            x: Math.random() * window.innerWidth * 4,
-            y: Math.random() * window.innerHeight,
+            y: Math.random() * window.innerHeight * 4,
           },
         };
       });
     });
+    fitView();
   };
 
   const updateElements = () => {
@@ -240,4 +244,10 @@ const StressFlow = () => {
   );
 };
 
-export default StressFlow;
+export default function StressFlowProvider() {
+  return (
+    <ReactFlowProvider>
+      <StressFlow />
+    </ReactFlowProvider>
+  );
+}

packages/react/src/store/index.ts

@@ -109,7 +109,17 @@ const createStore = ({
        * new dimensions and update the nodes.
        */
       updateNodeInternals: (updates) => {
-        const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug } = get();
+        const {
+          triggerNodeChanges,
+          nodeLookup,
+          parentLookup,
+          domNode,
+          nodeOrigin,
+          nodeExtent,
+          debug,
+          panZoom,
+          fitViewQueued,
+        } = get();
 
         const { changes, updatedInternals } = updateNodeInternalsSystem(
           updates,
@@ -126,8 +136,28 @@ const createStore = ({
 
         updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
 
-        // we always want to trigger useStore calls whenever updateNodeInternals is called
+        if (fitViewQueued && panZoom) {
-        set({});
+          const { fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
+          const fitViewPromise = fitViewport(
+            {
+              nodes: nodeLookup,
+              width,
+              height,
+              panZoom,
+              minZoom,
+              maxZoom,
+            },
+            fitViewOptions
+          );
+          fitViewPromise.then((value) => {
+            fitViewResolver?.resolve(value);
+            set({ fitViewResolver: null });
+          });
+          set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
+        } else {
+          // we always want to trigger useStore calls whenever updateNodeInternals is called
+          set({});
+        }
 
         if (changes?.length > 0) {
           if (debug) {

packages/react/src/store/initialState.ts

@@ -108,7 +108,7 @@ const getInitialState = ({
 
     multiSelectionActive: false,
 
-    fitViewQueued: false,
+    fitViewQueued: fitView ?? false,
     fitViewOptions: undefined,
     fitViewResolver: null,