feat(viewport-options): add interpolate

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;
 };