core/input/keyboard.js

   1 /*
   2  * noVNC: HTML5 VNC client
   3  * Copyright (C) 2012 Joel Martin
   4  * Copyright (C) 2013 Samuel Mannehed for Cendio AB
   5  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
   6  */
   7
   8 import * as Log from '../util/logging.js';
   9 import { stopEvent } from '../util/events.js';
  10 import * as KeyboardUtil from "./util.js";
  11 import KeyTable from "./keysym.js";
  12 import * as browser from "../util/browser.js";
  13
  14 //
  15 // Keyboard event handler
  16 //
  17
  18 export default class Keyboard {
  19     constructor(target) {
  20         this._target = target || null;
  21
  22         this._keyDownList = {};         // List of depressed keys
  23                                         // (even if they are happy)
  24         this._pendingKey = null;        // Key waiting for keypress
  25         this._altGrArmed = false;       // Windows AltGr detection
  26
  27         // keep these here so we can refer to them later
  28         this._eventHandlers = {
  29             'keyup': this._handleKeyUp.bind(this),
  30             'keydown': this._handleKeyDown.bind(this),
  31             'keypress': this._handleKeyPress.bind(this),
  32             'blur': this._allKeysUp.bind(this),
  33             'checkalt': this._checkAlt.bind(this),
  34         };
  35
  36         // ===== EVENT HANDLERS =====
  37
  38         this.onkeyevent = () => {}; // Handler for key press/release
  39     }
  40
  41     // ===== PRIVATE METHODS =====
  42
  43     _sendKeyEvent(keysym, code, down) {
  44         if (down) {
  45             this._keyDownList[code] = keysym;
  46         } else {
  47             // Do we really think this key is down?
  48             if (!(code in this._keyDownList)) {
  49                 return;
  50             }
  51             delete this._keyDownList[code];
  52         }
  53
  54         Log.Debug("onkeyevent " + (down ? "down" : "up") +
  55                   ", keysym: " + keysym, ", code: " + code);
  56         this.onkeyevent(keysym, code, down);
  57     }
  58
  59     _getKeyCode(e) {
  60         const code = KeyboardUtil.getKeycode(e);
  61         if (code !== 'Unidentified') {
  62             return code;
  63         }
  64
  65         // Unstable, but we don't have anything else to go on
  66         // (don't use it for 'keypress' events thought since
  67         // WebKit sets it to the same as charCode)
  68         if (e.keyCode && (e.type !== 'keypress')) {
  69             // 229 is used for composition events
  70             if (e.keyCode !== 229) {
  71                 return 'Platform' + e.keyCode;
  72             }
  73         }
  74
  75         // A precursor to the final DOM3 standard. Unfortunately it
  76         // is not layout independent, so it is as bad as using keyCode
  77         if (e.keyIdentifier) {
  78             // Non-character key?
  79             if (e.keyIdentifier.substr(0, 2) !== 'U+') {
  80                 return e.keyIdentifier;
  81             }
  82
  83             const codepoint = parseInt(e.keyIdentifier.substr(2), 16);
  84             const char = String.fromCharCode(codepoint).toUpperCase();
  85
  86             return 'Platform' + char.charCodeAt();
  87         }
  88
  89         return 'Unidentified';
  90     }
  91
  92     _handleKeyDown(e) {
  93         const code = this._getKeyCode(e);
  94         let keysym = KeyboardUtil.getKeysym(e);
  95
  96         // Windows doesn't have a proper AltGr, but handles it using
  97         // fake Ctrl+Alt. However the remote end might not be Windows,
  98         // so we need to merge those in to a single AltGr event. We
  99         // detect this case by seeing the two key events directly after
 100         // each other with a very short time between them (<50ms).
 101         if (this._altGrArmed) {
 102             this._altGrArmed = false;
 103             clearTimeout(this._altGrTimeout);
 104
 105             if ((code === "AltRight") &&
 106                 ((e.timeStamp - this._altGrCtrlTime) < 50)) {
 107                 // FIXME: We fail to detect this if either Ctrl key is
 108                 //        first manually pressed as Windows then no
 109                 //        longer sends the fake Ctrl down event. It
 110                 //        does however happily send real Ctrl events
 111                 //        even when AltGr is already down. Some
 112                 //        browsers detect this for us though and set the
 113                 //        key to "AltGraph".
 114                 keysym = KeyTable.XK_ISO_Level3_Shift;
 115             } else {
 116                 this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
 117             }
 118         }
 119
 120         // We cannot handle keys we cannot track, but we also need
 121         // to deal with virtual keyboards which omit key info
 122         // (iOS omits tracking info on keyup events, which forces us to
 123         // special treat that platform here)
 124         if ((code === 'Unidentified') || browser.isIOS()) {
 125             if (keysym) {
 126                 // If it's a virtual keyboard then it should be
 127                 // sufficient to just send press and release right
 128                 // after each other
 129                 this._sendKeyEvent(keysym, code, true);
 130                 this._sendKeyEvent(keysym, code, false);
 131             }
 132
 133             stopEvent(e);
 134             return;
 135         }
 136
 137         // Alt behaves more like AltGraph on macOS, so shuffle the
 138         // keys around a bit to make things more sane for the remote
 139         // server. This method is used by RealVNC and TigerVNC (and
 140         // possibly others).
 141         if (browser.isMac()) {
 142             switch (keysym) {
 143             case KeyTable.XK_Super_L:
 144                 keysym = KeyTable.XK_Alt_L;
 145                 break;
 146             case KeyTable.XK_Super_R:
 147                 keysym = KeyTable.XK_Super_L;
 148                 break;
 149             case KeyTable.XK_Alt_L:
 150                 keysym = KeyTable.XK_Mode_switch;
 151                 break;
 152             case KeyTable.XK_Alt_R:
 153                 keysym = KeyTable.XK_ISO_Level3_Shift;
 154                 break;
 155             }
 156         }
 157
 158         // Is this key already pressed? If so, then we must use the
 159         // same keysym or we'll confuse the server
 160         if (code in this._keyDownList) {
 161             keysym = this._keyDownList[code];
 162         }
 163
 164         // macOS doesn't send proper key events for modifiers, only
 165         // state change events. That gets extra confusing for CapsLock
 166         // which toggles on each press, but not on release. So pretend
 167         // it was a quick press and release of the button.
 168         if (browser.isMac() && (code === 'CapsLock')) {
 169             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true);
 170             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false);
 171             stopEvent(e);
 172             return;
 173         }
 174
 175         // If this is a legacy browser then we'll need to wait for
 176         // a keypress event as well
 177         // (IE and Edge has a broken KeyboardEvent.key, so we can't
 178         // just check for the presence of that field)
 179         if (!keysym && (!e.key || browser.isIE() || browser.isEdge())) {
 180             this._pendingKey = code;
 181             // However we might not get a keypress event if the key
 182             // is non-printable, which needs some special fallback
 183             // handling
 184             setTimeout(this._handleKeyPressTimeout.bind(this), 10, e);
 185             return;
 186         }
 187
 188         this._pendingKey = null;
 189         stopEvent(e);
 190
 191         // Possible start of AltGr sequence? (see above)
 192         if ((code === "ControlLeft") && browser.isWindows() &&
 193             !("ControlLeft" in this._keyDownList)) {
 194             this._altGrArmed = true;
 195             this._altGrTimeout = setTimeout(this._handleAltGrTimeout.bind(this), 100);
 196             this._altGrCtrlTime = e.timeStamp;
 197             return;
 198         }
 199
 200         this._sendKeyEvent(keysym, code, true);
 201     }
 202
 203     // Legacy event for browsers without code/key
 204     _handleKeyPress(e) {
 205         stopEvent(e);
 206
 207         // Are we expecting a keypress?
 208         if (this._pendingKey === null) {
 209             return;
 210         }
 211
 212         let code = this._getKeyCode(e);
 213         const keysym = KeyboardUtil.getKeysym(e);
 214
 215         // The key we were waiting for?
 216         if ((code !== 'Unidentified') && (code != this._pendingKey)) {
 217             return;
 218         }
 219
 220         code = this._pendingKey;
 221         this._pendingKey = null;
 222
 223         if (!keysym) {
 224             Log.Info('keypress with no keysym:', e);
 225             return;
 226         }
 227
 228         this._sendKeyEvent(keysym, code, true);
 229     }
 230
 231     _handleKeyPressTimeout(e) {
 232         // Did someone manage to sort out the key already?
 233         if (this._pendingKey === null) {
 234             return;
 235         }
 236
 237         let keysym;
 238
 239         const code = this._pendingKey;
 240         this._pendingKey = null;
 241
 242         // We have no way of knowing the proper keysym with the
 243         // information given, but the following are true for most
 244         // layouts
 245         if ((e.keyCode >= 0x30) && (e.keyCode <= 0x39)) {
 246             // Digit
 247             keysym = e.keyCode;
 248         } else if ((e.keyCode >= 0x41) && (e.keyCode <= 0x5a)) {
 249             // Character (A-Z)
 250             let char = String.fromCharCode(e.keyCode);
 251             // A feeble attempt at the correct case
 252             if (e.shiftKey)
 253                 char = char.toUpperCase();
 254             else
 255                 char = char.toLowerCase();
 256             keysym = char.charCodeAt();
 257         } else {
 258             // Unknown, give up
 259             keysym = 0;
 260         }
 261
 262         this._sendKeyEvent(keysym, code, true);
 263     }
 264
 265     _handleKeyUp(e) {
 266         stopEvent(e);
 267
 268         const code = this._getKeyCode(e);
 269
 270         // We can't get a release in the middle of an AltGr sequence, so
 271         // abort that detection
 272         if (this._altGrArmed) {
 273             this._altGrArmed = false;
 274             clearTimeout(this._altGrTimeout);
 275             this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
 276         }
 277
 278         // See comment in _handleKeyDown()
 279         if (browser.isMac() && (code === 'CapsLock')) {
 280             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', true);
 281             this._sendKeyEvent(KeyTable.XK_Caps_Lock, 'CapsLock', false);
 282             return;
 283         }
 284
 285         this._sendKeyEvent(this._keyDownList[code], code, false);
 286     }
 287
 288     _handleAltGrTimeout() {
 289         this._altGrArmed = false;
 290         clearTimeout(this._altGrTimeout);
 291         this._sendKeyEvent(KeyTable.XK_Control_L, "ControlLeft", true);
 292     }
 293
 294     _allKeysUp() {
 295         Log.Debug(">> Keyboard.allKeysUp");
 296         for (let code in this._keyDownList) {
 297             this._sendKeyEvent(this._keyDownList[code], code, false);
 298         }
 299         Log.Debug("<< Keyboard.allKeysUp");
 300     }
 301
 302     // Firefox Alt workaround, see below
 303     _checkAlt(e) {
 304         if (e.altKey) {
 305             return;
 306         }
 307
 308         const target = this._target;
 309         const downList = this._keyDownList;
 310         ['AltLeft', 'AltRight'].forEach((code) => {
 311             if (!(code in downList)) {
 312                 return;
 313             }
 314
 315             const event = new KeyboardEvent('keyup',
 316                                           { key: downList[code],
 317                                             code: code });
 318             target.dispatchEvent(event);
 319         });
 320     }
 321
 322     // ===== PUBLIC METHODS =====
 323
 324     grab() {
 325         //Log.Debug(">> Keyboard.grab");
 326
 327         this._target.addEventListener('keydown', this._eventHandlers.keydown);
 328         this._target.addEventListener('keyup', this._eventHandlers.keyup);
 329         this._target.addEventListener('keypress', this._eventHandlers.keypress);
 330
 331         // Release (key up) if window loses focus
 332         window.addEventListener('blur', this._eventHandlers.blur);
 333
 334         // Firefox has broken handling of Alt, so we need to poll as
 335         // best we can for releases (still doesn't prevent the menu
 336         // from popping up though as we can't call preventDefault())
 337         if (browser.isWindows() && browser.isFirefox()) {
 338             const handler = this._eventHandlers.checkalt;
 339             ['mousedown', 'mouseup', 'mousemove', 'wheel',
 340              'touchstart', 'touchend', 'touchmove',
 341              'keydown', 'keyup'].forEach(type =>
 342                 document.addEventListener(type, handler,
 343                                           { capture: true,
 344                                             passive: true }));
 345         }
 346
 347         //Log.Debug("<< Keyboard.grab");
 348     }
 349
 350     ungrab() {
 351         //Log.Debug(">> Keyboard.ungrab");
 352
 353         if (browser.isWindows() && browser.isFirefox()) {
 354             const handler = this._eventHandlers.checkalt;
 355             ['mousedown', 'mouseup', 'mousemove', 'wheel',
 356              'touchstart', 'touchend', 'touchmove',
 357              'keydown', 'keyup'].forEach(type => document.removeEventListener(type, handler));
 358         }
 359
 360         this._target.removeEventListener('keydown', this._eventHandlers.keydown);
 361         this._target.removeEventListener('keyup', this._eventHandlers.keyup);
 362         this._target.removeEventListener('keypress', this._eventHandlers.keypress);
 363         window.removeEventListener('blur', this._eventHandlers.blur);
 364
 365         // Release (key up) all keys that are in a down state
 366         this._allKeysUp();
 367
 368         //Log.Debug(">> Keyboard.ungrab");
 369     }
 370 }