48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { CSSProperties } from 'vue'
|
|
import { getBezierPath, GraphNode, EdgeProps, MarkerType } from '@braks/vue-flow'
|
|
import { getEdgeParams } from './floating-edge-utils'
|
|
|
|
interface FloatingEdgeProps extends EdgeProps {
|
|
id: string
|
|
source: string
|
|
target: string
|
|
markerEndId?: string
|
|
sourceNode: GraphNode
|
|
targetNode: GraphNode
|
|
nodes: GraphNode[]
|
|
style?: CSSProperties
|
|
markerEnd: MarkerType
|
|
markerStart: MarkerType
|
|
}
|
|
|
|
const props = defineProps<FloatingEdgeProps>()
|
|
const edgeParams = computed(() => getEdgeParams(props.sourceNode, props.targetNode))
|
|
|
|
const d = computed(
|
|
() =>
|
|
(edgeParams.value.sx &&
|
|
getBezierPath({
|
|
sourceX: edgeParams.value.sx,
|
|
sourceY: edgeParams.value.sy,
|
|
targetX: edgeParams.value.tx,
|
|
targetY: edgeParams.value.ty,
|
|
sourcePosition: edgeParams.value.sourcePos,
|
|
targetPosition: edgeParams.value.targetPos,
|
|
})) ||
|
|
'',
|
|
)
|
|
</script>
|
|
<template>
|
|
<g class="vue-flow__connection">
|
|
<path
|
|
:id="props.id"
|
|
class="vue-flow__edge-path"
|
|
:d="d"
|
|
:marker-start="props.markerStart"
|
|
:marker-end="props.markerEnd"
|
|
:style="props.style"
|
|
/>
|
|
</g>
|
|
</template>
|