diff --git a/packages/core/src/composables/index.ts b/packages/core/src/composables/index.ts index ba7d5417..8d0c3434 100644 --- a/packages/core/src/composables/index.ts +++ b/packages/core/src/composables/index.ts @@ -7,7 +7,7 @@ export * from './useKeyPress' export * from './useNode' export * from './useNodeHooks' export * from './useUpdateNodePositions' -export * from './useViewport' +export * from './useViewportHelper' export * from './useVueFlow' export * from './useWatchProps' export * from './useWindow' diff --git a/packages/core/src/composables/useViewport.ts b/packages/core/src/composables/useViewportHelper.ts similarity index 93% rename from packages/core/src/composables/useViewport.ts rename to packages/core/src/composables/useViewportHelper.ts index 27ef2818..3728b5b2 100644 --- a/packages/core/src/composables/useViewport.ts +++ b/packages/core/src/composables/useViewportHelper.ts @@ -41,7 +41,7 @@ const initialViewportHelper: ViewportHelper = { * @param state * @param getters */ -export function useViewport(state: State, getters: ComputedGetters) { +export function useViewportHelper(state: State, getters: ComputedGetters) { const { getNodes } = getters function zoom(scale: number, duration?: number) { @@ -134,15 +134,14 @@ export function useViewport(state: State, getters: ComputedGetters) { duration: 0, }, ) => { - const nodesToFit: GraphNode[] = (options.includeHiddenNodes ? state.nodes : getNodes.value).filter((node) => { - const initialized = node.dimensions.width && node.dimensions.height - let shouldInclude = true + const nodesToFit: GraphNode[] = state.nodes.filter((node) => { + const isVisible = node.dimensions.width && node.dimensions.height && (options?.includeHiddenNodes || !node.hidden) if (options.nodes?.length) { - shouldInclude = options.nodes.includes(node.id) + return isVisible && options.nodes.includes(node.id) } - return initialized && shouldInclude + return isVisible }) if (!nodesToFit.length) { diff --git a/packages/core/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts index 642ef7a2..5018a54c 100644 --- a/packages/core/src/composables/useZoomPanHelper.ts +++ b/packages/core/src/composables/useZoomPanHelper.ts @@ -1,6 +1,6 @@ import type { ComputedGetters, State, ViewportFunctions } from '../types' import { useVueFlow } from './useVueFlow' -import { useViewport } from './useViewport' +import { useViewportHelper } from './useViewportHelper' /** * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow}) @@ -8,7 +8,7 @@ import { useViewport } from './useViewport' export function useZoomPanHelper(vueFlowId?: string): ViewportFunctions { const state = $(useVueFlow({ id: vueFlowId })) - const viewportHelper = useViewport(state as State, state as unknown as ComputedGetters) + const viewportHelper = useViewportHelper(state as State, state as unknown as ComputedGetters) return { fitView: (params) => viewportHelper.value.fitView(params), diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 4aead694..c58dc18f 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -22,7 +22,7 @@ import type { Rect, State, } from '../types' -import { useViewport } from '../composables' +import { useViewportHelper } from '../composables' import { ErrorCode, VueFlowError, @@ -62,7 +62,7 @@ export function useActions( // todo: change to a Set edgeIds: ComputedRef, ): Actions { - const viewportHelper = useViewport(state, getters) + const viewportHelper = useViewportHelper(state, getters) const updateNodeInternals: Actions['updateNodeInternals'] = (ids) => { const updateIds = ids ?? nodeIds.value ?? []