42 lines
643 B
Vue
42 lines
643 B
Vue
|
<template>
|
||
|
|
<g>
|
||
|
|
<path
|
||
|
|
class="vue-flow__connection animated"
|
||
|
|
fill="none"
|
||
|
|
stroke="#6F3381"
|
||
|
|
:stroke-width="1.5"
|
||
|
|
:d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<circle
|
||
|
|
:cx="targetX"
|
||
|
|
:cy="targetY"
|
||
|
|
fill="#fff"
|
||
|
|
:r="4"
|
||
|
|
stroke="#6F3381"
|
||
|
|
:stroke-width="1.5"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts" name="tools-connection-line">
|
||
|
|
defineProps({
|
||
|
|
sourceX: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
sourceY: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
targetX: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
targetY: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|