From 6ed3f9e41478b59bd27a3b8ae930091430b85e5b Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 18 Sep 2018 12:34:41 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF?= =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0=E3=81=AA=E3=81=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/app/common/hotkey.ts | 94 +++++++----- src/client/app/common/keycode.ts | 134 +++--------------- .../views/components/reaction-picker.vue | 2 +- .../desktop/views/components/notes.note.vue | 2 +- 4 files changed, 78 insertions(+), 154 deletions(-) diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts index 62726887d..66336fca6 100644 --- a/src/client/app/common/hotkey.ts +++ b/src/client/app/common/hotkey.ts @@ -1,29 +1,42 @@ import keyCode from './keycode'; +import { concat } from '../../../prelude/array'; -const getKeyMap = keymap => Object.keys(keymap).map(input => { - const result = {} as any; +type pattern = { + which: string[]; + ctrl?: boolean; + shift?: boolean; + alt?: boolean; +}; - const { keyup, keydown } = keymap[input]; +type action = { + patterns: pattern[]; - input.split('+').forEach(keyName => { - switch (keyName.toLowerCase()) { - case 'ctrl': - case 'alt': - case 'shift': - case 'meta': - result[keyName] = true; - break; - default: { - result.keyCode = keyCode(keyName); - if (!Array.isArray(result.keyCode)) result.keyCode = [result.keyCode]; + callback: Function; +}; + +const getKeyMap = keymap => Object.entries(keymap).map(([patterns, callback]): action => { + const result = { + patterns: [], + callback: callback + } as action; + + result.patterns = patterns.split('|').map(part => { + const pattern = { + which: [] + } as pattern; + + part.trim().split('+').forEach(key => { + key = key.trim().toLowerCase(); + switch (key) { + case 'ctrl': pattern.ctrl = true; break; + case 'alt': pattern.alt = true; break; + case 'shift': pattern.shift = true; break; + default: pattern.which = keyCode(key).map(k => k.toLowerCase()); } - } - }); + }); - result.callback = { - keydown: keydown || keymap[input], - keyup - }; + return pattern; + }); return result; }); @@ -36,28 +49,39 @@ export default { bind(el, binding) { el._hotkey_global = binding.modifiers.global === true; - el._keymap = getKeyMap(binding.value); + const actions = getKeyMap(binding.value); - el.dataset.reservedKeyCodes = el._keymap.map(key => `'${key.keyCode}'`).join(' '); + const reservedKeys = concat(actions.map(a => a.patterns.map(p => p.which))); + + el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' '); el._keyHandler = e => { - const reservedKeyCodes = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeyCodes || '' : ''; + const key = e.code.toLowerCase(); + + const targetReservedKeys = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeys || '' : ''; if (document.activeElement && ignoreElemens.some(el => document.activeElement.matches(el))) return; - for (const hotkey of el._keymap) { - if (el._hotkey_global && reservedKeyCodes.includes(`'${e.keyCode}'`)) break; + for (const action of actions) { + if (el._hotkey_global && targetReservedKeys.includes(`'${key}'`)) break; - const callback = hotkey.keyCode.includes(e.keyCode) && - !!hotkey.ctrl === e.ctrlKey && - !!hotkey.alt === e.altKey && - !!hotkey.shift === e.shiftKey && - !!hotkey.meta === e.metaKey && - hotkey.callback[e.type]; + const matched = action.patterns.some(pattern => { + let matched = pattern.which.includes(key); + if (pattern.ctrl && !e.ctrlKey) matched = false; + if (pattern.shift && !e.shiftKey) matched = false; + if (pattern.alt && !e.altKey) matched = false; - if (callback) { - e.preventDefault(); - e.stopPropagation(); - callback(e); + if (matched) { + e.preventDefault(); + e.stopPropagation(); + action.callback(e); + return true; + } else { + return false; + } + }); + + if (matched) { + break; } } }; diff --git a/src/client/app/common/keycode.ts b/src/client/app/common/keycode.ts index 55043ad76..5786c1dc0 100644 --- a/src/client/app/common/keycode.ts +++ b/src/client/app/common/keycode.ts @@ -1,116 +1,20 @@ -export default searchInput => { - // Keyboard Events - if (searchInput && typeof searchInput === 'object') { - const hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode; - if (hasKeyCode) { - searchInput = hasKeyCode; - } +export default (input: string): string[] => { + if (Object.keys(aliases).some(a => a.toLowerCase() == input.toLowerCase())) { + const codes = aliases[input]; + return Array.isArray(codes) ? codes : [codes]; + } else { + return [input]; } - - // Numbers - // if (typeof searchInput === 'number') { - // return names[searchInput] - // } - - // Everything else (cast to string) - const search = String(searchInput); - - // check codes - const foundNamedKeyCodes = codes[search.toLowerCase()]; - if (foundNamedKeyCodes) { - return foundNamedKeyCodes; - } - - // check aliases - const foundNamedKeyAliases = aliases[search.toLowerCase()]; - if (foundNamedKeyAliases) { - return foundNamedKeyAliases; - } - - // weird character? - if (search.length === 1) { - return search.charCodeAt(0); - } - - return undefined; }; -/** - * Get by name - * - * exports.code['enter'] // => 13 - */ - -export const codes = { - 'backspace': 8, - 'tab': 9, - 'enter': 13, - 'shift': 16, - 'ctrl': 17, - 'alt': 18, - 'pause/break': 19, - 'caps lock': 20, - 'esc': 27, - 'space': 32, - 'page up': 33, - 'page down': 34, - 'end': 35, - 'home': 36, - 'left': 37, - 'up': 38, - 'right': 39, - 'down': 40, - // 'add': 43, - 'insert': 45, - 'delete': 46, - 'command': 91, - 'left command': 91, - 'right command': 93, - 'numpad *': 106, - 'numpad plus': [43, 107], - 'numpad add': 43, // as a trick - 'numpad -': 109, - 'numpad .': 110, - 'numpad /': 111, - 'num lock': 144, - 'scroll lock': 145, - 'my computer': 182, - 'my calculator': 183, - ';': 186, - '=': 187, - ',': 188, - '-': 189, - '.': 190, - '/': 191, - '`': 192, - '[': 219, - '\\': 220, - ']': 221, - "'": 222 -}; - -// Helper aliases - export const aliases = { - 'windows': 91, - '⇧': 16, - '⌥': 18, - '⌃': 17, - '⌘': 91, - 'ctl': 17, - 'control': 17, - 'option': 18, - 'pause': 19, - 'break': 19, - 'caps': 20, - 'return': 13, - 'escape': 27, - 'spc': 32, - 'pgup': 33, - 'pgdn': 34, - 'ins': 45, - 'del': 46, - 'cmd': 91 + 'esc': 'Escape', + 'enter': ['Enter', 'NumpadEnter'], + 'up': 'ArrowUp', + 'down': 'ArrowDown', + 'left': 'ArrowLeft', + 'right': 'ArrowRight', + 'plus': ['NumpadAdd', 'Semicolon'], }; /*! @@ -119,15 +23,11 @@ export const aliases = { // lower case chars for (let i = 97; i < 123; i++) { - codes[String.fromCharCode(i)] = i - 32; + const char = String.fromCharCode(i); + aliases[char] = `Key${char.toUpperCase()}`; } // numbers -for (let i = 48; i < 58; i++) { - codes[i - 48] = [i, (i - 48) + 96]; -} - -// function keys -for (let i = 1; i < 13; i++) { - codes['f' + i] = i + 111; +for (let i = 0; i < 10; i++) { + aliases[i] = [`Numpad${i}`, `Digit${i}`]; } diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index f415e89d0..811f82283 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -72,7 +72,7 @@ export default Vue.extend({ 'esc': this.close, 'enter': this.choose, 'space': this.choose, - 'numpad plus': this.choose, + 'plus': this.choose, 'up': this.focusUp, 'right': this.focusRight, 'down': this.focusDown, diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index b8c5f3151..26f6ef455 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -115,7 +115,7 @@ export default Vue.extend({ return { 'r': this.reply, 'a': () => this.react(true), - 'numpad plus': () => this.react(true), + 'plus': () => this.react(true), 'n': this.renote, 'up': this.focusBefore, 'shift+tab': this.focusBefore,