add animejs + wasm to vue

src/components/UI/UIDetails/messageItem.vue

@@ -0,0 +1,136 @@
+<template>
+  <g
+    :id="item.id"
+    :class="item.modifier"
+    :transform="startingOffset"
+  >
+    <rect
+      ref="bubble"
+      id="#bubble"
+      x="30"
+      y="10"
+      width="196"
+      height="63"
+      rx="20"
+      :fill="bubbleFill"
+    />
+    <text
+      font-size="14"
+      font-family="SF Pro"
+      id="#message"
+      ref="content"
+      :fill="textFill"
+    >
+      <tspan
+           dy="16"
+           x="0"
+           v-for="(item, index) in textArr"
+           :key="index"
+      >
+        {{ item }}
+      </tspan>
+    </text>
+    <g :transform="signature">
+      <image
+        xlink:href="profile.png"
+        width="29"
+        height="29"
+        fill="#b5b5b5"
+        clip-path="url(#clip)"
+      />
+      <text
+        transform="translate(36, 17)"
+        fill="#888"
+        font-size="10"
+        font-family="SFCompactDisplay-Bold, SF Compact Display"
+        font-weight="700"
+      >
+        <tspan v-if="item.outgoing">You to</tspan>
+        <tspan v-else>From</tspan>
+        <tspan xml:space="preserve" fill="#000"> {{ item.signature }}</tspan>
+      </text>
+    </g>
+  </g>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+ export default defineComponent({
+  name: "MessageItem",
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+  },
+  data() {
+    return {
+      textArr: [],
+      signature: ""
+    };
+  },
+  computed: {
+    textFill() {
+      switch (this.item.modifier) {
+        case "ai":
+          return "#fff";
+        default:
+          return "#000";
+      }
+    },
+    bubbleFill() {
+      switch (this.item.modifier) {
+        case "sf":
+          return "#61b4f4";
+        case "ai":
+          return "#585858";
+        default:
+          return "#fff";
+      }
+    },
+    startingOffset() {
+      switch (this.item.modifier) {
+        case "sf":
+          return "translate(10, 600)";
+        case "ai":
+          return "translate(135, 600)";
+        default:
+          return "translate(20, 600)";
+      }
+    }
+  },
+  async mounted() {
+    await this.createTextBox(this.item.content, 32);
+    await this.adjustRect();
+    this.signaturePosition();
+  },
+  methods: {
+    signaturePosition() {
+      const height = Number(this.$refs.bubble.getAttribute("height"));
+      const p = -10;
+      this.signature = `translate(-10 ${height + p})`;
+    },
+    createTextBox(s, w) {
+      // return tspan elements for text with correct size
+      const wrap = (s, w) =>
+        s.replace(
+          new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, "g"),
+          "$1\n"
+        );
+      this.textArr = wrap(s, w).split("\n");
+    },
+    adjustRect() {
+      // must get dimensions of text box to fit bubble around
+      const padding = 20;
+      const bbox = this.$refs.content.getBBox();
+      const bubble = this.$refs.bubble;
+      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);
+    }
+  }
+ });
+</script>
+
+<style></style>