59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ElementId, Position } from '~/types'
|
|
import { onMouseDown, ValidConnectionFunc } from '~/components/Handle/utils'
|
|
import { Hooks, Store } from '~/context/symbols'
|
|
|
|
interface HandleProps {
|
|
id?: string
|
|
type?: string
|
|
position?: Position
|
|
isValidConnection?: ValidConnectionFunc
|
|
connectable?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<HandleProps>(), {
|
|
id: '',
|
|
type: 'source',
|
|
position: Position.Top,
|
|
connectable: true,
|
|
})
|
|
|
|
const store = inject(Store)!
|
|
const hooks = inject(Hooks)!
|
|
const nodeId = inject<ElementId>('NodeIdContext')!
|
|
|
|
const onMouseDownHandler = (event: MouseEvent) =>
|
|
onMouseDown(
|
|
event,
|
|
store,
|
|
hooks,
|
|
props.id,
|
|
nodeId,
|
|
props.type === 'target',
|
|
props.isValidConnection ??
|
|
function () {
|
|
return true
|
|
},
|
|
)
|
|
</script>
|
|
<template>
|
|
<div
|
|
:data-handleid="props.id"
|
|
:data-nodeid="nodeId"
|
|
:data-handlepos="props.position"
|
|
:class="[
|
|
'revue-flow__handle',
|
|
`revue-flow__handle-${props.position}`,
|
|
'nodrag',
|
|
{
|
|
source: props.type !== 'target',
|
|
target: props.type === 'target',
|
|
connectable: props.connectable,
|
|
},
|
|
]"
|
|
@mousedown="onMouseDownHandler"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|