From f5ecc753f7ef6ca3df23d28803702ccb0cf4883d Mon Sep 17 00:00:00 2001 From: Alireza Date: Mon, 5 Jul 2021 22:32:06 -0400 Subject: [PATCH] fix: hotkeys editing in user preferences --- extensions/default/src/ViewerLayout/index.jsx | 8 +- .../core/src/utils/hotkeys/recordPlugin.js | 86 ++++++++----------- .../components/HotkeyField/HotkeyField.jsx | 16 ++-- .../HotkeysPreferences/HotkeysPreferences.jsx | 5 +- 4 files changed, 56 insertions(+), 59 deletions(-) diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx index ae1c64618..09bde8567 100644 --- a/extensions/default/src/ViewerLayout/index.jsx +++ b/extensions/default/src/ViewerLayout/index.jsx @@ -11,6 +11,8 @@ import { } from '@ohif/ui'; import i18n from '@ohif/i18n'; +import { hotkeys } from '@ohif/core'; + const { availableLanguages, defaultLanguage, currentLanguage } = i18n; @@ -115,7 +117,11 @@ function ViewerLayout({ currentLanguage: currentLanguage(), availableLanguages, defaultLanguage, - onCancel: hide, + onCancel: () => { + hotkeys.stopRecord(); + hotkeys.unpause(); + hide(); + }, onSubmit: ({ hotkeyDefinitions, language }) => { i18n.changeLanguage(language.value); hotkeysManager.setHotkeys(hotkeyDefinitions); diff --git a/platform/core/src/utils/hotkeys/recordPlugin.js b/platform/core/src/utils/hotkeys/recordPlugin.js index 095de1abf..186964967 100644 --- a/platform/core/src/utils/hotkeys/recordPlugin.js +++ b/platform/core/src/utils/hotkeys/recordPlugin.js @@ -1,41 +1,28 @@ -"use strict"; - /** * This extension allows you to record a sequence using Mousetrap. + * {@link https://craig.is/killing/mice} * * @author Dan Tao */ -module.exports = function (Mousetrap, options) { - /** - * the default configurations, we merge with user options - * - * @type {Array} - */ - var _config = Object.assign({ - timeout: 1000 - }, options); - +export default function (Mousetrap) { /** * the sequence currently being recorded * * @type {Array} */ var _recordedSequence = [], - /** * a callback to invoke after recording a sequence * * @type {Function|null} */ _recordedSequenceCallback = null, - /** * a list of all of the keys currently held down * * @type {Array} */ _currentRecordedKeys = [], - /** * temporary state where we remember if we've already captured a * character key in the current combo @@ -43,28 +30,19 @@ module.exports = function (Mousetrap, options) { * @type {boolean} */ _recordedCharacterKey = false, - /** * a handle for the timer of the current recording * * @type {null|number} */ _recordTimer = null, - /** * the original handleKey method to override when Mousetrap.record() is * called * * @type {Function} */ - _origHandleKey = Mousetrap.prototype.handleKey, - - /** - * the timeout that timer will wait for a key - * - * @type {number} - */ - _recordTimeout = _config.timeout; + _origHandleKey = Mousetrap.prototype.handleKey; /** * handles a character key event @@ -83,19 +61,19 @@ module.exports = function (Mousetrap, options) { } // remember this character if we're currently recording a sequence - if (e.type === 'keydown') { + if (e.type == 'keydown') { if (character.length === 1 && _recordedCharacterKey) { _recordCurrentCombo(); } - for (var i = 0; i < modifiers.length; ++i) { + for (let i = 0; i < modifiers.length; ++i) { _recordKey(modifiers[i]); } _recordKey(character); // once a key is released, all keys that were held down at the time // count as a keypress - } else if (e.type === 'keyup' && _currentRecordedKeys.length > 0) { + } else if (e.type == 'keyup' && _currentRecordedKeys.length > 0) { _recordCurrentCombo(); } } @@ -107,10 +85,8 @@ module.exports = function (Mousetrap, options) { * @returns void */ function _recordKey(key) { - var i; - // one-off implementation of Array.indexOf, since IE6-9 don't support it - for (i = 0; i < _currentRecordedKeys.length; ++i) { + for (let i = 0; i < _currentRecordedKeys.length; ++i) { if (_currentRecordedKeys[i] === key) { return; } @@ -133,7 +109,7 @@ module.exports = function (Mousetrap, options) { _recordedSequence.push(_currentRecordedKeys); _currentRecordedKeys = []; _recordedCharacterKey = false; - _restartRecordTimer(); + _finishRecording(); } /** @@ -146,10 +122,8 @@ module.exports = function (Mousetrap, options) { * @returns void */ function _normalizeSequence(sequence) { - var i; - - for (i = 0; i < sequence.length; ++i) { - sequence[i].sort(function(x, y) { + for (let i = 0; i < sequence.length; ++i) { + sequence[i].sort(function (x, y) { // modifier keys always come first, in alphabetical order if (x.length > 1 && y.length === 1) { return -1; @@ -194,7 +168,7 @@ module.exports = function (Mousetrap, options) { */ function _restartRecordTimer() { clearTimeout(_recordTimer); - _recordTimer = setTimeout(_finishRecording, _recordTimeout); + _recordTimer = setTimeout(_finishRecording, 1000); } /** @@ -204,27 +178,41 @@ module.exports = function (Mousetrap, options) { * @param {Function} callback * @returns void */ - Mousetrap.prototype.record = function(callback, timeout) { + Mousetrap.prototype.record = function (callback) { var self = this; self.recording = true; - - // if the user doesn't want to change the timeout - // we still need to guarantee that it gets the default timeout - _recordTimeout = timeout || _config.timeout; - - _recordedSequenceCallback = function() { + _recordedSequenceCallback = function () { self.recording = false; callback.apply(self, arguments); }; }; - Mousetrap.prototype.handleKey = function() { + /** + * stop recording + * + * @param {Function} callback + * @returns void + */ + Mousetrap.prototype.stopRecord = function () { + var self = this; + self.recording = false; + }; + + /** + * start recording + * + * @param {Function} callback + * @returns void + */ + Mousetrap.prototype.startRecording = function () { + var self = this; + self.recording = true; + }; + + Mousetrap.prototype.handleKey = function () { var self = this; _handleKey.apply(self, arguments); }; Mousetrap.init(); - - return Mousetrap; - -}; +} diff --git a/platform/ui/src/components/HotkeyField/HotkeyField.jsx b/platform/ui/src/components/HotkeyField/HotkeyField.jsx index d8376a287..d0e5f6ad9 100644 --- a/platform/ui/src/components/HotkeyField/HotkeyField.jsx +++ b/platform/ui/src/components/HotkeyField/HotkeyField.jsx @@ -1,11 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; -//import { hotkeys } from '@ohif/core'; +import { hotkeys } from '@ohif/core'; import Input from '../Input'; -//import { getKeys, formatKeysForInput } from './utils'; -import { formatKeysForInput } from './utils'; +import { getKeys, formatKeysForInput } from './utils'; + + + /** * HotkeyField @@ -25,16 +27,16 @@ const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys }) => { event.stopPropagation(); event.preventDefault(); - /*hotkeys.record(sequence => { + hotkeys.record(sequence => { const keys = getKeys({ sequence, modifierKeys }); hotkeys.unpause(); onChange(keys); - });*/ + }); }; const onFocus = () => { - /*hotkeys.pause(); - hotkeys.startRecording();*/ + hotkeys.pause(); + hotkeys.startRecording(); }; return ( diff --git a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx b/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx index 931c48112..4bfa1934e 100644 --- a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx +++ b/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.jsx @@ -35,9 +35,10 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr setErrors(prevState => { const errors = { ...prevState, [id]: error }; - onChange(id, definition, errors); return errors; }); + + onChange(id, definition, { ...errors, [id]: error }); }; return ( @@ -84,7 +85,7 @@ const HotkeysPreferences = ({ disabled, hotkeyDefinitions, errors: controlledErr onChange={onChangeHandler} className='text-lg h-8' /> - {error && {error}} + {error && {error}}