2020-09-08 00:12:43 +00:00
|
|
|
/*
|
2021-01-01 19:50:41 +00:00
|
|
|
* Copyright (C) 2020-2021 Yomichan Authors
|
2020-09-08 00:12:43 +00:00
|
|
|
*
|
|
|
|
* This program is free software: you can redistribute it and/or modify
|
|
|
|
* it under the terms of the GNU General Public License as published by
|
|
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
|
|
* (at your option) any later version.
|
|
|
|
*
|
|
|
|
* This program is distributed in the hope that it will be useful,
|
|
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
* GNU General Public License for more details.
|
|
|
|
*
|
|
|
|
* You should have received a copy of the GNU General Public License
|
|
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
*/
|
|
|
|
|
|
|
|
/* global
|
|
|
|
* DocumentUtil
|
|
|
|
*/
|
|
|
|
|
|
|
|
class KeyboardMouseInputField extends EventDispatcher {
|
2020-09-11 20:57:57 +00:00
|
|
|
constructor(inputNode, mouseButton, os, isPointerTypeSupported=null) {
|
2020-09-08 00:12:43 +00:00
|
|
|
super();
|
|
|
|
this._inputNode = inputNode;
|
2020-09-08 14:53:41 +00:00
|
|
|
this._mouseButton = mouseButton;
|
2020-09-11 20:57:57 +00:00
|
|
|
this._isPointerTypeSupported = isPointerTypeSupported;
|
2020-09-08 14:53:41 +00:00
|
|
|
this._keySeparator = ' + ';
|
|
|
|
this._inputNameMap = new Map(DocumentUtil.getModifierKeys(os));
|
2021-01-14 22:54:09 +00:00
|
|
|
this._modifierPriorities = new Map([
|
2020-09-08 00:12:43 +00:00
|
|
|
['meta', -4],
|
|
|
|
['ctrl', -3],
|
|
|
|
['alt', -2],
|
|
|
|
['shift', -1]
|
|
|
|
]);
|
|
|
|
this._mouseInputNamePattern = /^mouse(\d+)$/;
|
|
|
|
this._eventListeners = new EventListenerCollection();
|
2021-01-14 22:54:09 +00:00
|
|
|
this._key = null;
|
|
|
|
this._modifiers = [];
|
2020-09-13 15:28:13 +00:00
|
|
|
this._penPointerIds = new Set();
|
2021-01-14 22:54:09 +00:00
|
|
|
this._mouseModifiersSupported = false;
|
|
|
|
this._keySupported = false;
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
get modifiers() {
|
|
|
|
return this._modifiers;
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
prepare(key, modifiers, mouseModifiersSupported=false, keySupported=false) {
|
2020-09-08 00:12:43 +00:00
|
|
|
this.cleanup();
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
this._key = key;
|
|
|
|
this._modifiers = this._sortModifiers(modifiers);
|
|
|
|
this._mouseModifiersSupported = mouseModifiersSupported;
|
|
|
|
this._keySupported = keySupported;
|
|
|
|
this._updateDisplayString();
|
2020-09-08 00:12:43 +00:00
|
|
|
const events = [
|
|
|
|
[this._inputNode, 'keydown', this._onModifierKeyDown.bind(this), false]
|
|
|
|
];
|
2021-01-14 22:54:09 +00:00
|
|
|
if (mouseModifiersSupported && this._mouseButton !== null) {
|
2020-09-08 00:12:43 +00:00
|
|
|
events.push(
|
|
|
|
[this._mouseButton, 'mousedown', this._onMouseButtonMouseDown.bind(this), false],
|
2020-09-11 20:57:57 +00:00
|
|
|
[this._mouseButton, 'pointerdown', this._onMouseButtonPointerDown.bind(this), false],
|
2020-09-13 15:28:13 +00:00
|
|
|
[this._mouseButton, 'pointerover', this._onMouseButtonPointerOver.bind(this), false],
|
|
|
|
[this._mouseButton, 'pointerout', this._onMouseButtonPointerOut.bind(this), false],
|
|
|
|
[this._mouseButton, 'pointercancel', this._onMouseButtonPointerCancel.bind(this), false],
|
2020-09-08 00:12:43 +00:00
|
|
|
[this._mouseButton, 'mouseup', this._onMouseButtonMouseUp.bind(this), false],
|
|
|
|
[this._mouseButton, 'contextmenu', this._onMouseButtonContextMenu.bind(this), false]
|
|
|
|
);
|
|
|
|
}
|
|
|
|
for (const args of events) {
|
|
|
|
this._eventListeners.addEventListener(...args);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
cleanup() {
|
|
|
|
this._eventListeners.removeAllEventListeners();
|
2021-01-14 22:54:09 +00:00
|
|
|
this._modifiers = [];
|
|
|
|
this._key = null;
|
|
|
|
this._mouseModifiersSupported = false;
|
|
|
|
this._keySupported = false;
|
2020-09-13 15:28:13 +00:00
|
|
|
this._penPointerIds.clear();
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
|
2020-10-31 20:26:01 +00:00
|
|
|
clearInputs() {
|
2021-01-14 22:54:09 +00:00
|
|
|
this._updateModifiers([], null);
|
2020-10-31 20:26:01 +00:00
|
|
|
}
|
|
|
|
|
2020-09-08 00:12:43 +00:00
|
|
|
// Private
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
_sortModifiers(modifiers) {
|
2020-09-08 00:12:43 +00:00
|
|
|
const pattern = this._mouseInputNamePattern;
|
2021-01-14 22:54:09 +00:00
|
|
|
const keyPriorities = this._modifierPriorities;
|
|
|
|
const modifierInfos = modifiers.map((modifier, index) => {
|
|
|
|
const match = pattern.exec(modifier);
|
2020-09-08 00:12:43 +00:00
|
|
|
if (match !== null) {
|
2021-01-14 22:54:09 +00:00
|
|
|
return [modifier, 1, Number.parseInt(match[1], 10), index];
|
2020-09-08 00:12:43 +00:00
|
|
|
} else {
|
2021-01-14 22:54:09 +00:00
|
|
|
let priority = keyPriorities.get(modifier);
|
2020-09-08 00:12:43 +00:00
|
|
|
if (typeof priority === 'undefined') { priority = 0; }
|
2021-01-14 22:54:09 +00:00
|
|
|
return [modifier, 0, priority, index];
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
});
|
2021-01-14 22:54:09 +00:00
|
|
|
modifierInfos.sort((a, b) => {
|
2020-09-08 00:12:43 +00:00
|
|
|
let i = a[1] - b[1];
|
|
|
|
if (i !== 0) { return i; }
|
|
|
|
|
|
|
|
i = a[2] - b[2];
|
|
|
|
if (i !== 0) { return i; }
|
|
|
|
|
|
|
|
i = a[0].localeCompare(b[0], 'en-US'); // Ensure an invariant culture
|
|
|
|
if (i !== 0) { return i; }
|
|
|
|
|
|
|
|
i = a[3] - b[3];
|
|
|
|
return i;
|
|
|
|
});
|
2021-01-14 22:54:09 +00:00
|
|
|
return modifierInfos.map(([modifier]) => modifier);
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
_updateDisplayString() {
|
2020-09-08 00:12:43 +00:00
|
|
|
let displayValue = '';
|
|
|
|
let first = true;
|
2021-01-14 22:54:09 +00:00
|
|
|
for (const modifier of this._modifiers) {
|
|
|
|
const {name} = this._getModifierName(modifier);
|
2020-09-08 00:12:43 +00:00
|
|
|
if (first) {
|
|
|
|
first = false;
|
|
|
|
} else {
|
|
|
|
displayValue += this._keySeparator;
|
|
|
|
}
|
|
|
|
displayValue += name;
|
|
|
|
}
|
2021-01-14 22:54:09 +00:00
|
|
|
if (this._key !== null) {
|
|
|
|
if (!first) { displayValue += this._keySeparator; }
|
|
|
|
displayValue += this._key;
|
|
|
|
}
|
|
|
|
this._inputNode.value = displayValue;
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
_getModifierName(modifier) {
|
2020-09-08 00:12:43 +00:00
|
|
|
const pattern = this._mouseInputNamePattern;
|
2021-01-14 22:54:09 +00:00
|
|
|
const match = pattern.exec(modifier);
|
2020-09-08 00:12:43 +00:00
|
|
|
if (match !== null) {
|
|
|
|
return {name: `Mouse ${match[1]}`, type: 'mouse'};
|
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
let name = this._inputNameMap.get(modifier);
|
|
|
|
if (typeof name === 'undefined') { name = modifier; }
|
2020-09-08 00:12:43 +00:00
|
|
|
return {name, type: 'key'};
|
|
|
|
}
|
|
|
|
|
|
|
|
_getModifierKeys(e) {
|
2020-11-09 03:19:54 +00:00
|
|
|
const modifiers = new Set(DocumentUtil.getActiveModifiers(e));
|
2020-09-08 00:12:43 +00:00
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
|
|
|
|
// https://askubuntu.com/questions/567731/why-is-shift-alt-being-mapped-to-meta
|
|
|
|
// It works with mouse events on some platforms, so try to determine if metaKey is pressed.
|
|
|
|
// This is a hack and only works when both Shift and Alt are not pressed.
|
|
|
|
if (
|
|
|
|
!modifiers.has('meta') &&
|
|
|
|
DocumentUtil.getKeyFromEvent(e) === 'Meta' &&
|
|
|
|
!(
|
|
|
|
modifiers.size === 2 &&
|
|
|
|
modifiers.has('shift') &&
|
|
|
|
modifiers.has('alt')
|
|
|
|
)
|
|
|
|
) {
|
|
|
|
modifiers.add('meta');
|
|
|
|
}
|
|
|
|
return modifiers;
|
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
_isModifierKey(keyName) {
|
|
|
|
switch (keyName) {
|
|
|
|
case 'Alt':
|
|
|
|
case 'Control':
|
|
|
|
case 'Meta':
|
|
|
|
case 'Shift':
|
|
|
|
return true;
|
|
|
|
default:
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-08 00:12:43 +00:00
|
|
|
_onModifierKeyDown(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
const key = DocumentUtil.getKeyFromEvent(e);
|
2021-01-14 22:54:09 +00:00
|
|
|
if (this._keySupported) {
|
|
|
|
this._updateModifiers([...this._getModifierKeys(e)], this._isModifierKey(key) ? void 0 : key);
|
|
|
|
} else {
|
|
|
|
switch (key) {
|
|
|
|
case 'Escape':
|
|
|
|
case 'Backspace':
|
|
|
|
this.clearInputs();
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
this._addModifiers(this._getModifierKeys(e));
|
|
|
|
break;
|
|
|
|
}
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_onMouseButtonMouseDown(e) {
|
|
|
|
e.preventDefault();
|
2021-01-14 22:54:09 +00:00
|
|
|
this._addModifiers(DocumentUtil.getActiveButtons(e));
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
|
2020-09-11 20:57:57 +00:00
|
|
|
_onMouseButtonPointerDown(e) {
|
2020-09-13 15:28:13 +00:00
|
|
|
if (!e.isPrimary) { return; }
|
|
|
|
|
|
|
|
let {pointerType, pointerId} = e;
|
|
|
|
// Workaround for Firefox bug not detecting certain 'touch' events as 'pen' events.
|
|
|
|
if (this._penPointerIds.has(pointerId)) { pointerType = 'pen'; }
|
|
|
|
|
2020-09-11 20:57:57 +00:00
|
|
|
if (
|
|
|
|
typeof this._isPointerTypeSupported !== 'function' ||
|
|
|
|
!this._isPointerTypeSupported(pointerType)
|
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
2021-01-14 22:54:09 +00:00
|
|
|
this._addModifiers(DocumentUtil.getActiveButtons(e));
|
2020-09-11 20:57:57 +00:00
|
|
|
}
|
|
|
|
|
2020-09-13 15:28:13 +00:00
|
|
|
_onMouseButtonPointerOver(e) {
|
|
|
|
const {pointerType, pointerId} = e;
|
|
|
|
if (pointerType === 'pen') {
|
|
|
|
this._penPointerIds.add(pointerId);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_onMouseButtonPointerOut(e) {
|
|
|
|
const {pointerId} = e;
|
|
|
|
this._penPointerIds.delete(pointerId);
|
|
|
|
}
|
|
|
|
|
|
|
|
_onMouseButtonPointerCancel(e) {
|
|
|
|
this._onMouseButtonPointerOut(e);
|
|
|
|
}
|
|
|
|
|
2020-09-08 00:12:43 +00:00
|
|
|
_onMouseButtonMouseUp(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
_onMouseButtonContextMenu(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
_addModifiers(newModifiers, newKey) {
|
|
|
|
const modifiers = new Set(this._modifiers);
|
|
|
|
for (const modifier of newModifiers) {
|
|
|
|
modifiers.add(modifier);
|
|
|
|
}
|
|
|
|
this._updateModifiers([...modifiers], newKey);
|
|
|
|
}
|
|
|
|
|
|
|
|
_updateModifiers(modifiers, newKey) {
|
|
|
|
modifiers = this._sortModifiers(modifiers);
|
|
|
|
|
|
|
|
let changed = false;
|
|
|
|
if (typeof newKey !== 'undefined' && this._key !== newKey) {
|
|
|
|
this._key = newKey;
|
|
|
|
changed = true;
|
|
|
|
}
|
|
|
|
if (!this._areArraysEqual(this._modifiers, modifiers)) {
|
|
|
|
this._modifiers = modifiers;
|
|
|
|
changed = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
this._updateDisplayString();
|
|
|
|
if (changed) {
|
|
|
|
this.trigger('change', {modifiers: this._modifiers, key: this._key});
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
_areArraysEqual(array1, array2) {
|
|
|
|
const length = array1.length;
|
|
|
|
if (length !== array2.length) { return false; }
|
|
|
|
|
|
|
|
for (let i = 0; i < length; ++i) {
|
|
|
|
if (array1[i] !== array2[i]) { return false; }
|
|
|
|
}
|
2020-09-08 00:12:43 +00:00
|
|
|
|
2021-01-14 22:54:09 +00:00
|
|
|
return true;
|
2020-09-08 00:12:43 +00:00
|
|
|
}
|
|
|
|
}
|