90 lines
2.9 KiB
Vue
90 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
|
|
import { ConnectionLineType, GraphNode, HandleElement, Position } from '../../types'
|
|
import { useStore } from '../../composables'
|
|
|
|
interface ConnectionLineProps {
|
|
sourceNode: GraphNode
|
|
}
|
|
const props = defineProps<ConnectionLineProps>()
|
|
const store = useStore()
|
|
const sourceHandle =
|
|
store.connectionHandleId && store.connectionHandleType
|
|
? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
|
|
: store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
|
|
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
|
|
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
|
|
const sourceX = props.sourceNode.position.x + sourceHandleX
|
|
const sourceY = props.sourceNode.position.y + sourceHandleY
|
|
|
|
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
|
|
const targetPosition = isRightOrLeft ? Position.Left : Position.Top
|
|
|
|
const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2])
|
|
const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2])
|
|
|
|
const dAttr = computed(() => {
|
|
let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`
|
|
switch (store.connectionLineType) {
|
|
case ConnectionLineType.Bezier:
|
|
path = getBezierPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition: sourceHandle?.position,
|
|
targetX: targetX.value,
|
|
targetY: targetY.value,
|
|
targetPosition,
|
|
})
|
|
break
|
|
case ConnectionLineType.Step:
|
|
path = getSmoothStepPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition: sourceHandle?.position,
|
|
targetX: targetX.value,
|
|
targetY: targetY.value,
|
|
targetPosition,
|
|
borderRadius: 0,
|
|
})
|
|
break
|
|
case ConnectionLineType.SmoothStep:
|
|
path = getSmoothStepPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition: sourceHandle?.position,
|
|
targetX: targetX.value,
|
|
targetY: targetY.value,
|
|
targetPosition,
|
|
})
|
|
break
|
|
}
|
|
return path
|
|
})
|
|
</script>
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'ConnectionLine',
|
|
}
|
|
</script>
|
|
<template>
|
|
<g class="vue-flow__connection">
|
|
<slot
|
|
v-bind="{
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition: sourceHandle?.position,
|
|
targetX,
|
|
targetY,
|
|
targetPosition,
|
|
connectionLineType: store.connectionLineType,
|
|
connectionLineStyle: store.connectionLineStyle,
|
|
nodes: store.getNodes,
|
|
sourceNode: props.sourceNode,
|
|
sourceHandle,
|
|
}"
|
|
>
|
|
<path :d="dAttr" class="vue-flow__connection-path" :style="store.connectionLineStyle" />
|
|
</slot>
|
|
</g>
|
|
</template>
|