From 888651b4d712c364dee51ea3978ff0f2ad808b77 Mon Sep 17 00:00:00 2001 From: riqo Date: Mon, 8 Mar 2021 09:48:01 -0600 Subject: [PATCH] minor improvements to inputItem component --- src/components/inputItem/inputController.ts | 74 +++++++++++++++---- .../keyBoardMaps/keyboardCharMap.ts | 0 .../keyBoardMaps/keyboardNameMap.ts | 0 .../keyDownHandler/useKeyDownHandler.ts | 62 ---------------- 4 files changed, 58 insertions(+), 78 deletions(-) rename src/{modules/keyDownHandler => components/inputItem}/keyBoardMaps/keyboardCharMap.ts (100%) rename src/{modules/keyDownHandler => components/inputItem}/keyBoardMaps/keyboardNameMap.ts (100%) delete mode 100644 src/modules/keyDownHandler/useKeyDownHandler.ts diff --git a/src/components/inputItem/inputController.ts b/src/components/inputItem/inputController.ts index d9aeb51..dd9f62d 100644 --- a/src/components/inputItem/inputController.ts +++ b/src/components/inputItem/inputController.ts @@ -6,35 +6,76 @@ */ import { ref, watch, onUnmounted, onMounted } from "vue"; -import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler"; import useMitt from "@/modules/mitt"; import { useIpc } from '@/modules/ipc'; +import keyboardNameMap from "./keyBoardMaps/keyboardNameMap"; +import keyboardCharMap from "./keyBoardMaps/keyboardCharMap"; + +let textInput: HTMLInputElement | null; export default function useInputController() { - const isRecording = ref(false); - const isTyping = ref(false); + const { emitter } = useMitt(); const { post } = useIpc(); + const isRecording = ref(false); + const isTyping = ref(false); + const input = ref(""); // send message on ENTER - const enterCallback = (input: string) => { + const onEnter = () => { const message = { audio: 0, - text: input + text: input.value }; // trigger send animation emitter.emit("animate-send"); // send message to backend - if (input) post('message', message); + if (input.value) post('message', message); } - const { keyDownHandler, input } = useKeyDownHandler(enterCallback); + // update input on keydown event & listen for special commands. + const onKeyDown = (e: KeyboardEvent) => { + if (textInput) textInput.focus(); + + // keyboardCharMap is an array of arrays, with each inner + // array having 2 columns - un-shifted, and shifted values. + // iCol = 0 is the un-shifted value, while iCol=1 is the shifted value. + // See the "keyboardCharMap" module for possible keys. + // MODIFY keyboardCharMap to suit your needs if you want + // more/less/different characters to be considered "printable". + let iCol = 0; + if (e.shiftKey) { + iCol = 1; + } + const ch = keyboardCharMap[e.keyCode][iCol]; + + // Optionally do things with non-printables, + // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc. + // See the arrary "keyboardNameMap" module for possible keys. + const cmd = keyboardNameMap[e.keyCode]; + switch (cmd) { + case "ENTER": + onEnter(); + if (textInput) textInput.value = '' + input.value = " "; + break; + case "BACK_SPACE": + input.value = input.value.slice(0, -1); + break; + case "ESCAPE": + if (textInput) textInput.value = '' + input.value = ""; + break; + default: + input.value += ch; + } + } - // stops stream recording on space key up - function keyupHandler(e: any) { + // stops stream recording on space key up event. + const onKeyUp = (e: KeyboardEvent) => { if (e.key === " " && isRecording.value) { isRecording.value = false; @@ -43,18 +84,19 @@ export default function useInputController() { } } - onMounted(async () => { - // add window event keyboard listeners - window.addEventListener("keydown", keyDownHandler); - window.addEventListener('keyup', keyupHandler); + onMounted(() => { + textInput = document.getElementById('textInput') as HTMLInputElement; + // add window event keyboard listeners + window.addEventListener("keydown", onKeyDown); + window.addEventListener('keyup', onKeyUp); }) onUnmounted(() => { - window.removeEventListener("keydown", keyDownHandler); - window.removeEventListener("keyup", keyupHandler); + window.removeEventListener("keydown", onKeyDown); + window.removeEventListener("keyup", onKeyUp); }); - // determine whether to render text or audio based one the keyboard input + // watch keyboard input & update current state. watch(input, (input, prevInput) => { if (prevInput !== "" || prevInput.length > 0) { if (!isRecording.value) { diff --git a/src/modules/keyDownHandler/keyBoardMaps/keyboardCharMap.ts b/src/components/inputItem/keyBoardMaps/keyboardCharMap.ts similarity index 100% rename from src/modules/keyDownHandler/keyBoardMaps/keyboardCharMap.ts rename to src/components/inputItem/keyBoardMaps/keyboardCharMap.ts diff --git a/src/modules/keyDownHandler/keyBoardMaps/keyboardNameMap.ts b/src/components/inputItem/keyBoardMaps/keyboardNameMap.ts similarity index 100% rename from src/modules/keyDownHandler/keyBoardMaps/keyboardNameMap.ts rename to src/components/inputItem/keyBoardMaps/keyboardNameMap.ts diff --git a/src/modules/keyDownHandler/useKeyDownHandler.ts b/src/modules/keyDownHandler/useKeyDownHandler.ts deleted file mode 100644 index 65c4f2e..0000000 --- a/src/modules/keyDownHandler/useKeyDownHandler.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { ref, onMounted } from "vue"; -import keyboardNameMap from "./keyBoardMaps/keyboardNameMap"; -import keyboardCharMap from "./keyBoardMaps/keyboardCharMap"; - -interface KeyDownEvent { - keyCode: number; - shiftKey: boolean; -} - -// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a -// scanner attached via USB -export default function useKeyDownHandler(enterCallback?: (input: string) => void) { - - const input = ref(""); - - let textInput: HTMLInputElement | null; - - onMounted(() => { - textInput = document.getElementById('textInput') as HTMLInputElement; - }) - - function keyDownHandler(e: KeyDownEvent) { - // keyboardCharMap is an array of arrays, with each inner - // array having 2 columns - un-shifted, and shifted values. - // iCol = 0 is the un-shifted value, while iCol=1 is the shifted value. - // See the "keyboardCharMap", below, for printable characters. - // MODIFY keyboardCharMap to suit your needs if you want - // more/less/different characters to be considered "printable". - if (textInput) textInput.focus() - - let iCol = 0; - if (e.shiftKey) { - iCol = 1; - } - const ch = keyboardCharMap[e.keyCode][iCol]; - // Optionally do things with non-printables, - // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc. - // See the arrary "keyboardNameMap", below, for possible keys. - const cmd = keyboardNameMap[e.keyCode]; - switch (cmd) { - case "ENTER": - if (enterCallback) enterCallback(input.value); - if (textInput) textInput.value = '' - input.value = " "; - break; - case "BACK_SPACE": - input.value = input.value.slice(0, -1); - break; - case "ESCAPE": - if (textInput) textInput.value = '' - input.value = ""; - break; - default: - input.value += ch; - } - } - - return { - keyDownHandler, - input - }; -} -- 2.43.0