add event handler to input event

diff --git a/package.json b/package.json
index 9c86aab6c020c12eba3a16c4cb5521cf0df5c1a2..40f85e254fd7a3757adbc9662dc9196b48c10961 100644 (file)
--- a/package.json
+++ b/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",

diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue
index 338c70750e0ebd821d730bde03d1ade72ec8ef29..87c9380beead02962941d6e1d77f43df22d766d2 100644 (file)
--- a/src/components/UI/UIDetails/inputItem.vue
+++ b/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')
+
+    // submits newSelfMessage event
+    function handleEnterKey() {
+        // does nothing if input value is empty
+        if (input.value === "") {
+            return;
+        }
 
-         function handleInput(e) {
-           const inputCode = e.keyCode;
-           const cmd = String.fromCharCode(inputCode).toLowerCase();
+        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);
+    }
 
-             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;
-             }
-         }
+    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;
+        }
+    }
 
-         window.addEventListener("keydown", handleInput);
+    window.addEventListener("keydown", handleInput);
 
-         onUnmounted(() => {
-            window.removeEventListener("keydown", handleInput);
-         })
+    onUnmounted(() => {
+      window.removeEventListener("keydown", handleInput);
+    });
 
-         return {
-             input
-         }
-     }
- })
+    return {
+      input
+    };
+  }
+})
 </script>
+
+<style lang="scss" scoped>
+ .inputContainer {
+
+    
+ }
+</style>

diff --git a/src/composables/useTextBox.ts b/src/composables/useTextBox.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e10821fe9bb9ab643d0f50865dc8accdcd1634b8 100644 (file)
--- a/src/composables/useTextBox.ts
+++ b/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
+  };
+}

diff --git a/src/main.ts b/src/main.ts
index a04047e9dbdc0a6814174854ecd4edce9267b359..bc2fa9d5e7779bc93c8e6328de6d9c808f8d653d 100644 (file)
--- a/src/main.ts
+++ b/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");

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index d20f30864bbeb268f95a50f991ff8339717c693e..dc8b768dc98e10901cb59e3af2ab7f6ed73f46aa 100644 (file)
--- a/src/views/home/index.vue
+++ b/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>

diff --git a/yarn.lock b/yarn.lock
index 8d2a5a4bd827486acff4d5deec62c3f1bc372131..82f9910043ffd18ea4520fc6a49db1cb83f3ebd7 100644 (file)
--- a/yarn.lock
+++ b/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"