JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-10 14:13:01 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 组件树注册快捷方式

Browse Source
This commit is contained in:
roymondchen 2023-10-24 15:52:01 +08:00
parent af72d819fe
commit 257c8c9fa1
4 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/editor/src/layouts/sidebar/layer/LayerPanel.vue
View File

@ -4,7 +4,7 @@
<SearchInput @search="filterTextChangeHandler"></SearchInput>
<div class="magic-editor-layer-tree" tabindex="-1" @dragover="handleDragOver">
<div class="magic-editor-layer-tree" ref="layerTreeContainer" tabindex="-1" @dragover="handleDragOver">
<LayerNode
v-if="page && root"
:data="page"
@ -52,11 +52,13 @@ defineProps<{
const services = inject<Services>('services');
const editorService = services?.editorService;
const layerTreeContainer = ref<HTMLDivElement>();
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);

19
packages/editor/src/layouts/sidebar/layer/use-keybinding.ts
View File

@ -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<HTMLDivElement | undefined>) => {
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 {

3
packages/editor/src/layouts/workspace/viewer/Stage.vue
View File

@ -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);
}
});

57
packages/editor/src/utils/keybinding-config.ts
View File

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