feat(viewport-options): add interpolate

examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte

@@ -31,7 +31,9 @@
 	<button onclick={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
 	<button onclick={() => setZoom(2)}>set zoom</button>
 	<button onclick={() => fitView({ duration: 600 })}>fitView</button>
-	<button onclick={() => fitView({ duration: 600, ease: (t) => +t })}>fitView linear</button>
+	<button onclick={() => fitView({ duration: 600, ease: (t) => +t, interpolate: 'linear' })}
+		>fitView linear</button
+	>
 	<button onclick={() => setCenter(0, 0)}>setCenter 0, 0</button>
 	<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button onclick={() => console.log(getViewport())}>getViewport</button>

packages/react/src/hooks/useViewportHelper.ts

@@ -78,7 +78,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
             y: centerY,
             zoom: nextZoom,
           },
-          { duration: options?.duration, ease: options?.ease }
+          { 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, ease: options?.ease });
+        await panZoom.setViewport(viewport, {
+          duration: options?.duration,
+          ease: options?.ease,
+          interpolate: options?.interpolate,
+        });
 
         return Promise.resolve(true);
       },

packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts

@@ -380,7 +380,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
           y: store.height / 2 - y * nextZoom,
           zoom: nextZoom
         },
-        { duration: options?.duration, ease: options?.ease }
+        { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
       );
 
       return Promise.resolve(true);
@@ -404,7 +404,8 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
 
       await store.panZoom.setViewport(viewport, {
         duration: options?.duration,
-        ease: options?.ease
+        ease: options?.ease,
+        interpolate: options?.interpolate
       });
 
       return Promise.resolve(true);

packages/system/package.json

@@ -51,10 +51,12 @@
   },
   "dependencies": {
     "@types/d3-drag": "^3.0.7",
+    "@types/d3-interpolate": "^3.0.4",
     "@types/d3-selection": "^3.0.10",
     "@types/d3-transition": "^3.0.8",
     "@types/d3-zoom": "^3.0.8",
     "d3-drag": "^3.0.0",
+    "d3-interpolate": "^3.0.1",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0"
   },

packages/system/src/types/general.ts

@@ -131,6 +131,7 @@ export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
   maxZoom?: number;
   duration?: number;
   ease?: (t: number) => number;
+  interpolate?: 'smooth' | 'linear';
   nodes?: (NodeType | { id: string })[];
 };
 
@@ -175,6 +176,7 @@ export enum PanOnScrollMode {
 export type ViewportHelperFunctionOptions = {
   duration?: number;
   ease?: (t: number) => number;
+  interpolate?: 'smooth' | 'linear';
 };
 
 export type SetCenterOptions = ViewportHelperFunctionOptions & {

packages/system/src/types/panzoom.ts

@@ -21,6 +21,7 @@ export type PanZoomParams = {
 export type PanZoomTransformOptions = {
   duration?: number;
   ease?: (t: number) => number;
+  interpolate?: 'smooth' | 'linear';
 };
 
 export type OnPanZoom = (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;

packages/system/src/utils/graph.ts

@@ -378,7 +378,11 @@ export async function fitViewport<
     options?.padding ?? 0.1
   );
 
-  await panZoom.setViewport(viewport, { duration: options?.duration, ease: options?.ease });
+  await panZoom.setViewport(viewport, {
+    duration: options?.duration,
+    ease: options?.ease,
+    interpolate: options?.interpolate,
+  });
 
   return Promise.resolve(true);
 }

packages/system/src/xypanzoom/XYPanZoom.ts

@@ -1,5 +1,6 @@
 import { type ZoomTransform, zoom, zoomTransform } from 'd3-zoom';
 import { select } from 'd3-selection';
+import { interpolateZoom, interpolate } from 'd3-interpolate';
 
 import {
   type CoordinateExtent,
@@ -79,7 +80,7 @@ export function XYPanZoom({
   function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.transform(
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).transform(
           getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           transform
         );
@@ -243,7 +244,7 @@ export function XYPanZoom({
   function scaleTo(zoom: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.scaleTo(
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleTo(
           getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           zoom
         );
@@ -256,7 +257,7 @@ export function XYPanZoom({
   function scaleBy(factor: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.scaleBy(
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleBy(
           getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           factor
         );

packages/system/src/xypanzoom/utils.ts

@@ -32,8 +32,6 @@ export const getD3Transition = (selection: D3SelectionInstance, duration = 0, ea
     onEnd();
   }
 
-  console.log(ease);
-
   return hasDuration ? selection.transition().duration(duration).ease(ease).on('end', onEnd) : selection;
 };
 

pnpm-lock.yaml

@@ -372,6 +372,9 @@ importers:
       '@types/d3-drag':
         specifier: ^3.0.7
         version: 3.0.7
+      '@types/d3-interpolate':
+        specifier: ^3.0.4
+        version: 3.0.4
       '@types/d3-selection':
         specifier: ^3.0.10
         version: 3.0.10
@@ -384,6 +387,9 @@ importers:
       d3-drag:
         specifier: ^3.0.0
         version: 3.0.0
+      d3-interpolate:
+        specifier: ^3.0.1
+        version: 3.0.1
       d3-selection:
         specifier: ^3.0.0
         version: 3.0.0