JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-27 12:49:22 +08:00
Code Issues Projects Releases Wiki Activity

feat(playground): 新增按比例拖动组件大小快捷键

Browse Source
This commit is contained in:
roymondchen 2025-06-25 14:19:18 +08:00
parent 18e8df4a55
commit b78ef20602
2 changed files with 83 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
playground/src/pages/Editor.vue
View File

@ -44,8 +44,7 @@ import { computed, onBeforeUnmount, ref, shallowRef, toRaw } from 'vue';
import serialize from 'serialize-javascript';
import type { MApp, MContainer, MNode } from '@tmagic/core';
import { NodeType } from '@tmagic/core';
import type { CustomizeMoveableOptionsCallbackConfig, DatasourceTypeOption, MoveableOptions } from '@tmagic/editor';
import type { DatasourceTypeOption } from '@tmagic/editor';
import { editorService, propsService, TMagicDialog, TMagicEditor, tMagicMessage } from '@tmagic/editor';
import DeviceGroup from '../components/DeviceGroup.vue';
@ -54,6 +53,7 @@ import dsl from '../configs/dsl';
import { useEditorContentMenuData } from './composables/use-editor-content-menu-data';
import { useEditorMenu } from './composables/use-editor-menu';
import { useEditorMoveableOptions } from './composables/use-editor-moveable-options';
import { useEditorRes } from './composables/use-editor-res';
const { VITE_RUNTIME_PATH } = import.meta.env;
@ -78,37 +78,7 @@ const previewUrl = computed(
() => `${VITE_RUNTIME_PATH}/page/index.html?localPreview=1&page=${editor.value?.editorService.get('page')?.id}`,
);
const moveableOptions = (config?: CustomizeMoveableOptionsCallbackConfig): MoveableOptions => {
const options: MoveableOptions = {};
if (!editor.value) return options;
const page = editor.value.editorService.get('page');
const ids = config?.targetElIds || [];
let isPage = page && ids.includes(`${page.id}`);
if (!isPage) {
const id = config?.targetElId;
if (id) {
const node = editor.value.editorService.getNodeById(id);
isPage = node?.type === NodeType.PAGE;
}
}
options.draggable = !isPage;
options.resizable = !isPage;
options.rotatable = !isPage;
// 双击后在弹层中编辑时，根组件不能拖拽
if (config?.targetEl?.parentElement?.classList.contains('tmagic-editor-sub-stage-wrap')) {
options.draggable = false;
options.resizable = false;
options.rotatable = false;
}
return options;
};
const { moveableOptions } = useEditorMoveableOptions(editor);
const save = () => {
localStorage.setItem(

80
playground/src/pages/composables/use-editor-moveable-options.ts Normal file
View File

@ -0,0 +1,80 @@
import { onMounted, type ShallowRef } from 'vue';
import { NodeType } from '@tmagic/core';
import type { CustomizeMoveableOptionsCallbackConfig, MoveableOptions, TMagicEditor } from '@tmagic/editor';
export const useEditorMoveableOptions = (editor: ShallowRef<InstanceType<typeof TMagicEditor> | undefined>) => {
let keepRatio = false;
const moveableOptions = (config?: CustomizeMoveableOptionsCallbackConfig): MoveableOptions => {
const options: MoveableOptions = {};
if (!editor.value) return options;
const page = editor.value.editorService.get('page');
const ids = config?.targetElIds || [];
let isPage = page && ids.includes(`${page.id}`);
if (!isPage) {
const id = config?.targetElId;
if (id) {
const node = editor.value.editorService.getNodeById(id);
isPage = node?.type === NodeType.PAGE;
}
}
options.draggable = !isPage;
options.resizable = !isPage;
options.rotatable = !isPage;
options.keepRatio = keepRatio;
// 双击后在弹层中编辑时，根组件不能拖拽
if (config?.targetEl?.parentElement?.classList.contains('tmagic-editor-sub-stage-wrap')) {
options.draggable = false;
options.resizable = false;
options.rotatable = false;
}
return options;
};
onMounted(() => {
if (!editor.value) return;
const registerEnableRotatable = () => {
editor.value?.keybindingService.registerCommand('moveable-options-rotatable-endable', () => {
keepRatio = true;
editor.value?.editorService.get('stage')?.actionManager?.updateMoveableOptions();
editor.value?.keybindingService.unregisterCommand('moveable-options-rotatable-endable');
});
};
registerEnableRotatable();
editor.value.keybindingService.registerCommand('moveable-options-rotatable-disable', () => {
keepRatio = false;
editor.value?.editorService.get('stage')?.actionManager?.updateMoveableOptions();
registerEnableRotatable();
});
editor.value.keybindingService.register([
{
command: 'moveable-options-rotatable-endable',
keybinding: 'shift',
when: [['stage', 'keydown']],
},
{
command: 'moveable-options-rotatable-disable',
keybinding: 'shift',
when: [['stage', 'keyup']],
},
]);
});
return {
moveableOptions,
};
};