diff --git a/packages/core/src/composables/useViewport.ts b/packages/core/src/composables/useViewport.ts index 0709a541..e923c28d 100644 --- a/packages/core/src/composables/useViewport.ts +++ b/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, diff --git a/packages/core/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts index 75b745ae..dbf50251 100644 --- a/packages/core/src/composables/useZoomPanHelper.ts +++ b/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), diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 1621f714..cac417ff 100644 --- a/packages/core/src/store/actions.ts +++ b/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), diff --git a/packages/core/src/types/zoom.ts b/packages/core/src/types/zoom.ts index fdc0e04b..a72a5204 100644 --- a/packages/core/src/types/zoom.ts +++ b/packages/core/src/types/zoom.ts @@ -60,17 +60,19 @@ export type ZoomInOut = (options?: TransitionOptions) => Promise export type ZoomTo = (zoomLevel: number, options?: TransitionOptions) => Promise /** get current viewport transform */ -export type GetTransform = () => ViewportTransform +export type GetViewport = () => ViewportTransform /** set current viewport transform */ -export type SetTransform = (transform: ViewportTransform, options?: TransitionOptions) => Promise +export type SetViewport = (transform: ViewportTransform, options?: TransitionOptions) => Promise 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