feat(viewport-options): add interpolate

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