Merge branch 'main' into a11y

packages/system/src/types/general.ts

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

packages/system/src/types/nodes.ts

@@ -10,7 +10,7 @@ import { Optional } from '../utils/types';
  */
 export type NodeBase<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string = string
+  NodeType extends string | undefined = string | undefined
 > = {
   /** Unique id of a node. */
   id: string;
@@ -21,8 +21,6 @@ export type NodeBase<
   position: XYPosition;
   /** Arbitrary data passed to a node. */
   data: NodeData;
-  /** Type of node defined in `nodeTypes`. */
-  type?: NodeType;
   /**
    * Only relevant for default, source, target nodeType. Controls source position.
    * @example 'right', 'left', 'top', 'bottom'
@@ -79,7 +77,15 @@ export type NodeBase<
     width?: number;
     height?: number;
   };
-};
+} & (undefined extends NodeType
+  ? {
+      /** Type of node defined in nodeTypes */
+      type?: string | undefined;
+    }
+  : {
+      /** Type of node defined in nodeTypes */
+      type: NodeType;
+    });
 
 export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = Omit<NodeType, 'measured'> & {
   measured: {

packages/system/src/types/panzoom.ts

@@ -20,6 +20,8 @@ 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 });
+  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,
@@ -19,6 +20,7 @@ import {
   createZoomOnScrollHandler,
 } from './eventhandler';
 import { createFilter } from './filter';
+import { transition } from 'd3-transition';
 
 export type ZoomPanValues = {
   isZoomingOrPanning: boolean;
@@ -78,8 +80,8 @@ export function XYPanZoom({
   function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.transform(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).transform(
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           transform
         );
       });
@@ -114,22 +116,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 });
 
@@ -242,8 +244,8 @@ export function XYPanZoom({
   function scaleTo(zoom: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.scaleTo(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleTo(
+          getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)),
           zoom
         );
       });
@@ -255,8 +257,8 @@ export function XYPanZoom({
   function scaleBy(factor: number, options?: PanZoomTransformOptions) {
     if (d3Selection) {
       return new Promise<boolean>((resolve) => {
-        d3ZoomInstance?.scaleBy(
-          getD3Transition(d3Selection, options?.duration, () => resolve(true)),
+        d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleBy(
+          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,17 @@ 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;
+  return hasDuration ? selection.transition().duration(duration).ease(ease).on('end', onEnd) : selection;
 };
 
 export const wheelDelta = (event: any) => {