From d709480a0c8cfc9f16bd211c4ea01b67b329d167 Mon Sep 17 00:00:00 2001 From: Anthony Sarkis <18080164+anthony-sarkis@users.noreply.github.com> Date: Tue, 17 Oct 2023 16:59:15 -0700 Subject: [PATCH 1/2] example scope changing WIP --- .../image_and_video_annotation/annotation_core.vue | 8 +++++++- frontend/src/utils/hotkey_listener.ts | 10 +++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/annotation/image_and_video_annotation/annotation_core.vue b/frontend/src/components/annotation/image_and_video_annotation/annotation_core.vue index 4ba5b0f05..d8151279b 100644 --- a/frontend/src/components/annotation/image_and_video_annotation/annotation_core.vue +++ b/frontend/src/components/annotation/image_and_video_annotation/annotation_core.vue @@ -741,6 +741,12 @@ export default Vue.extend({ watch: { is_active: function (){ this.canvas_element.style.cursor = '' + //console.log(this.is_active, this.working_file.id) + let scope=`image ${this.working_file.id}` + this.hotkey_listener.setScope(scope) + console.log(this.hotkey_listener.scopeCallbackRegistry) + console.log(this.hotkey_listener.selectedScopes) + }, global_instance: function(){ this.$emit('global_instance_changed', this.working_file.id, this.global_instance) @@ -1729,7 +1735,7 @@ export default Vue.extend({ } this.mounted(); - this.hotkeyListenerScope = `image ${this.working_file.hash}` + this.hotkeyListenerScope = `image ${this.working_file.id}` this.setupHotkeys(this.hotkeyListenerScope) diff --git a/frontend/src/utils/hotkey_listener.ts b/frontend/src/utils/hotkey_listener.ts index 508d9bd4e..6f289ccb0 100644 --- a/frontend/src/utils/hotkey_listener.ts +++ b/frontend/src/utils/hotkey_listener.ts @@ -31,6 +31,9 @@ export type KeyEventHandler = (event: KeyboardEvent, handler: HotkeysEvent) => v * - **Flexible Unbinding**: Offers the ability to clear hotkeys, either entirely, by a specific scope, or by key combinations, * providing granular control over the registered hotkeys. * + * How to Change Scope: + * TBD + * * Usage: * * 1. **Initialization**: @@ -43,7 +46,7 @@ export type KeyEventHandler = (event: KeyboardEvent, handler: HotkeysEvent) => v * * 3. **Scopes**: * - Select scope and create if doesn't exist already: `listener.addScope('myScope')`. - * - Cancle selection of a scope: `listener.removeScope('myScope')`. + * - Cancel selection of a scope: `listener.removeScope('myScope')`. * - Delete scope and all hotkey bindings: `listener.deleteScope('myScope')`. * - Note: A hotkey will only trigger if its scope is among the selected scopes. * @@ -143,6 +146,10 @@ export class HotkeyListener { return this.selectedScopes } + setScope(scope: string) { + return this.selectedScopes = [scope] + } + addScope(scope: string) { if (!this.selectedScopes.includes(scope)) { this.selectedScopes.push(scope) @@ -312,6 +319,7 @@ export class HotkeyListener { preventDefaultEvent = DEFAULT_HOTKEYS_OPTIONS.preventDefaultEvent, } = opts + console.log(keys, scope, element) const bindKeys = platformDependent ? this.getPlatformBasedKeys(keys) From 37e254ed66f8e5262cc2bb24bdd54eba2cab9a4c Mon Sep 17 00:00:00 2001 From: Anthony Sarkis <18080164+anthony-sarkis@users.noreply.github.com> Date: Tue, 17 Oct 2023 17:34:17 -0700 Subject: [PATCH 2/2] remove legacy. replaced with HotkeyListener --- .../annotation/annotation_ui_factory.vue | 29 +-------------- .../annotation/hotkeys/HotKeysManager.ts | 37 ------------------- 2 files changed, 1 insertion(+), 65 deletions(-) delete mode 100644 frontend/src/components/annotation/hotkeys/HotKeysManager.ts diff --git a/frontend/src/components/annotation/annotation_ui_factory.vue b/frontend/src/components/annotation/annotation_ui_factory.vue index 5a0231fc8..99bb57305 100644 --- a/frontend/src/components/annotation/annotation_ui_factory.vue +++ b/frontend/src/components/annotation/annotation_ui_factory.vue @@ -403,7 +403,6 @@ import {saveTaskAnnotations, saveFileAnnotations} from "../../services/saveServi import {get_instance_list_from_file, get_instance_list_from_task} from "../../services/instanceServices.js" import {get_child_files} from "../../services/fileServices"; import empty_file_editor_placeholder from "./image_and_video_annotation/empty_file_editor_placeholder.vue" -import HotKeyManager from "./hotkeys/HotKeysManager" import {GlobalInstance} from "../vue_canvas/instances/GlobalInstance"; import {postInstanceList} from "../../services/instanceList" import {CustomButton} from "../../types/ui_schema/Buttons"; @@ -444,7 +443,6 @@ export default Vue.extend({ task_request: null, }, show_ui_schema_context_menu: false, - hotkey_manager: null, platform: { default: 'win' }, @@ -524,15 +522,6 @@ export default Vue.extend({ this.annotation_ui_context.history = new History() this.annotation_ui_context.command_manager = new CommandManager(this.annotation_ui_context.history) } - - if ( - this.annotation_ui_context && - this.hotkey_manager && - this.listeners_map() && - this.annotation_ui_context.working_file_list.length >= 1 - ) { - this.hotkey_manager.activate(this.listeners_map()) - } }, async '$route'(to, from) { if (from.name === 'task_annotation' && to.name === 'studio') { @@ -606,7 +595,6 @@ export default Vue.extend({ }) }, beforeDestroy() { - this.hotkey_manager.deactivate() window.removeEventListener( "resize", this.update_window_size_from_listener @@ -679,8 +667,6 @@ export default Vue.extend({ this.task_prefetcher.update_tasks(this.annotation_ui_context.task) } - this.hotkey_manager = new HotKeyManager() - this.activate_hotkeys() this.initializing = false }, computed: { @@ -846,9 +832,7 @@ export default Vue.extend({ on_file_rendered: function () { this.on_panes_ready() }, - trigger_listeners_setup: function () { - if (this.hotkey_manager) this.hotkey_manager.activate(this.listeners_map()) - }, + open_change_label_dialog_sidebar: function (instance_id: number) { let sidebar = this.$refs.sidebar_factory.get_current_sidebar_ref() if (sidebar && sidebar.$refs.instance_detail_list) { @@ -887,17 +871,6 @@ export default Vue.extend({ }, - - activate_hotkeys: function () { - if (this.hotkey_manager && this.listeners_map()) { - this.hotkey_manager.activate(this.listeners_map()) - } - }, - remove_hotkeys: function () { - if (this.hotkey_manager) { - this.hotkey_manager.activate(this.listeners_map()) - } - }, listeners_map: function () { let listener_map = null; diff --git a/frontend/src/components/annotation/hotkeys/HotKeysManager.ts b/frontend/src/components/annotation/hotkeys/HotKeysManager.ts deleted file mode 100644 index 3916cfefd..000000000 --- a/frontend/src/components/annotation/hotkeys/HotKeysManager.ts +++ /dev/null @@ -1,37 +0,0 @@ -export default class HotKeyManager { - actiave: boolean - annotation_type: String - context: String - key_listeners_map: any - - constructor() { - this.actiave = false - } - - deactivate(): void { - if (this.key_listeners_map) { - this.actiave = false - - window.removeEventListener("keydown", this.key_listeners_map["keydown"]) - window.removeEventListener("keyup", this.key_listeners_map["keyup"]) - window.removeEventListener("mousedown", this.key_listeners_map["mousedown"]) - window.removeEventListener("beforeunload", this.key_listeners_map["beforeunload"]) - window.removeEventListener("resize", this.key_listeners_map["resize"]) - } - } - - activate(key_listeners_map: any): void { - this.deactivate() - - if (key_listeners_map && !this.actiave) { - this.key_listeners_map = key_listeners_map - window.addEventListener("keydown", key_listeners_map["keydown"]) - window.addEventListener("keyup", key_listeners_map["keyup"]) - window.addEventListener("mousedown", key_listeners_map["mousedown"]) - window.addEventListener("beforeunload", key_listeners_map["beforeunload"]) - window.addEventListener("resize", key_listeners_map["resize"]) - - this.actiave = true - } - } -} \ No newline at end of file