refactor UI index

diff --git a/src/components/UI/UIDetails/messageItem.vue b/src/components/UI/UIDetails/messageItem.vue
index 54dd51efa3d85a66036781c73006d73f52a5568e..6ca0576417cbe93c1c1878862bbc969ba1cb45b0 100644 (file)
--- a/src/components/UI/UIDetails/messageItem.vue
+++ b/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

diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue
index 64c198dd1c66a526be1a5b2c2a9e1ac842f1e88f..808d4892b7777792900fbec1781818dafbeab4ee 100644 (file)
--- a/src/components/UI/index.vue
+++ b/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);
-    }
-
-    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();
+    // TODO implemeant Undo animation
+    function leave() {
 
-      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();
     }
 
-      function leave() {
-
-      }
-
-      onMounted(() => {
-          messenger = document.getElementById('messenger');
-          winW = messenger.clientWidth;
-          runAnim();
-      });
-      return {
-          renderArr,
-          msgOffset,
-          beforeEnter,
-          enter,
-          leave
-      }
+    onMounted(() => {
+        runAnim();
+    });
+    return {
+        renderArr,
+        msgOffset,
+        beforeEnter,
+        enter,
+        leave
+    }
   },
 });
 </script>

diff --git a/src/composables/anims/useMessageItemAnims.ts b/src/composables/anims/useMessageItemAnims.ts
index ae9a9eab467041772c9944f66c32de40b53c358d..a872fd9fe5fd13d1ed7d136bad82ec95e6ee4246 100644 (file)
--- a/src/composables/anims/useMessageItemAnims.ts
+++ b/src/composables/anims/useMessageItemAnims.ts
@@ -1,8 +1,14 @@
 import { ref, onMounted } from "vue";
-interface Ref {
-  value: string;
+interface Ref<A> {
+  value: A;
 }
-export default function useMessageItemAnims({ mr, tr }: { mr: Ref; tr: Ref }) {
+export default function useMessageItemAnims({
+  mr,
+  tr
+}: {
+  mr: Ref<string>;
+  tr: Ref<string>;
+}) {
   const signatureTranslate = ref("");
   let messageRect: SVGSVGElement & SVGRectElement;
   let messageText: SVGSVGElement & SVGTextElement;

diff --git a/src/composables/anims/useUIindexAnims.ts b/src/composables/anims/useUIindexAnims.ts
new file mode 100644 (file)
index 0000000..1cd3b92
--- /dev/null
+++ b/src/composables/anims/useUIindexAnims.ts
@@ -0,0 +1,78 @@
+import { inject, onMounted } from "vue";
+export default function useUIindexAnims() {
+  const anime: any = inject("animejs");
+  const timeline = anime.timeline({ loop: true });
+  const msgOffset = {
+    x: 0,
+    y: 0
+  };
+  let winW: number;
+  let modifier: string;
+  let msg: any;
+  let cardsDiv: any;
+  let prevCardH = 0;
+
+  let messenger: any;
+  onMounted(() => {
+    messenger = document.getElementById("messenger");
+    winW = messenger.clientWidth;
+  });
+
+  async function beforeEnter(el: any) {
+    modifier = el.className.baseVal.substring(0, 2);
+  }
+
+  async function enter(el: SVGGElement, done: any) {
+    console.log(done);
+    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
+      });
+  }
+  return {
+    beforeEnter,
+    enter,
+    msgOffset
+  };
+}