51 lines
1.0 KiB
Vue
51 lines
1.0 KiB
Vue
<script lang="ts" setup>
|
|
import type { EdgeProps, Position } from '@vue-flow/core'
|
|
import { BezierEdge } from '@vue-flow/core'
|
|
|
|
interface CustomData {
|
|
text: string
|
|
}
|
|
|
|
interface CustomEdgeProps extends EdgeProps<CustomData> {
|
|
source: string
|
|
target: string
|
|
sourceHandleId?: string
|
|
targetHandleId?: string
|
|
id: string
|
|
sourceX: number
|
|
sourceY: number
|
|
targetX: number
|
|
targetY: number
|
|
sourcePosition: Position
|
|
targetPosition: Position
|
|
markerEnd: string
|
|
data: CustomData
|
|
}
|
|
|
|
defineProps<CustomEdgeProps>()
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
inheritAttrs: false,
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<BezierEdge
|
|
:label="data.text"
|
|
:source-x="sourceX"
|
|
:source-y="sourceY"
|
|
:target-x="targetX"
|
|
:target-y="targetY"
|
|
:source-position="sourcePosition"
|
|
:target-position="targetPosition"
|
|
:marker-end="markerEnd"
|
|
:label-style="{ fill: 'white' }"
|
|
:label-show-bg="true"
|
|
:label-bg-style="{ fill: 'red' }"
|
|
:label-bg-padding="[2, 4]"
|
|
:label-bg-border-radius="2"
|
|
/>
|
|
</template>
|