-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
PerfectArrow.vue
57 lines (51 loc) 路 1.36 KB
/
PerfectArrow.vue
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
<script lang="ts" setup>
import { EdgeText, getSimpleBezierPath } from '@vue-flow/core'
import type { CSSProperties } from 'vue'
import { getArrow } from 'perfect-arrows'
import type { PerfectArrowProps } from '../types'
const props = withDefaults(defineProps<PerfectArrowProps>(), {
options: () => ({
padStart: 3,
padEnd: 3,
stretch: 0.2,
}),
})
const centered = computed(() =>
getSimpleBezierPath({
...props,
}),
)
const arrow = computed(() => {
return getArrow(props.sourceX, props.sourceY, props.targetX, props.targetY, {
...props.options,
})
})
const attrs = useAttrs() as { style: CSSProperties }
</script>
<script lang="ts">
export default {
name: 'PerfectArrow',
compatConfig: { MODE: 3 },
inheritAttrs: false,
}
</script>
<template>
<path
:style="{ ...props.style, ...attrs.style }"
class="vue-flow__edge-path vue-flow__perfect-arrow"
:d="`M${arrow[0]},${arrow[1]} Q${arrow[2]},${arrow[3]} ${arrow[4]},${arrow[5]}`"
:marker-end="props.markerEnd"
:marker-start="props.markerStart"
/>
<EdgeText
v-if="props.label"
:x="centered[1]"
:y="centered[2]"
:label="props.label"
:label-style="props.labelStyle"
:label-show-bg="props.labelShowBg"
:label-bg-style="props.labelBgStyle"
:label-bg-padding="props.labelBgPadding"
:label-bg-border-radius="props.labelBgBorderRadius"
/>
</template>