refactor(core): rename useViewport to useViewportHelper

Author: bcakmakoglu

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'

packages/core/src/composables/useViewport.ts renamed to 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) {

packages/core/src/composables/useZoomPanHelper.ts

@@ -1,14 +1,14 @@
 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})
  */
 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),

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<string[]>,
 ): Actions {
-  const viewportHelper = useViewport(state, getters)
+  const viewportHelper = useViewportHelper(state, getters)
 
   const updateNodeInternals: Actions['updateNodeInternals'] = (ids) => {
     const updateIds = ids ?? nodeIds.value ?? []