fix TS issues

package.json

@@ -15,6 +15,7 @@
   },
   "main": "background.js",
   "dependencies": {
+    "@types/animejs": "^3.1.2",
     "@types/bindings": "^1.3.0",
     "@types/uuid": "^8.3.0",
     "@types/ws": "^7.2.7",
@@ -28,7 +29,6 @@
     "ws": "^7.3.1"
   },
   "devDependencies": {
-    "@types/animejs": "^3.1.2",
     "@types/jest": "^24.0.19",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",

src/components/UI/UIDetails/messageItem.vue

@@ -75,7 +75,7 @@ export default defineComponent({
     const { textWrap } = useTextWrap();
     const { drawMessage, signatureTranslate } = useMessageItemAnims({
       mr: messageRect,
-      tr: messageText
+      tr: messageText,
     })
 
     // wraps message text before render

src/components/UI/UIDetails/messages.ts

@@ -1,11 +1,5 @@
-interface Message {
-  content: string;
-  signature: string;
-  outgoing: boolean;
-  modifier: string;
-  imgURL: string;
-  id: string;
-}
+import { Message } from "@/types/message/index";
+
 const Messages: Message[] = [
   {
     content:

src/components/UI/index.vue

@@ -49,7 +49,6 @@
           appear
           v-on:before-appear="beforeEnter"
           v-on:appear="enter"
-          v-on:appear-cancelled="leave"
         >
           <MessageItem
             :item="item"
@@ -85,25 +84,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, inject, onMounted, reactive } from "vue";
+import { defineComponent, ref, 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 },
+  components: { MessageItem },
   setup() {
     const renderArr: Message[] = reactive([])
     const messages = Messages;
     const count = ref(0);
 
-    const { beforeEnter, enter, msgOffset } = useUIindexAnims();
+    const { beforeEnter, enter } = useUIindexAnims();
 
-    // TODO implemeant Undo animation
-    function leave() {
-
-    }
     const renderMessage = () => {
         if (count.value < messages.length) {
           renderArr.push(messages[count.value])
@@ -115,10 +110,8 @@ export default defineComponent({
     return {
         renderMessage,
         renderArr,
-        msgOffset,
         beforeEnter,
         enter,
-        leave
     }
   },
 });

src/composables/anims/useMessageItemAnims.ts

@@ -4,7 +4,7 @@ interface Ref<A> {
 }
 export default function useMessageItemAnims({
   mr,
-  tr
+  tr,
 }: {
   mr: Ref<string>;
   tr: Ref<string>;
@@ -13,7 +13,7 @@ export default function useMessageItemAnims({
   let messageRect: SVGSVGElement & SVGRectElement;
   let messageText: SVGSVGElement & SVGTextElement;
 
-  onMounted(() => {
+  onMounted(async () => {
     messageRect = (mr.value as unknown) as SVGSVGElement & SVGRectElement;
     messageText = (tr.value as unknown) as SVGSVGElement & SVGTextElement;
   });
@@ -44,6 +44,6 @@ export default function useMessageItemAnims({
 
   return {
     drawMessage,
-    signatureTranslate
+    signatureTranslate,
   };
 }

src/composables/anims/useUIindexAnims.ts

@@ -1,6 +1,13 @@
-import { inject, onMounted, ref } from "vue";
+import { inject, onMounted } from "vue";
+import AnimeFunc from "@/types/animejs/index";
+import { MessageAnimeFunc } from '@/types/message/index';
 export default function useUIindexAnims() {
-  const anime: any = inject("animejs");
+
+  // imports animejs safely
+  let anime: AnimeFunc;
+  const animeInject: AnimeFunc | undefined = inject("animejs");
+  if (animeInject) anime = animeInject;
+
   const msgOffset = {
     x: 0,
     y: 0
@@ -17,32 +24,27 @@ export default function useUIindexAnims() {
 
   onMounted(() => {
     messenger = document.getElementById("messenger");
-    if (messenger) {
-      winW = messenger.clientWidth;
-    }
+    if (messenger) winW = messenger.clientWidth;
   });
 
-  const getSVGElHeight = (el: SVGGElement) => el.getBBox().height;
-
-  function calculateAllCardsHeight() {
-    const cards = document.querySelectorAll(".test");
-    if (cards.length) {
-      renderList = cards;
-      for (const card of cards) {
-        const el = card as SVGGElement;
-        const height = getSVGElHeight(el);
-        totalHeight += height;
+  function calculateAllMessageHeight(): void {
+    const messages = document.querySelectorAll(".test");
+    if (messages.length) {
+      renderList = messages;
+      for (const message of messages) {
+        const el = message as SVGGElement;
+        totalHeight += el.getBBox().height;
       }
       scrollAnim = totalHeight > 500 ? true : false;
     }
   }
 
-  async function beforeEnter(el: SVGGElement) {
+  function beforeEnter(el: SVGGElement): void {
     modifier = el.className.baseVal.substring(0, 2);
-    if (!scrollAnim) calculateAllCardsHeight();
+    if (!scrollAnim) calculateAllMessageHeight();
   }
 
-  function scrollOffset(l: NodeList, height: number) {
+  function scrollOffset(l: NodeList, height: number): void {
     for (const card of l) {
       const c = card.parentNode as HTMLElement;
       anime({
@@ -50,14 +52,13 @@ export default function useUIindexAnims() {
         transform: `translate(0 ${height})`,
         easing: "easeInOutQuad",
         duration: 500,
-      })
+      });
     }
   }
 
-  function scrollAnimate(el: SVGGElement) {
+  const scrollAnimate: MessageAnimeFunc = (el, transform) => {
     anime({
-      targets: el,
-      transform: `translate(${msgOffset.x} ${msgOffset.y})`,
+      targets: el, transform: transform.initialTranslate,
       easing: "easeInOutQuad",
       duration: 500,
       begin: function() {
@@ -66,25 +67,23 @@ export default function useUIindexAnims() {
       complete: function() {
         anime({
           targets: el,
-          transform: `translate(${msgOffset.x} ${msgOffset.y + 5})`,
+          transform: transform.finalTranslate,
           offset: 1000
         });
       }
     });
   }
 
-  function stackAnimate(el: SVGGElement) {
-    const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`;
-    const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`;
+  const stackAnimate: MessageAnimeFunc = (el, transform) => {
     anime({
       targets: el,
-      transform: translateUp,
+      transform: transform.initialTranslate,
       easing: "easeInOutQuad",
       duration: 1000,
       complete: function() {
         anime({
           targets: el,
-          transform: translateDown,
+          transform: transform.finalTranslate,
           easing: "easeInOutQuad",
           duration: 500,
           offset: 1000
@@ -93,11 +92,15 @@ export default function useUIindexAnims() {
     });
   }
 
-  function addMessage(el: SVGGElement) {
-    scrollAnim ? scrollAnimate(el) : stackAnimate(el)
+  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) {
+  function setXoffset(messageWidth: number): void {
     const paddingLeft = 40;
     switch (modifier) {
       case "sf":
@@ -111,7 +114,7 @@ export default function useUIindexAnims() {
     }
   }
 
-  function setYoffset(messageHeight: number) {
+  function setYoffset(messageHeight: number): void {
     if (prevCardH === 0) {
       msgOffset.y += messageHeight;
     } else {
@@ -120,7 +123,7 @@ export default function useUIindexAnims() {
     prevCardH = messageHeight;
   }
 
-  function calculateMessageOffsets(msg: any) {
+  function calculateMessageOffsets(msg: HTMLElement): void {
     const msgRect = msg.getBoundingClientRect();
     if (scrollAnim) {
       // update scroll
@@ -130,10 +133,9 @@ export default function useUIindexAnims() {
     setYoffset(msgRect.height)
   }
 
-
-  async function enter(el: SVGGElement) {
+  async function enter(el: SVGGElement): Promise<void> {
     msg = await document.getElementById(el.id);
-    calculateMessageOffsets(msg)
+    if (msg) calculateMessageOffsets(msg);
     addMessage(el);
   }
 

src/composables/computed/useMessageItemComp.ts

@@ -24,9 +24,9 @@ export default function useMessageItemComp(m: string) {
   const startingOffset = computed(() => {
     switch (m) {
       case "sf":
-        return "translate(10, 600)";
+        return "translate(115, 600)";
       case "ai":
-        return "translate(135, 600)";
+        return "translate(200, 600)";
       default:
         return "translate(20, 600)";
     }

src/shims-vue.d.ts

@@ -4,11 +4,13 @@ declare module "*.vue" {
   export default component;
 }
 
-// declare module "anime-js" {
-//   import * as anime from "animejs/lib/anime.es.js";
-//   function anime(): void;
-//   export = anime;
-// }
+declare module "anime-js" {
+  namespace anime {
+    import * as anime from "animejs/lib/anime.es.js";
+    function anime(): void;
+    export = anime;
+  }
+}
 
 interface Message {
   content: string;

src/types/animejs/index.ts

@@ -0,0 +1,13 @@
+interface AnimeFuncParams {
+    targets: HTMLElement | SVGGElement | SVGElement;
+    transform: string;
+    easing?: string;
+    duration?: number;
+    offset?: number;
+    begin?: () => void;
+    complete?: () => void;
+}
+
+export default interface AnimeFunc {
+    (params: AnimeFuncParams): void | undefined;
+}

src/types/message/index.ts

@@ -0,0 +1,18 @@
+export interface Message {
+    content: string;
+    signature: string;
+    outgoing: boolean;
+    modifier: string;
+    imgURL: string;
+    id: string;
+}
+
+interface MessageTransform {
+    initialTranslate: string;
+    finalTranslate: string;
+}
+
+export interface MessageAnimeFunc {
+    (message: SVGElement, transform: MessageTransform): void;
+}
+