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>

Author: bcakmakoglu

.changeset/violet-countries-act.md

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

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

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<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)
  }),

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