feat(viewport-helpers): return promises

packages/react/src/hooks/useViewportHelper.ts

@@ -21,17 +21,33 @@ const useViewportHelper = (): ViewportHelperFunctions => {
 
   return useMemo<ViewportHelperFunctions>(() => {
     return {
-      zoomIn: (options) => store.getState().panZoom?.scaleBy(1.2, { duration: options?.duration }),
-      zoomOut: (options) => store.getState().panZoom?.scaleBy(1 / 1.2, { duration: options?.duration }),
-      zoomTo: (zoomLevel, options) => store.getState().panZoom?.scaleTo(zoomLevel, { duration: options?.duration }),
+      zoomIn: (options) => {
+        const { panZoom } = store.getState();
+
+        return panZoom ? panZoom.scaleBy(1.2, { duration: options?.duration }) : Promise.resolve(false);
+      },
+      zoomOut: (options) => {
+        const { panZoom } = store.getState();
+
+        return panZoom ? panZoom.scaleBy(1 / 1.2, { duration: options?.duration }) : Promise.resolve(false);
+      },
+      zoomTo: (zoomLevel, options) => {
+        const { panZoom } = store.getState();
+
+        return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false);
+      },
       getZoom: () => store.getState().transform[2],
-      setViewport: (viewport, options) => {
+      setViewport: async (viewport, options) => {
         const {
           transform: [tX, tY, tZoom],
           panZoom,
         } = store.getState();
 
-        panZoom?.setViewport(
+        if (!panZoom) {
+          return Promise.resolve(false);
+        }
+
+        await panZoom.setViewport(
           {
             x: viewport.x ?? tX,
             y: viewport.y ?? tY,
@@ -39,6 +55,8 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           },
           { duration: options?.duration }
         );
+
+        return Promise.resolve(true);
       },
       getViewport: () => {
         const [x, y, zoom] = store.getState().transform;
@@ -47,29 +65,31 @@ const useViewportHelper = (): ViewportHelperFunctions => {
       fitView: (options) => {
         const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
 
-        if (!panZoom) {
-          return false;
-        }
-
-        return fitView(
-          {
-            nodeLookup,
-            width,
-            height,
-            minZoom,
-            maxZoom,
-            panZoom,
-          },
-          options
-        );
+        return panZoom
+          ? fitView(
+              {
+                nodeLookup,
+                width,
+                height,
+                minZoom,
+                maxZoom,
+                panZoom,
+              },
+              options
+            )
+          : Promise.resolve(false);
       },
-      setCenter: (x, y, options) => {
+      setCenter: async (x, y, options) => {
         const { width, height, maxZoom, panZoom } = store.getState();
         const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
         const centerX = width / 2 - x * nextZoom;
         const centerY = height / 2 - y * nextZoom;
 
-        panZoom?.setViewport(
+        if (!panZoom) {
+          return Promise.resolve(false);
+        }
+
+        await panZoom.setViewport(
           {
             x: centerX,
             y: centerY,
@@ -77,12 +97,20 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           },
           { duration: options?.duration }
         );
+
+        return Promise.resolve(true);
       },
-      fitBounds: (bounds, options) => {
+      fitBounds: async (bounds, options) => {
         const { width, height, minZoom, maxZoom, panZoom } = store.getState();
         const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
 
-        panZoom?.setViewport(viewport, { duration: options?.duration });
+        if (!panZoom) {
+          return Promise.resolve(false);
+        }
+
+        await panZoom.setViewport(viewport, { duration: options?.duration });
+
+        return Promise.resolve(true);
       },
       screenToFlowPosition: (clientPosition: XYPosition, options: { snapToGrid: boolean } = { snapToGrid: true }) => {
         const { transform, snapGrid, domNode } = store.getState();

packages/react/src/store/index.ts

@@ -287,15 +287,15 @@ const createStore = ({
           nodeExtent,
         });
       },
-      panBy: (delta): boolean => {
+      panBy: (delta): Promise<boolean> => {
         const { transform, width, height, panZoom, translateExtent } = get();
         return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
       },
-      fitView: (options?: FitViewOptions): boolean => {
+      fitView: (options?: FitViewOptions): Promise<boolean> => {
         const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
 
         if (!panZoom) {
-          return false;
+          return Promise.resolve(false);
         }
 
         return fitViewSystem(

packages/react/src/types/general.ts

@@ -65,7 +65,7 @@ export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
 
 export type FitViewParams<NodeType extends Node = Node> = FitViewParamsBase<NodeType>;
 export type FitViewOptions<NodeType extends Node = Node> = FitViewOptionsBase<NodeType>;
-export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
+export type FitView = (fitViewOptions?: FitViewOptions) => Promise<boolean>;
 export type OnInit<NodeType extends Node = Node, EdgeType extends Edge = Edge> = (
   reactFlowInstance: ReactFlowInstance<NodeType, EdgeType>
 ) => void;

packages/react/src/types/store.ts

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