refactor(core)!: use xy panzoom instance

chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

Author: bcakmakoglu

.changeset/tame-books-cross.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Replace d3 zoom and pan with panzoom instance

packages/core/package.json

@@ -73,7 +73,6 @@
     "@vueuse/core": "^10.5.0",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0",
     "@xyflow/system": "^0.0.36"
   },
   "devDependencies": {
@@ -82,7 +81,6 @@
     "@tooling/tsconfig": "workspace:*",
     "@types/d3-drag": "^3.0.4",
     "@types/d3-selection": "^3.0.7",
-    "@types/d3-zoom": "^3.0.5",
     "@vitejs/plugin-vue": "^4.4.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

packages/core/src/composables/useDrag.ts

@@ -120,7 +120,7 @@ export function useDrag(params: UseDragParams) {
     }
   }
 
-  const autoPan = () => {
+  const autoPan = async () => {
     if (!containerBounds) {
       return
     }
@@ -133,7 +133,7 @@ export function useDrag(params: UseDragParams) {
         y: (lastPos.y ?? 0) - yMovement / viewport.value.zoom,
       }
 
-      if (panBy({ x: xMovement, y: yMovement })) {
+      if (await panBy({ x: xMovement, y: yMovement })) {
         updateNodes(nextPos)
       }
     }

packages/core/src/composables/useViewportHelper.ts

@@ -1,7 +1,6 @@
-import { zoomIdentity } from 'd3-zoom'
 import { computed } from 'vue'
-import { clampPosition, rendererPointToPoint } from '@xyflow/system'
-import type { D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types'
+import { rendererPointToPoint } from '@xyflow/system'
+import type { GraphNode, Project, State, ViewportFunctions } from '../types'
 import { getRectOfNodes, getTransformForBounds, pointToRendererPoint, warn } from '../utils'
 
 export interface ViewportHelper extends ViewportFunctions {
@@ -29,9 +28,7 @@ const initialViewportHelper: ViewportHelper = {
   screenToFlowCoordinate: (position) => position,
   flowToScreenCoordinate: (position) => position,
   setViewport: noop,
-  setTransform: noop,
   getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
-  getTransform: () => ({ x: 0, y: 0, zoom: 1 }),
   viewportInitialized: false,
 }
 
@@ -42,43 +39,9 @@ const initialViewportHelper: ViewportHelper = {
  * @param state
  */
 export function useViewportHelper(state: State) {
-  function zoom(scale: number, duration?: number) {
-    return new Promise<boolean>((resolve) => {
-      if (state.d3Selection && state.d3Zoom) {
-        state.d3Zoom.scaleBy(
-          transition(state.d3Selection, duration, () => {
-            resolve(true)
-          }),
-          scale,
-        )
-      } else {
-        resolve(false)
-      }
-    })
-  }
-
-  function transformViewport(x: number, y: number, zoom: number, duration?: number) {
-    return new Promise<boolean>((resolve) => {
-      // enforce translate extent
-      const { x: clampedX, y: clampedY } = clampPosition({ x: -x, y: -y }, state.translateExtent)
-
-      const nextTransform = zoomIdentity.translate(-clampedX, -clampedY).scale(zoom)
-
-      if (state.d3Selection && state.d3Zoom) {
-        state.d3Zoom.transform(
-          transition(state.d3Selection, duration, () => {
-            resolve(true)
-          }),
-          nextTransform,
-        )
-      } else {
-        resolve(false)
-      }
-    })
-  }
-
   return computed<ViewportHelper>(() => {
-    const isInitialized = state.d3Zoom && state.d3Selection && state.dimensions.width && state.dimensions.height
+    const panZoom = state.panZoom
+    const isInitialized = state.panZoom && state.dimensions.width && state.dimensions.height
 
     if (!isInitialized) {
       return initialViewportHelper
@@ -88,44 +51,36 @@ export function useViewportHelper(state: State) {
       viewportInitialized: true,
       // todo: allow passing scale as option
       zoomIn: (options) => {
-        return zoom(1.2, options?.duration)
+        return panZoom ? panZoom.scaleBy(1.2, options) : Promise.resolve(false)
       },
       zoomOut: (options) => {
-        return zoom(1 / 1.2, options?.duration)
+        return panZoom ? panZoom.scaleBy(1 / 1.2, options) : Promise.resolve(false)
       },
       zoomTo: (zoomLevel, options) => {
-        return new Promise<boolean>((resolve) => {
-          if (state.d3Selection && state.d3Zoom) {
-            state.d3Zoom.scaleTo(
-              transition(state.d3Selection, options?.duration, () => {
-                resolve(true)
-              }),
-              zoomLevel,
-            )
-          } else {
-            resolve(false)
-          }
-        })
-      },
-      setViewport: (transform, options) => {
-        return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
+        return panZoom ? panZoom.scaleTo(zoomLevel, options) : Promise.resolve(false)
       },
-      setTransform: (transform, options) => {
-        return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
+      setViewport: async (viewport, options) => {
+        if (!panZoom) {
+          return Promise.resolve(false)
+        }
+
+        await panZoom.setViewport(
+          {
+            x: viewport.x ?? state.viewport.x,
+            y: viewport.y ?? state.viewport.y,
+            zoom: viewport.zoom ?? state.viewport.zoom,
+          },
+          options,
+        )
+
+        return Promise.resolve(true)
       },
       getViewport: () => ({
         x: state.viewport.x,
         y: state.viewport.y,
         zoom: state.viewport.zoom,
       }),
-      getTransform: () => {
-        return {
-          x: state.viewport.x,
-          y: state.viewport.y,
-          zoom: state.viewport.zoom,
-        }
-      },
-      fitView: (
+      fitView: async (
         options = {
           padding: DEFAULT_PADDING,
           includeHiddenNodes: false,
@@ -143,7 +98,7 @@ export function useViewportHelper(state: State) {
           }
         }
 
-        if (!nodesToFit.length) {
+        if (!nodesToFit.length || !panZoom) {
           return Promise.resolve(false)
         }
 
@@ -159,16 +114,28 @@ export function useViewportHelper(state: State) {
           options.offset,
         )
 
-        return transformViewport(x, y, zoom, options?.duration)
+        await panZoom.setViewport({ x, y, zoom }, options)
+
+        return Promise.resolve(true)
       },
-      setCenter: (x, y, options) => {
+      setCenter: async (x, y, options) => {
+        if (!panZoom) {
+          return Promise.resolve(false)
+        }
+
         const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : state.maxZoom
         const centerX = state.dimensions.width / 2 - x * nextZoom
         const centerY = state.dimensions.height / 2 - y * nextZoom
 
-        return transformViewport(centerX, centerY, nextZoom, options?.duration)
+        await panZoom.setViewport({ x: centerX, y: centerY, zoom: nextZoom }, options)
+
+        return Promise.resolve(true)
       },
-      fitBounds: (bounds, options = { padding: DEFAULT_PADDING }) => {
+      fitBounds: async (bounds, options = { padding: DEFAULT_PADDING }) => {
+        if (!panZoom) {
+          return Promise.resolve(false)
+        }
+
         const { x, y, zoom } = getTransformForBounds(
           bounds,
           state.dimensions.width,
@@ -178,7 +145,9 @@ export function useViewportHelper(state: State) {
           options.padding,
         )
 
-        return transformViewport(x, y, zoom, options?.duration)
+        await panZoom.setViewport({ x, y, zoom }, options)
+
+        return Promise.resolve(true)
       },
       project: (position) => pointToRendererPoint(position, state.viewport, state.snapToGrid, state.snapGrid),
       screenToFlowCoordinate: (position) => {
@@ -212,7 +181,3 @@ export function useViewportHelper(state: State) {
     }
   })
 }
-
-function transition(selection: D3Selection, ms = 0, onEnd: () => void) {
-  return (selection as any).transition().duration(ms).on('end', onEnd)
-}