From b27b21d5d641d7fd1ed80a6dbab79bdbff664a3f Mon Sep 17 00:00:00 2001 From: riqo Date: Wed, 21 Oct 2020 09:39:34 -0500 Subject: [PATCH 01/15] initial input item setp --- src/components/UI/UIDetails/inputItem.vue | 42 +++++++++++++++++++++++ src/views/home/index.vue | 14 ++++---- 2 files changed, 50 insertions(+), 6 deletions(-) create mode 100644 src/components/UI/UIDetails/inputItem.vue diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue new file mode 100644 index 0000000..5eb583c --- /dev/null +++ b/src/components/UI/UIDetails/inputItem.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 11130b8..d20f308 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,17 +1,19 @@ From 21ff62e2066f526c074029781b215d0b4af7ba7a Mon Sep 17 00:00:00 2001 From: riqo Date: Wed, 21 Oct 2020 16:43:10 -0500 Subject: [PATCH 02/15] add input item component --- src/background.ts | 40 +++++++++++------------ src/components/UI/UIDetails/inputItem.vue | 32 ++++++++++++++++-- src/composables/useMessageItemComp.ts | 39 ---------------------- src/composables/useTextBox.ts | 0 4 files changed, 49 insertions(+), 62 deletions(-) delete mode 100644 src/composables/useMessageItemComp.ts create mode 100644 src/composables/useTextBox.ts diff --git a/src/background.ts b/src/background.ts index b461c75..9204046 100644 --- a/src/background.ts +++ b/src/background.ts @@ -8,26 +8,26 @@ import * as path from "path"; import { SpeechRecorder } from "speech-recorder"; import WebSocket from "ws"; -const ws = new WebSocket("ws://localhost:8080"); -ws.on("open", function open() { - ws.send("hello fro client"); -}); -ws.on("message", (message: any) => { - console.log("received message", message); -}); - -const recorder = new SpeechRecorder(); - -recorder.start({ - onAudio: (audio: object, speech: boolean) => { - if (speech) { - console.log(audio); - ws.send(audio); - } - console.log("recording"); - // writeStream.write(audio); - } -}); +// const ws = new WebSocket("ws://localhost:8080"); +// ws.on("open", function open() { +// ws.send("hello fro client"); +// }); +// ws.on("message", (message: any) => { +// console.log("received message", message); +// }); +// +// const recorder = new SpeechRecorder(); +// +// recorder.start({ +// onAudio: (audio: object, speech: boolean) => { +// if (speech) { +// console.log(audio); +// ws.send(audio); +// } +// console.log("recording"); +// // writeStream.write(audio); +// } +// }); // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue index 5eb583c..338c707 100644 --- a/src/components/UI/UIDetails/inputItem.vue +++ b/src/components/UI/UIDetails/inputItem.vue @@ -1,5 +1,33 @@ diff --git a/src/composables/useMessageItemComp.ts b/src/composables/useMessageItemComp.ts deleted file mode 100644 index 54d7f2c..0000000 --- a/src/composables/useMessageItemComp.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { computed } from "vue"; - -export default function useMessageItemComp(modifier: string): string { - const textFill = computed(() => { - switch (modifier) { - case "ai": - return "#fff"; - default: - return "#000"; - } - }); - - const bubbleFill = computed(() => { - switch (modifier) { - case "sf": - return "#61b4f4"; - case "ai": - return "#585858"; - default: - return "#fff"; - } - }); - - const startingOffset = computed(() => { - switch (modifier) { - case "sf": - return "translate(10, 600)"; - case "ai": - return "translate(135, 600)"; - default: - return "translate(20, 600)"; - } - }); - return { - textFill, - bubbleFill, - startingOffset - }; -} diff --git a/src/composables/useTextBox.ts b/src/composables/useTextBox.ts new file mode 100644 index 0000000..e69de29 From 07cfddab1de47e4008942191483e10aee9f789df Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Sat, 24 Oct 2020 12:31:51 -0500 Subject: [PATCH 03/15] add event handler to input event --- package.json | 1 + src/components/UI/UIDetails/inputItem.vue | 116 +++++++++++----------- src/composables/useTextBox.ts | 31 ++++++ src/main.ts | 7 ++ src/views/home/index.vue | 6 +- yarn.lock | 5 + 6 files changed, 108 insertions(+), 58 deletions(-) diff --git a/package.json b/package.json index 9c86aab..40f85e2 100644 --- 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 338c707..87c9380 100644 --- a/src/components/UI/UIDetails/inputItem.vue +++ b/src/components/UI/UIDetails/inputItem.vue @@ -1,68 +1,70 @@ + + diff --git a/src/composables/useTextBox.ts b/src/composables/useTextBox.ts index e69de29..e10821f 100644 --- 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 a04047e..bc2fa9d 100644 --- 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 d20f308..dc8b768 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -6,7 +6,7 @@ diff --git a/yarn.lock b/yarn.lock index 8d2a5a4..82f9910 100644 --- 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" From dc88d5b706780723595b85b341d89d106c92a6be Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Sat, 24 Oct 2020 19:34:20 -0500 Subject: [PATCH 04/15] add keydownHandler --- src/components/UI/UIDetails/inputItem.vue | 87 +++- src/composables/useKeyDownHandler.ts | 565 ++++++++++++++++++++++ 2 files changed, 630 insertions(+), 22 deletions(-) create mode 100644 src/composables/useKeyDownHandler.ts diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue index 87c9380..82c7472 100644 --- a/src/components/UI/UIDetails/inputItem.vue +++ b/src/components/UI/UIDetails/inputItem.vue @@ -1,19 +1,50 @@ diff --git a/src/composables/useKeyDownHandler.ts b/src/composables/useKeyDownHandler.ts new file mode 100644 index 0000000..d37034c --- /dev/null +++ b/src/composables/useKeyDownHandler.ts @@ -0,0 +1,565 @@ +import { ref } from "vue"; +// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a +// scanner attached via USB +export default function useKeyDownHandler() { + function keyDownHandler(e: any) { + const input = ref(""); + // 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". + 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]; + console.log("cmd: '" + cmd + "'"); + switch (cmd) { + case "ENTER": + console.log("Enter was hit"); + break; + case "DELETE": + console.log("DELETE WAS HIT"); + break; + case "ESCAPE": + console.log("escape was clicked"); + break; + default: + input.value += cmd; + console.log(cmd); + // ...and so on... + } + } + return { + keyDownHandler + }; +} + +// names of known key codes (0-255) +var keyboardNameMap = [ + "", // [0] + "", // [1] + "", // [2] + "CANCEL", // [3] + "", // [4] + "", // [5] + "HELP", // [6] + "", // [7] + "BACK_SPACE", // [8] + "TAB", // [9] + "", // [10] + "", // [11] + "CLEAR", // [12] + "ENTER", // [13] + "ENTER_SPECIAL", // [14] + "", // [15] + "SHIFT", // [16] + "CONTROL", // [17] + "ALT", // [18] + "PAUSE", // [19] + "CAPS_LOCK", // [20] + "KANA", // [21] + "EISU", // [22] + "JUNJA", // [23] + "FINAL", // [24] + "HANJA", // [25] + "", // [26] + "ESCAPE", // [27] + "CONVERT", // [28] + "NONCONVERT", // [29] + "ACCEPT", // [30] + "MODECHANGE", // [31] + "SPACE", // [32] + "PAGE_UP", // [33] + "PAGE_DOWN", // [34] + "END", // [35] + "HOME", // [36] + "LEFT", // [37] + "UP", // [38] + "RIGHT", // [39] + "DOWN", // [40] + "SELECT", // [41] + "PRINT", // [42] + "EXECUTE", // [43] + "PRINTSCREEN", // [44] + "INSERT", // [45] + "DELETE", // [46] + "", // [47] + "0", // [48] + "1", // [49] + "2", // [50] + "3", // [51] + "4", // [52] + "5", // [53] + "6", // [54] + "7", // [55] + "8", // [56] + "9", // [57] + "COLON", // [58] + "SEMICOLON", // [59] + "LESS_THAN", // [60] + "EQUALS", // [61] + "GREATER_THAN", // [62] + "QUESTION_MARK", // [63] + "AT", // [64] + "A", // [65] + "B", // [66] + "C", // [67] + "D", // [68] + "E", // [69] + "F", // [70] + "G", // [71] + "H", // [72] + "I", // [73] + "J", // [74] + "K", // [75] + "L", // [76] + "M", // [77] + "N", // [78] + "O", // [79] + "P", // [80] + "Q", // [81] + "R", // [82] + "S", // [83] + "T", // [84] + "U", // [85] + "V", // [86] + "W", // [87] + "X", // [88] + "Y", // [89] + "Z", // [90] + "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac) + "", // [92] + "CONTEXT_MENU", // [93] + "", // [94] + "SLEEP", // [95] + "NUMPAD0", // [96] + "NUMPAD1", // [97] + "NUMPAD2", // [98] + "NUMPAD3", // [99] + "NUMPAD4", // [100] + "NUMPAD5", // [101] + "NUMPAD6", // [102] + "NUMPAD7", // [103] + "NUMPAD8", // [104] + "NUMPAD9", // [105] + "MULTIPLY", // [106] + "ADD", // [107] + "SEPARATOR", // [108] + "SUBTRACT", // [109] + "DECIMAL", // [110] + "DIVIDE", // [111] + "F1", // [112] + "F2", // [113] + "F3", // [114] + "F4", // [115] + "F5", // [116] + "F6", // [117] + "F7", // [118] + "F8", // [119] + "F9", // [120] + "F10", // [121] + "F11", // [122] + "F12", // [123] + "F13", // [124] + "F14", // [125] + "F15", // [126] + "F16", // [127] + "F17", // [128] + "F18", // [129] + "F19", // [130] + "F20", // [131] + "F21", // [132] + "F22", // [133] + "F23", // [134] + "F24", // [135] + "", // [136] + "", // [137] + "", // [138] + "", // [139] + "", // [140] + "", // [141] + "", // [142] + "", // [143] + "NUM_LOCK", // [144] + "SCROLL_LOCK", // [145] + "WIN_OEM_FJ_JISHO", // [146] + "WIN_OEM_FJ_MASSHOU", // [147] + "WIN_OEM_FJ_TOUROKU", // [148] + "WIN_OEM_FJ_LOYA", // [149] + "WIN_OEM_FJ_ROYA", // [150] + "", // [151] + "", // [152] + "", // [153] + "", // [154] + "", // [155] + "", // [156] + "", // [157] + "", // [158] + "", // [159] + "CIRCUMFLEX", // [160] + "EXCLAMATION", // [161] + "DOUBLE_QUOTE", // [162] + "HASH", // [163] + "DOLLAR", // [164] + "PERCENT", // [165] + "AMPERSAND", // [166] + "UNDERSCORE", // [167] + "OPEN_PAREN", // [168] + "CLOSE_PAREN", // [169] + "ASTERISK", // [170] + "PLUS", // [171] + "PIPE", // [172] + "HYPHEN_MINUS", // [173] + "OPEN_CURLY_BRACKET", // [174] + "CLOSE_CURLY_BRACKET", // [175] + "TILDE", // [176] + "", // [177] + "", // [178] + "", // [179] + "", // [180] + "VOLUME_MUTE", // [181] + "VOLUME_DOWN", // [182] + "VOLUME_UP", // [183] + "", // [184] + "", // [185] + "SEMICOLON", // [186] + "EQUALS", // [187] + "COMMA", // [188] + "MINUS", // [189] + "PERIOD", // [190] + "SLASH", // [191] + "BACK_QUOTE", // [192] + "", // [193] + "", // [194] + "", // [195] + "", // [196] + "", // [197] + "", // [198] + "", // [199] + "", // [200] + "", // [201] + "", // [202] + "", // [203] + "", // [204] + "", // [205] + "", // [206] + "", // [207] + "", // [208] + "", // [209] + "", // [210] + "", // [211] + "", // [212] + "", // [213] + "", // [214] + "", // [215] + "", // [216] + "", // [217] + "", // [218] + "OPEN_BRACKET", // [219] + "BACK_SLASH", // [220] + "CLOSE_BRACKET", // [221] + "QUOTE", // [222] + "", // [223] + "META", // [224] + "ALTGR", // [225] + "", // [226] + "WIN_ICO_HELP", // [227] + "WIN_ICO_00", // [228] + "", // [229] + "WIN_ICO_CLEAR", // [230] + "", // [231] + "", // [232] + "WIN_OEM_RESET", // [233] + "WIN_OEM_JUMP", // [234] + "WIN_OEM_PA1", // [235] + "WIN_OEM_PA2", // [236] + "WIN_OEM_PA3", // [237] + "WIN_OEM_WSCTRL", // [238] + "WIN_OEM_CUSEL", // [239] + "WIN_OEM_ATTN", // [240] + "WIN_OEM_FINISH", // [241] + "WIN_OEM_COPY", // [242] + "WIN_OEM_AUTO", // [243] + "WIN_OEM_ENLW", // [244] + "WIN_OEM_BACKTAB", // [245] + "ATTN", // [246] + "CRSEL", // [247] + "EXSEL", // [248] + "EREOF", // [249] + "PLAY", // [250] + "ZOOM", // [251] + "", // [252] + "PA1", // [253] + "WIN_OEM_CLEAR", // [254] + "" // [255] +]; + +// This has the UnShifted and Shifted characters that each key maps to +// Ones that are to be ignored for character input are empty. +var keyboardCharMap = [ + ["", ""], // [0] + ["", ""], // [1] + ["", ""], // [2] + ["", ""], // [3] + ["", ""], // [4] + ["", ""], // [5] + ["", ""], // [6] + ["", ""], // [7] + ["", ""], // [8] + ["", ""], // [9] + ["", ""], // [10] + ["", ""], // [11] + ["", ""], // [12] + ["\r", "\r"], // [13] - MOST control characters are ignored. This one (Carriage Return, or "Enter") is significant! + ["", ""], // [14] + ["", ""], // [15] + ["", ""], // [16] + ["", ""], // [17] + ["", ""], // [18] + ["", ""], // [19] + ["", ""], // [20] + ["", ""], // [21] + ["", ""], // [22] + ["", ""], // [23] + ["", ""], // [24] + ["", ""], // [25] + ["", ""], // [26] + ["", ""], // [27] + ["", ""], // [28] + ["", ""], // [29] + ["", ""], // [30] + ["", ""], // [31] + [" ", " "], // [32] // SPACE! Don't "clean it up" and remove the space! + ["", ""], // [33] + ["", ""], // [34] + ["", ""], // [35] + ["", ""], // [36] + ["", ""], // [37] + ["", ""], // [38] + ["", ""], // [39] + ["", ""], // [40] + ["", ""], // [41] + ["", ""], // [42] + ["", ""], // [43] + ["", ""], // [44] + ["", ""], // [45] + ["", ""], // [46] + ["", ""], // [47] + ["0", ")"], // [48] + ["1", "!"], // [49] + ["2", "@"], // [50] + ["3", "#"], // [51] + ["4", "$"], // [52] + ["5", "%"], // [53] + ["6", "^"], // [54] + ["7", "&"], // [55] + ["8", "*"], // [56] + ["9", "("], // [57] + ["", ""], // [58] + [";", ":"], // [59] + ["<", ""], // [60] + ["=", ""], // [61] + [">", ""], // [62] + ["?", ""], // [63] shifted; else "/" + ["", ""], // [64] + ["a", "A"], // [65] + ["b", "B"], // [66] + ["c", "C"], // [67] + ["d", "D"], // [68] + ["e", "E"], // [69] + ["f", "F"], // [70] + ["g", "G"], // [71] + ["h", "H"], // [72] + ["i", "I"], // [73] + ["j", "J"], // [74] + ["k", "K"], // [75] + ["l", "L"], // [76] + ["m", "M"], // [77] + ["n", "N"], // [78] + ["o", "O"], // [79] + ["p", "P"], // [80] + ["q", "Q"], // [81] + ["r", "R"], // [82] + ["s", "S"], // [83] + ["t", "T"], // [84] + ["u", "U"], // [85] + ["v", "V"], // [86] + ["w", "W"], // [87] + ["x", "X"], // [88] + ["y", "Y"], // [89] + ["z", "Z"], // [90] + ["", ""], // [91] Windows Key (Windows) or Command Key (Mac) + ["", ""], // [92] + ["", ""], // [93] + ["", ""], // [94] + ["", ""], // [95] + // Number Keypad Entries... + ["0", ""], // [96] + ["1", ""], // [97] + ["2", ""], // [98] + ["3", ""], // [99] + ["4", ""], // [100] + ["5", ""], // [101] + ["6", ""], // [102] + ["7", ""], // [103] + ["8", ""], // [104] + ["9", ""], // [105] + ["*", ""], // [106] + ["+", ""], // [107] + ["", ""], // [108] + ["-", ""], // [109] + [".", ""], // [110] + ["/", ""], // [111] + + ["", ""], // [112] + ["", ""], // [113] + ["", ""], // [114] + ["", ""], // [115] + ["", ""], // [116] + ["", ""], // [117] + ["", ""], // [118] + ["", ""], // [119] + ["", ""], // [120] + ["", ""], // [121] + ["", ""], // [122] + ["", ""], // [123] + ["", ""], // [124] + ["", ""], // [125] + ["", ""], // [126] + ["", ""], // [127] + ["", ""], // [128] + ["", ""], // [129] + ["", ""], // [130] + ["", ""], // [131] + ["", ""], // [132] + ["", ""], // [133] + ["", ""], // [134] + ["", ""], // [135] + ["", ""], // [136] + ["", ""], // [137] + ["", ""], // [138] + ["", ""], // [139] + ["", ""], // [140] + ["", ""], // [141] + ["", ""], // [142] + ["", ""], // [143] + ["", ""], // [144] + ["", ""], // [145] + ["", ""], // [146] + ["", ""], // [147] + ["", ""], // [148] + ["", ""], // [149] + ["", ""], // [150] + ["", ""], // [151] + ["", ""], // [152] + ["", ""], // [153] + ["", ""], // [154] + ["", ""], // [155] + ["", ""], // [156] + ["", ""], // [157] + ["", ""], // [158] + ["", ""], // [159] + ["", ""], // [160] + ["", ""], // [161] + ["", ""], // [162] + ["", ""], // [163] + ["", ""], // [164] + ["", ""], // [165] + ["", ""], // [166] + ["", ""], // [167] + ["", ""], // [168] + ["", ""], // [169] + ["", ""], // [170] + ["", ""], // [171] + ["", ""], // [172] + ["", ""], // [173] + ["", ""], // [174] + ["", ""], // [175] + ["", ""], // [176] + ["", ""], // [177] + ["", ""], // [178] + ["", ""], // [179] + ["", ""], // [180] + ["", ""], // [181] + ["", ""], // [182] + ["", ""], // [183] + ["", ""], // [184] + ["", ""], // [185] + ["", ""], // [186] + ["=", "+"], // [187] + [",", "<"], // [188] + ["-", "_"], // [189] + [".", ">"], // [190] + ["/", "?"], // [191] + ["`", "~"], // [192] + ["", ""], // [193] + ["", ""], // [194] + ["", ""], // [195] + ["", ""], // [196] + ["", ""], // [197] + ["", ""], // [198] + ["", ""], // [199] + ["", ""], // [200] + ["", ""], // [201] + ["", ""], // [202] + ["", ""], // [203] + ["", ""], // [204] + ["", ""], // [205] + ["", ""], // [206] + ["", ""], // [207] + ["", ""], // [208] + ["", ""], // [209] + ["", ""], // [210] + ["", ""], // [211] + ["", ""], // [212] + ["", ""], // [213] + ["", ""], // [214] + ["", ""], // [215] + ["", ""], // [216] + ["", ""], // [217] + ["", ""], // [218] + ["[", "{"], // [219] + ["\\", "|"], // [220] + ["]", "}"], // [221] + ["'", '"'], // [222] + ["", ""], // [223] + ["", ""], // [224] + ["", ""], // [225] + ["", ""], // [226] + ["", ""], // [227] + ["", ""], // [228] + ["", ""], // [229] + ["", ""], // [230] + ["", ""], // [231] + ["", ""], // [232] + ["", ""], // [233] + ["", ""], // [234] + ["", ""], // [235] + ["", ""], // [236] + ["", ""], // [237] + ["", ""], // [238] + ["", ""], // [239] + ["", ""], // [240] + ["", ""], // [241] + ["", ""], // [242] + ["", ""], // [243] + ["", ""], // [244] + ["", ""], // [245] + ["", ""], // [246] + ["", ""], // [247] + ["", ""], // [248] + ["", ""], // [249] + ["", ""], // [250] + ["", ""], // [251] + ["", ""], // [252] + ["", ""], // [253] + ["", ""], // [254] + ["", ""] // [255] +]; From 908750eaa669179de7ebf64911ba6d389d7857e2 Mon Sep 17 00:00:00 2001 From: Enrique Hernandez Date: Sat, 24 Oct 2020 20:02:48 -0500 Subject: [PATCH 05/15] refactor input item --- src/components/UI/UIDetails/inputItem.vue | 58 +---------------------- src/composables/useKeyDownHandler.ts | 35 ++++++++++---- 2 files changed, 29 insertions(+), 64 deletions(-) diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue index 82c7472..3a36fb4 100644 --- a/src/components/UI/UIDetails/inputItem.vue +++ b/src/components/UI/UIDetails/inputItem.vue @@ -20,70 +20,16 @@ > - - -
- -
- - diff --git a/src/composables/keyDownHandler/keyboardMaps/keyboardCharMap.ts b/src/composables/keyDownHandler/keyboardMaps/keyboardCharMap.ts new file mode 100644 index 0000000..102e9c3 --- /dev/null +++ b/src/composables/keyDownHandler/keyboardMaps/keyboardCharMap.ts @@ -0,0 +1,263 @@ +// This has the UnShifted and Shifted characters that each key maps to +// Ones that are to be ignored for character input are empty. +const keyboardCharMap = [ + ["", ""], // [0] + ["", ""], // [1] + ["", ""], // [2] + ["", ""], // [3] + ["", ""], // [4] + ["", ""], // [5] + ["", ""], // [6] + ["", ""], // [7] + ["", ""], // [8] + ["", ""], // [9] + ["", ""], // [10] + ["", ""], // [11] + ["", ""], // [12] + ["\r", "\r"], // [13] - MOST control characters are ignored. This one (Carriage Return, or "Enter") is significant! + ["", ""], // [14] + ["", ""], // [15] + ["", ""], // [16] + ["", ""], // [17] + ["", ""], // [18] + ["", ""], // [19] + ["", ""], // [20] + ["", ""], // [21] + ["", ""], // [22] + ["", ""], // [23] + ["", ""], // [24] + ["", ""], // [25] + ["", ""], // [26] + ["", ""], // [27] + ["", ""], // [28] + ["", ""], // [29] + ["", ""], // [30] + ["", ""], // [31] + [" ", " "], // [32] // SPACE! Don't "clean it up" and remove the space! + ["", ""], // [33] + ["", ""], // [34] + ["", ""], // [35] + ["", ""], // [36] + ["", ""], // [37] + ["", ""], // [38] + ["", ""], // [39] + ["", ""], // [40] + ["", ""], // [41] + ["", ""], // [42] + ["", ""], // [43] + ["", ""], // [44] + ["", ""], // [45] + ["", ""], // [46] + ["", ""], // [47] + ["0", ")"], // [48] + ["1", "!"], // [49] + ["2", "@"], // [50] + ["3", "#"], // [51] + ["4", "$"], // [52] + ["5", "%"], // [53] + ["6", "^"], // [54] + ["7", "&"], // [55] + ["8", "*"], // [56] + ["9", "("], // [57] + ["", ""], // [58] + [";", ":"], // [59] + ["<", ""], // [60] + ["=", ""], // [61] + [">", ""], // [62] + ["?", ""], // [63] shifted; else "/" + ["", ""], // [64] + ["a", "A"], // [65] + ["b", "B"], // [66] + ["c", "C"], // [67] + ["d", "D"], // [68] + ["e", "E"], // [69] + ["f", "F"], // [70] + ["g", "G"], // [71] + ["h", "H"], // [72] + ["i", "I"], // [73] + ["j", "J"], // [74] + ["k", "K"], // [75] + ["l", "L"], // [76] + ["m", "M"], // [77] + ["n", "N"], // [78] + ["o", "O"], // [79] + ["p", "P"], // [80] + ["q", "Q"], // [81] + ["r", "R"], // [82] + ["s", "S"], // [83] + ["t", "T"], // [84] + ["u", "U"], // [85] + ["v", "V"], // [86] + ["w", "W"], // [87] + ["x", "X"], // [88] + ["y", "Y"], // [89] + ["z", "Z"], // [90] + ["", ""], // [91] Windows Key (Windows) or Command Key (Mac) + ["", ""], // [92] + ["", ""], // [93] + ["", ""], // [94] + ["", ""], // [95] + // Number Keypad Entries... + ["0", ""], // [96] + ["1", ""], // [97] + ["2", ""], // [98] + ["3", ""], // [99] + ["4", ""], // [100] + ["5", ""], // [101] + ["6", ""], // [102] + ["7", ""], // [103] + ["8", ""], // [104] + ["9", ""], // [105] + ["*", ""], // [106] + ["+", ""], // [107] + ["", ""], // [108] + ["-", ""], // [109] + [".", ""], // [110] + ["/", ""], // [111] + + ["", ""], // [112] + ["", ""], // [113] + ["", ""], // [114] + ["", ""], // [115] + ["", ""], // [116] + ["", ""], // [117] + ["", ""], // [118] + ["", ""], // [119] + ["", ""], // [120] + ["", ""], // [121] + ["", ""], // [122] + ["", ""], // [123] + ["", ""], // [124] + ["", ""], // [125] + ["", ""], // [126] + ["", ""], // [127] + ["", ""], // [128] + ["", ""], // [129] + ["", ""], // [130] + ["", ""], // [131] + ["", ""], // [132] + ["", ""], // [133] + ["", ""], // [134] + ["", ""], // [135] + ["", ""], // [136] + ["", ""], // [137] + ["", ""], // [138] + ["", ""], // [139] + ["", ""], // [140] + ["", ""], // [141] + ["", ""], // [142] + ["", ""], // [143] + ["", ""], // [144] + ["", ""], // [145] + ["", ""], // [146] + ["", ""], // [147] + ["", ""], // [148] + ["", ""], // [149] + ["", ""], // [150] + ["", ""], // [151] + ["", ""], // [152] + ["", ""], // [153] + ["", ""], // [154] + ["", ""], // [155] + ["", ""], // [156] + ["", ""], // [157] + ["", ""], // [158] + ["", ""], // [159] + ["", ""], // [160] + ["", ""], // [161] + ["", ""], // [162] + ["", ""], // [163] + ["", ""], // [164] + ["", ""], // [165] + ["", ""], // [166] + ["", ""], // [167] + ["", ""], // [168] + ["", ""], // [169] + ["", ""], // [170] + ["", ""], // [171] + ["", ""], // [172] + ["", ""], // [173] + ["", ""], // [174] + ["", ""], // [175] + ["", ""], // [176] + ["", ""], // [177] + ["", ""], // [178] + ["", ""], // [179] + ["", ""], // [180] + ["", ""], // [181] + ["", ""], // [182] + ["", ""], // [183] + ["", ""], // [184] + ["", ""], // [185] + [";", ":"], // [186] + ["=", "+"], // [187] + [",", "<"], // [188] + ["-", "_"], // [189] + [".", ">"], // [190] + ["/", "?"], // [191] + ["`", "~"], // [192] + ["", ""], // [193] + ["", ""], // [194] + ["", ""], // [195] + ["", ""], // [196] + ["", ""], // [197] + ["", ""], // [198] + ["", ""], // [199] + ["", ""], // [200] + ["", ""], // [201] + ["", ""], // [202] + ["", ""], // [203] + ["", ""], // [204] + ["", ""], // [205] + ["", ""], // [206] + ["", ""], // [207] + ["", ""], // [208] + ["", ""], // [209] + ["", ""], // [210] + ["", ""], // [211] + ["", ""], // [212] + ["", ""], // [213] + ["", ""], // [214] + ["", ""], // [215] + ["", ""], // [216] + ["", ""], // [217] + ["", ""], // [218] + ["[", "{"], // [219] + ["\\", "|"], // [220] + ["]", "}"], // [221] + ["'", '"'], // [222] + ["", ""], // [223] + ["", ""], // [224] + ["", ""], // [225] + ["", ""], // [226] + ["", ""], // [227] + ["", ""], // [228] + ["", ""], // [229] + ["", ""], // [230] + ["", ""], // [231] + ["", ""], // [232] + ["", ""], // [233] + ["", ""], // [234] + ["", ""], // [235] + ["", ""], // [236] + ["", ""], // [237] + ["", ""], // [238] + ["", ""], // [239] + ["", ""], // [240] + ["", ""], // [241] + ["", ""], // [242] + ["", ""], // [243] + ["", ""], // [244] + ["", ""], // [245] + ["", ""], // [246] + ["", ""], // [247] + ["", ""], // [248] + ["", ""], // [249] + ["", ""], // [250] + ["", ""], // [251] + ["", ""], // [252] + ["", ""], // [253] + ["", ""], // [254] + ["", ""] // [255] +]; +export default keyboardCharMap; diff --git a/src/composables/keyDownHandler/keyboardMaps/keyboardNameMap.ts b/src/composables/keyDownHandler/keyboardMaps/keyboardNameMap.ts new file mode 100644 index 0000000..8f385ae --- /dev/null +++ b/src/composables/keyDownHandler/keyboardMaps/keyboardNameMap.ts @@ -0,0 +1,261 @@ +// names of known key codes (0-255) +const keyboardNameMap = [ + "", // [0] + "", // [1] + "", // [2] + "CANCEL", // [3] + "", // [4] + "", // [5] + "HELP", // [6] + "", // [7] + "BACK_SPACE", // [8] + "TAB", // [9] + "", // [10] + "", // [11] + "CLEAR", // [12] + "ENTER", // [13] + "ENTER_SPECIAL", // [14] + "", // [15] + "SHIFT", // [16] + "CONTROL", // [17] + "ALT", // [18] + "PAUSE", // [19] + "CAPS_LOCK", // [20] + "KANA", // [21] + "EISU", // [22] + "JUNJA", // [23] + "FINAL", // [24] + "HANJA", // [25] + "", // [26] + "ESCAPE", // [27] + "CONVERT", // [28] + "NONCONVERT", // [29] + "ACCEPT", // [30] + "MODECHANGE", // [31] + "SPACE", // [32] + "PAGE_UP", // [33] + "PAGE_DOWN", // [34] + "END", // [35] + "HOME", // [36] + "LEFT", // [37] + "UP", // [38] + "RIGHT", // [39] + "DOWN", // [40] + "SELECT", // [41] + "PRINT", // [42] + "EXECUTE", // [43] + "PRINTSCREEN", // [44] + "INSERT", // [45] + "DELETE", // [46] + "", // [47] + "0", // [48] + "1", // [49] + "2", // [50] + "3", // [51] + "4", // [52] + "5", // [53] + "6", // [54] + "7", // [55] + "8", // [56] + "9", // [57] + "COLON", // [58] + "SEMICOLON", // [59] + "LESS_THAN", // [60] + "EQUALS", // [61] + "GREATER_THAN", // [62] + "QUESTION_MARK", // [63] + "AT", // [64] + "A", // [65] + "B", // [66] + "C", // [67] + "D", // [68] + "E", // [69] + "F", // [70] + "G", // [71] + "H", // [72] + "I", // [73] + "J", // [74] + "K", // [75] + "L", // [76] + "M", // [77] + "N", // [78] + "O", // [79] + "P", // [80] + "Q", // [81] + "R", // [82] + "S", // [83] + "T", // [84] + "U", // [85] + "V", // [86] + "W", // [87] + "X", // [88] + "Y", // [89] + "Z", // [90] + "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac) + "", // [92] + "CONTEXT_MENU", // [93] + "", // [94] + "SLEEP", // [95] + "NUMPAD0", // [96] + "NUMPAD1", // [97] + "NUMPAD2", // [98] + "NUMPAD3", // [99] + "NUMPAD4", // [100] + "NUMPAD5", // [101] + "NUMPAD6", // [102] + "NUMPAD7", // [103] + "NUMPAD8", // [104] + "NUMPAD9", // [105] + "MULTIPLY", // [106] + "ADD", // [107] + "SEPARATOR", // [108] + "SUBTRACT", // [109] + "DECIMAL", // [110] + "DIVIDE", // [111] + "F1", // [112] + "F2", // [113] + "F3", // [114] + "F4", // [115] + "F5", // [116] + "F6", // [117] + "F7", // [118] + "F8", // [119] + "F9", // [120] + "F10", // [121] + "F11", // [122] + "F12", // [123] + "F13", // [124] + "F14", // [125] + "F15", // [126] + "F16", // [127] + "F17", // [128] + "F18", // [129] + "F19", // [130] + "F20", // [131] + "F21", // [132] + "F22", // [133] + "F23", // [134] + "F24", // [135] + "", // [136] + "", // [137] + "", // [138] + "", // [139] + "", // [140] + "", // [141] + "", // [142] + "", // [143] + "NUM_LOCK", // [144] + "SCROLL_LOCK", // [145] + "WIN_OEM_FJ_JISHO", // [146] + "WIN_OEM_FJ_MASSHOU", // [147] + "WIN_OEM_FJ_TOUROKU", // [148] + "WIN_OEM_FJ_LOYA", // [149] + "WIN_OEM_FJ_ROYA", // [150] + "", // [151] + "", // [152] + "", // [153] + "", // [154] + "", // [155] + "", // [156] + "", // [157] + "", // [158] + "", // [159] + "CIRCUMFLEX", // [160] + "EXCLAMATION", // [161] + "DOUBLE_QUOTE", // [162] + "HASH", // [163] + "DOLLAR", // [164] + "PERCENT", // [165] + "AMPERSAND", // [166] + "UNDERSCORE", // [167] + "OPEN_PAREN", // [168] + "CLOSE_PAREN", // [169] + "ASTERISK", // [170] + "PLUS", // [171] + "PIPE", // [172] + "HYPHEN_MINUS", // [173] + "OPEN_CURLY_BRACKET", // [174] + "CLOSE_CURLY_BRACKET", // [175] + "TILDE", // [176] + "", // [177] + "", // [178] + "", // [179] + "", // [180] + "VOLUME_MUTE", // [181] + "VOLUME_DOWN", // [182] + "VOLUME_UP", // [183] + "", // [184] + "", // [185] + "SEMICOLON", // [186] + "EQUALS", // [187] + "COMMA", // [188] + "MINUS", // [189] + "PERIOD", // [190] + "SLASH", // [191] + "BACK_QUOTE", // [192] + "", // [193] + "", // [194] + "", // [195] + "", // [196] + "", // [197] + "", // [198] + "", // [199] + "", // [200] + "", // [201] + "", // [202] + "", // [203] + "", // [204] + "", // [205] + "", // [206] + "", // [207] + "", // [208] + "", // [209] + "", // [210] + "", // [211] + "", // [212] + "", // [213] + "", // [214] + "", // [215] + "", // [216] + "", // [217] + "", // [218] + "OPEN_BRACKET", // [219] + "BACK_SLASH", // [220] + "CLOSE_BRACKET", // [221] + "QUOTE", // [222] + "", // [223] + "META", // [224] + "ALTGR", // [225] + "", // [226] + "WIN_ICO_HELP", // [227] + "WIN_ICO_00", // [228] + "", // [229] + "WIN_ICO_CLEAR", // [230] + "", // [231] + "", // [232] + "WIN_OEM_RESET", // [233] + "WIN_OEM_JUMP", // [234] + "WIN_OEM_PA1", // [235] + "WIN_OEM_PA2", // [236] + "WIN_OEM_PA3", // [237] + "WIN_OEM_WSCTRL", // [238] + "WIN_OEM_CUSEL", // [239] + "WIN_OEM_ATTN", // [240] + "WIN_OEM_FINISH", // [241] + "WIN_OEM_COPY", // [242] + "WIN_OEM_AUTO", // [243] + "WIN_OEM_ENLW", // [244] + "WIN_OEM_BACKTAB", // [245] + "ATTN", // [246] + "CRSEL", // [247] + "EXSEL", // [248] + "EREOF", // [249] + "PLAY", // [250] + "ZOOM", // [251] + "", // [252] + "PA1", // [253] + "WIN_OEM_CLEAR", // [254] + "" // [255] +]; + +export default keyboardNameMap; diff --git a/src/composables/keyDownHandler/useKeyDownHandler.ts b/src/composables/keyDownHandler/useKeyDownHandler.ts new file mode 100644 index 0000000..f3c8b05 --- /dev/null +++ b/src/composables/keyDownHandler/useKeyDownHandler.ts @@ -0,0 +1,69 @@ +import { ref, inject } from "vue"; +import keyboardNameMap from "./keyboardMaps/keyboardNameMap"; +import keyboardCharMap from "./keyboardMaps/keyboardCharMap"; +// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a +// scanner attached via USB +export default function useKeyDownHandler() { + interface KeyDownEvent { + keyCode: number; + shiftKey: boolean; + } + + const emitter: any = inject("mitt"); + const input = ref(""); + + // submits newSelfMessage event + function handleEnterKey() { + // does nothing if input value is empty + if (input.value === "") { + return; + } + 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); + } + + 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". + let iCol = 0; + if (e.shiftKey) { + iCol = 1; + } + console.log(e.shiftKey); + 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": + handleEnterKey(); + break; + case "BACK_SPACE": + input.value = input.value.slice(0, -1); + break; + case "ESCAPE": + input.value = ""; + break; + default: + input.value += ch; + } + } + + return { + keyDownHandler, + input + }; +} diff --git a/src/composables/useKeyDownHandler.ts b/src/composables/useKeyDownHandler.ts deleted file mode 100644 index 13f6f89..0000000 --- a/src/composables/useKeyDownHandler.ts +++ /dev/null @@ -1,584 +0,0 @@ -import { ref, inject } from "vue"; -// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a -// scanner attached via USB -export default function useKeyDownHandler() { - const emitter: any = inject("mitt"); - const input = ref(""); - function keyDownHandler(e: any) { - // 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". - 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": - handleEnterKey(); - console.log("Enter was hit"); - break; - case "BACK_SPACE": - input.value = input.value.slice(0, -1); - break; - case "ESCAPE": - console.log("escape was clicked"); - break; - default: - input.value += ch; - // ...and so on... - } - } - - // submits newSelfMessage event - function handleEnterKey() { - // does nothing if input value is empty - if (input.value === "") { - return; - } - 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); - } - return { - keyDownHandler, - input - }; -} - -// names of known key codes (0-255) -var keyboardNameMap = [ - "", // [0] - "", // [1] - "", // [2] - "CANCEL", // [3] - "", // [4] - "", // [5] - "HELP", // [6] - "", // [7] - "BACK_SPACE", // [8] - "TAB", // [9] - "", // [10] - "", // [11] - "CLEAR", // [12] - "ENTER", // [13] - "ENTER_SPECIAL", // [14] - "", // [15] - "SHIFT", // [16] - "CONTROL", // [17] - "ALT", // [18] - "PAUSE", // [19] - "CAPS_LOCK", // [20] - "KANA", // [21] - "EISU", // [22] - "JUNJA", // [23] - "FINAL", // [24] - "HANJA", // [25] - "", // [26] - "ESCAPE", // [27] - "CONVERT", // [28] - "NONCONVERT", // [29] - "ACCEPT", // [30] - "MODECHANGE", // [31] - "SPACE", // [32] - "PAGE_UP", // [33] - "PAGE_DOWN", // [34] - "END", // [35] - "HOME", // [36] - "LEFT", // [37] - "UP", // [38] - "RIGHT", // [39] - "DOWN", // [40] - "SELECT", // [41] - "PRINT", // [42] - "EXECUTE", // [43] - "PRINTSCREEN", // [44] - "INSERT", // [45] - "DELETE", // [46] - "", // [47] - "0", // [48] - "1", // [49] - "2", // [50] - "3", // [51] - "4", // [52] - "5", // [53] - "6", // [54] - "7", // [55] - "8", // [56] - "9", // [57] - "COLON", // [58] - "SEMICOLON", // [59] - "LESS_THAN", // [60] - "EQUALS", // [61] - "GREATER_THAN", // [62] - "QUESTION_MARK", // [63] - "AT", // [64] - "A", // [65] - "B", // [66] - "C", // [67] - "D", // [68] - "E", // [69] - "F", // [70] - "G", // [71] - "H", // [72] - "I", // [73] - "J", // [74] - "K", // [75] - "L", // [76] - "M", // [77] - "N", // [78] - "O", // [79] - "P", // [80] - "Q", // [81] - "R", // [82] - "S", // [83] - "T", // [84] - "U", // [85] - "V", // [86] - "W", // [87] - "X", // [88] - "Y", // [89] - "Z", // [90] - "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac) - "", // [92] - "CONTEXT_MENU", // [93] - "", // [94] - "SLEEP", // [95] - "NUMPAD0", // [96] - "NUMPAD1", // [97] - "NUMPAD2", // [98] - "NUMPAD3", // [99] - "NUMPAD4", // [100] - "NUMPAD5", // [101] - "NUMPAD6", // [102] - "NUMPAD7", // [103] - "NUMPAD8", // [104] - "NUMPAD9", // [105] - "MULTIPLY", // [106] - "ADD", // [107] - "SEPARATOR", // [108] - "SUBTRACT", // [109] - "DECIMAL", // [110] - "DIVIDE", // [111] - "F1", // [112] - "F2", // [113] - "F3", // [114] - "F4", // [115] - "F5", // [116] - "F6", // [117] - "F7", // [118] - "F8", // [119] - "F9", // [120] - "F10", // [121] - "F11", // [122] - "F12", // [123] - "F13", // [124] - "F14", // [125] - "F15", // [126] - "F16", // [127] - "F17", // [128] - "F18", // [129] - "F19", // [130] - "F20", // [131] - "F21", // [132] - "F22", // [133] - "F23", // [134] - "F24", // [135] - "", // [136] - "", // [137] - "", // [138] - "", // [139] - "", // [140] - "", // [141] - "", // [142] - "", // [143] - "NUM_LOCK", // [144] - "SCROLL_LOCK", // [145] - "WIN_OEM_FJ_JISHO", // [146] - "WIN_OEM_FJ_MASSHOU", // [147] - "WIN_OEM_FJ_TOUROKU", // [148] - "WIN_OEM_FJ_LOYA", // [149] - "WIN_OEM_FJ_ROYA", // [150] - "", // [151] - "", // [152] - "", // [153] - "", // [154] - "", // [155] - "", // [156] - "", // [157] - "", // [158] - "", // [159] - "CIRCUMFLEX", // [160] - "EXCLAMATION", // [161] - "DOUBLE_QUOTE", // [162] - "HASH", // [163] - "DOLLAR", // [164] - "PERCENT", // [165] - "AMPERSAND", // [166] - "UNDERSCORE", // [167] - "OPEN_PAREN", // [168] - "CLOSE_PAREN", // [169] - "ASTERISK", // [170] - "PLUS", // [171] - "PIPE", // [172] - "HYPHEN_MINUS", // [173] - "OPEN_CURLY_BRACKET", // [174] - "CLOSE_CURLY_BRACKET", // [175] - "TILDE", // [176] - "", // [177] - "", // [178] - "", // [179] - "", // [180] - "VOLUME_MUTE", // [181] - "VOLUME_DOWN", // [182] - "VOLUME_UP", // [183] - "", // [184] - "", // [185] - "SEMICOLON", // [186] - "EQUALS", // [187] - "COMMA", // [188] - "MINUS", // [189] - "PERIOD", // [190] - "SLASH", // [191] - "BACK_QUOTE", // [192] - "", // [193] - "", // [194] - "", // [195] - "", // [196] - "", // [197] - "", // [198] - "", // [199] - "", // [200] - "", // [201] - "", // [202] - "", // [203] - "", // [204] - "", // [205] - "", // [206] - "", // [207] - "", // [208] - "", // [209] - "", // [210] - "", // [211] - "", // [212] - "", // [213] - "", // [214] - "", // [215] - "", // [216] - "", // [217] - "", // [218] - "OPEN_BRACKET", // [219] - "BACK_SLASH", // [220] - "CLOSE_BRACKET", // [221] - "QUOTE", // [222] - "", // [223] - "META", // [224] - "ALTGR", // [225] - "", // [226] - "WIN_ICO_HELP", // [227] - "WIN_ICO_00", // [228] - "", // [229] - "WIN_ICO_CLEAR", // [230] - "", // [231] - "", // [232] - "WIN_OEM_RESET", // [233] - "WIN_OEM_JUMP", // [234] - "WIN_OEM_PA1", // [235] - "WIN_OEM_PA2", // [236] - "WIN_OEM_PA3", // [237] - "WIN_OEM_WSCTRL", // [238] - "WIN_OEM_CUSEL", // [239] - "WIN_OEM_ATTN", // [240] - "WIN_OEM_FINISH", // [241] - "WIN_OEM_COPY", // [242] - "WIN_OEM_AUTO", // [243] - "WIN_OEM_ENLW", // [244] - "WIN_OEM_BACKTAB", // [245] - "ATTN", // [246] - "CRSEL", // [247] - "EXSEL", // [248] - "EREOF", // [249] - "PLAY", // [250] - "ZOOM", // [251] - "", // [252] - "PA1", // [253] - "WIN_OEM_CLEAR", // [254] - "" // [255] -]; - -// This has the UnShifted and Shifted characters that each key maps to -// Ones that are to be ignored for character input are empty. -var keyboardCharMap = [ - ["", ""], // [0] - ["", ""], // [1] - ["", ""], // [2] - ["", ""], // [3] - ["", ""], // [4] - ["", ""], // [5] - ["", ""], // [6] - ["", ""], // [7] - ["", ""], // [8] - ["", ""], // [9] - ["", ""], // [10] - ["", ""], // [11] - ["", ""], // [12] - ["\r", "\r"], // [13] - MOST control characters are ignored. This one (Carriage Return, or "Enter") is significant! - ["", ""], // [14] - ["", ""], // [15] - ["", ""], // [16] - ["", ""], // [17] - ["", ""], // [18] - ["", ""], // [19] - ["", ""], // [20] - ["", ""], // [21] - ["", ""], // [22] - ["", ""], // [23] - ["", ""], // [24] - ["", ""], // [25] - ["", ""], // [26] - ["", ""], // [27] - ["", ""], // [28] - ["", ""], // [29] - ["", ""], // [30] - ["", ""], // [31] - [" ", " "], // [32] // SPACE! Don't "clean it up" and remove the space! - ["", ""], // [33] - ["", ""], // [34] - ["", ""], // [35] - ["", ""], // [36] - ["", ""], // [37] - ["", ""], // [38] - ["", ""], // [39] - ["", ""], // [40] - ["", ""], // [41] - ["", ""], // [42] - ["", ""], // [43] - ["", ""], // [44] - ["", ""], // [45] - ["", ""], // [46] - ["", ""], // [47] - ["0", ")"], // [48] - ["1", "!"], // [49] - ["2", "@"], // [50] - ["3", "#"], // [51] - ["4", "$"], // [52] - ["5", "%"], // [53] - ["6", "^"], // [54] - ["7", "&"], // [55] - ["8", "*"], // [56] - ["9", "("], // [57] - ["", ""], // [58] - [";", ":"], // [59] - ["<", ""], // [60] - ["=", ""], // [61] - [">", ""], // [62] - ["?", ""], // [63] shifted; else "/" - ["", ""], // [64] - ["a", "A"], // [65] - ["b", "B"], // [66] - ["c", "C"], // [67] - ["d", "D"], // [68] - ["e", "E"], // [69] - ["f", "F"], // [70] - ["g", "G"], // [71] - ["h", "H"], // [72] - ["i", "I"], // [73] - ["j", "J"], // [74] - ["k", "K"], // [75] - ["l", "L"], // [76] - ["m", "M"], // [77] - ["n", "N"], // [78] - ["o", "O"], // [79] - ["p", "P"], // [80] - ["q", "Q"], // [81] - ["r", "R"], // [82] - ["s", "S"], // [83] - ["t", "T"], // [84] - ["u", "U"], // [85] - ["v", "V"], // [86] - ["w", "W"], // [87] - ["x", "X"], // [88] - ["y", "Y"], // [89] - ["z", "Z"], // [90] - ["", ""], // [91] Windows Key (Windows) or Command Key (Mac) - ["", ""], // [92] - ["", ""], // [93] - ["", ""], // [94] - ["", ""], // [95] - // Number Keypad Entries... - ["0", ""], // [96] - ["1", ""], // [97] - ["2", ""], // [98] - ["3", ""], // [99] - ["4", ""], // [100] - ["5", ""], // [101] - ["6", ""], // [102] - ["7", ""], // [103] - ["8", ""], // [104] - ["9", ""], // [105] - ["*", ""], // [106] - ["+", ""], // [107] - ["", ""], // [108] - ["-", ""], // [109] - [".", ""], // [110] - ["/", ""], // [111] - - ["", ""], // [112] - ["", ""], // [113] - ["", ""], // [114] - ["", ""], // [115] - ["", ""], // [116] - ["", ""], // [117] - ["", ""], // [118] - ["", ""], // [119] - ["", ""], // [120] - ["", ""], // [121] - ["", ""], // [122] - ["", ""], // [123] - ["", ""], // [124] - ["", ""], // [125] - ["", ""], // [126] - ["", ""], // [127] - ["", ""], // [128] - ["", ""], // [129] - ["", ""], // [130] - ["", ""], // [131] - ["", ""], // [132] - ["", ""], // [133] - ["", ""], // [134] - ["", ""], // [135] - ["", ""], // [136] - ["", ""], // [137] - ["", ""], // [138] - ["", ""], // [139] - ["", ""], // [140] - ["", ""], // [141] - ["", ""], // [142] - ["", ""], // [143] - ["", ""], // [144] - ["", ""], // [145] - ["", ""], // [146] - ["", ""], // [147] - ["", ""], // [148] - ["", ""], // [149] - ["", ""], // [150] - ["", ""], // [151] - ["", ""], // [152] - ["", ""], // [153] - ["", ""], // [154] - ["", ""], // [155] - ["", ""], // [156] - ["", ""], // [157] - ["", ""], // [158] - ["", ""], // [159] - ["", ""], // [160] - ["", ""], // [161] - ["", ""], // [162] - ["", ""], // [163] - ["", ""], // [164] - ["", ""], // [165] - ["", ""], // [166] - ["", ""], // [167] - ["", ""], // [168] - ["", ""], // [169] - ["", ""], // [170] - ["", ""], // [171] - ["", ""], // [172] - ["", ""], // [173] - ["", ""], // [174] - ["", ""], // [175] - ["", ""], // [176] - ["", ""], // [177] - ["", ""], // [178] - ["", ""], // [179] - ["", ""], // [180] - ["", ""], // [181] - ["", ""], // [182] - ["", ""], // [183] - ["", ""], // [184] - ["", ""], // [185] - ["", ""], // [186] - ["=", "+"], // [187] - [",", "<"], // [188] - ["-", "_"], // [189] - [".", ">"], // [190] - ["/", "?"], // [191] - ["`", "~"], // [192] - ["", ""], // [193] - ["", ""], // [194] - ["", ""], // [195] - ["", ""], // [196] - ["", ""], // [197] - ["", ""], // [198] - ["", ""], // [199] - ["", ""], // [200] - ["", ""], // [201] - ["", ""], // [202] - ["", ""], // [203] - ["", ""], // [204] - ["", ""], // [205] - ["", ""], // [206] - ["", ""], // [207] - ["", ""], // [208] - ["", ""], // [209] - ["", ""], // [210] - ["", ""], // [211] - ["", ""], // [212] - ["", ""], // [213] - ["", ""], // [214] - ["", ""], // [215] - ["", ""], // [216] - ["", ""], // [217] - ["", ""], // [218] - ["[", "{"], // [219] - ["\\", "|"], // [220] - ["]", "}"], // [221] - ["'", '"'], // [222] - ["", ""], // [223] - ["", ""], // [224] - ["", ""], // [225] - ["", ""], // [226] - ["", ""], // [227] - ["", ""], // [228] - ["", ""], // [229] - ["", ""], // [230] - ["", ""], // [231] - ["", ""], // [232] - ["", ""], // [233] - ["", ""], // [234] - ["", ""], // [235] - ["", ""], // [236] - ["", ""], // [237] - ["", ""], // [238] - ["", ""], // [239] - ["", ""], // [240] - ["", ""], // [241] - ["", ""], // [242] - ["", ""], // [243] - ["", ""], // [244] - ["", ""], // [245] - ["", ""], // [246] - ["", ""], // [247] - ["", ""], // [248] - ["", ""], // [249] - ["", ""], // [250] - ["", ""], // [251] - ["", ""], // [252] - ["", ""], // [253] - ["", ""], // [254] - ["", ""] // [255] -]; From 0a3bf4ca4241a92e40a98d5adc65ab6a6fb5068e Mon Sep 17 00:00:00 2001 From: riqo Date: Sun, 25 Oct 2020 11:22:23 -0500 Subject: [PATCH 07/15] add input item to UI index --- src/components/UI/UIDetails/messageItem.vue | 3 +- src/components/UI/index.vue | 228 ++++++++++---------- src/views/home/index.vue | 31 ++- 3 files changed, 125 insertions(+), 137 deletions(-) diff --git a/src/components/UI/UIDetails/messageItem.vue b/src/components/UI/UIDetails/messageItem.vue index 3c19b34..a29dd6b 100644 --- a/src/components/UI/UIDetails/messageItem.vue +++ b/src/components/UI/UIDetails/messageItem.vue @@ -72,10 +72,11 @@ import { defineComponent, computed, onMounted, ref, reactive } from 'vue'; const contentTag = ref(`content${msgID.value}`); let bubble: any; let content: any; + console.log(props) const textFill = computed(() => { switch (props.item.modifier) { - case "ai": + case "ai" || "sf": return "#fff"; default: return "#000"; diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue index 371de54..2aeae6c 100644 --- a/src/components/UI/index.vue +++ b/src/components/UI/index.vue @@ -37,24 +37,24 @@ - + - - - - + + + @@ -84,117 +84,111 @@ From 9272dfb17951c486d94dfc8961ba0e456c14729b Mon Sep 17 00:00:00 2001 From: riqo Date: Sun, 25 Oct 2020 15:13:06 -0500 Subject: [PATCH 08/15] refactor messageItem component --- src/components/UI/UIDetails/inputItem.vue | 1 - src/components/UI/UIDetails/messageItem.vue | 141 +++++----------- src/components/UI/index.vue | 154 +++++++++--------- src/composables/anims/useMessageItemAnims.ts | 43 +++++ .../computed/useMessageItemComp.ts | 40 +++++ src/composables/textWrap/useTextWrap.ts | 17 ++ src/composables/useTextBox.ts | 31 ---- src/plugins/anime.ts | 16 -- 8 files changed, 217 insertions(+), 226 deletions(-) create mode 100644 src/composables/anims/useMessageItemAnims.ts create mode 100644 src/composables/computed/useMessageItemComp.ts create mode 100644 src/composables/textWrap/useTextWrap.ts delete mode 100644 src/composables/useTextBox.ts delete mode 100644 src/plugins/anime.ts diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue index 83eb68a..cc08402 100644 --- a/src/components/UI/UIDetails/inputItem.vue +++ b/src/components/UI/UIDetails/inputItem.vue @@ -45,5 +45,4 @@ div[contenteditable] { font-size: 14; text-align: left; } - diff --git a/src/components/UI/UIDetails/messageItem.vue b/src/components/UI/UIDetails/messageItem.vue index a29dd6b..54dd51e 100644 --- a/src/components/UI/UIDetails/messageItem.vue +++ b/src/components/UI/UIDetails/messageItem.vue @@ -5,8 +5,7 @@ :transform = "startingOffset" > {{ item }} - + - - diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue index 2aeae6c..64c198d 100644 --- a/src/components/UI/index.vue +++ b/src/components/UI/index.vue @@ -85,91 +85,91 @@ diff --git a/src/composables/anims/useMessageItemAnims.ts b/src/composables/anims/useMessageItemAnims.ts index ae9a9ea..a872fd9 100644 --- a/src/composables/anims/useMessageItemAnims.ts +++ b/src/composables/anims/useMessageItemAnims.ts @@ -1,8 +1,14 @@ import { ref, onMounted } from "vue"; -interface Ref { - value: string; +interface Ref { + value: A; } -export default function useMessageItemAnims({ mr, tr }: { mr: Ref; tr: Ref }) { +export default function useMessageItemAnims({ + mr, + tr +}: { + mr: Ref; + tr: Ref; +}) { const signatureTranslate = ref(""); let messageRect: SVGSVGElement & SVGRectElement; let messageText: SVGSVGElement & SVGTextElement; diff --git a/src/composables/anims/useUIindexAnims.ts b/src/composables/anims/useUIindexAnims.ts new file mode 100644 index 0000000..1cd3b92 --- /dev/null +++ b/src/composables/anims/useUIindexAnims.ts @@ -0,0 +1,78 @@ +import { inject, onMounted } from "vue"; +export default function useUIindexAnims() { + const anime: any = inject("animejs"); + const timeline = anime.timeline({ loop: true }); + const msgOffset = { + x: 0, + y: 0 + }; + let winW: number; + let modifier: string; + let msg: any; + let cardsDiv: any; + let prevCardH = 0; + + let messenger: any; + onMounted(() => { + messenger = document.getElementById("messenger"); + winW = messenger.clientWidth; + }); + + async function beforeEnter(el: any) { + modifier = el.className.baseVal.substring(0, 2); + } + + async function enter(el: SVGGElement, done: any) { + console.log(done); + const paddingLeft = 40; + msg = await document.getElementById(el.id); + const rect = msg.getBoundingClientRect(); + const msgW = rect.width; + const msgH = rect.height; + cardsDiv = await document.getElementById("cardsDiv"); + const cdBox = cardsDiv.getBBox(); + + if (prevCardH === 0) { + msgOffset.y += cdBox.height; + } else if (prevCardH > msgH) { + // cardsDiv is offset by 17.5 + msgOffset.y += prevCardH + msgH / 2 + 17.5; + } else { + msgOffset.y += cdBox.height - 20; + } + prevCardH = msgH; + + switch (modifier) { + case "sf": + msgOffset.x = winW - msgW; + break; + case "ai": + msgOffset.x = (winW - msgW) / 2; + break; + default: + msgOffset.x = paddingLeft; + } + + const translateUp = `translate(${msgOffset.x} ${msgOffset.y})`; + const translateDown = `translate(${msgOffset.x} ${msgOffset.y + 5})`; + timeline + .add({ + targets: el, + transform: translateUp, + easing: "easeInOutQuad", + duration: 1000 + }) + .add({ + targets: el, + transform: translateDown, + easing: "easeInOutQuad", + duration: 500, + offset: 1000 + }); + } + return { + beforeEnter, + enter, + msgOffset + }; +} From aab6a479b46c7ead6ebc899e958976ad4902f45d Mon Sep 17 00:00:00 2001 From: riqo Date: Tue, 27 Oct 2020 12:21:06 -0500 Subject: [PATCH 11/15] add allCardHeight function --- src/components/UI/index.vue | 1 + src/composables/anims/useUIindexAnims.ts | 25 ++++++++++++++++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue index 808d489..5461974 100644 --- a/src/components/UI/index.vue +++ b/src/components/UI/index.vue @@ -40,6 +40,7 @@ diff --git a/src/composables/anims/useUIindexAnims.ts b/src/composables/anims/useUIindexAnims.ts index 1cd3b92..df91efb 100644 --- a/src/composables/anims/useUIindexAnims.ts +++ b/src/composables/anims/useUIindexAnims.ts @@ -1,5 +1,6 @@ import { inject, onMounted } from "vue"; export default function useUIindexAnims() { + interface Done {} const anime: any = inject("animejs"); const timeline = anime.timeline({ loop: true }); const msgOffset = { @@ -18,12 +19,31 @@ export default function useUIindexAnims() { winW = messenger.clientWidth; }); - async function beforeEnter(el: any) { + function getCardHeight(el: SVGSVGElement) { + const cardHeight = el.getBBox().height; + return cardHeight; + } + + async function getAllCardsHeight() { + let cards: []; + cardsDiv = await document.getElementById("cardsDiv"); + cards = cardsDiv.querySelectorAll(".message"); + let totalHeight = 0; + for (const card of cards) { + let height = getCardHeight(card); + totalHeight += height; + if (totalHeight >= 500) { + console.log("update scroll view"); + } + } + } + + async function beforeEnter(el: SVGGElement) { modifier = el.className.baseVal.substring(0, 2); } async function enter(el: SVGGElement, done: any) { - console.log(done); + getAllCardsHeight(); const paddingLeft = 40; msg = await document.getElementById(el.id); const rect = msg.getBoundingClientRect(); @@ -69,6 +89,7 @@ export default function useUIindexAnims() { duration: 500, offset: 1000 }); + done; } return { beforeEnter, From 67573031372300791bf1bed54b1844ce7d150d5e Mon Sep 17 00:00:00 2001 From: riqo Date: Thu, 29 Oct 2020 19:43:56 -0500 Subject: [PATCH 12/15] gotta implement scroll offset --- src/components/UI/index.vue | 3 +- src/composables/anims/useUIindexAnims.ts | 55 +++++++++++++++++------- 2 files changed, 40 insertions(+), 18 deletions(-) diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue index 5461974..233af79 100644 --- a/src/components/UI/index.vue +++ b/src/components/UI/index.vue @@ -40,8 +40,7 @@ { messenger = document.getElementById("messenger"); winW = messenger.clientWidth; }); - function getCardHeight(el: SVGSVGElement) { + function getCardHeight(el: any) { const cardHeight = el.getBBox().height; return cardHeight; } - async function getAllCardsHeight() { - let cards: []; - cardsDiv = await document.getElementById("cardsDiv"); - cards = cardsDiv.querySelectorAll(".message"); - let totalHeight = 0; - for (const card of cards) { - let height = getCardHeight(card); - totalHeight += height; - if (totalHeight >= 500) { - console.log("update scroll view"); + function calculateAllCardsHeight() { + const cards = document.querySelectorAll(".test"); + if (cards.length) { + renderList = cards; + currentCard = cards.item(cards.length - 1); + for (const card of cards) { + const height = getCardHeight(card); + totalHeight += height; } } } async function beforeEnter(el: SVGGElement) { modifier = el.className.baseVal.substring(0, 2); + calculateAllCardsHeight(); } - async function enter(el: SVGGElement, done: any) { - getAllCardsHeight(); + async function stackAnimate(el: any, done: any) { const paddingLeft = 40; msg = await document.getElementById(el.id); const rect = msg.getBoundingClientRect(); const msgW = rect.width; const msgH = rect.height; - cardsDiv = await document.getElementById("cardsDiv"); + cardsDiv = document.getElementById("cardsDiv"); const cdBox = cardsDiv.getBBox(); if (prevCardH === 0) { @@ -90,6 +90,29 @@ export default function useUIindexAnims() { offset: 1000 }); done; + + } + + function OffsetMessage() { + // TODO implement individual offset function + + } + + function scrollOffset(l: NodeList) { + } + + async function scrollAnimate(el: any, done: any) { + // get incoming card height + const height = getCardHeight(el); + scrollOffset(renderList) + } + + async function enter(el: SVGGElement, done: any) { + if (totalHeight < 500) { + stackAnimate(el, done) + } else { + scrollAnimate(el, done); + } } return { beforeEnter, From 47025c3ac48053eb67da55b0bc62cfa5436f5f4c Mon Sep 17 00:00:00 2001 From: riqo Date: Sat, 31 Oct 2020 17:04:55 -0500 Subject: [PATCH 13/15] add scroll animate --- src/components/UI/index.vue | 28 ++-- src/composables/anims/useUIindexAnims.ts | 163 +++++++++++++---------- 2 files changed, 107 insertions(+), 84 deletions(-) diff --git a/src/components/UI/index.vue b/src/components/UI/index.vue index 233af79..413a07e 100644 --- a/src/components/UI/index.vue +++ b/src/components/UI/index.vue @@ -4,6 +4,7 @@ version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + @click="renderMessage" > @@ -83,7 +85,7 @@