24 lines
677 B
Vue
24 lines
677 B
Vue
<script lang="ts" setup>
|
|
import { ConnectionLineProps } from '~/index'
|
|
|
|
interface CustomConnectionLineProps extends ConnectionLineProps {
|
|
sourceX: number
|
|
sourceY: number
|
|
targetX: number
|
|
targetY: number
|
|
}
|
|
const props = defineProps<CustomConnectionLineProps>()
|
|
</script>
|
|
<template>
|
|
<g>
|
|
<path
|
|
class="animated"
|
|
fill="none"
|
|
stroke="#222"
|
|
:stroke-width="1.5"
|
|
:d="`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`"
|
|
/>
|
|
<circle :cx="props.targetX" :cy="props.targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
|
|
</g>
|
|
</template>
|