extract fitView into action

packages/react/src/store/index.ts

@@ -41,11 +41,36 @@ const createStore = ({
   nodeOrigin?: NodeOrigin;
   nodeExtent?: CoordinateExtent;
 }) =>
-  createWithEqualityFn<ReactFlowState>(
+  createWithEqualityFn<ReactFlowState>((set, get) => {
-    (set, get) => ({
+    function resolveFitView() {
+      const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
+
+      if (!panZoom) {
+        return;
+      }
+
+      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 });
+    }
+
+    return {
       ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
       setNodes: (nodes: Node[]) => {
-        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, panZoom } = get();
+        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,
@@ -62,24 +87,8 @@ const createStore = ({
           checkEquality: true,
         });
 
-        if (fitViewQueued && nodesInitialized && panZoom) {
+        if (fitViewQueued && nodesInitialized) {
-          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 {
           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 };