From 505fbfef7488d8fe98a3f2b459135794b8110633 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 19 May 2025 16:20:51 +0200 Subject: [PATCH] feat(core): add interpolate option to viewport transforming functions (#1851) * chore(core): add d3-interpolate to deps Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * feat(core): add interpolate option to viewport transforming functions Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> * chore(changeset): add * feat(core): add interpolate option to viewport transforming functions Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --------- Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .changeset/violet-countries-act.md | 5 +++++ packages/core/package.json | 2 ++ .../core/src/composables/useViewportHelper.ts | 7 ++++--- packages/core/src/types/zoom.ts | 1 + pnpm-lock.yaml | 20 ++++++++++++------- 5 files changed, 25 insertions(+), 10 deletions(-) create mode 100644 .changeset/violet-countries-act.md diff --git a/.changeset/violet-countries-act.md b/.changeset/violet-countries-act.md new file mode 100644 index 00000000..a8100ed1 --- /dev/null +++ b/.changeset/violet-countries-act.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Add interpolate option to viewport transforming functions diff --git a/packages/core/package.json b/packages/core/package.json index 90c8a6d4..12c962c1 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -73,6 +73,7 @@ "dependencies": { "@vueuse/core": "^10.5.0", "d3-drag": "^3.0.0", + "d3-interpolate": "^3.0.1", "d3-selection": "^3.0.0", "d3-zoom": "^3.0.0" }, @@ -81,6 +82,7 @@ "@tooling/eslint-config": "workspace:*", "@tooling/tsconfig": "workspace:*", "@types/d3-drag": "^3.0.7", + "@types/d3-interpolate": "^3.0.4", "@types/d3-selection": "^3.0.11", "@types/d3-transition": "^3.0.9", "@types/d3-zoom": "^3.0.8", diff --git a/packages/core/src/composables/useViewportHelper.ts b/packages/core/src/composables/useViewportHelper.ts index 7f242d15..417e95d4 100644 --- a/packages/core/src/composables/useViewportHelper.ts +++ b/packages/core/src/composables/useViewportHelper.ts @@ -1,3 +1,4 @@ +import { interpolate, interpolateZoom } from 'd3-interpolate' import { zoomIdentity } from 'd3-zoom' import { computed } from 'vue' import type { D3Selection, GraphNode, Project, State, TransitionOptions, ViewportFunctions } from '../types' @@ -48,7 +49,7 @@ export function useViewportHelper(state: State) { function zoom(scale: number, transitionOptions?: TransitionOptions) { return new Promise((resolve) => { if (state.d3Selection && state.d3Zoom) { - state.d3Zoom.scaleBy( + state.d3Zoom.interpolate(transitionOptions?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleBy( getD3Transition(state.d3Selection, transitionOptions?.duration, transitionOptions?.ease, () => { resolve(true) }), @@ -68,7 +69,7 @@ export function useViewportHelper(state: State) { const nextTransform = zoomIdentity.translate(-clampedX, -clampedY).scale(zoom) if (state.d3Selection && state.d3Zoom) { - state.d3Zoom.transform( + state.d3Zoom?.interpolate(transitionOptions?.interpolate === 'linear' ? interpolate : interpolateZoom).transform( getD3Transition(state.d3Selection, transitionOptions?.duration, transitionOptions?.ease, () => { resolve(true) }), @@ -99,7 +100,7 @@ export function useViewportHelper(state: State) { zoomTo: (zoomLevel, options) => { return new Promise((resolve) => { if (state.d3Selection && state.d3Zoom) { - state.d3Zoom.scaleTo( + state.d3Zoom.interpolate(options?.interpolate === 'linear' ? interpolate : interpolateZoom).scaleTo( getD3Transition(state.d3Selection, options?.duration, options?.ease, () => { resolve(true) }), diff --git a/packages/core/src/types/zoom.ts b/packages/core/src/types/zoom.ts index 07b225b6..028dfa02 100644 --- a/packages/core/src/types/zoom.ts +++ b/packages/core/src/types/zoom.ts @@ -19,6 +19,7 @@ export enum PanOnScrollMode { export interface TransitionOptions { duration?: number ease?: (t: number) => number + interpolate?: 'smooth' | 'linear' } export type FitViewParams = { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9c429fd8..c53159d3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -293,6 +293,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 @@ -315,6 +318,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.11 version: 3.0.11 @@ -2206,8 +2212,8 @@ packages: '@types/d3-drag@3.0.7': resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==} - '@types/d3-interpolate@3.0.2': - resolution: {integrity: sha512-zAbCj9lTqW9J9PlF4FwnvEjXZUy75NQqPm7DMHZXuxCFTpuTrdK2NMYGQekf4hlasL78fCYOLu4EE3/tXElwow==} + '@types/d3-interpolate@3.0.4': + resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==} '@types/d3-selection@3.0.11': resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==} @@ -9563,7 +9569,7 @@ snapshots: dependencies: '@types/d3-selection': 3.0.11 - '@types/d3-interpolate@3.0.2': + '@types/d3-interpolate@3.0.4': dependencies: '@types/d3-color': 3.1.1 @@ -9577,12 +9583,12 @@ snapshots: '@types/d3-zoom@3.0.5': dependencies: - '@types/d3-interpolate': 3.0.2 + '@types/d3-interpolate': 3.0.4 '@types/d3-selection': 3.0.11 '@types/d3-zoom@3.0.8': dependencies: - '@types/d3-interpolate': 3.0.2 + '@types/d3-interpolate': 3.0.4 '@types/d3-selection': 3.0.11 '@types/estree@1.0.2': {} @@ -9775,7 +9781,7 @@ snapshots: globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.3 - semver: 7.6.0 + semver: 7.6.3 ts-api-utils: 1.0.3(typescript@5.4.5) optionalDependencies: typescript: 5.4.5 @@ -9806,7 +9812,7 @@ snapshots: '@typescript-eslint/types': 6.19.0 '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.4.5) eslint: 8.51.0 - semver: 7.6.0 + semver: 7.6.3 transitivePeerDependencies: - supports-color - typescript