refactor messageItem component

src/composables/anims/useMessageItemAnims.ts

@@ -0,0 +1,43 @@
+import { ref, onMounted } from "vue";
+interface Ref {
+  value: string;
+}
+export default function useMessageItemAnims({ mr, tr }: { mr: Ref; tr: Ref }) {
+  const signatureTranslate = ref("");
+  let messageRect: string | SVGRectElement | SVGSVGElement | any;
+  let messageText: string | SVGTextElement | SVGSVGElement | any;
+
+  onMounted(() => {
+    messageRect = mr.value;
+    messageText = tr.value;
+  });
+
+  function adjustMessageRect(): void {
+    // must get dimensions of text box to fit bubble around
+    const padding = 20;
+    const textBox = messageText.getBBox();
+    messageRect.setAttribute("x", textBox.x - padding);
+    messageRect.setAttribute("y", textBox.y - padding);
+    messageRect.setAttribute("width", textBox.width + 2 * padding);
+    messageRect.setAttribute("height", textBox.height + 2 * padding);
+  }
+
+  function translateMsgSignature(): void {
+    if (messageRect.getAttribute("height") !== null) {
+      const height = Number(messageRect.getAttribute("height"));
+      const p = -10;
+      signatureTranslate.value = `translate(-10 ${height + p})`;
+    }
+  }
+
+  async function drawMessage() {
+    // ignore lint error: await needed for proper render
+    await adjustMessageRect();
+    translateMsgSignature();
+  }
+
+  return {
+    drawMessage,
+    signatureTranslate
+  };
+}

src/composables/computed/useMessageItemComp.ts

@@ -0,0 +1,40 @@
+import { computed } from "vue";
+// takes in message modifier as param
+export default function useMessageItemComp(m: string) {
+  const textFill = computed(() => {
+    switch (m) {
+      case "fr":
+        return "#000";
+      default:
+        return "#fff";
+    }
+  });
+
+  const bubbleFill = computed(() => {
+    switch (m) {
+      case "sf":
+        return "#61b4f4";
+      case "ai":
+        return "#585858";
+      default:
+        return "#fff";
+    }
+  });
+
+  const startingOffset = computed(() => {
+    switch (m) {
+      case "sf":
+        return "translate(10, 600)";
+      case "ai":
+        return "translate(135, 600)";
+      default:
+        return "translate(20, 600)";
+    }
+  });
+
+  return {
+    textFill,
+    bubbleFill,
+    startingOffset
+  };
+}

src/composables/textWrap/useTextWrap.ts

@@ -0,0 +1,17 @@
+export default function useTextWrap() {
+  // text wraps a string to a given width
+  function textWrap({ s, w }: { s: string; w: number }): string[] {
+    // return tspan elements for text with correct size
+    const wrap = (s: string, w: number) =>
+      s.replace(
+        new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, "g"),
+        "$1\n"
+      );
+    const result = wrap(s, w).split("\n");
+    return result;
+  }
+
+  return {
+    textWrap
+  };
+}

src/composables/useTextBox.ts

@@ -1,31 +0,0 @@
-import { reactive, onMounted } from "vue";
-export default function useTextBox() {
-  const textArr: string[] = reactive([]);
-
-  function createTextBox(s: string, w: number): string[] {
-    // return tspan elements for text with correct size
-    const wrap = (s: string, w: number) =>
-      s.replace(
-        new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, "g"),
-        "$1\n"
-      );
-    const textWrap = wrap(s, w).split("\n");
-    return textWrap;
-  }
-
-  function adjustRect(rect: any, text: any): void {
-    // must get dimensions of text box to fit bubble around
-    const padding = 20;
-    const bbox = text.getBBox();
-    rect.setAttribute("x", bbox.x - padding);
-    rect.setAttribute("y", bbox.y - padding);
-    rect.setAttribute("width", bbox.width + 2 * padding);
-    rect.setAttribute("height", bbox.height + 2 * padding);
-  }
-
-  return {
-    textArr,
-    adjustRect,
-    createTextBox
-  };
-}