41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { ref } from "vue";
|
|
/**
|
|
* Calculates vertical and horizontal message offsets
|
|
*/
|
|
export default function useOffsetCalculator() {
|
|
const xOffset = ref(0);
|
|
const yOffset = ref(0);
|
|
const firstChildMarginTop = 0;
|
|
let previousMessageHeight = 0;
|
|
const messagePadding = 15;
|
|
|
|
function calculateX(message: HTMLElement| SVGGElement): void {
|
|
const computedQuery = window.getComputedStyle(message);
|
|
const matrix = new WebKitCSSMatrix(computedQuery.webkitTransform);
|
|
xOffset.value = matrix.m41;
|
|
}
|
|
|
|
function calculateY(messageHeight: number): void {
|
|
if (previousMessageHeight === 0) {
|
|
yOffset.value = firstChildMarginTop;
|
|
} else {
|
|
yOffset.value += previousMessageHeight + messagePadding;
|
|
}
|
|
previousMessageHeight = messageHeight;
|
|
}
|
|
|
|
const calculateMessageOffsets = (msg: HTMLElement): { x: number; y: number } => {
|
|
const msgRect = msg.getBoundingClientRect();
|
|
calculateX(msg);
|
|
calculateY(msgRect.height);
|
|
const offsets = {
|
|
x: xOffset.value as number,
|
|
y: yOffset.value as number
|
|
};
|
|
return offsets;
|
|
}
|
|
|
|
return {
|
|
calculateMessageOffsets,
|
|
}
|
|
}
|