36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import { getBezierPath, getMarkerEnd } from '../../src'
|
|
import { computed, defineComponent } from 'vue'
|
|
import { DefaultEdgeProps } from '../../src/components/Edges/utils'
|
|
|
|
const CustomEdge = defineComponent({
|
|
props: {
|
|
...DefaultEdgeProps
|
|
},
|
|
setup(props) {
|
|
const edgePath = computed(() =>
|
|
getBezierPath({
|
|
sourceX: props.sourceX,
|
|
sourceY: props.sourceY,
|
|
sourcePosition: props.sourcePosition,
|
|
targetX: props.targetX,
|
|
targetY: props.targetY,
|
|
targetPosition: props.targetPosition
|
|
})
|
|
)
|
|
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
|
|
|
|
return () => (
|
|
<>
|
|
<path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
|
|
<text>
|
|
<textPath href={`#${props.id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
|
|
{props.data.text}
|
|
</textPath>
|
|
</text>
|
|
</>
|
|
)
|
|
}
|
|
})
|
|
|
|
export default CustomEdge
|