splash screen

src/components/home/messageVisualizer/viewDetails/offsetCalculator.ts

@@ -0,0 +1,41 @@
+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): 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,
+    }
+}