UI component refactor

src/components/UI/UIDetails/messageItem.vue

@@ -23,8 +23,8 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, reactive } from "vue";
-import useMessageItemComp from "@/composables/computed/useMessageItemComp";
+import useMessageItemComp from "@/composables/messageItem/useMessageItemComp";
-import useMessageItemAnims from "@/composables/anims/useMessageItemAnims";
+import useMessageItemAnims from "@/composables/messageItem/useMessageItemAnims";
 import useTextWrap from "@/composables/textWrap/useTextWrap";
 export default defineComponent({
   name: "MessageItem",

src/components/UI/UIDetails/messageRenderer.vue

@@ -1,10 +1,10 @@
 <template>
-  <g id="cardsDiv">
+  <g id="messageRenderer">
     <g
       v-for="(item, index) in renderArr"
       :key="index"
       :id="index"
-      class="test"
+      class="messageList"
       transform="translate(0, 0)"
     >
       <transition
@@ -23,32 +23,27 @@
 import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
 import { defineComponent, reactive, ref, inject } from "vue";
 import MessageItem from "./messageItem.vue";
-import Messages from "./messages";
 import { Message } from "@/types/message/index";
+import { Mitt } from "@/types/mitt/index";
 export default defineComponent({
   name: "MessageRenderer",
   components: { MessageItem },
   setup() {
-    const emitter: any = inject("mitt");
     const renderArr: Message[] = reactive([]);
-    const messages = Messages;
+
-    const count = ref(0);
+    // imports mitt Emitter safely
+    let emitter: Mitt;
+    const emitterInject: Mitt | undefined = inject("mitt");
+    if (emitterInject) {
+      emitter = emitterInject;
+      emitter.on("renderMessage", (payload: Message | undefined) => {
+        if (payload) renderArr.push(payload);
+      });
+    }
 
     const { beforeEnter, enter, afterEnter } = useMessageRenderer();
 
-    emitter.on("renderMessage", (payload: any) => {
-      renderArr.push(payload);
-    });
-    function renderMessage() {
-      if (count.value < messages.length) {
-        renderArr.push(messages[count.value]);
-        count.value++;
-        return;
-      }
-    }
-
     return {
-      renderMessage,
       renderArr,
       beforeEnter,
       enter,

src/components/UI/index.vue

@@ -14,15 +14,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, inject } from "vue";
 import AI from "../AI/index.vue";
+import MessageRenderer from "./UIDetails/messageRenderer.vue";
 import InputItem from "./UIDetails/inputItem.vue";
 import TitleBar from "./UIDetails/titleBar.vue";
 import Messages from "./UIDetails/messages";
-import MessageRenderer from "./UIDetails/messageRenderer.vue";
 import { Mitt } from "@/types/mitt/index";
+import { defineComponent, ref, inject } from "vue";
 export default defineComponent({
-  name: "UIindex",
+  name: "UI",
   components: { AI, MessageRenderer, InputItem, TitleBar },
   setup() {
     const messages = Messages;

src/composables/anims/useUIindexAnims.ts

@@ -1,145 +0,0 @@
-import { inject, onMounted } from "vue";
-import AnimeFunc from "@/types/animejs/index";
-import { MessageAnimeFunc } from '@/types/message/index';
-export default function useUIindexAnims() {
-
-  // imports animejs safely
-  let anime: AnimeFunc;
-  const animeInject: AnimeFunc | undefined = inject("animejs");
-  if (animeInject) anime = animeInject;
-
-  const msgOffset = {
-    x: 0,
-    y: 0
-  };
-  let winW: number;
-  let modifier: string;
-  let msg: HTMLElement | null;
-  let prevCardH = 0;
-  let messenger: HTMLElement | null;
-  let renderList: NodeList;
-  let scrollAnim = false;
-  let scroll = 0;
-  const messagePadding = 10;
-
-  onMounted(() => {
-    messenger = document.getElementById("messenger");
-    if (messenger) winW = messenger.clientWidth;
-  });
-
-  function beforeEnter(el: SVGGElement): void {
-    modifier = el.className.baseVal.substring(0, 2);
-  }
-
-  function scrollOffset(l: NodeList, height: number): void {
-    for (const card of l) {
-      const c = card.parentNode as HTMLElement;
-      anime({
-        targets: c,
-        transform: `translate(0 ${height})`,
-        easing: "easeInOutQuad",
-        duration: 500,
-      });
-    }
-  }
-
-  function setRenderList(): void {
-    const messages = document.querySelectorAll(".test");
-    if (messages.length) renderList = messages;
-  }
-
-  const scrollAnimate: MessageAnimeFunc = (el, transform) => {
-    setRenderList();
-    anime({
-      targets: el, transform: transform.initialTranslate,
-      easing: "easeInOutQuad",
-      duration: 500,
-      begin: function() {
-        scrollOffset(renderList, scroll);
-      },
-      complete: function() {
-        anime({
-          targets: el,
-          transform: transform.finalTranslate,
-          offset: 1000
-        });
-      }
-    });
-  }
-
-  const stackAnimate: MessageAnimeFunc = (el, transform) => {
-    anime({
-      targets: el,
-      transform: transform.initialTranslate,
-      easing: "easeInOutQuad",
-      duration: 1000,
-      complete: function() {
-        anime({
-          targets: el,
-          transform: transform.finalTranslate,
-          easing: "easeInOutQuad",
-          duration: 500,
-          offset: 1000
-        });
-      }
-    });
-  }
-
-  function addMessage(el: SVGGElement): void {
-    const transform = {
-      initialTranslate: `translate(${msgOffset.x} ${msgOffset.y})`,
-      finalTranslate: `translate(${msgOffset.x} ${msgOffset.y + 5})`
-    }
-    scrollAnim ? scrollAnimate(el, transform) : stackAnimate(el, transform);
-  }
-
-  function setXoffset(messageWidth: number): void {
-    const paddingLeft = 40;
-    switch (modifier) {
-      case "sf":
-        msgOffset.x = winW - messageWidth;
-        break;
-      case "ai":
-        msgOffset.x = (winW - messageWidth) / 2;
-        break;
-      default:
-        msgOffset.x = paddingLeft;
-    }
-  }
-
-  function setYoffset(messageHeight: number): void {
-    if (prevCardH === 0) {
-      msgOffset.y = 40;
-    } else {
-      msgOffset.y += prevCardH + messagePadding;
-    }
-    prevCardH = messageHeight;
-    scrollAnim = msgOffset.y > 450 ? true : false;
-  }
-
-  function calculateMessageOffsets(msg: HTMLElement): void {
-    const msgRect = msg.getBoundingClientRect();
-    setXoffset(msgRect.width)
-    setYoffset(msgRect.height)
-  }
-
-  function enter(el: SVGGElement): void {
-    msg = document.getElementById(el.id);
-  }
-
-  function afterEnter(el: SVGGElement) {
-    if (msg) calculateMessageOffsets(msg);
-    if (scrollAnim) {
-      scroll -= el.getBBox().height + messagePadding;
-    }
-    addMessage(el);
-  }
-
-  return {
-    beforeEnter,
-    enter,
-    msgOffset,
-    addMessage,
-    afterEnter
-  };
-}

src/composables/keyDownHandler/useKeyDownHandler.ts

@@ -42,7 +42,6 @@ export default function useKeyDownHandler() {
     if (e.shiftKey) {
       iCol = 1;
     }
-    console.log(e.shiftKey);
     const ch = keyboardCharMap[e.keyCode][iCol];
     // Optionally do things with non-printables,
     // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc.

src/composables/messageItem/useMessageItemComp.ts

@@ -22,9 +22,9 @@ export default function useMessageItemComp(m: string) {
   });
 
   const startingOffset = computed(() => {
-    const cardsDiv = document.getElementById('cardsDiv')
+    const messageRenderer = document.getElementById('messageRenderer')
-    if (cardsDiv) {
+    if (messageRenderer) {
-      const rect = cardsDiv.getBoundingClientRect();
+      const rect = messageRenderer.getBoundingClientRect();
       const sfX = 120;
       const aiX = 200;
       const dX = 40;

src/composables/messageRenderer/useMessageRenderer.ts

@@ -1,52 +1,45 @@
-import useMessageOffsets from "./useOffsets";
 import useRendererAnims from "./useRendererAnims";
+import useOffsetCalculator from './useOffsetCalculator';
 export default function useMessageRenderer() {
 
-    const { calculateMessageOffsets } = useMessageOffsets();
+    const { calculateMessageOffsets } = useOffsetCalculator();
-    const { scrollAnimate, stackAnimate } = useRendererAnims();
+    const { shiftAnimate, stackAnimate } = useRendererAnims();
 
-    let messageOffset = {
+    let messageList: NodeList;
-        x: 0,
-        y: 0
-    };
     let modifier: string;
-    let msg: HTMLElement | null;
+    let message: HTMLElement | null;
-    let renderList: NodeList;
+    let messageOffset = { x: 0, y: 0 };
-    let scrollAnim = false;
+    let shift = false;
-    let scroll = 0;
+    let shiftValue = 0;
 
-    function setRenderList(): void {
+    function animateMessage(el: SVGGElement): void {
-        const messages = document.querySelectorAll(".test");
-        if (messages.length) renderList = messages;
-    }
-
-    function renderMessage(el: SVGGElement): void {
         const transform = {
             initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
             finalTranslate: `translate(${messageOffset.x} ${messageOffset.y + 5})`
         }
-        scrollAnim ? scrollAnimate(el, transform, scroll, renderList) : stackAnimate(el, transform);
+        shift ? shiftAnimate(el, transform, shiftValue, messageList) : stackAnimate(el, transform);
     }
 
     function beforeEnter(el: SVGGElement): void {
-        setRenderList();
         modifier = el.className.baseVal.substring(0, 2);
+        const queryResult = document.querySelectorAll(".messageList");
+        if (queryResult.length) messageList = queryResult;
     }
 
     function enter(el: SVGGElement): void {
-        msg = document.getElementById(el.id);
+        message = document.getElementById(el.id);
     }
 
     function afterEnter(el: SVGGElement) {
         const messagePadding = 10;
-        if (msg) {
+        if (message) {
-            messageOffset = calculateMessageOffsets(msg, modifier);
+            messageOffset = calculateMessageOffsets(message, modifier);
-            scrollAnim = messageOffset.y > 450 ? true : false;
+            shift = messageOffset.y > 450 ? true : false;
         }
-        if (scrollAnim) {
+        if (shift) {
-            scroll -= el.getBBox().height + messagePadding;
+            shiftValue -= el.getBBox().height + messagePadding;
         }
-        renderMessage(el);
+        animateMessage(el);
     }
 
     return {

src/composables/messageRenderer/useOffsetCalculator.ts

@@ -1,7 +1,7 @@
 import { ref, onMounted } from "vue";
-export default function useMessageOffsets() {
+export default function useOffsetCalculator() {
-    let xOffset = ref(0);
+    const xOffset = ref(0);
-    let yOffset = ref(0);
+    const yOffset = ref(0);
     let messenger: HTMLElement | null;
     let winW: number;
     let previousMessageHeight = 0;

src/composables/messageRenderer/useRendererAnims.ts

@@ -2,19 +2,18 @@ import { inject } from "vue";
 import AnimeFunc from "@/types/animejs/index";
 import { MessageAnimeFunc } from '@/types/message/index';
 export default function useRendererAnims() {
-
     // imports animejs safely
     let anime: AnimeFunc;
     const animeInject: AnimeFunc | undefined = inject("animejs");
     if (animeInject) anime = animeInject;
 
-    function scrollOffset(targetList: NodeList | undefined, height: number | undefined): void {
+    function shiftList({ targetList, sv }: { targetList: NodeList | undefined; sv: number | undefined }) {
         if (targetList) {
-            for (const message of targetList) {
+            for (const element of targetList) {
-                const m = message.parentNode as HTMLElement;
+                const el = element.parentNode as HTMLElement;
                 anime({
-                    targets: m,
+                    targets: el,
-                    transform: `translate(0 ${height})`,
+                    transform: `translate(0 ${sv})`,
                     easing: "easeInOutQuad",
                     duration: 500,
                 });
@@ -22,13 +21,16 @@ export default function useRendererAnims() {
         }
     }
 
-    const scrollAnimate: MessageAnimeFunc = (el, transform, scrollHeight, targetList) => {
+    const shiftAnimate: MessageAnimeFunc = (el, transform, shiftValue, targetList) => {
         anime({
             targets: el, transform: transform.initialTranslate,
             easing: "easeInOutQuad",
             duration: 500,
             begin: function() {
-                scrollOffset(targetList, scrollHeight);
+                shiftList({
+                    targetList,
+                    sv: shiftValue
+                });
             },
             complete: function() {
                 anime({
@@ -59,7 +61,7 @@ export default function useRendererAnims() {
     }
 
     return {
-        scrollAnimate,
+        shiftAnimate,
         stackAnimate
     };
 }

src/views/home/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <UIindex />
+  <UI />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import UIindex from "@/components/UI/index.vue";
+import UI from "@/components/UI/index.vue";
 export default defineComponent({
   name: "HomeIndex",
-  components: { UIindex },
+  components: { UI },
 });
 </script>