fix: label type in edges

examples/EdgeTypes/EdgeTypesExample.vue

@@ -15,16 +15,8 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow
-    :elements="elements"
-    :min-zoom="0.2"
-    :default-zoom="1.5"
-    @load="onLoad"
-    @elements-remove="onElementsRemove"
-    @connect="onConnect"
-  >
+  <Flow :elements="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
     <MiniMap />
     <Controls />
-    <Background color="#aaa" :gap="8" />
   </Flow>
 </template>

src/components/Edges/BezierEdge.vue

@@ -16,7 +16,12 @@ interface BezierEdgeProps<T = any> {
   animated?: boolean
   sourcePosition?: Position
   targetPosition?: Position
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: VNode
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any

src/components/Edges/SmoothStepEdge.vue

@@ -16,7 +16,12 @@ export interface EdgeSmoothStepProps<T = any> {
   animated?: boolean
   sourcePosition?: Position
   targetPosition?: Position
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: VNode
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any

src/components/Edges/StepEdge.vue

@@ -15,7 +15,12 @@ export interface EdgeStepProps<T = any> {
   animated?: boolean
   sourcePosition?: Position
   targetPosition?: Position
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: VNode
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any

src/components/Edges/StraightEdge.vue

@@ -16,7 +16,12 @@ interface StraightEdgeProps<T = any> {
   animated?: boolean
   sourcePosition?: Position
   targetPosition?: Position
-  label?: string | VNode
+  label?:
+    | string
+    | {
+        component: VNode
+        props?: any
+      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import { computed, CSSProperties } from 'vue'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 import Edge from '~/components/Edges/Edge.vue'
 import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
@@ -27,6 +27,7 @@ const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connect
 const connectionLineVisible = computed(
   () => store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType,
 )
+const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
 </script>
 <template>
   <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
@@ -34,9 +35,8 @@ const connectionLineVisible = computed(
     <g
       :transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"
     >
-      <template v-for="edge of store.edges" :key="edge.id">
+      <template v-for="edge of edges" :key="edge.id">
         <Edge
-          v-if="!edge.isHidden"
           :edge="edge"
           :type="props.edgeTypes[edge.type || 'default']"
           :marker-end-id="props.markerEndId"

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Node from '~/components/Nodes/Node.vue'
 import { NodeType, Node as TNode } from '~/types'
-import { getNodesInside } from '~/utils/graph'
+import { getNodesInside } from '~/utils'
 import { useStore } from '~/composables'
 
 interface NodeRendererProps {
@@ -12,8 +12,8 @@ const props = defineProps<NodeRendererProps>()
 
 const store = useStore()
 
-const getNodes = computed(() =>
-  store.onlyRenderVisibleElements
+const nodes = computed(() => {
+  const n = store.onlyRenderVisibleElements
     ? store.nodes &&
       getNodesInside(
         store.nodes,
@@ -26,8 +26,10 @@ const getNodes = computed(() =>
         store.transform,
         true,
       )
-    : store.nodes,
-)
+    : store.nodes
+
+  return n.filter((node) => !node.isHidden)
+})
 
 const type = (node: TNode) => {
   const nodeType = node.type || 'default'
@@ -43,9 +45,8 @@ const type = (node: TNode) => {
     class="vue-flow__nodes"
     :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
   >
-    <template v-for="node of getNodes" :key="node.id">
+    <template v-for="node of nodes" :key="node.id">
       <Node
-        v-if="!node.isHidden"
         :node="node"
         :type="type(node)"
         :scale="store.transform[2]"