refactor core into composables & components

src/components/inputVisualizer/visualizerDetails/textVisualizer.ts

@@ -0,0 +1,49 @@
+import { ref, computed, inject } from 'vue';
+import useTextInputAnims from "./textAnime";
+import { Ref } from "@/types/vueRef/index";
+/*
+ * text rendering logic used by inputController
+*/
+export default function useTextVisualizer(input: Ref<string>) {
+    const inputHeight = ref(42);
+    const inputWidth = ref(0);
+
+    const emitter: any = inject("mitt");
+    const { animateSend, verticalShiftInput, inputAppear } = useTextInputAnims();
+
+    async function renderTextInput() {
+        // first, get input dimensions
+        const inputDivs = await document.getElementsByClassName("inputBubble");
+        const height = inputDivs[0].getBoundingClientRect().height;
+        inputWidth.value = inputDivs[0].getBoundingClientRect().width;
+        // then, query for foreignObject div
+        const foreignObjectDiv = document.getElementsByClassName(
+            "inputContainer"
+        );
+        const foreignEl = foreignObjectDiv[0] as HTMLElement;
+        if (height !== inputHeight.value) {
+            inputHeight.value = height;
+        }
+        if (inputHeight.value === 0) {
+            inputAppear(foreignEl)
+        } else if (inputHeight.value > 36) {
+            const yTrans = -inputHeight.value + 30;
+            verticalShiftInput(foreignEl, yTrans);
+        }
+    }
+
+    emitter.on("newSelfMessage", async (payload: any) => {
+        const inputEl = document.getElementsByClassName("inputContainer");
+        const foreignEl = inputEl[0] as HTMLElement;
+        animateSend(foreignEl, inputHeight.value, input);
+    });
+
+    const textInputXoffset = computed(() => {
+        return `calc(50% - ${inputWidth.value / 2})`;
+    });
+
+    return {
+        textInputXoffset,
+        renderTextInput
+    }
+}