refactor(core): remove hidden check from getNodes & getEdges
This commit is contained in:
@@ -7,8 +7,16 @@ import { useVueFlow } from '../../composables'
|
|||||||
import { ErrorCode, VueFlowError } from '../../utils'
|
import { ErrorCode, VueFlowError } from '../../utils'
|
||||||
import { useNodesInitialized } from '../../composables/useNodesInitialized'
|
import { useNodesInitialized } from '../../composables/useNodesInitialized'
|
||||||
|
|
||||||
const { nodes, nodesDraggable, nodesFocusable, elementsSelectable, nodesConnectable, getNodeTypes, updateNodeDimensions, emits } =
|
const {
|
||||||
useVueFlow()
|
getNodes,
|
||||||
|
nodesDraggable,
|
||||||
|
nodesFocusable,
|
||||||
|
elementsSelectable,
|
||||||
|
nodesConnectable,
|
||||||
|
getNodeTypes,
|
||||||
|
updateNodeDimensions,
|
||||||
|
emits,
|
||||||
|
} = useVueFlow()
|
||||||
|
|
||||||
const nodesInitialized = useNodesInitialized()
|
const nodesInitialized = useNodesInitialized()
|
||||||
|
|
||||||
@@ -23,7 +31,7 @@ watch(
|
|||||||
(initialized) => {
|
(initialized) => {
|
||||||
if (initialized) {
|
if (initialized) {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
emits.nodesInitialized(nodes.value)
|
emits.nodesInitialized(getNodes.value)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -101,7 +109,7 @@ export default {
|
|||||||
<div class="vue-flow__nodes vue-flow__container">
|
<div class="vue-flow__nodes vue-flow__container">
|
||||||
<template v-if="resizeObserver">
|
<template v-if="resizeObserver">
|
||||||
<NodeWrapper
|
<NodeWrapper
|
||||||
v-for="node of nodes"
|
v-for="node of getNodes"
|
||||||
:id="node.id"
|
:id="node.id"
|
||||||
:key="node.id"
|
:key="node.id"
|
||||||
:resize-observer="resizeObserver"
|
:resize-observer="resizeObserver"
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import type { ComputedRef } from 'vue'
|
import type { ComputedRef } from 'vue'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import type { ComputedGetters, GraphEdge, GraphNode, State } from '../types'
|
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'
|
import { defaultEdgeTypes, defaultNodeTypes } from '../utils/defaultNodesEdges'
|
||||||
|
|
||||||
export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds: ComputedRef<string[]>): ComputedGetters {
|
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 getNodes: ComputedGetters['getNodes'] = computed(() => {
|
||||||
const nodes: GraphNode[] = []
|
|
||||||
|
|
||||||
for (const node of state.nodes) {
|
|
||||||
if (!node.hidden) {
|
|
||||||
nodes.push(node)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.onlyRenderVisibleElements) {
|
if (state.onlyRenderVisibleElements) {
|
||||||
return getNodesInside(
|
return getNodesInside(
|
||||||
nodes,
|
state.nodes,
|
||||||
{
|
{
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 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 getEdges: ComputedGetters['getEdges'] = computed(() => {
|
||||||
const edges: GraphEdge[] = []
|
|
||||||
|
|
||||||
for (const edge of state.edges) {
|
|
||||||
if (edgeVisible(edge)) {
|
|
||||||
edges.push(edge)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.onlyRenderVisibleElements) {
|
if (state.onlyRenderVisibleElements) {
|
||||||
const visibleEdges: GraphEdge[] = []
|
const visibleEdges: GraphEdge[] = []
|
||||||
|
|
||||||
for (const edge of edges) {
|
for (const edge of state.edges) {
|
||||||
const source = getNode.value(edge.source)!
|
const source = getNode.value(edge.source)!
|
||||||
const target = getNode.value(edge.target)!
|
const target = getNode.value(edge.target)!
|
||||||
|
|
||||||
@@ -131,7 +103,7 @@ export function useGetters(state: State, nodeIds: ComputedRef<string[]>, edgeIds
|
|||||||
return visibleEdges
|
return visibleEdges
|
||||||
}
|
}
|
||||||
|
|
||||||
return edges
|
return state.edges
|
||||||
})
|
})
|
||||||
|
|
||||||
const getElements: ComputedGetters['getElements'] = computed(() => [...getNodes.value, ...getEdges.value])
|
const getElements: ComputedGetters['getElements'] = computed(() => [...getNodes.value, ...getEdges.value])
|
||||||
|
|||||||
Reference in New Issue
Block a user