alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(viewport-options): add ease #3189

Browse Source
This commit is contained in:
moklick
2025-05-19 13:14:27 +02:00
parent 1acfade6fa
commit 9691d2c070
11 changed files with 58 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
examples/react/src/examples/UseReactFlow/index.tsx
View File

@@ -170,7 +170,6 @@ const UseZoomPanHelperFlow = () => {
onConnect={onConnect}
onPaneClick={onPaneClick}
fitView
fitViewOptions={{ duration: 1200, padding: 0.2 }}
maxZoom={Infinity}
>
<Panel position="top-right">
@@ -183,7 +182,16 @@ const UseZoomPanHelperFlow = () => {
console.log('fit view success');
}}
>
fitView
fitView default
</button>
<button
onClick={async () => {
console.log('fit view start');
await fitView({ duration: 1200, padding: 0.3, ease: (t) => +t });
console.log('fit view success');
}}
>
fitView linear
</button>
<button onClick={onAddNode}>add node</button>
<button onClick={onResetNodes}>reset nodes</button>

2
examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
View File

@@ -44,7 +44,7 @@
</script>
<main>
<SvelteFlow bind:nodes bind:edges fitView>
<SvelteFlow bind:nodes bind:edges fitView maxZoom={4}>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<MiniMap />

3
examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
View File

@@ -30,7 +30,8 @@
<button onclick={() => zoomIn()}>zoom in</button>
<button onclick={() => zoomOut({ duration: 1000 })}>zoom out transition</button>
<button onclick={() => setZoom(2)}>set zoom</button>
<button onclick={() => fitView()}>fitView</button>
<button onclick={() => fitView({ duration: 600 })}>fitView</button>
<button onclick={() => fitView({ duration: 600, ease: (t) => +t })}>fitView linear</button>
<button onclick={() => setCenter(0, 0)}>setCenter 0, 0</button>
<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
<button onclick={() => console.log(getViewport())}>getViewport</button>

6
packages/react/src/hooks/useViewportHelper.ts
View File

@@ -53,7 +53,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
y: viewport.y ?? tY,
zoom: viewport.zoom ?? tZoom,
},
{ duration: options?.duration }
options
);
return Promise.resolve(true);
@@ -78,7 +78,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
y: centerY,
zoom: nextZoom,
},
{ duration: options?.duration }
{ duration: options?.duration, ease: options?.ease }
);
return Promise.resolve(true);
@@ -91,7 +91,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
return Promise.resolve(false);
}
await panZoom.setViewport(viewport, { duration: options?.duration });
await panZoom.setViewport(viewport, { duration: options?.duration, ease: options?.ease });
return Promise.resolve(true);
},

5
packages/react/src/types/general.ts
View File

@@ -149,6 +149,7 @@ export type ViewportHelperFunctions = {
*
* @param viewport - the viewport to set
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.ease - optional ease function.
*/
setViewport: SetViewport;
/**
@@ -164,6 +165,8 @@ export type ViewportHelperFunctions = {
* @param x - x position
* @param y - y position
* @param options.zoom - optional zoom
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.ease - optional ease function.
*/
setCenter: SetCenter;
/**
@@ -173,6 +176,8 @@ export type ViewportHelperFunctions = {
*
* @param bounds - the bounds ({ x: number, y: number, width: number, height: number }) to fit the view to
* @param options.padding - optional padding
* @param options.duration - optional duration. If set, a transition will be applied
* @param options.ease - optional ease function.
*/
fitBounds: FitBounds;
/**

9
packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
View File

@@ -360,7 +360,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
y: nextViewport.y ?? currentViewport.y,
zoom: nextViewport.zoom ?? currentViewport.zoom
},
{ duration: options?.duration }
options
);
return Promise.resolve(true);
@@ -380,7 +380,7 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
y: store.height / 2 - y * nextZoom,
zoom: nextZoom
},
{ duration: options?.duration }
{ duration: options?.duration, ease: options?.ease }
);
return Promise.resolve(true);
@@ -402,7 +402,10 @@ export function useSvelteFlow<NodeType extends Node = Node, EdgeType extends Edg
options?.padding ?? 0.1
);
await store.panZoom.setViewport(viewport, { duration: options?.duration });
await store.panZoom.setViewport(viewport, {
duration: options?.duration,
ease: options?.ease
});
return Promise.resolve(true);
},

2
packages/system/src/types/general.ts
View File

@@ -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 & {

1
packages/system/src/types/panzoom.ts
View File

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

2
packages/system/src/utils/graph.ts
View File

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

37
packages/system/src/xypanzoom/XYPanZoom.ts
View File

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

10
packages/system/src/xypanzoom/utils.ts
View File

@@ -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) => {