50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { computed, defineComponent } from 'vue';
|
|
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
|
|
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));
|
|
const center = computed(() =>
|
|
getEdgeCenter({
|
|
sourceX: props.sourceX,
|
|
sourceY: props.sourceY,
|
|
targetX: props.targetX,
|
|
targetY: props.targetY
|
|
})
|
|
);
|
|
|
|
return () => (
|
|
<>
|
|
<path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
|
|
<EdgeText
|
|
x={center.value[0]}
|
|
y={center.value[1]}
|
|
label={props.data?.text}
|
|
labelStyle={{ fill: 'white' }}
|
|
labelShowBg
|
|
labelBgStyle={{ fill: 'red' }}
|
|
labelBgPadding={[2, 4]}
|
|
labelBgBorderRadius={2}
|
|
onClick={() => console.log(props.data)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default CustomEdge;
|