refactor(panzoom): return promises for viewport helpers

packages/react/src/hooks/useViewportHelper.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import {
   pointToRendererPoint,
   getViewportForBounds,
+  getFitViewNodes,
   fitView,
   type XYPosition,
   rendererPointToPoint,
@@ -64,11 +65,12 @@ const useViewportHelper = (): ViewportHelperFunctions => {
       },
       fitView: (options) => {
         const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
+        const fitViewNodes = getFitViewNodes(nodeLookup, options);
 
         return panZoom
           ? fitView(
               {
-                nodeLookup,
+                nodes: fitViewNodes,
                 width,
                 height,
                 minZoom,

packages/react/src/store/index.ts

@@ -1,6 +1,7 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 import {
   clampPosition,
+  getFitViewNodes,
   fitView as fitViewSystem,
   adoptUserNodes,
   updateAbsolutePositions,
@@ -79,7 +80,6 @@ const createStore = ({
       updateNodeInternals: (updates) => {
         const {
           triggerNodeChanges,
-          fitView,
           nodeLookup,
           parentLookup,
           fitViewOnInit,
@@ -88,6 +88,7 @@ const createStore = ({
           domNode,
           nodeOrigin,
           debug,
+          fitViewSync,
         } = get();
 
         const { changes, updatedInternals } = updateNodeInternalsSystem(
@@ -106,8 +107,9 @@ const createStore = ({
 
         // we call fitView once initially after all dimensions are set
         let nextFitViewDone = fitViewDone;
+
         if (!fitViewDone && fitViewOnInit) {
-          nextFitViewDone = fitView({
+          nextFitViewDone = fitViewSync({
             ...fitViewOnInitOptions,
             nodes: fitViewOnInitOptions?.nodes,
           });
@@ -289,6 +291,7 @@ const createStore = ({
       },
       panBy: (delta): Promise<boolean> => {
         const { transform, width, height, panZoom, translateExtent } = get();
+
         return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
       },
       fitView: (options?: FitViewOptions): Promise<boolean> => {
@@ -298,9 +301,11 @@ const createStore = ({
           return Promise.resolve(false);
         }
 
+        const fitViewNodes = getFitViewNodes(nodeLookup, options);
+
         return fitViewSystem(
           {
-            nodeLookup,
+            nodes: fitViewNodes,
             width,
             height,
             panZoom,
@@ -310,6 +315,31 @@ const createStore = ({
           options
         );
       },
+      // we can't call an asnychronous function in updateNodeInternals
+      // for that we created this sync version of fitView
+      fitViewSync: (options?: FitViewOptions): boolean => {
+        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
+
+        if (!panZoom) {
+          return false;
+        }
+
+        const fitViewNodes = getFitViewNodes(nodeLookup, options);
+
+        fitViewSystem(
+          {
+            nodes: fitViewNodes,
+            width,
+            height,
+            panZoom,
+            minZoom,
+            maxZoom,
+          },
+          options
+        );
+
+        return fitViewNodes.size > 0;
+      },
       cancelConnection: () => {
         set({
           connection: { ...initialConnection },

packages/react/src/types/store.ts

@@ -169,6 +169,7 @@ export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
   triggerEdgeChanges: (changes: EdgeChange<EdgeType>[]) => void;
   panBy: PanBy;
   fitView: (options?: FitViewOptions) => Promise<boolean>;
+  fitViewSync: (options?: FitViewOptions) => boolean;
 };
 
 export type ReactFlowState<NodeType extends Node = Node, EdgeType extends Edge = Edge> = ReactFlowStore<