extract fitView into action

packages/react/src/store/index.ts

@@ -41,29 +41,14 @@ const createStore = ({
   nodeOrigin?: NodeOrigin;
   nodeExtent?: CoordinateExtent;
 }) =>
-  createWithEqualityFn<ReactFlowState>(
+  createWithEqualityFn<ReactFlowState>((set, get) => {
-    (set, get) => ({
+    function resolveFitView() {
-      ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
+      const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
-      setNodes: (nodes: Node[]) => {
-        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, panZoom } = get();
-        /*
-         * setNodes() is called exclusively in response to user actions:
-         * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
-         * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
-         *
-         * When this happens, we take the note objects passed by the user and extend them with fields
-         * relevant for internal React Flow operations.
-         */
 
-        const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
+      if (!panZoom) {
-          nodeOrigin,
+        return;
-          nodeExtent,
+      }
-          elevateNodesOnSelect,
-          checkEquality: true,
-        });
 
-        if (fitViewQueued && nodesInitialized && panZoom) {
-          const { fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
       const fitViewPromise = fitViewport(
         {
           nodes: nodeLookup,
@@ -80,6 +65,30 @@ const createStore = ({
         set({ fitViewResolver: null });
       });
       set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
+    }
+
+    return {
+      ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
+      setNodes: (nodes: Node[]) => {
+        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
+        /*
+         * setNodes() is called exclusively in response to user actions:
+         * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
+         * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
+         *
+         * When this happens, we take the note objects passed by the user and extend them with fields
+         * relevant for internal React Flow operations.
+         */
+
+        const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
+          nodeOrigin,
+          nodeExtent,
+          elevateNodesOnSelect,
+          checkEquality: true,
+        });
+
+        if (fitViewQueued && nodesInitialized) {
+          resolveFitView();
         } else {
           set({ nodes });
         }
@@ -109,17 +118,8 @@ const createStore = ({
        * new dimensions and update the nodes.
        */
       updateNodeInternals: (updates) => {
-        const {
+        const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued } =
-          triggerNodeChanges,
+          get();
-          nodeLookup,
-          parentLookup,
-          domNode,
-          nodeOrigin,
-          nodeExtent,
-          debug,
-          panZoom,
-          fitViewQueued,
-        } = get();
 
         const { changes, updatedInternals } = updateNodeInternalsSystem(
           updates,
@@ -136,24 +136,8 @@ const createStore = ({
 
         updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
 
-        if (fitViewQueued && panZoom) {
+        if (fitViewQueued) {
-          const { fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
+          resolveFitView();
-          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({});
@@ -359,8 +343,7 @@ const createStore = ({
       },
 
       reset: () => set({ ...getInitialState() }),
-    }),
+    };
-    Object.is
+  }, Object.is);
-  );
 
 export { createStore };