43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { ref, onMounted } from "vue";
|
|
interface Ref {
|
|
value: string;
|
|
}
|
|
export default function useMessageItemAnims({ mr, tr }: { mr: Ref; tr: Ref }) {
|
|
const signatureTranslate = ref("");
|
|
let messageRect: string | SVGRectElement | SVGSVGElement | any;
|
|
let messageText: string | SVGTextElement | SVGSVGElement | any;
|
|
|
|
onMounted(() => {
|
|
messageRect = mr.value;
|
|
messageText = tr.value;
|
|
});
|
|
|
|
function adjustMessageRect(): void {
|
|
// must get dimensions of text box to fit bubble around
|
|
const padding = 20;
|
|
const textBox = messageText.getBBox();
|
|
messageRect.setAttribute("x", textBox.x - padding);
|
|
messageRect.setAttribute("y", textBox.y - padding);
|
|
messageRect.setAttribute("width", textBox.width + 2 * padding);
|
|
messageRect.setAttribute("height", textBox.height + 2 * padding);
|
|
}
|
|
|
|
function translateMsgSignature(): void {
|
|
if (messageRect.getAttribute("height") !== null) {
|
|
const height = Number(messageRect.getAttribute("height"));
|
|
const p = -10;
|
|
signatureTranslate.value = `translate(-10 ${height + p})`;
|
|
}
|
|
}
|
|
|
|
async function drawMessage() {
|
|
// ignore lint error: await needed for proper render
|
|
await adjustMessageRect();
|
|
translateMsgSignature();
|
|
}
|
|
|
|
return {
|
|
drawMessage,
|
|
signatureTranslate
|
|
};
|
|
}
|