novnc
Version:
An HTML5 VNC client
494 lines (458 loc) • 21.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var Log = _interopRequireWildcard(require("../util/logging.js"));
var _events = require("../util/events.js");
var KeyboardUtil = _interopRequireWildcard(require("./util.js"));
var _keysym = _interopRequireDefault(require("./keysym.js"));
var _keysymdef = _interopRequireDefault(require("./keysymdef.js"));
var _imekeys = _interopRequireDefault(require("./imekeys.js"));
var browser = _interopRequireWildcard(require("../util/browser.js"));
var _ui = _interopRequireDefault(require("../../app/ui.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
//
// Keyboard event handler
//
var Keyboard = /*#__PURE__*/function () {
function Keyboard(screenInput, touchInput) {
_classCallCheck(this, Keyboard);
this._screenInput = screenInput;
this._touchInput = touchInput;
this._keyDownList = {}; // List of depressed keys
// (even if they are happy)
this._altGrArmed = false; // Windows AltGr detection
// keep these here so we can refer to them later
this._eventHandlers = {
'keyup': this._handleKeyUp.bind(this),
'keydown': this._handleKeyDown.bind(this),
'blur': this._allKeysUp.bind(this),
'compositionstart': this._handleCompositionStart.bind(this),
'compositionend': this._handleCompositionEnd.bind(this),
'input': this._handleInput.bind(this)
};
// ===== EVENT HANDLERS =====
this.onkeyevent = function () {}; // Handler for key press/release
this._enableIME = false;
this._imeHold = false;
this._imeInProgress = false;
this._lastKeyboardInput = null;
this._defaultKeyboardInputLen = 100;
this._keyboardInputReset();
}
// ===== PUBLIC METHODS =====
_createClass(Keyboard, [{
key: "enableIME",
get: function get() {
return this._enableIME;
},
set: function set(val) {
this._enableIME = val;
this.focus();
}
// ===== PRIVATE METHODS =====
}, {
key: "_sendKeyEvent",
value: function _sendKeyEvent(keysym, code, down) {
if (down) {
this._keyDownList[code] = keysym;
} else {
// On MacOs zoom and shortcut actions are CMD based so we need to
// let the remote know that it should unselect the CTRL key instead
if (browser.isMac() && this._keyDownList["ControlLeft"] && (code === "MetaLeft" || code === "MetaRight")) {
keysym = _keysym["default"].XK_Control_L;
code = "ControlLeft";
}
// Do we really think this key is down?
if (!(code in this._keyDownList)) {
return;
}
delete this._keyDownList[code];
}
Log.Debug("onkeyevent " + (down ? "down" : "up") + ", keysym: " + keysym, ", code: " + code);
this.onkeyevent(keysym, code, down);
}
}, {
key: "_getKeyCode",
value: function _getKeyCode(e) {
var code = KeyboardUtil.getKeycode(e);
if (code !== 'Unidentified') {
return code;
}
// Unstable, but we don't have anything else to go on
if (e.keyCode) {
// 229 is used for composition events
if (e.keyCode !== 229) {
return 'Platform' + e.keyCode;
}
}
// A precursor to the final DOM3 standard. Unfortunately it
// is not layout independent, so it is as bad as using keyCode
if (e.keyIdentifier) {
// Non-character key?
if (e.keyIdentifier.substr(0, 2) !== 'U+') {
return e.keyIdentifier;
}
var codepoint = parseInt(e.keyIdentifier.substr(2), 16);
var _char = String.fromCharCode(codepoint).toUpperCase();
return 'Platform' + _char.charCodeAt();
}
return 'Unidentified';
}
}, {
key: "_handleCompositionStart",
value: function _handleCompositionStart(e) {
Log.Debug("composition started");
if (this._enableIME) {
this._imeHold = true;
this._imeInProgress = true;
}
}
}, {
key: "_handleCompositionEnd",
value: function _handleCompositionEnd(e) {
Log.Debug("Composition ended");
if (this._enableIME) {
this._imeInProgress = false;
}
if ((0, browser.isChromiumBased)()) {
this._imeHold = false;
}
}
}, {
key: "_handleInput",
value: function _handleInput(e) {
//input event occurs only when keyup keydown events don't prevent default
//IME events will make this happen, for example
//IME changes can back out old characters and replace, thus send differential if IME
//otherwise send new characters
if (this._enableIME && this._imeHold) {
Log.Debug("IME input change, sending differential");
if (!this._imeInProgress) {
this._imeHold = false; //Firefox fires compisitionend before last input change
}
var oldValue = this._lastKeyboardInput;
var newValue = e.target.value;
var diff_start = 0;
//find position where difference starts
for (var i = 0; i < Math.min(oldValue.length, newValue.length); i++) {
if (newValue.charAt(i) != oldValue.charAt(i)) {
break;
}
diff_start++;
}
//send backspaces if needed
for (var bs = oldValue.length - diff_start; bs > 0; bs--) {
this._sendKeyEvent(_keysym["default"].XK_BackSpace, "Backspace", true);
this._sendKeyEvent(_keysym["default"].XK_BackSpace, "Backspace", false);
}
//send new keys
for (var _i = diff_start; _i < newValue.length; _i++) {
this._sendKeyEvent(_keysymdef["default"].lookup(newValue.charCodeAt(_i)), 'Unidentified', true);
this._sendKeyEvent(_keysymdef["default"].lookup(newValue.charCodeAt(_i)), 'Unidentified', false);
}
this._lastKeyboardInput = newValue;
} else {
Log.Debug("Non-IME input change, sending new characters");
var _newValue = e.target.value;
if (!this._lastKeyboardInput) {
this._keyboardInputReset();
}
var _oldValue = this._lastKeyboardInput;
var newLen;
try {
// Try to check caret position since whitespace at the end
// will not be considered by value.length in some browsers
newLen = Math.max(e.target.selectionStart, _newValue.length);
} catch (err) {
// selectionStart is undefined in Google Chrome
newLen = _newValue.length;
}
var oldLen = _oldValue.length;
var inputs = newLen - oldLen;
var backspaces = inputs < 0 ? -inputs : 0;
// Compare the old string with the new to account for
// text-corrections or other input that modify existing text
for (var _i2 = 0; _i2 < Math.min(oldLen, newLen); _i2++) {
if (_newValue.charAt(_i2) != _oldValue.charAt(_i2)) {
inputs = newLen - _i2;
backspaces = oldLen - _i2;
break;
}
}
// Send the key events
for (var _i3 = 0; _i3 < backspaces; _i3++) {
this._sendKeyEvent(_keysym["default"].XK_BackSpace, "Backspace", true);
this._sendKeyEvent(_keysym["default"].XK_BackSpace, "Backspace", false);
}
for (var _i4 = newLen - inputs; _i4 < newLen; _i4++) {
this._sendKeyEvent(_keysymdef["default"].lookup(_newValue.charCodeAt(_i4)), 'Unidentified', true);
this._sendKeyEvent(_keysymdef["default"].lookup(_newValue.charCodeAt(_i4)), 'Unidentified', false);
}
// Control the text content length in the keyboardinput element
if (newLen > 2 * this._defaultKeyboardInputLen) {
this._keyboardInputReset();
} else if (newLen < 1) {
// There always have to be some text in the keyboardinput
// element with which backspace can interact.
this._keyboardInputReset();
// This sometimes causes the keyboard to disappear for a second
// but it is required for the android keyboard to recognize that
// text has been added to the field
e.target.blur();
// This has to be ran outside of the input handler in order to work
setTimeout(e.target.focus.bind(e.target), 0);
} else {
this._lastKeyboardInput = _newValue;
}
}
}
}, {
key: "_keyboardInputReset",
value: function _keyboardInputReset() {
this._touchInput.value = new Array(this._defaultKeyboardInputLen).join("_");
this._lastKeyboardInput = this._touchInput.value;
}
}, {
key: "_handleKeyDown",
value: function _handleKeyDown(e) {
var code = this._getKeyCode(e);
var keysym = KeyboardUtil.getKeysym(e);
if (this._isIMEInteraction(e)) {
//skip event if IME related
Log.Debug("Skipping keydown, IME interaction, code: " + code + " keysym: " + keysym + " keycode: " + e.keyCode);
return;
}
// Windows doesn't have a proper AltGr, but handles it using
// fake Ctrl+Alt. However the remote end might not be Windows,
// so we need to merge those in to a single AltGr event. We
// detect this case by seeing the two key events directly after
// each other with a very short time between them (<50ms).
if (this._altGrArmed) {
this._altGrArmed = false;
clearTimeout(this._altGrTimeout);
if (code === "AltRight" && e.timeStamp - this._altGrCtrlTime < 50) {
// FIXME: We fail to detect this if either Ctrl key is
// first manually pressed as Windows then no
// longer sends the fake Ctrl down event. It
// does however happily send real Ctrl events
// even when AltGr is already down. Some
// browsers detect this for us though and set the
// key to "AltGraph".
keysym = _keysym["default"].XK_ISO_Level3_Shift;
} else {
this._sendKeyEvent(_keysym["default"].XK_Control_L, "ControlLeft", true);
}
}
// We cannot handle keys we cannot track, but we also need
// to deal with virtual keyboards which omit key info
if (code === 'Unidentified') {
if (keysym) {
// If it's a virtual keyboard then it should be
// sufficient to just send press and release right
// after each other
this._sendKeyEvent(keysym, code, true);
this._sendKeyEvent(keysym, code, false);
}
(0, _events.stopEvent)(e);
return;
}
// Translate MacOs CMD based shortcuts to their CTRL based counterpart
if (browser.isMac() && _ui["default"].rfb && _ui["default"].rfb.translateShortcuts && code !== "MetaLeft" && code !== "MetaRight" && e.metaKey && !e.ctrlKey && !e.altKey) {
this._sendKeyEvent(this._keyDownList["MetaLeft"], "MetaLeft", false);
this._sendKeyEvent(this._keyDownList["MetaRight"], "MetaRight", false);
this._sendKeyEvent(_keysym["default"].XK_Control_L, "ControlLeft", true);
this._sendKeyEvent(keysym, code, true);
(0, _events.stopEvent)(e);
return;
}
// Alt behaves more like AltGraph on macOS, so shuffle the
// keys around a bit to make things more sane for the remote
// server. This method is used by RealVNC and TigerVNC (and
// possibly others).
if (browser.isMac() || browser.isIOS()) {
switch (keysym) {
case _keysym["default"].XK_Super_L:
keysym = _keysym["default"].XK_Alt_L;
break;
case _keysym["default"].XK_Super_R:
keysym = _keysym["default"].XK_Super_L;
break;
case _keysym["default"].XK_Alt_L:
keysym = _keysym["default"].XK_Mode_switch;
break;
case _keysym["default"].XK_Alt_R:
keysym = _keysym["default"].XK_ISO_Level3_Shift;
break;
}
}
// Is this key already pressed? If so, then we must use the
// same keysym or we'll confuse the server
if (code in this._keyDownList) {
keysym = this._keyDownList[code];
}
// macOS doesn't send proper key events for modifiers, only
// state change events. That gets extra confusing for CapsLock
// which toggles on each press, but not on release. So pretend
// it was a quick press and release of the button.
if ((browser.isMac() || browser.isIOS()) && code === 'CapsLock') {
this._sendKeyEvent(_keysym["default"].XK_Caps_Lock, 'CapsLock', true);
this._sendKeyEvent(_keysym["default"].XK_Caps_Lock, 'CapsLock', false);
(0, _events.stopEvent)(e);
return;
}
// Windows doesn't send proper key releases for a bunch of
// Japanese IM keys so we have to fake the release right away
var jpBadKeys = [_keysym["default"].XK_Zenkaku_Hankaku, _keysym["default"].XK_Eisu_toggle, _keysym["default"].XK_Katakana, _keysym["default"].XK_Hiragana, _keysym["default"].XK_Romaji];
if (browser.isWindows() && jpBadKeys.includes(keysym)) {
this._sendKeyEvent(keysym, code, true);
this._sendKeyEvent(keysym, code, false);
(0, _events.stopEvent)(e);
return;
}
(0, _events.stopEvent)(e);
// Possible start of AltGr sequence? (see above)
if (code === "ControlLeft" && browser.isWindows() && !("ControlLeft" in this._keyDownList)) {
this._altGrArmed = true;
this._altGrTimeout = setTimeout(this._handleAltGrTimeout.bind(this), 100);
this._altGrCtrlTime = e.timeStamp;
return;
}
this._sendKeyEvent(keysym, code, true);
}
}, {
key: "_handleKeyUp",
value: function _handleKeyUp(e) {
var code = this._getKeyCode(e);
if (this._isIMEInteraction(e)) {
//skip IME related events
Log.Debug("Skipping keyup, IME interaction, code: " + code + " keycode: " + e.keyCode);
return;
}
(0, _events.stopEvent)(e);
// We can't get a release in the middle of an AltGr sequence, so
// abort that detection
if (this._altGrArmed) {
this._altGrArmed = false;
clearTimeout(this._altGrTimeout);
this._sendKeyEvent(_keysym["default"].XK_Control_L, "ControlLeft", true);
}
// See comment in _handleKeyDown()
if ((browser.isMac() || browser.isIOS()) && code === 'CapsLock') {
this._sendKeyEvent(_keysym["default"].XK_Caps_Lock, 'CapsLock', true);
this._sendKeyEvent(_keysym["default"].XK_Caps_Lock, 'CapsLock', false);
return;
}
this._sendKeyEvent(this._keyDownList[code], code, false);
// Windows has a rather nasty bug where it won't send key
// release events for a Shift button if the other Shift is still
// pressed
if (browser.isWindows() && (code === 'ShiftLeft' || code === 'ShiftRight')) {
if ('ShiftRight' in this._keyDownList) {
this._sendKeyEvent(this._keyDownList['ShiftRight'], 'ShiftRight', false);
}
if ('ShiftLeft' in this._keyDownList) {
this._sendKeyEvent(this._keyDownList['ShiftLeft'], 'ShiftLeft', false);
}
}
}
}, {
key: "_handleAltGrTimeout",
value: function _handleAltGrTimeout() {
this._altGrArmed = false;
clearTimeout(this._altGrTimeout);
this._sendKeyEvent(_keysym["default"].XK_Control_L, "ControlLeft", true);
}
}, {
key: "_allKeysUp",
value: function _allKeysUp() {
Log.Debug(">> Keyboard.allKeysUp");
for (var code in this._keyDownList) {
this._sendKeyEvent(this._keyDownList[code], code, false);
}
Log.Debug("<< Keyboard.allKeysUp");
}
}, {
key: "_isIMEInteraction",
value: function _isIMEInteraction(e) {
//input must come from touchinput (textarea) and ime must be enabled
if (e.target != this._touchInput || !this._enableIME) {
return false;
}
//keyCode of 229 is IME composition
if (e.keyCode == 229) {
return true;
}
//unfortunately, IME interactions can come through as events
//generally safe to ignore and let them come in as "input" events instead
//we can't do that with none character keys though
//Firefox does not seem to fire key events for IME interaction but Chrome does
//TODO: potentially skip this for Firefox browsers, needs more testing with different IME types
if (e.keyCode in _imekeys["default"]) {
return true;
}
return false;
}
// ===== PUBLIC METHODS =====
}, {
key: "focus",
value: function focus() {
if (this._enableIME) {
this._touchInput.focus();
} else {
this._screenInput.focus();
}
}
}, {
key: "blur",
value: function blur() {
if (this._enableIME) {
this._touchInput.blur();
} else {
this._screenInput.blur();
}
}
}, {
key: "grab",
value: function grab() {
//Log.Debug(">> Keyboard.grab");
this._screenInput.addEventListener('keydown', this._eventHandlers.keydown);
this._screenInput.addEventListener('keyup', this._eventHandlers.keyup);
this._touchInput.addEventListener('keydown', this._eventHandlers.keydown);
this._touchInput.addEventListener('keyup', this._eventHandlers.keyup);
this._touchInput.addEventListener('compositionstart', this._eventHandlers.compositionstart);
this._touchInput.addEventListener('compositionend', this._eventHandlers.compositionend);
this._touchInput.addEventListener('input', this._eventHandlers.input);
// Release (key up) if window loses focus
window.addEventListener('blur', this._eventHandlers.blur);
//Log.Debug("<< Keyboard.grab");
}
}, {
key: "ungrab",
value: function ungrab() {
//Log.Debug(">> Keyboard.ungrab");
this._screenInput.removeEventListener('keydown', this._eventHandlers.keydown);
this._screenInput.removeEventListener('keyup', this._eventHandlers.keyup);
this._touchInput.removeEventListener('keydown', this._eventHandlers.keydown);
this._touchInput.removeEventListener('keyup', this._eventHandlers.keyup);
this._touchInput.removeEventListener('compositionstart', this._eventHandlers.compositionstart);
this._touchInput.removeEventListener('compositionend', this._eventHandlers.compositionend);
this._touchInput.removeEventListener('input', this._eventHandlers.input);
window.removeEventListener('blur', this._eventHandlers.blur);
// Release (key up) all keys that are in a down state
this._allKeysUp();
//Log.Debug(">> Keyboard.ungrab");
}
}]);
return Keyboard;
}();
exports["default"] = Keyboard;