Merge pull request #5276 from xyflow/feat/viewport-transition-config

Feat/viewport transition config

packages/react/src/hooks/useViewportHelper.ts

@@ -53,7 +53,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
             y: viewport.y ?? tY,
             zoom: viewport.zoom ?? tZoom,
           },
-          { duration: options?.duration }
+          options
         );
 
         return Promise.resolve(true);
@@ -78,7 +78,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
             y: centerY,
             zoom: nextZoom,
           },
-          { duration: options?.duration }
+          { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
         );
 
         return Promise.resolve(true);
@@ -91,7 +91,11 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           return Promise.resolve(false);
         }
 
-        await panZoom.setViewport(viewport, { duration: options?.duration });
+        await panZoom.setViewport(viewport, {
+          duration: options?.duration,
+          ease: options?.ease,
+          interpolate: options?.interpolate,
+        });
 
         return Promise.resolve(true);
       },

packages/react/src/types/general.ts

@@ -149,6 +149,7 @@ export type ViewportHelperFunctions = {
    *
    * @param viewport - the viewport to set
    * @param options.duration - optional duration. If set, a transition will be applied
+   * @param options.ease - optional ease function.
    */
   setViewport: SetViewport;
   /**
@@ -164,6 +165,8 @@ export type ViewportHelperFunctions = {
    * @param x - x position
    * @param y - y position
    * @param options.zoom - optional zoom
+   * @param options.duration - optional duration. If set, a transition will be applied
+   * @param options.ease - optional ease function.
    */
   setCenter: SetCenter;
   /**
@@ -173,6 +176,8 @@ export type ViewportHelperFunctions = {
    *
    * @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
    * @param options.padding - optional padding
+   * @param options.duration - optional duration. If set, a transition will be applied
+   * @param options.ease - optional ease function.
    */
   fitBounds: FitBounds;
   /**