style(editor,stage): 完善moveableOptions prop类型定义

docs/api/editor/props.md

@@ -675,7 +675,7 @@ const datasourceConfigs = {
 
 - **默认值：** `{}`
 
-- **类型：** ((config?: [CustomizeMoveableOptionsCallbackConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109)) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
+- **类型：** ((config: [CustomizeMoveableOptionsCallbackConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109)) => MoveableOptions) | [MoveableOptions](https://daybrush.com/moveable/release/latest/doc/)
 
 - **示例：**
 

packages/editor/src/editorProps.ts

@@ -3,9 +3,8 @@ import type { FormConfig, FormState } from '@tmagic/form';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
-  type CustomizeMoveableOptionsCallbackConfig,
+  type CustomizeMoveableOptions,
   type GuidesOptions,
-  type MoveableOptions,
   RenderType,
   type UpdateDragEl,
 } from '@tmagic/stage';
@@ -56,7 +55,7 @@ export interface EditorProps {
   datasourceConfigs?: Record<string, FormConfig>;
   datasourceEventMethodList?: Record<string, { events: EventOption[]; methods: EventOption[] }>;
   /** 画布中组件选中框的移动范围 */
-  moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
+  moveableOptions?: CustomizeMoveableOptions;
   /** 编辑器初始化时默认选中的组件ID */
   defaultSelected?: Id;
   /** 拖入画布中容器时，识别到容器后给容器根dom加上的class */

packages/editor/src/type.ts

@@ -26,9 +26,8 @@ import type { FormConfig, TableColumnConfig } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
-  CustomizeMoveableOptionsCallbackConfig,
+  CustomizeMoveableOptions,
   GuidesOptions,
-  MoveableOptions,
   RenderType,
   UpdateDragEl,
 } from '@tmagic/stage';
@@ -157,7 +156,7 @@ export interface StageOptions {
   containerHighlightType?: ContainerHighlightType;
   disabledDragStart?: boolean;
   render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
-  moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
+  moveableOptions?: CustomizeMoveableOptions;
   canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
   updateDragEl?: UpdateDragEl;

packages/stage/src/ActionManager.ts

@@ -427,7 +427,7 @@ export default class ActionManager extends EventEmitter {
     const dr = new StageDragResize({
       container: config.container,
       disabledDragStart: config.disabledDragStart,
-      moveableOptions: this.changeCallback(config.moveableOptions, false),
+      moveableOptions: config.moveableOptions && this.changeCallback(config.moveableOptions, false),
       dragResizeHelper: createDrHelper(),
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
@@ -472,7 +472,7 @@ export default class ActionManager extends EventEmitter {
       });
     const multiDr = new StageMultiDragResize({
       container: config.container,
-      moveableOptions: this.changeCallback(config.moveableOptions, true),
+      moveableOptions: config.moveableOptions && this.changeCallback(config.moveableOptions, true),
       dragResizeHelper: createDrHelper(),
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
@@ -493,7 +493,10 @@ export default class ActionManager extends EventEmitter {
     return multiDr;
   }
 
-  private changeCallback(options: CustomizeMoveableOptions, isMulti: boolean): CustomizeMoveableOptions {
+  private changeCallback(
+    options: CustomizeMoveableOptions,
+    isMulti: boolean,
+  ): MoveableOptions | (() => MoveableOptions) {
     // 在actionManager才能获取到各种参数，在这里传好参数有比较好的扩展性
     if (typeof options === 'function') {
       return () => {

packages/stage/src/types.ts

@@ -31,11 +31,11 @@ export type TargetElement = HTMLElement | SVGElement;
 export type CanSelect = (el: HTMLElement, event: MouseEvent, stop: () => boolean) => boolean | Promise<boolean>;
 export type IsContainer = (el: HTMLElement) => boolean | Promise<boolean>;
 export type CustomizeRender = (renderer: StageCore) => Promise<HTMLElement | void> | HTMLElement | void;
+
+export type CustomizeMoveableOptionsFunction = (config: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions;
+
 /** 业务方自定义的moveableOptions，可以是配置，也可以是回调函数 */
-export type CustomizeMoveableOptions =
+export type CustomizeMoveableOptions = CustomizeMoveableOptionsFunction | MoveableOptions;
-  | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions)
-  | MoveableOptions
-  | undefined;
 /** render提供给的接口，id转成el */
 export type GetTargetElement = (id: Id) => HTMLElement | null;
 /** render提供的接口，通过坐标获得坐标下所有HTML元素数组 */
@@ -89,7 +89,7 @@ export interface ActionManagerConfig {
 
 export interface MoveableOptionsManagerConfig {
   container: HTMLElement;
-  moveableOptions?: CustomizeMoveableOptions;
+  moveableOptions?: MoveableOptions | (() => MoveableOptions);
   getRootContainer: GetRootContainer;
 }
 
@@ -113,22 +113,16 @@ export interface StageMaskConfig {
   core: StageCore;
 }
 
-export interface StageDragResizeConfig {
+export interface StageDragResizeConfig extends MoveableOptionsManagerConfig {
-  container: HTMLElement;
   dragResizeHelper: DragResizeHelper;
-  moveableOptions?: CustomizeMoveableOptions;
   disabledDragStart?: boolean;
-  getRootContainer: GetRootContainer;
   getRenderDocument: GetRenderDocument;
   markContainerEnd: MarkContainerEnd;
   delayedMarkContainer: DelayedMarkContainer;
 }
 
-export interface StageMultiDragResizeConfig {
+export interface StageMultiDragResizeConfig extends MoveableOptionsManagerConfig {
-  container: HTMLElement;
   dragResizeHelper: DragResizeHelper;
-  moveableOptions?: CustomizeMoveableOptions;
-  getRootContainer: GetRootContainer;
   getRenderDocument: GetRenderDocument;
   markContainerEnd: MarkContainerEnd;
   delayedMarkContainer: DelayedMarkContainer;

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

@@ -1,23 +1,23 @@
 import { onMounted, type ShallowRef } from 'vue';
 
 import { NodeType } from '@tmagic/core';
-import type { CustomizeMoveableOptionsCallbackConfig, MoveableOptions, TMagicEditor } from '@tmagic/editor';
+import type { CustomizeMoveableOptionsFunction, MoveableOptions, TMagicEditor } from '@tmagic/editor';
 
 export const useEditorMoveableOptions = (editor: ShallowRef<InstanceType<typeof TMagicEditor> | undefined>) => {
   let keepRatio = false;
 
-  const moveableOptions = (config?: CustomizeMoveableOptionsCallbackConfig): MoveableOptions => {
+  const moveableOptions: CustomizeMoveableOptionsFunction = (config) => {
     const options: MoveableOptions = {};
 
     if (!editor.value) return options;
 
     const page = editor.value.editorService.get('page');
 
-    const ids = config?.targetElIds || [];
+    const ids = config.targetElIds || [];
     let isPage = page && ids.includes(`${page.id}`);
 
     if (!isPage) {
-      const id = config?.targetElId;
+      const id = config.targetElId;
       if (id) {
         const node = editor.value.editorService.getNodeById(id);
         isPage = node?.type === NodeType.PAGE;