From ce9814ddcef753c8cf4a23e70c6fe7a4b10f6cf2 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 19 May 2025 15:19:11 +0200 Subject: [PATCH] feat(viewport-options): add interpolate --- .../src/routes/examples/usesvelteflow/Sidebar.svelte | 4 +++- packages/react/src/hooks/useViewportHelper.ts | 8 ++++++-- packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts | 5 +++-- packages/system/package.json | 2 ++ packages/system/src/types/general.ts | 2 ++ packages/system/src/types/panzoom.ts | 1 + packages/system/src/utils/graph.ts | 6 +++++- packages/system/src/xypanzoom/XYPanZoom.ts | 7 ++++--- packages/system/src/xypanzoom/utils.ts | 2 -- pnpm-lock.yaml | 6 ++++++ 10 files changed, 32 insertions(+), 11 deletions(-) diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte index 6c56e10a..3b687eb3 100644 --- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte +++ b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte @@ -31,7 +31,9 @@ - + diff --git a/packages/react/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts index 3f115152..fc01a150 100644 --- a/packages/react/src/hooks/useViewportHelper.ts +++ b/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); }, diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts index d56b3992..82c66064 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts @@ -380,7 +380,7 @@ export function useSvelteFlow = { 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 & { diff --git a/packages/system/src/types/panzoom.ts b/packages/system/src/types/panzoom.ts index 1738bc50..ae968fc8 100644 --- a/packages/system/src/types/panzoom.ts +++ b/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; diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts index 386eac79..402067d2 100644 --- a/packages/system/src/utils/graph.ts +++ b/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); } diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts index b30ec8f5..0c1a8e12 100644 --- a/packages/system/src/xypanzoom/XYPanZoom.ts +++ b/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((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((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((resolve) => { - d3ZoomInstance?.scaleBy( + d3ZoomInstance?.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleBy( getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), factor ); diff --git a/packages/system/src/xypanzoom/utils.ts b/packages/system/src/xypanzoom/utils.ts index b6fd71f3..22382bd5 100644 --- a/packages/system/src/xypanzoom/utils.ts +++ b/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; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c962a91e..d47c4673 100644 --- a/pnpm-lock.yaml +++ b/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