refactor message_renderer

src/composables/messageRenderer/useMessageRenderer.ts

@@ -0,0 +1,57 @@
+import useMessageOffsets from "./useOffsets";
+import useRendererAnims from "./useRendererAnims";
+export default function useMessageRenderer() {
+
+    const { calculateMessageOffsets } = useMessageOffsets();
+    const { scrollAnimate, stackAnimate } = useRendererAnims();
+
+    let messageOffset = {
+        x: 0,
+        y: 0
+    };
+    let modifier: string;
+    let msg: HTMLElement | null;
+    let renderList: NodeList;
+    let scrollAnim = false;
+    let scroll = 0;
+
+    function setRenderList(): 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);
+    }
+
+    function beforeEnter(el: SVGGElement): void {
+        setRenderList();
+        modifier = el.className.baseVal.substring(0, 2);
+    }
+
+    function enter(el: SVGGElement): void {
+        msg = document.getElementById(el.id);
+    }
+
+    function afterEnter(el: SVGGElement) {
+        const messagePadding = 10;
+        if (msg) {
+            messageOffset = calculateMessageOffsets(msg, modifier);
+            scrollAnim = messageOffset.y > 450 ? true : false;
+        }
+        if (scrollAnim) {
+            scroll -= el.getBBox().height + messagePadding;
+        }
+        renderMessage(el);
+    }
+
+    return {
+        beforeEnter,
+        enter,
+        afterEnter
+    };
+}