89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import { EdgeTextProps, Rect } from '../../types';
|
|
import { defineComponent, PropType, ref, watch } from 'vue-demi';
|
|
|
|
const EdgeText = defineComponent({
|
|
props: {
|
|
x: {
|
|
type: Number as PropType<EdgeTextProps['x']>,
|
|
required: true
|
|
},
|
|
y: {
|
|
type: Number as PropType<EdgeTextProps['y']>,
|
|
required: true
|
|
},
|
|
label: {
|
|
type: String as PropType<EdgeTextProps['label']>,
|
|
required: true
|
|
},
|
|
labelStyle: {
|
|
type: Object as PropType<EdgeTextProps['labelStyle']>,
|
|
default: () => ({})
|
|
},
|
|
labelShowBg: {
|
|
type: Boolean as PropType<EdgeTextProps['labelShowBg']>,
|
|
default: true
|
|
},
|
|
labelBgStyle: {
|
|
type: Object as PropType<EdgeTextProps['labelBgStyle']>,
|
|
default: () => ({})
|
|
},
|
|
labelBgPadding: {
|
|
/* @ts-ignore */
|
|
type: Array as PropType<[number, number]>,
|
|
default: () => [2, 4]
|
|
},
|
|
labelBgBorderRadius: {
|
|
type: Number as PropType<EdgeTextProps['labelBgBorderRadius']>,
|
|
default: 2
|
|
}
|
|
},
|
|
setup(props, { slots }) {
|
|
const edgeRef = ref<SVGTextElement | null>(null);
|
|
const edgeTextBox = ref<Rect>({ x: 0, y: 0, width: 0, height: 0 });
|
|
const label = ref(props.label);
|
|
|
|
watch(label, () => {
|
|
if (edgeRef.value) {
|
|
const textBbox = edgeRef.value.getBBox();
|
|
|
|
edgeRef.value = {
|
|
x: textBbox.x,
|
|
y: textBbox.y,
|
|
width: textBbox.width,
|
|
height: textBbox.height
|
|
} as any;
|
|
}
|
|
});
|
|
|
|
if (typeof label.value === 'undefined' || !label.value) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<g
|
|
transform={`translate(${props.x - edgeTextBox.value.width / 2} ${props.y - edgeTextBox.value.height / 2})`}
|
|
class="react-flow__edge-textwrapper"
|
|
>
|
|
{props.labelShowBg && (
|
|
<rect
|
|
width={edgeTextBox.value.width + 2 * props.labelBgPadding[0]}
|
|
x={-props.labelBgPadding[0]}
|
|
y={-props.labelBgPadding[1]}
|
|
height={edgeTextBox.value.height + 2 * props.labelBgPadding[1]}
|
|
class="react-flow__edge-textbg"
|
|
style={props.labelBgStyle}
|
|
rx={props.labelBgBorderRadius}
|
|
ry={props.labelBgBorderRadius}
|
|
/>
|
|
)}
|
|
<text class="react-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
|
|
{label}
|
|
</text>
|
|
{slots.default ? slots.default() : ''}
|
|
</g>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default EdgeText;
|