feat(viewport-options): add ease #3189

packages/system/src/types/general.ts

@@ -130,6 +130,7 @@ export type FitViewOptionsBase<NodeType extends NodeBase = NodeBase> = {
   minZoom?: number;
   maxZoom?: number;
   duration?: number;
+  ease?: (t: number) => number;
   nodes?: (NodeType | { id: string })[];
 };
 
@@ -173,6 +174,7 @@ export enum PanOnScrollMode {
  */
 export type ViewportHelperFunctionOptions = {
   duration?: number;
+  ease?: (t: number) => number;
 };
 
 export type SetCenterOptions = ViewportHelperFunctionOptions & {

packages/system/src/types/panzoom.ts

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

packages/system/src/utils/graph.ts

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

packages/system/src/xypanzoom/XYPanZoom.ts

@@ -19,6 +19,7 @@ import {
   createZoomOnScrollHandler,
 } from './eventhandler';
 import { createFilter } from './filter';
+import { transition } from 'd3-transition';
 
 export type ZoomPanValues = {
   isZoomingOrPanning: boolean;
@@ -79,7 +80,7 @@ export function XYPanZoom({
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
         d3ZoomInstance?.transform(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           transform
         );
       });
@@ -114,22 +115,22 @@ export function XYPanZoom({
 
     const wheelHandler = isPanOnScroll
       ? createPanOnScrollHandler({
-        zoomPanValues,
-        noWheelClassName,
-        d3Selection,
-        d3Zoom: d3ZoomInstance,
-        panOnScrollMode,
-        panOnScrollSpeed,
-        zoomOnPinch,
-        onPanZoomStart,
-        onPanZoom,
-        onPanZoomEnd,
-      })
+          zoomPanValues,
+          noWheelClassName,
+          d3Selection,
+          d3Zoom: d3ZoomInstance,
+          panOnScrollMode,
+          panOnScrollSpeed,
+          zoomOnPinch,
+          onPanZoomStart,
+          onPanZoom,
+          onPanZoomEnd,
+        })
       : createZoomOnScrollHandler({
-        noWheelClassName,
-        preventScrolling,
-        d3ZoomHandler,
-      });
+          noWheelClassName,
+          preventScrolling,
+          d3ZoomHandler,
+        });
 
     d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
 
@@ -243,7 +244,7 @@ export function XYPanZoom({
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
         d3ZoomInstance?.scaleTo(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           zoom
         );
       });
@@ -256,7 +257,7 @@ export function XYPanZoom({
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
         d3ZoomInstance?.scaleBy(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           factor
         );
       });

packages/system/src/xypanzoom/utils.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
+import { transition } from 'd3-transition';
 
 import { type D3SelectionInstance, type Viewport } from '../types';
 import { isMacOs } from '../utils';
@@ -21,14 +22,19 @@ export const isWrappedWithClass = (event: any, className: string | undefined) =>
 export const isRightClickPan = (panOnDrag: boolean | number[], usedButton: number) =>
   usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
 
-export const getD3Transition = (selection: D3SelectionInstance, duration = 0, onEnd = () => {}) => {
+// taken from d3-ease: https://github.com/d3/d3-ease/blob/main/src/cubic.js
+const defaultEase = (t: number) => ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
+
+export const getD3Transition = (selection: D3SelectionInstance, duration = 0, ease = defaultEase, onEnd = () => {}) => {
   const hasDuration = typeof duration === 'number' && duration > 0;
 
   if (!hasDuration) {
     onEnd();
   }
 
-  return hasDuration ? selection.transition().duration(duration).on('end', onEnd) : selection;
+  console.log(ease);
+
+  return hasDuration ? selection.transition().duration(duration).ease(ease).on('end', onEnd) : selection;
 };
 
 export const wheelDelta = (event: any) => {