From 257c8c9fa1be795f63691b12846fca6c54fb8a24 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Tue, 24 Oct 2023 15:52:01 +0800 Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=BB=84=E4=BB=B6=E6=A0=91?= =?UTF-8?q?=E6=B3=A8=E5=86=8C=E5=BF=AB=E6=8D=B7=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/layouts/sidebar/layer/LayerPanel.vue | 6 +- .../layouts/sidebar/layer/use-keybinding.ts | 19 ++++--- .../src/layouts/workspace/viewer/Stage.vue | 3 +- .../editor/src/utils/keybinding-config.ts | 57 ++++++++++--------- 4 files changed, 48 insertions(+), 37 deletions(-) diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue index 7ebd0219..a51bdc6f 100644 --- a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue +++ b/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue @@ -4,7 +4,7 @@ -
+
('services'); const editorService = services?.editorService; +const layerTreeContainer = ref(); + const page = computed(() => editorService?.get('page')); const root = computed(() => editorService?.get('root')); const { nodeStatusMap } = useNodeStatus(services, page); -const { isCtrlKeyDown } = useKeybinding(services); +const { isCtrlKeyDown } = useKeybinding(services, layerTreeContainer); provide('nodeStatusMap', nodeStatusMap); diff --git a/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts b/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts index 9d74d34f..98e299e3 100644 --- a/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts +++ b/packages/editor/src/layouts/sidebar/layer/use-keybinding.ts @@ -1,8 +1,9 @@ -import { onBeforeUnmount, onMounted, ref } from 'vue'; +import { type Ref, ref, watchEffect } from 'vue'; import type { Services } from '@editor/type'; +import { KeyBindingContainerKey } from '@editor/utils/keybinding-config'; -export const useKeybinding = (services: Services | undefined) => { +export const useKeybinding = (services: Services | undefined, contianer: Ref) => { const keybindingService = services?.keybindingService; // 是否多选 @@ -33,12 +34,14 @@ export const useKeybinding = (services: Services | undefined) => { }, ]); - onMounted(() => { - globalThis.addEventListener('blur', windowBlurHandler); - }); - - onBeforeUnmount(() => { - globalThis.removeEventListener('blur', windowBlurHandler); + watchEffect(() => { + if (contianer.value) { + globalThis.addEventListener('blur', windowBlurHandler); + keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value); + } else { + globalThis.removeEventListener('blur', windowBlurHandler); + keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL); + } }); return { diff --git a/packages/editor/src/layouts/workspace/viewer/Stage.vue b/packages/editor/src/layouts/workspace/viewer/Stage.vue index 314e4296..5f810403 100644 --- a/packages/editor/src/layouts/workspace/viewer/Stage.vue +++ b/packages/editor/src/layouts/workspace/viewer/Stage.vue @@ -40,6 +40,7 @@ import ScrollViewer from '@editor/components/ScrollViewer.vue'; import { useStage } from '@editor/hooks/use-stage'; import { DragType, Layout, type MenuButton, type MenuComponent, type Services, type StageOptions } from '@editor/type'; import { getConfig } from '@editor/utils/config'; +import { KeyBindingContainerKey } from '@editor/utils/keybinding-config'; import NodeListMenu from './NodeListMenu.vue'; import ViewerMenu from './ViewerMenu.vue'; @@ -131,7 +132,7 @@ const resizeObserver = new ResizeObserver((entries) => { onMounted(() => { if (stageWrap.value?.container) { resizeObserver.observe(stageWrap.value.container); - services?.keybindingService.registeEl('stage', stageWrap.value.container); + services?.keybindingService.registeEl(KeyBindingContainerKey.STAGE, stageWrap.value.container); } }); diff --git a/packages/editor/src/utils/keybinding-config.ts b/packages/editor/src/utils/keybinding-config.ts index a3f75bcd..5183592f 100644 --- a/packages/editor/src/utils/keybinding-config.ts +++ b/packages/editor/src/utils/keybinding-config.ts @@ -1,120 +1,125 @@ import { KeyBindingCommand, KeyBindingItem } from '@editor/type'; +export enum KeyBindingContainerKey { + STAGE = 'stage', + LAYER_PANEL = 'layer-panel', +} + export default [ { command: KeyBindingCommand.DELETE_NODE, keybinding: ['delete', 'backspace'], when: [ - ['stage', 'keyup'], - ['layer-panel', 'keydown'], + [KeyBindingContainerKey.STAGE, 'keyup'], + [KeyBindingContainerKey.LAYER_PANEL, 'keydown'], ], }, { command: KeyBindingCommand.COPY_NODE, keybinding: 'ctrl+c', when: [ - ['stage', 'keydown'], - ['layer-panel', 'keydown'], + [KeyBindingContainerKey.STAGE, 'keydown'], + [KeyBindingContainerKey.LAYER_PANEL, 'keydown'], ], }, { command: KeyBindingCommand.PASTE_NODE, keybinding: 'ctrl+v', when: [ - ['stage', 'keydown'], - ['layer-panel', 'keydown'], + [KeyBindingContainerKey.STAGE, 'keydown'], + [KeyBindingContainerKey.LAYER_PANEL, 'keydown'], ], }, { command: KeyBindingCommand.CUT_NODE, keybinding: 'ctrl+x', when: [ - ['stage', 'keydown'], - ['layer-panel', 'keydown'], + [KeyBindingContainerKey.STAGE, 'keydown'], + [KeyBindingContainerKey.LAYER_PANEL, 'keydown'], ], }, { command: KeyBindingCommand.UNDO, keybinding: 'ctrl+z', when: [ - ['stage', 'keydown'], - ['layer-panel', 'keydown'], + [KeyBindingContainerKey.STAGE, 'keydown'], + [KeyBindingContainerKey.LAYER_PANEL, 'keydown'], ], }, { command: KeyBindingCommand.REDO, keybinding: 'ctrl+shift+z', when: [ - ['stage', 'keydown'], - ['layer-panel', 'keydown'], + [KeyBindingContainerKey.STAGE, 'keydown'], + [KeyBindingContainerKey.LAYER_PANEL, 'keydown'], ], }, { command: KeyBindingCommand.MOVE_UP_1, keybinding: 'up', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.MOVE_DOWN_1, keybinding: 'down', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.MOVE_LEFT_1, keybinding: 'left', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.MOVE_RIGHT_1, keybinding: 'right', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.MOVE_UP_10, keybinding: 'ctrl+up', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.MOVE_DOWN_10, keybinding: 'ctrl+down', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.MOVE_LEFT_10, keybinding: 'ctrl+left', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.MOVE_RIGHT_10, keybinding: 'ctrl+right', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.SWITCH_NODE, keybinding: 'tab', when: [ - ['stage', 'keydown'], - ['layer-panel', 'keydown'], + [KeyBindingContainerKey.STAGE, 'keydown'], + [KeyBindingContainerKey.LAYER_PANEL, 'keydown'], ], }, { command: KeyBindingCommand.ZOOM_IN, keybinding: ['ctrl+=', 'ctrl+numpadplus'], - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.ZOOM_OUT, keybinding: ['ctrl+-', 'ctrl+numpad-'], - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.ZOOM_FIT, keybinding: 'ctrl+0', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, { command: KeyBindingCommand.ZOOM_RESET, keybinding: 'ctrl+1', - when: [['stage', 'keydown']], + when: [[KeyBindingContainerKey.STAGE, 'keydown']], }, ] as KeyBindingItem[];