diff --git a/docs/api/editor/props.md b/docs/api/editor/props.md index 514e4f39..decf753b 100644 --- a/docs/api/editor/props.md +++ b/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/) - **示例:** diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts index 86e2b96d..3e9f6a81 100644 --- a/packages/editor/src/editorProps.ts +++ b/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; datasourceEventMethodList?: Record; /** 画布中组件选中框的移动范围 */ - moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions); + moveableOptions?: CustomizeMoveableOptions; /** 编辑器初始化时默认选中的组件ID */ defaultSelected?: Id; /** 拖入画布中容器时,识别到容器后给容器根dom加上的class */ diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index e97f3c46..a663589d 100644 --- a/packages/editor/src/type.ts +++ b/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; - moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions); + moveableOptions?: CustomizeMoveableOptions; canSelect?: (el: HTMLElement) => boolean | Promise; isContainer?: (el: HTMLElement) => boolean | Promise; updateDragEl?: UpdateDragEl; diff --git a/packages/stage/src/ActionManager.ts b/packages/stage/src/ActionManager.ts index bbd1c63a..5d8de9cd 100644 --- a/packages/stage/src/ActionManager.ts +++ b/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 () => { diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts index 29886e70..d5947e33 100644 --- a/packages/stage/src/types.ts +++ b/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; export type IsContainer = (el: HTMLElement) => boolean | Promise; export type CustomizeRender = (renderer: StageCore) => Promise | HTMLElement | void; + +export type CustomizeMoveableOptionsFunction = (config: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions; + /** 业务方自定义的moveableOptions,可以是配置,也可以是回调函数 */ -export type CustomizeMoveableOptions = - | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions) - | MoveableOptions - | undefined; +export type CustomizeMoveableOptions = CustomizeMoveableOptionsFunction | MoveableOptions; /** 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 { - container: HTMLElement; +export interface StageDragResizeConfig extends MoveableOptionsManagerConfig { dragResizeHelper: DragResizeHelper; - moveableOptions?: CustomizeMoveableOptions; disabledDragStart?: boolean; - getRootContainer: GetRootContainer; getRenderDocument: GetRenderDocument; markContainerEnd: MarkContainerEnd; delayedMarkContainer: DelayedMarkContainer; } -export interface StageMultiDragResizeConfig { - container: HTMLElement; +export interface StageMultiDragResizeConfig extends MoveableOptionsManagerConfig { dragResizeHelper: DragResizeHelper; - moveableOptions?: CustomizeMoveableOptions; - getRootContainer: GetRootContainer; getRenderDocument: GetRenderDocument; markContainerEnd: MarkContainerEnd; delayedMarkContainer: DelayedMarkContainer; diff --git a/playground/src/pages/composables/use-editor-moveable-options.ts b/playground/src/pages/composables/use-editor-moveable-options.ts index c7d12d4f..7ba7e90a 100644 --- a/playground/src/pages/composables/use-editor-moveable-options.ts +++ b/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 | 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;