chore(core): cleanup useZoomPanHelper

Author: bcakmakoglu

packages/core/src/composables/useZoomPanHelper.ts

@@ -1,106 +1,24 @@
-import { zoomIdentity } from 'd3-zoom'
 import { useVueFlow } from './useVueFlow'
-import type { D3Selection, GraphNode, ViewportFunctions } from '~/types'
-import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '~/utils'
-
-const DEFAULT_PADDING = 0.1
+import { useViewport } from './useViewport'
+import type { ComputedGetters, State, ViewportFunctions } from '~/types'
 
 /**
  * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow})
  */
 export function useZoomPanHelper(vueFlowId?: string): ViewportFunctions {
-  const { nodes, d3Zoom, d3Selection, dimensions, translateExtent, minZoom, maxZoom, viewport, snapToGrid, snapGrid, getNodes } =
-    $(useVueFlow({ id: vueFlowId }))
-
-  return {
-    zoomIn: (options) => {
-      zoom(1.2, options?.duration)
-    },
-    zoomOut: (options) => {
-      zoom(1 / 1.2, options?.duration)
-    },
-    zoomTo: (zoomLevel, options) => {
-      if (d3Selection && d3Zoom) {
-        d3Zoom.scaleTo(transition(d3Selection, options?.duration), zoomLevel)
-      }
-    },
-    setTransform: (transform, options) => {
-      transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
-    },
-    getTransform: () => ({
-      x: viewport.x,
-      y: viewport.y,
-      zoom: viewport.zoom,
-    }),
-    fitView: (
-      options = {
-        padding: DEFAULT_PADDING,
-        includeHiddenNodes: false,
-        duration: 0,
-      },
-    ) => {
-      if (!nodes.length) {
-        return
-      }
-
-      const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? nodes : getNodes).filter((node) => {
-        const initialized = node.initialized && node.dimensions.width && node.dimensions.height
-        let shouldInclude = true
-
-        if (options.nodes?.length) {
-          shouldInclude = options.nodes.includes(node.id)
-        }
-
-        return initialized && shouldInclude
-      })
-
-      const bounds = getRectOfNodes(nodesToFit)
-
-      const { x, y, zoom } = getTransformForBounds(
-        bounds,
-        dimensions.width,
-        dimensions.height,
-        options.minZoom ?? minZoom,
-        options.maxZoom ?? maxZoom,
-        options.padding ?? DEFAULT_PADDING,
-        options.offset,
-      )
-
-      transformViewport(x, y, zoom, options?.duration)
-    },
-    setCenter: (x, y, options) => {
-      const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom
-      const centerX = dimensions.width / 2 - x * nextZoom
-      const centerY = dimensions.height / 2 - y * nextZoom
+  const state = $(useVueFlow({ id: vueFlowId }))
 
-      transformViewport(centerX, centerY, nextZoom, options?.duration)
-    },
-    fitBounds: (bounds, options = { padding: DEFAULT_PADDING }) => {
-      const { x, y, zoom } = getTransformForBounds(bounds, dimensions.width, dimensions.height, minZoom, maxZoom, options.padding)
+  const viewportHelper = useViewport(state as State, state as unknown as ComputedGetters)
 
-      transformViewport(x, y, zoom, options?.duration)
-    },
-    project: (position) => pointToRendererPoint(position, viewport, snapToGrid, snapGrid),
-  }
-
-  function zoom(scale: number, duration?: number) {
-    if (d3Selection && d3Zoom) {
-      d3Zoom.scaleBy(transition(d3Selection, duration), scale)
-    }
-  }
-
-  function transformViewport(x: number, y: number, zoom: number, duration?: number) {
-    // enforce translate extent
-    const { x: clampedX, y: clampedY } = clampPosition({ x: -x, y: -y }, translateExtent)
-
-    const nextTransform = zoomIdentity.translate(-clampedX, -clampedY).scale(zoom)
-
-    if (d3Selection && d3Zoom) {
-      d3Zoom.transform(transition(d3Selection, duration), nextTransform)
-    }
+  return {
+    fitView: (params) => viewportHelper.value.fitView(params),
+    zoomIn: (transitionOpts) => viewportHelper.value.zoomIn(transitionOpts),
+    zoomOut: (transitionOpts) => viewportHelper.value.zoomOut(transitionOpts),
+    zoomTo: (zoomLevel, transitionOpts) => viewportHelper.value.zoomTo(zoomLevel, transitionOpts),
+    setTransform: (params, transitionOpts) => viewportHelper.value.setTransform(params, transitionOpts),
+    getTransform: () => viewportHelper.value.getTransform(),
+    setCenter: (x, y, opts) => viewportHelper.value.setCenter(x, y, opts),
+    fitBounds: (params, opts) => viewportHelper.value.fitBounds(params, opts),
+    project: (params) => viewportHelper.value.project(params),
   }
 }
-
-function transition(selection: D3Selection, ms = 0) {
-  return selection.transition().duration(ms)
-}