initial logic for hotkey refactoring #1537
Conversation
frontend/src/components/annotation/image_and_video_annotation/annotation_core.vue
Show resolved
Hide resolved
| * | ||
| * @class | ||
| */ | ||
| export class HotkeyListener { |
There was a problem hiding this comment.
Updated HotkeyListener to enable support for multiple active scopes
| @@ -589,14 +594,25 @@ export default Vue.extend({ | |||
| if (this.enabled_edit_schema == true) { | |||
| this.edit_ui_schema() | |||
| } | |||
| this.hotkey_listener = HotkeyListener.getInstance() | |||
|
|
|||
| this.hotkey_listener.addFilter(() => { | |||
There was a problem hiding this comment.
Hey @anthony-sarkis , please note that I added hotkey_listener.addFilter method that allows us to use current logic (the one that updates this.$store.state.user.is_typing_or_menu_open), to control firing of the hotkey handlers. Please see HotkeyListener definition for more details.
| }, | ||
| beforeDestroy() { | ||
| this.hotkey_manager.deactivate() | ||
| window.removeEventListener( | ||
| "resize", | ||
| this.update_window_size_from_listener | ||
| ); | ||
|
|
||
| this.hotkey_listener.clear() | ||
| this.hotkey_listener.restoreDefaultFilters() |
There was a problem hiding this comment.
hotkey_listener.restoreDefaultFilters remove all the filters that we added via hotkey_listener.addFilter and restores default filtering logic provided by hotkey-js library. The default logic I'm talking about prevents hotkeys from firing if user is focused on some input filed (input, textarea, etc) or element that has contenteditable (docs) set.
| @@ -185,7 +185,6 @@ | |||
| in order for the canvas render to detect it --> | |||
|
|
|||
| <div | |||
| contenteditable="true" | |||
There was a problem hiding this comment.
Please note that I removed contenteditable (docs) from the div element that wraps the main canvas. The reason I did this is that it was preventing hotkey-js from firing hotkey handlers. This happens because hotkey-js has the code (see bellow) that checks isContentEditable property to determine if should fire hotkey handler. My other option was to change hotkey-js filter logic, but I decided to remove contenteditable property because I didn't see how it can be used in this context. Specifically, contenteditable allows editing of the text inside html elements (like divs), but it does not look like we edit any text like that in the div container for the canvas element. This change makes the overall design simplier. Please let me know if I'm wrong and I'll be happy to just update hotkey-js filter.
const target = event.target || event.srcElement;
const { tagName } = target;
let flag = true;
// ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
if (
target.isContentEditable
|| ((tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') && !target.readOnly)
) {
flag = ture
}
| * Add a filter. The filter should return `true` if the event should be processed, and `false` otherwise. | ||
| * @param filter - The filter function to add. | ||
| */ | ||
| addFilter(filter: (event: KeyboardEvent) => boolean) { |
There was a problem hiding this comment.
Updated HotkeyListener to enable support for custom filters that prevent hotkey handlers (callbacks) from firing.
| this.toggle_file_change_left() | ||
| }) | ||
|
|
||
| this.hotkey_listener.onKeyup({ keys: 'right,d', scope: 'image' }, (event, handler) => { |
There was a problem hiding this comment.
More hotkeys are using HotkeyListener
| @@ -1725,6 +1732,10 @@ export default Vue.extend({ | |||
| } | |||
| this.mounted(); | |||
|
|
|||
| this.hotkeyListenerScope = `image ${this.working_file.hash}` | |||
There was a problem hiding this comment.
Using image ${this.working_file.hash} as a hotkeys scope identifier
| this.hotkey_listener.removeFilter(this.hotkeyListenerFilter) | ||
| }, | ||
|
|
||
| hotkeyListenerFilter() { |
There was a problem hiding this comment.
Local hotkeys filter
| @@ -1733,6 +1744,159 @@ export default Vue.extend({ | |||
| }, | |||
| // TODO 312 Methods!! refactor in multiple files and classes. | |||
| methods: { | |||
|
|
|||
| cleanUpHotkeys(scope) { | |||
There was a problem hiding this comment.
Added method to clean up hotkeys local filter and scope event handlers
| } | ||
| }) | ||
|
|
||
| this.hotkey_listener.onKeyup({ keys: 'ctrl+a,ctrl+left', scope }, () => { |
There was a problem hiding this comment.
ctrl+left, ctrl+right don't work on my Mac so also added ctrl+a, ctrl+d hotkeyes
No description provided.