refactor(core): remove hidden check from getNodes & getEdges

Author: bcakmakoglu

packages/core/src/container/NodeRenderer/NodeRenderer.vue

@@ -7,8 +7,16 @@ import { useVueFlow } from '../../composables'
 import { ErrorCode, VueFlowError } from '../../utils'
 import { useNodesInitialized } from '../../composables/useNodesInitialized'
 
-const { nodes, nodesDraggable, nodesFocusable, elementsSelectable, nodesConnectable, getNodeTypes, updateNodeDimensions, emits } =
-  useVueFlow()
+const {
+  getNodes,
+  nodesDraggable,
+  nodesFocusable,
+  elementsSelectable,
+  nodesConnectable,
+  getNodeTypes,
+  updateNodeDimensions,
+  emits,
+} = useVueFlow()
 
 const nodesInitialized = useNodesInitialized()
 
@@ -23,7 +31,7 @@ watch(
   (initialized) => {
     if (initialized) {
       nextTick(() => {
-        emits.nodesInitialized(nodes.value)
+        emits.nodesInitialized(getNodes.value)
       })
     }
   },
@@ -101,7 +109,7 @@ export default {
   <div class="vue-flow__nodes vue-flow__container">
     <template v-if="resizeObserver">
       <NodeWrapper
-        v-for="node of nodes"
+        v-for="node of getNodes"
         :id="node.id"
         :key="node.id"
         :resize-observer="resizeObserver"

packages/core/src/store/getters.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import type { ComputedGetters, GraphEdge, GraphNode, State } from '../types'
-import { ErrorCode, VueFlowError, getNodesInside, isEdgeVisible } from '../utils'
+import { getNodesInside, isEdgeVisible } from '../utils'
 import { defaultEdgeTypes, defaultNodeTypes } from '../utils/defaultNodesEdges'
 
 export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds: ComputedRef<string[]>): ComputedGetters {
@@ -58,17 +58,9 @@ export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds
   })
 
   const getNodes: ComputedGetters['getNodes'] = computed(() => {
-    const nodes: GraphNode[] = []
-
-    for (const node of state.nodes) {
-      if (!node.hidden) {
-        nodes.push(node)
-      }
-    }
-
     if (state.onlyRenderVisibleElements) {
       return getNodesInside(
-        nodes,
+        state.nodes,
         {
           x: 0,
           y: 0,
@@ -80,34 +72,14 @@ export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds
       )
     }
 
-    return nodes
+    return state.nodes
   })
 
-  const edgeVisible = (e: GraphEdge, source?: GraphNode, target?: GraphNode) => {
-    source = source ?? getNode.value(e.source)
-    target = target ?? getNode.value(e.target)
-
-    if (!source || !target) {
-      state.hooks.error.trigger(new VueFlowError(ErrorCode.EDGE_ORPHANED, e.id))
-      return
-    }
-
-    return !e.hidden && !target.hidden && !source.hidden
-  }
-
   const getEdges: ComputedGetters['getEdges'] = computed(() => {
-    const edges: GraphEdge[] = []
-
-    for (const edge of state.edges) {
-      if (edgeVisible(edge)) {
-        edges.push(edge)
-      }
-    }
-
     if (state.onlyRenderVisibleElements) {
       const visibleEdges: GraphEdge[] = []
 
-      for (const edge of edges) {
+      for (const edge of state.edges) {
         const source = getNode.value(edge.source)!
         const target = getNode.value(edge.target)!
 
@@ -131,7 +103,7 @@ export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds
       return visibleEdges
     }
 
-    return edges
+    return state.edges
   })
 
   const getElements: ComputedGetters['getElements'] = computed(() => [...getNodes.value, ...getEdges.value])