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

playground/src/pages/Editor.vue

@@ -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 { DatasourceTypeOption } from '@tmagic/editor';
-import type { CustomizeMoveableOptionsCallbackConfig, DatasourceTypeOption, MoveableOptions } 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 { moveableOptions } = useEditorMoveableOptions(editor);
-  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 save = () => {
   localStorage.setItem(

playground/src/pages/composables/use-editor-moveable-options.ts

@@ -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,
+  };
+};