From d2477a37d0b0c4654a8e96f2e7b3d61e8a09dde4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= Date: Mon, 15 Jun 2020 15:55:31 +0200 Subject: [PATCH] use guacamole kbd --- client/src/components/video.vue | 49 +++++------ client/src/neko/keyboard.ts | 147 -------------------------------- 2 files changed, 25 insertions(+), 171 deletions(-) delete mode 100644 client/src/neko/keyboard.ts diff --git a/client/src/components/video.vue b/client/src/components/video.vue index 85cb689..929385e 100644 --- a/client/src/components/video.vue +++ b/client/src/components/video.vue @@ -20,8 +20,6 @@ @mouseup.stop.prevent="onMouseUp" @mouseenter.stop.prevent="onMouseEnter" @mouseleave.stop.prevent="onMouseLeave" - @keydown.stop.prevent="onKeyDown" - @keyup.stop.prevent="onKeyUp" />
@@ -142,8 +140,6 @@ import Emote from './emote.vue' import Resolution from './resolution.vue' - import { mapKeyboardEventToKeySym } from '@/neko/keyboard.ts' - @Component({ name: 'neko-video', components: { @@ -337,6 +333,31 @@ document.addEventListener('focusin', this.onFocus.bind(this)) document.addEventListener('focusout', this.onBlur.bind(this)) + + var Keyboard = {}; + + // @ts-ignore + Guacamole.Keyboard.bind(Keyboard, this._overlay)(); + + // @ts-ignore + Keyboard.onkeydown = (key: number) => { + if (!this.focused || !this.hosting || this.locked) { + return + } + + this.$client.sendData('keydown', { key }) + this.activeKeys.add(key) + }; + + // @ts-ignore + Keyboard.onkeyup = (key: number) => { + if (!this.focused || !this.hosting || this.locked) { + return + } + + this.$client.sendData('keyup', { key }) + this.activeKeys.delete(key) + }; } beforeDestroy() { @@ -479,26 +500,6 @@ this.focused = false } - onKeyDown(e: KeyboardEvent) { - if (!this.focused || !this.hosting || this.locked) { - return - } - - let key = mapKeyboardEventToKeySym(e) - this.$client.sendData('keydown', { key }) - this.activeKeys.add(key) - } - - onKeyUp(e: KeyboardEvent) { - if (!this.focused || !this.hosting || this.locked) { - return - } - - let key = mapKeyboardEventToKeySym(e) - this.$client.sendData('keyup', { key }) - this.activeKeys.delete(key) - } - onResise() { let height = 0 if (!this.fullscreen) { diff --git a/client/src/neko/keyboard.ts b/client/src/neko/keyboard.ts deleted file mode 100644 index 0d3f604..0000000 --- a/client/src/neko/keyboard.ts +++ /dev/null @@ -1,147 +0,0 @@ -const keyMap: Record = { - 'Backspace': 0xff08, - 'Tab': 0xFF09, - 'Enter': 0xFF0D, - 'ShiftLeft': 0xFFE1, - 'ShiftRight': 0xFFE2, - 'ControlLeft': 0xFFE3, - 'ControlRight': 0xFFE4, - 'AltLeft': 0xFFE9, - 'AltRight': 0xFFEA, - 'MetaLeft': 0xFFEB, // Super key, or Meta key? - 'MetaRight': 0xFFEC, // Super key, or Meta key? - 'PrintScreen': 0xFF61, - 'ContextMenu': 0xFF67, - 'Pause': 0xFF13, - 'CapsLock': 0xFFE5, - 'Escape': 0xFF1B, - 'Space': 0x0020, - 'PageUp': 0xFF55, - 'PageDown': 0xFF56, - 'End': 0xFF57, - 'Home': 0xFF50, - 'ArrowLeft': 0xFF51, - 'ArrowUp': 0xFF52, - 'ArrowRight': 0xFF53, - 'ArrowDown': 0xFF54, - 'Insert': 0xFF63, - 'Delete': 0xFFFF, - 'Digit0': 0x0030, - 'Digit1': 0x0031, - 'Digit2': 0x0032, - 'Digit3': 0x0033, - 'Digit4': 0x0034, - 'Digit5': 0x0035, - 'Digit6': 0x0036, - 'Digit7': 0x0037, - 'Digit8': 0x0038, - 'Digit9': 0x0039, - 'KeyA': 0x0061, - 'KeyB': 0x0062, - 'KeyC': 0x0063, - 'KeyD': 0x0064, - 'KeyE': 0x0065, - 'KeyF': 0x0066, - 'KeyG': 0x0067, - 'KeyH': 0x0068, - 'KeyI': 0x0069, - 'KeyJ': 0x006a, - 'KeyK': 0x006b, - 'KeyL': 0x006c, - 'KeyM': 0x006d, - 'KeyN': 0x006e, - 'KeyO': 0x006f, - 'KeyP': 0x0070, - 'KeyQ': 0x0071, - 'KeyR': 0x0072, - 'KeyS': 0x0073, - 'KeyT': 0x0074, - 'KeyU': 0x0075, - 'KeyV': 0x0076, - 'KeyW': 0x0077, - 'KeyX': 0x0078, - 'KeyZ': 0x0079, - 'KeyY': 0x007a, - 'NumpadEnter': 0XFF8D, - 'NumpadMultiply': 0xFFAA, - 'NumpadAdd': 0xFFAB, - 'NumpadSubtract': 0xFFAD, - 'NumpadDivide': 0xFFAF, - 'F1': 0xFFBE, - 'F2': 0xFFBF, - 'F3': 0xFFC0, - 'F4': 0xFFC1, - 'F5': 0xFFC2, - 'F6': 0xFFC3, - 'F7': 0xFFC4, - 'F8': 0xFFC5, - 'F9': 0xFFC6, - 'F10': 0xFFC7, - 'F11': 0xFFC8, - 'F12': 0xFFC9, - 'NumLock': 0xFF7F, - 'ScrollLock': 0xFF14, - - // l10s causes many problems - 'Semicolon': 0x003b, - 'Comma': 0x002c, - 'Slash': 0x002f, - 'Period': 0x002e, - 'Minus': 0x002d, - 'Backquote': 0x0060, - 'BracketLeft': 0x005b, - 'Backslash': 0x005c, - 'BracketRight': 0x005d, - 'Quote': 0x0022, - 'Equal': 0x003d, -}; - -// If Num Lock is enabled [Original KeySym, Non-NumPad key (on US kbd)] -const keyMap_numlock_enabled: Record> = { - 'Numpad0': [0xFFB0, 0x0030], - 'Numpad1': [0xFFB1, 0x0031], - 'Numpad2': [0xFFB2, 0x0032], - 'Numpad3': [0xFFB3, 0x0033], - 'Numpad4': [0xFFB4, 0x0034], - 'Numpad5': [0xFFB5, 0x0035], - 'Numpad6': [0xFFB6, 0x0036], - 'Numpad7': [0xFFB7, 0x0037], - 'Numpad8': [0xFFB8, 0x0038], - 'Numpad9': [0xFFB9, 0x0039], - 'NumpadDecimal': [0xFFAE, 0x002c] -}; - -// If Num Lock is disabled [Original KeySym, Non-NumPad key (on US kbd)] -const keyMap_numlock_disabled: Record> = { - 'Numpad0': [0xFFB0, 0xff63], - 'Numpad1': [0xFFB1, 0xFF57], - 'Numpad2': [0xFFB2, 0xFF54], - 'Numpad3': [0xFFB3, 0xFF56], - 'Numpad4': [0xFFB4, 0xFF51], - 'Numpad5': [0xFFB5, 0xff0b], - 'Numpad6': [0xFFB6, 0xFF53], - 'Numpad7': [0xFFB7, 0xFF50], - 'Numpad8': [0xFFB8, 0xFF52], - 'Numpad9': [0xFFB9, 0xFF55], - 'NumpadDecimal': [0xFF9F, 0xFFFF], -}; - -export function mapKeyboardEventToKeySym(e: KeyboardEvent): number { - if (e.code in keyMap) { - return keyMap[e.code]; - } - - //// Handle Num Lock at Server - //if (isNumLockActive)) { - // return keyMap_numlock_enabled[e.code][0]; - //} else { - // return keyMap_numlock_disabled[e.code][0]; - //} - - // Handle Num Lock at Client - if (e.getModifierState('NumLock')) { - return keyMap_numlock_enabled[e.code][1]; - } else { - return keyMap_numlock_disabled[e.code][1]; - } -}