refactor UI index

src/components/UI/UIDetails/messageItem.vue

@@ -74,8 +74,8 @@ export default defineComponent({
     const { textFill, bubbleFill, startingOffset } = useMessageItemComp(props.item.modifier);
     const { textWrap } = useTextWrap();
     const { drawMessage, signatureTranslate } = useMessageItemAnims({
-        mr: messageRect,
-        tr: messageText
+      mr: messageRect,
+      tr: messageText
     })
 
     // wraps message text before render

src/components/UI/index.vue

@@ -87,24 +87,15 @@ import { defineComponent, inject, onMounted, reactive } from "vue";
 import MessageItem from './UIDetails/messageItem.vue';
 import InputItem from "./UIDetails/inputItem.vue";
 import Messages from "./UIDetails/messages";
+import useUIindexAnims from "@/composables/anims/useUIindexAnims";
 export default defineComponent({
   name: 'UIindex',
   components: { MessageItem, InputItem },
   setup() {
-    const anime: object | any = inject('animejs');
-    const timeline: typeof anime = anime.timeline({ loop: true });
     const renderArr: Message[] = reactive([])
     const messages = Messages;
-    const msgOffset = {
-        x: 0 ,
-        y: 0
-    }
-    let messenger: any;
-    let winW: number;
-    let modifier: string;
-    let msg: any;
-    let cardsDiv: any;
-    let prevCardH = 0;
+
+    const { beforeEnter, enter, msgOffset } = useUIindexAnims();
 
     function renderMsg(i: number): void {
       setTimeout(() => {
@@ -118,75 +109,21 @@ export default defineComponent({
       }
     }
 
-    async function beforeEnter(el: any) {
-      modifier = el.className.baseVal.substring(0, 2);
+    // TODO implemeant Undo animation
+    function leave() {
+
     }
 
-    async function enter(el: any, done: any) {
-      const paddingLeft = 40;
-      msg = await document.getElementById(el.id);
-      const rect = msg.getBoundingClientRect();
-      const msgW = rect.width;
-      const msgH = rect.height;
-      cardsDiv = await document.getElementById("cardsDiv");
-      const cdBox = cardsDiv.getBBox();
-
-      if (prevCardH === 0) {
-        msgOffset.y += cdBox.height;
-      } else if (prevCardH > msgH) {
-        // cardsDiv is offset by 17.5
-        msgOffset.y += prevCardH + msgH / 2 + 17.5;
-      } else {
-        msgOffset.y += cdBox.height - 20;
-      }
-      prevCardH = msgH;
-
-      switch (modifier) {
-        case "sf":
-          msgOffset.x = winW - msgW;
-          break;
-        case "ai":
-          msgOffset.x = (winW - msgW) / 2;
-          break;
-        default:
-          msgOffset.x = paddingLeft;
-      }
-
-      const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`;
-      const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`;
-      timeline
-        .add({
-          targets: el,
-          transform: translateUp,
-          easing: "easeInOutQuad",
-          duration: 1000
-        })
-        .add({
-          targets: el,
-          transform: translateDown,
-          easing: "easeInOutQuad",
-          duration: 500,
-          offset: 1000
-        });
-      done();
+    onMounted(() => {
+        runAnim();
+    });
+    return {
+        renderArr,
+        msgOffset,
+        beforeEnter,
+        enter,
+        leave
     }
-
-      function leave() {
-
-      }
-
-      onMounted(() => {
-          messenger = document.getElementById('messenger');
-          winW = messenger.clientWidth;
-          runAnim();
-      });
-      return {
-          renderArr,
-          msgOffset,
-          beforeEnter,
-          enter,
-          leave
-      }
   },
 });
 </script>