ffd41fb679
feat: add global hooks to emulate sort of an event bus between components * global hooks are not exposed to user but emit events upward from Revue-flow component, just more convenient
40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
<template>
|
|
<g>
|
|
<path
|
|
class="animated"
|
|
fill="none"
|
|
stroke="#222"
|
|
:stroke-width="1.5"
|
|
:d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
|
|
/>
|
|
<circle :cx="targetX" :cy="targetY" fill="#fff" :r="3" stroke="#222" :stroke-width="1.5" />
|
|
</g>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, PropType } from 'vue';
|
|
import { ConnectionLineComponentProps } from '../../src';
|
|
|
|
const ConnectionLine = defineComponent({
|
|
props: {
|
|
sourceX: {
|
|
type: Number as PropType<ConnectionLineComponentProps['sourceX']>,
|
|
required: true
|
|
},
|
|
sourceY: {
|
|
type: Number as PropType<ConnectionLineComponentProps['sourceY']>,
|
|
required: true
|
|
},
|
|
targetX: {
|
|
type: Number as PropType<ConnectionLineComponentProps['targetX']>,
|
|
required: true
|
|
},
|
|
targetY: {
|
|
type: Number as PropType<ConnectionLineComponentProps['targetY']>,
|
|
required: true
|
|
}
|
|
}
|
|
});
|
|
|
|
export default ConnectionLine;
|
|
</script>
|