1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <template>
| <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
| <BaseEdge class="group" :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />
|
| <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
| <EdgeLabelRenderer v-if="!isViewMode">
| <div
| :id="`label-${id}`"
| :style="{
| pointerEvents: 'all',
| position: 'absolute',
| transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
| }"
| class="nodrag nopan bg-default p-1.5 rounded-full"
| >
| <span class="cursor-pointer ywifont ywicon-shanchu hover:text-red-500" @click="removeEdges(id)"></span>
| </div>
| </EdgeLabelRenderer>
| </template>
|
| <script setup lang="ts">
| import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core';
| import { computed } from 'vue';
|
| defineOptions({
| inheritAttrs: false,
| });
|
| const props = defineProps({
| id: {
| type: String,
| required: true,
| },
| sourceX: {
| type: Number,
| required: true,
| },
| sourceY: {
| type: Number,
| required: true,
| },
| targetX: {
| type: Number,
| required: true,
| },
| targetY: {
| type: Number,
| required: true,
| },
| sourcePosition: {
| type: String,
| required: true,
| },
| targetPosition: {
| type: String,
| required: true,
| },
| markerEnd: {
| type: String,
| required: false,
| },
| style: {
| type: Object,
| required: false,
| },
| isViewMode: {
| type: Boolean,
| required: false,
| },
| });
| const { removeEdges } = useVueFlow();
|
| const path = computed(() => getBezierPath(props as any));
|
| </script>
|
|
