diff --git a/packages/core/src/composables/useViewportHelper.ts b/packages/core/src/composables/useViewportHelper.ts index 3728b5b2..4755def3 100644 --- a/packages/core/src/composables/useViewportHelper.ts +++ b/packages/core/src/composables/useViewportHelper.ts @@ -1,6 +1,6 @@ import { zoomIdentity } from 'd3-zoom' import { computed } from 'vue' -import type { ComputedGetters, D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types' +import type { D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types' import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils' export interface ViewportHelper extends ViewportFunctions { @@ -41,9 +41,7 @@ const initialViewportHelper: ViewportHelper = { * @param state * @param getters */ -export function useViewportHelper(state: State, getters: ComputedGetters) { - const { getNodes } = getters - +export function useViewportHelper(state: State) { function zoom(scale: number, duration?: number) { return new Promise((resolve) => { if (state.d3Selection && state.d3Zoom) { diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts index 0ca6f0fe..97665a13 100644 --- a/packages/core/src/composables/useVueFlow.ts +++ b/packages/core/src/composables/useVueFlow.ts @@ -56,7 +56,7 @@ export class Storage { const getters = useGetters(reactiveState, nodeIds, edgeIds) - const actions = useActions(id, reactiveState, getters, nodeIds, edgeIds) + const actions = useActions(id, reactiveState, nodeIds, edgeIds) actions.setState({ ...reactiveState, ...preloadedState }) diff --git a/packages/core/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts index 5018a54c..17d10aa0 100644 --- a/packages/core/src/composables/useZoomPanHelper.ts +++ b/packages/core/src/composables/useZoomPanHelper.ts @@ -1,4 +1,5 @@ -import type { ComputedGetters, State, ViewportFunctions } from '../types' +import { toReactive } from '@vueuse/core' +import type { ViewportFunctions } from '../types' import { useVueFlow } from './useVueFlow' import { useViewportHelper } from './useViewportHelper' @@ -6,9 +7,9 @@ import { useViewportHelper } from './useViewportHelper' * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow}) */ export function useZoomPanHelper(vueFlowId?: string): ViewportFunctions { - const state = $(useVueFlow({ id: vueFlowId })) + const state = useVueFlow({ id: vueFlowId }) - const viewportHelper = useViewportHelper(state as State, state as unknown as ComputedGetters) + const viewportHelper = useViewportHelper(toReactive(state)) return { fitView: (params) => viewportHelper.value.fitView(params), diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index c58dc18f..5a4e9e93 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -4,7 +4,6 @@ import { nextTick } from 'vue' import { until } from '@vueuse/core' import type { Actions, - ComputedGetters, CoordinateExtent, EdgeChange, EdgeRemoveChange, @@ -56,13 +55,12 @@ import { storeOptionsToSkip, useState } from './state' export function useActions( id: string, state: State, - getters: ComputedGetters, // todo: change to a Set nodeIds: ComputedRef, // todo: change to a Set edgeIds: ComputedRef, ): Actions { - const viewportHelper = useViewportHelper(state, getters) + const viewportHelper = useViewportHelper(state) const updateNodeInternals: Actions['updateNodeInternals'] = (ids) => { const updateIds = ids ?? nodeIds.value ?? []