alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): add interpolate option to viewport transforming functions (#1851)

Browse Source 
* 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>
This commit is contained in:
Braks
2025-05-19 16:20:51 +02:00
parent 00bc28bf1b
commit 505fbfef74
5 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/violet-countries-act.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@vue-flow/core": minor
---
Add interpolate option to viewport transforming functions

2
packages/core/package.json
View File

@@ -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",

7
packages/core/src/composables/useViewportHelper.ts
View File

@@ -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<boolean>((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<boolean>((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)
}),

1
packages/core/src/types/zoom.ts
View File

@@ -19,6 +19,7 @@ export enum PanOnScrollMode {
export interface TransitionOptions {
duration?: number
ease?: (t: number) => number
interpolate?: 'smooth' | 'linear'
}
export type FitViewParams = {

20
pnpm-lock.yaml generated
View File

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