examples: use EdgeLabelRenderer in edges example

examples/vite/src/Edges/CustomEdge2.vue

@@ -2,7 +2,11 @@
 import type { EdgeProps, Position } from '@vue-flow/core'
 import { EdgeText, getBezierPath, getMarkerId } from '@vue-flow/core'
 
-interface CustomEdgeProps extends EdgeProps {
+interface CustomData {
+  text: string
+}
+
+interface CustomEdgeProps<T = CustomData> extends EdgeProps<T> {
   source: string
   target: string
   sourceHandleId?: string
@@ -14,28 +18,13 @@ interface CustomEdgeProps extends EdgeProps {
   targetY: number
   sourcePosition: Position
   targetPosition: Position
-  markerEndId?: string
-  data?: {
-    text: string
-  }
+  markerEnd?: string
+  data: T
 }
 
 const props = defineProps<CustomEdgeProps>()
 
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-
-const markerEnd = computed(() => getMarkerId(props.markerEnd))
-
-const onClick = () => console.log(props.data)
+const path = $computed(() => getBezierPath(props))
 </script>
 
 <script lang="ts">
@@ -45,16 +34,16 @@ export default {
 </script>
 
 <template>
-  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath[0]" :marker-end="markerEnd" />
+  <path :id="id" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
+
   <EdgeText
-    :x="edgePath[1]"
-    :y="edgePath[2]"
-    :label="props.data?.text"
+    :x="path[1]"
+    :y="path[2]"
+    :label="data.text"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"
     :label-bg-style="{ fill: 'red' }"
     :label-bg-padding="[2, 4]"
     :label-bg-border-radius="2"
-    @click="onClick"
   />
 </template>