fix message xOffset

src/components/UI/UIDetails/messageItem.vue

@@ -42,7 +42,8 @@ export default defineComponent({
     const messageText = ref(`text${msgID.value}`);
 
     const { textFill, bubbleFill, startingOffset } = useMessageItemComp(
-      props.item.modifier
+      props.item.modifier,
+      props.item.id
     );
     const { textWrap } = useTextWrap();
     const { drawMessage, signatureTranslate } = useMessageItemAnims({

src/composables/messageItem/useMessageItemComp.ts

@@ -1,6 +1,36 @@
-import { computed } from "vue";
-// takes in message modifier as param
-export default function useMessageItemComp(m: string) {
+import { computed, onMounted, ref } from "vue";
+export default function useMessageItemComp(m: string, id: string) {
+  const x = ref(0)
+  const xOffset = async () => {
+      const paddingLeft = 40;
+      const messageMargin = 20;
+      const winW = 350;
+      let x: number;
+        const msg = await document.getElementById(id);
+        if (msg) {
+          const messageWidth = msg.getBoundingClientRect().width;
+          switch (m) {
+              case "sf":
+                  x = winW - messageWidth;
+                  break;
+              case "ai":
+                  x = messageMargin + (winW -messageWidth) / 2;
+                  break;
+              default:
+                  x = paddingLeft;
+          }
+          return x;
+        }
+  }
+
+  onMounted(async () => {
+    const result = await xOffset();
+    if(result) {
+      x.value =  result;
+    }
+  })
+
+
   const textFill = computed(() => {
     switch (m) {
       case "fr":
@@ -25,21 +55,11 @@ export default function useMessageItemComp(m: string) {
     const messageRenderer = document.getElementById('messageRenderer')
     if (messageRenderer) {
       const rect = messageRenderer.getBoundingClientRect();
-      const sfX = 120;
-      const aiX = 200;
-      const dX = 40;
       let Y = 600;
       if (rect.height > 500) {
         Y = rect.height + 75;
       }
-      switch (m) {
-        case "sf":
-          return `translate(${sfX} ${Y})`;
-        case "ai":
-          return `translate(${aiX} ${Y})`;
-        default:
-          return `translate(${dX} ${Y})`;
-      }
+      return `translate(${x.value} ${Y})`;
     }
   });
 

src/composables/messageRenderer/useMessageRenderer.ts

@@ -32,8 +32,9 @@ export default function useMessageRenderer() {
 
     function afterEnter(el: SVGGElement) {
         const messagePadding = 10;
+
         if (message) {
-            messageOffset = calculateMessageOffsets(message, modifier);
+            messageOffset = calculateMessageOffsets(message);
             shift = messageOffset.y > 450 ? true : false;
         }
         if (shift) {

src/composables/messageRenderer/useOffsetCalculator.ts

@@ -1,29 +1,15 @@
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 export default function useOffsetCalculator() {
     const xOffset = ref(0);
     const yOffset = ref(0);
-    let messenger: HTMLElement | null;
-    let winW: number;
     let previousMessageHeight = 0;
     const messagePadding = 10;
 
-    onMounted(() => {
-        messenger = document.getElementById("messenger");
-        if (messenger) winW = messenger.clientWidth;
-    })
 
-    function setXoffset(messageWidth: number, modifier: string): void {
-        const paddingLeft = 40;
-        switch (modifier) {
-            case "sf":
-                xOffset.value = winW - messageWidth;
-                break;
-            case "ai":
-                xOffset.value = (winW - messageWidth) / 2;
-                break;
-            default:
-                xOffset.value = paddingLeft;
-        }
+    function setXoffset(message: HTMLElement): void {
+        const computedQuery = window.getComputedStyle(message)
+        const matrix = new WebKitCSSMatrix(computedQuery.webkitTransform);
+        xOffset.value = matrix.m41;
     }
 
     function setYoffset(messageHeight: number): void {
@@ -35,9 +21,9 @@ export default function useOffsetCalculator() {
         previousMessageHeight = messageHeight;
     }
 
-    const calculateMessageOffsets = (msg: HTMLElement, modifier: string) => {
+    const calculateMessageOffsets = (msg: HTMLElement) => {
         const msgRect = msg.getBoundingClientRect();
-        setXoffset(msgRect.width, modifier)
+        setXoffset(msg)
         setYoffset(msgRect.height)
         const offsets = {
             x: xOffset.value as number,

src/composables/messageRenderer/useRendererAnims.ts

@@ -23,7 +23,8 @@ export default function useRendererAnims() {
 
     const shiftAnimate: MessageAnimeFunc = (el, transform, shiftValue, targetList) => {
         anime({
-            targets: el, transform: transform.initialTranslate,
+            targets: el, 
+            transform: transform.initialTranslate,
             easing: "easeInOutQuad",
             duration: 500,
             begin: function() {