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[];