From b78ef206022d69a8c3f81c55a301e5a4b5147641 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 25 Jun 2025 14:19:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(playground):=20=E6=96=B0=E5=A2=9E=E6=8C=89?=
 =?UTF-8?q?=E6=AF=94=E4=BE=8B=E6=8B=96=E5=8A=A8=E7=BB=84=E4=BB=B6=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F=E5=BF=AB=E6=8D=B7=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 playground/src/pages/Editor.vue               | 36 +--------
 .../use-editor-moveable-options.ts            | 80 +++++++++++++++++++
 2 files changed, 83 insertions(+), 33 deletions(-)
 create mode 100644 playground/src/pages/composables/use-editor-moveable-options.ts

diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 130013d7..a3e625f9 100644
--- a/playground/src/pages/Editor.vue
+++ b/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 { 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(
diff --git a/playground/src/pages/composables/use-editor-moveable-options.ts b/playground/src/pages/composables/use-editor-moveable-options.ts
new file mode 100644
index 00000000..c7d12d4f
--- /dev/null
+++ b/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,
+  };
+};