50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { ref, onMounted } from "vue";
|
|
import { Ref } from "@/types/vueRef/index";
|
|
|
|
/**
|
|
* handles visualization of single message svg items
|
|
*/
|
|
export default function useBubbleDrawer({
|
|
mr,
|
|
tr,
|
|
}: {
|
|
mr: Ref<string>;
|
|
tr: Ref<string>;
|
|
}) {
|
|
const signatureTranslate = ref("");
|
|
let messageRect: SVGSVGElement & SVGRectElement;
|
|
let messageText: SVGSVGElement & SVGTextElement;
|
|
|
|
onMounted(async () => {
|
|
messageRect = (mr.value as unknown) as SVGSVGElement & SVGRectElement;
|
|
messageText = (tr.value as unknown) as SVGSVGElement & SVGTextElement;
|
|
});
|
|
|
|
function adjustMessageRect(): void {
|
|
// must get dimensions of text box to fit bubble around
|
|
const padding = 12.5;
|
|
const textBox = messageText.getBBox();
|
|
messageRect.setAttribute("x", String(textBox.x - padding));
|
|
messageRect.setAttribute("y", String(textBox.y - padding));
|
|
messageRect.setAttribute("width", String(textBox.width + 2 * padding));
|
|
messageRect.setAttribute("height", String(textBox.height + 2 * padding));
|
|
}
|
|
|
|
function translateMsgSignature(): void {
|
|
if (messageRect.getAttribute("height") !== null) {
|
|
const height = Number(messageRect.getAttribute("height"));
|
|
signatureTranslate.value = `translate(-10 ${height})`;
|
|
}
|
|
}
|
|
|
|
async function drawMessage() {
|
|
// ignore lint error: await needed for proper render
|
|
await adjustMessageRect();
|
|
translateMsgSignature();
|
|
}
|
|
|
|
return {
|
|
drawMessage,
|
|
signatureTranslate,
|
|
};
|
|
}
|