fix ts messageItem

crate/src/utils.rs

@@ -0,0 +1,10 @@
+pub fn set_panic_hook() {
+    // When the `console_error_panic_hook` feature is enabled, we can call the
+    // `set_panic_hook` function at least once during initialization, and then
+    // we will get better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    #[cfg(feature = "console_error_panic_hook")]
+    console_error_panic_hook::set_once();
+}

src/components/UI/UIDetails/messageItem.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed, onMounted, ref } from 'vue';
  export default defineComponent({
   name: "MessageItem",
   props: {
@@ -63,73 +63,101 @@ import { defineComponent } from 'vue';
       required: true
     },
   },
-  data() {
+  setup(props) {
-    return {
+      interface ProtectedRef {
-      textArr: [],
+        readonly el: SVGElement | HTMLElement;
-      signature: ""
+        reference: any;
-    };
+        height: number | null;
-  },
-  computed: {
-    textFill() {
-      switch (this.item.modifier) {
-        case "ai":
-          return "#fff";
-        default:
-          return "#000";
       }
-    },
+      let textArr: string[] = [];
-    bubbleFill() {
+      let signature = "";
-      switch (this.item.modifier) {
+      const bubble: ProtectedRef = {
-        case "sf":
+        el: document.createElement("rect"),
-          return "#61b4f4";
+        reference:  ref(null),
-        case "ai":
+        height: 0,
-          return "#585858";
+      };
-        default:
+      const content: ProtectedRef = {
-          return "#fff";
+        el: document.createElement("text"),
+        reference:  ref(null),
+        height: 0,
       }
-    },
+
-    startingOffset() {
+      const textFill = computed(() => {
-      switch (this.item.modifier) {
+        switch (props.item.modifier) {
-        case "sf":
+          case "ai":
-          return "translate(10, 600)";
+            return "#fff";
-        case "ai":
+          default:
-          return "translate(135, 600)";
+            return "#000";
-        default:
+        }
-          return "translate(20, 600)";
+      });
+
+      const bubbleFill = computed(() => {
+        switch (props.item.modifier) {
+          case "sf":
+            return "#61b4f4";
+          case "ai":
+            return "#585858";
+          default:
+            return "#fff";
+        }
+      });
+
+      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.reference.value.getAttribute("height") !== null) {
+            const height = Number(bubble.reference.value.getAttribute("height"));
+            const p = -10;
+            signature = `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.reference.value.getBBox();
+        bubble.reference.value.setAttribute("x", bbox.x - padding);
+        bubble.reference.value.setAttribute("y", bbox.y - padding);
+        bubble.reference.value.setAttribute("width", bbox.width + 2 * padding);
+        bubble.reference.value.setAttribute("height", bbox.height + 2 * padding);
+      }
+
+      onMounted(async () => {
+        await createTextBox(props.item.content, 32);
+        await adjustRect();
+        signaturePosition();
+      })
+
+      return {
+          bubble,
+          textFill,
+          bubbleFill,
+          startingOffset,
+          signaturePosition,
+          textArr,
+          signature
+      }
+
   },
-  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>
 

src/components/UI/index.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, ref, onMounted } from "vue";
+import { defineComponent, inject, onMounted } from "vue";
 // import MessageItem from './UIDetails/messageItem.vue';
 import Messages from "./UIDetails/messages";
  export default defineComponent({
@@ -100,12 +100,12 @@ import Messages from "./UIDetails/messages";
            x: null,
            y: null
        }
-       const renderMsg = (i: number) => {
+       function renderMsg(i: number): void {
          setTimeout(() => {
            renderArr.push(messages[i]);
          }, 2000);
        }
-       const runAnim = () => {
+       function runAnim(): void {
          for (let i = 0; i < messages.length; i++) {
              renderMsg(i);
          }

tsconfig.json

@@ -11,6 +11,7 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
+    "typeRoots": ["./node_modules/@types"],
     "types": [
       "webpack-env",
       "jest"