feat(core): add setViewport and getViewport to viewport helper

packages/core/src/composables/useViewport.ts

@@ -1,5 +1,6 @@
+import { until } from '@vueuse/core'
 import { zoomIdentity } from 'd3-zoom'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { ComputedGetters, D3Selection, GraphNode, State, ViewportFunctions } from '~/types'
 import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '~/utils'
 
@@ -21,7 +22,9 @@ const initialViewportHelper: ExtendedViewport = {
   setCenter: noop,
   fitBounds: noop,
   project: (position) => position,
+  setViewport: noop,
   setTransform: noop,
+  getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
   getTransform: () => ({ x: 0, y: 0, zoom: 1 }),
   initialized: false,
 }
@@ -97,9 +100,17 @@ export function useViewport(state: State, getters: ComputedGetters) {
             }
           })
         },
+        setViewport: (transform, options) => {
+          transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
+        },
         setTransform: (transform, options) => {
           return transformViewport(transform.x, transform.y, transform.zoom, options?.duration)
         },
+        getViewport: () => ({
+          x: viewport.x,
+          y: viewport.y,
+          zoom: viewport.zoom,
+        }),
         getTransform: () => {
           return {
             x: viewport.x,

packages/core/src/composables/useZoomPanHelper.ts

@@ -15,7 +15,9 @@ export function useZoomPanHelper(vueFlowId?: string): ViewportFunctions {
     zoomIn: (transitionOpts) => viewportHelper.value.zoomIn(transitionOpts),
     zoomOut: (transitionOpts) => viewportHelper.value.zoomOut(transitionOpts),
     zoomTo: (zoomLevel, transitionOpts) => viewportHelper.value.zoomTo(zoomLevel, transitionOpts),
+    setViewport: (params, transitionOpts) => viewportHelper.value.setViewport(params, transitionOpts),
     setTransform: (params, transitionOpts) => viewportHelper.value.setTransform(params, transitionOpts),
+    getViewport: () => viewportHelper.value.getViewport(),
     getTransform: () => viewportHelper.value.getTransform(),
     setCenter: (x, y, opts) => viewportHelper.value.setCenter(x, y, opts),
     fitBounds: (params, opts) => viewportHelper.value.fitBounds(params, opts),

packages/core/src/store/actions.ts

@@ -885,7 +885,9 @@ export function useActions(
     zoomIn: (transitionOpts) => viewportHelper.value.zoomIn(transitionOpts),
     zoomOut: (transitionOpts) => viewportHelper.value.zoomOut(transitionOpts),
     zoomTo: (zoomLevel, transitionOpts) => viewportHelper.value.zoomTo(zoomLevel, transitionOpts),
+    setViewport: (params, transitionOpts) => viewportHelper.value.setViewport(params, transitionOpts),
     setTransform: (params, transitionOpts) => viewportHelper.value.setTransform(params, transitionOpts),
+    getViewport: () => viewportHelper.value.getViewport(),
     getTransform: () => viewportHelper.value.getTransform(),
     setCenter: (x, y, opts) => viewportHelper.value.setCenter(x, y, opts),
     fitBounds: (params, opts) => viewportHelper.value.fitBounds(params, opts),

packages/core/src/types/zoom.ts

@@ -60,17 +60,19 @@ export type ZoomInOut = (options?: TransitionOptions) => Promise<boolean>
 export type ZoomTo = (zoomLevel: number, options?: TransitionOptions) => Promise<boolean>
 
 /** get current viewport transform */
-export type GetTransform = () => ViewportTransform
+export type GetViewport = () => ViewportTransform
 
 /** set current viewport transform */
-export type SetTransform = (transform: ViewportTransform, options?: TransitionOptions) => Promise<boolean>
+export type SetViewport = (transform: ViewportTransform, options?: TransitionOptions) => Promise<boolean>
 
 export interface ViewportFunctions {
   zoomIn: ZoomInOut
   zoomOut: ZoomInOut
   zoomTo: ZoomTo
+  setViewport: SetViewport
   /** @deprecated use setViewport instead */
   setTransform: SetViewport
+  getViewport: GetViewport
   /** @deprecated use getViewport instead */
   getTransform: GetViewport
   fitView: FitView