refactor messageItem component

src/components/UI/UIDetails/messageItem.vue

@@ -5,8 +5,7 @@
     :transform = "startingOffset"
   >
     <rect
-      ref="bubbleTag"
-      id="#bubble"
+      ref="messageRect"
       x="30"
       y="10"
       width="196"
@@ -17,20 +16,19 @@
     <text
       font-size="14"
       font-family="SF Pro"
-      id="#message"
-      ref="contentTag"
+      ref="messageText"
       :fill="textFill"
     >
       <tspan
-           dy="16"
-           x="0"
-           v-for="(item, index) in textArr"
-           :key="index"
+        dy="16"
+        x="0"
+        v-for="(item, index) in textArr"
+        :key="index"
       >
         {{ item }}
       </tspan>
     </text>
-    <g :transform="signature">
+    <g :transform="signatureTranslate">
       <image
         xlink:href="profile.png"
         width="29"
@@ -54,8 +52,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
- export default defineComponent({
+import { defineComponent, onMounted, ref, reactive } from 'vue';
+import useMessageItemComp from "@/composables/computed/useMessageItemComp";
+import useMessageItemAnims from "@/composables/anims/useMessageItemAnims";
+import useTextWrap  from  "@/composables/textWrap/useTextWrap";
+export default defineComponent({
   name: "MessageItem",
   props: {
     item: {
@@ -64,100 +65,38 @@ import { defineComponent, computed, onMounted, ref, reactive } from 'vue';
     },
   },
   setup(props) {
+    let textArr: string[] = reactive([]);
 
-      let textArr: string[] = reactive([]);
-      const signature = ref("");
-      const msgID = ref(props.item.id);
-      const bubbleTag = ref(`bubble${msgID.value}`);
-      const contentTag = ref(`content${msgID.value}`);
-      let bubble: any;
-      let content: any;
-      console.log(props)
+    const msgID = ref(props.item.id);
+    const messageRect = ref(`message${msgID.value}`);
+    const messageText = ref(`text${msgID.value}`);
 
-      const textFill = computed(() => {
-        switch (props.item.modifier) {
-          case "ai" || "sf":
-            return "#fff";
-          default:
-            return "#000";
-        }
-      });
+    const { textFill, bubbleFill, startingOffset } = useMessageItemComp(props.item.modifier);
+    const { textWrap } = useTextWrap();
+    const { drawMessage, signatureTranslate } = useMessageItemAnims({
+        mr: messageRect,
+        tr: messageText
+    })
 
-      const bubbleFill = computed(() => {
-        switch (props.item.modifier) {
-          case "sf":
-            return "#61b4f4";
-          case "ai":
-            return "#585858";
-          default:
-            return "#fff";
-        }
-      });
+    // wraps message text before render
+    textArr = textWrap({
+      s: props.item.content,
+      w: 32
+    });
 
-      const startingOffset = computed(() => {
-        switch (props.item.modifier) {
-          case "sf":
-            return "translate(10, 600)";
-          case "ai":
-            return "translate(135, 600)";
-          default:
-            return "translate(20, 600)";
-        }
-      })
-
-      function signaturePosition(): void {
-          if (bubble.getAttribute("height") !== null) {
-            const height = Number(bubble.getAttribute("height"));
-            const p = -10;
-            signature.value = `translate(-10 ${height + p})`;
-          }
-      }
-
-      function createTextBox(s: string, w: number): void {
-        // 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"
-          );
-        textArr = wrap(s, w).split("\n");
-      }
-
-      function adjustRect(): void {
-        // must get dimensions of text box to fit bubble around
-        const padding = 20;
-        const bbox = content.getBBox();
-        bubble.setAttribute("x", bbox.x - padding);
-        bubble.setAttribute("y", bbox.y - padding);
-        bubble.setAttribute("width", bbox.width + 2 * padding);
-        bubble.setAttribute("height", bbox.height + 2 * padding);
-      }
-
-      // make textbox before mount
-      createTextBox(props.item.content, 32);
-
-      onMounted(async () => {
-          // update bubble and content for current message
-          bubble = bubbleTag.value;
-          content = contentTag.value;
-          await adjustRect();
-          signaturePosition();
-
-      })
-      return {
-          textFill,
-          bubbleFill,
-          startingOffset,
-          signaturePosition,
-          textArr,
-          signature,
-          contentTag,
-          msgID,
-          bubbleTag
-      }
+    onMounted(() => {
+      drawMessage();
+    })
 
+    return {
+      textFill,
+      bubbleFill,
+      startingOffset,
+      textArr,
+      signatureTranslate,
+      messageText,
+      messageRect
+    }
   },
- });
+});
 </script>
-
-<style></style>