add event handler to input event

package.json

@@ -20,6 +20,7 @@
     "@types/ws": "^7.2.7",
     "animejs": "^3.2.0",
     "core-js": "^3.6.5",
+    "mitt": "^2.1.0",
     "speech-recorder": "^1.2.1",
     "vue": "^3.0.0-0",
     "vue-router": "^4.0.0-0",

src/components/UI/UIDetails/inputItem.vue

@@ -1,68 +1,70 @@
 <template>
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      width="500"
+  <div class="inputContainer">
+    <input
+      v-model="input"
+      type="text"
     >
-  <g
-  >
-    <rect
-      x="30"
-      y="10"
-      width="500"
-      height="100"
-      rx="20"
-      fill="#61b4f4"
-    />
-    <text
-      font-size="14"
-      font-family="SF Pro"
-    >
-      <tspan
-           dy="16"
-           x="0"
-      >
-        {{ input }}
-      </tspan>
-    </text>
-  </g>
-    </svg>
+  </div>
 </template>
 
 <script>
- import { defineComponent, ref, onUnmounted } from "vue";
- export default defineComponent({
-     name: "InputItem",
-     setup() {
-        const input = ref("");
+import { defineComponent, ref, onUnmounted, inject } from "vue";
+export default defineComponent({
+  name: "InputItem",
+  setup() {
+    const input = ref("");
+    const emitter = inject('mitt')
 
-         function handleInput(e) {
-           const inputCode = e.keyCode;
-           const cmd = String.fromCharCode(inputCode).toLowerCase();
+    // submits newSelfMessage event
+    function handleEnterKey() {
+        // does nothing if input value is empty
+        if (input.value === "") {
+            return;
+        }
 
-             switch(inputCode) {
-                case 13:
-                  console.log('enter was pressed');
-                  break;
-                case 8:
-                  console.log('delete was pressed');
-                  input.value = input.value.slice(0, -1);
-                  break;
-                 default:
-                  input.value += cmd;
-             }
-         }
+        const message = {
+            content: input.value,
+            signature: 'EnriqueH',
+            outgoing: true,
+            modifier: "sf",
+            imgURL: '/test/path',
+            id: null
+        };
+        // fire event with message payload
+        emitter.emit('newSelfMessage', message);
+    }
 
-         window.addEventListener("keydown", handleInput);
+    function handleInput(e) {
+      const inputCode = e.keyCode;
+      const cmd = String.fromCharCode(inputCode).toLowerCase();
+        switch(inputCode) {
+          case 13:
+            handleEnterKey();
+            break;
+          case 8:
+            input.value = input.value.slice(0, -1);
+            break;
+          default:
+            input.value += cmd;
+        }
+    }
 
-         onUnmounted(() => {
-            window.removeEventListener("keydown", handleInput);
-         })
+    window.addEventListener("keydown", handleInput);
 
-         return {
-             input
-         }
-     }
- })
+    onUnmounted(() => {
+      window.removeEventListener("keydown", handleInput);
+    });
+
+    return {
+      input
+    };
+  }
+})
 </script>
+
+<style lang="scss" scoped>
+ .inputContainer {
+
+    
+ }
+</style>

src/composables/useTextBox.ts

@@ -0,0 +1,31 @@
+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
+  };
+}

src/main.ts

@@ -2,10 +2,17 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+
+// animation library
 import anime from "animejs";
 
+// event handler library
+import mitt from "mitt";
+const emitter = mitt();
+
 createApp(App)
   .use(store)
   .use(router)
   .provide("animejs", anime)
+  .provide("mitt", emitter)
   .mount("#app");

src/views/home/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
- import { defineComponent } from 'vue';
+ import { defineComponent, inject } from 'vue';
  // import UIindex from "@/components/UI/index.vue";
  // import Microphone from "@/components/microphone/index.vue";
  import InputItem from "@/components/UI/UIDetails/inputItem.vue";
@@ -14,6 +14,10 @@
  export default defineComponent({
      name: "HomeIndex",
      components: { InputItem },
+     setup() {
+         const emitter: any = inject("mitt");
+         emitter.on('newSelfMessage', (payload: any) => console.log('foo', payload) )
+     }
  });
 
 </script>

yarn.lock

@@ -8569,6 +8569,11 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
+mitt@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
+  integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"