From 4c9ef8797571eb5a3d3cc9b0e753fa55c505be76 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Tue, 8 Aug 2023 20:58:22 +0800 Subject: [PATCH] =?UTF-8?q?fix(stage,playground):=20moveableOptions?= =?UTF-8?q?=E5=AF=B9=E5=A4=9A=E9=80=89=E6=97=A0=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix #529 --- packages/stage/src/ActionManager.ts | 10 +++++++--- packages/stage/src/StageCore.ts | 1 - packages/stage/src/StageMultiDragResize.ts | 6 ++++-- packages/stage/src/types.ts | 8 +++++--- playground/src/pages/Editor.vue | 16 +++++++++++----- 5 files changed, 27 insertions(+), 14 deletions(-) diff --git a/packages/stage/src/ActionManager.ts b/packages/stage/src/ActionManager.ts index 096accb91..1ec2b5e77 100644 --- a/packages/stage/src/ActionManager.ts +++ b/packages/stage/src/ActionManager.ts @@ -112,7 +112,7 @@ export default class ActionManager extends EventEmitter { this.dr = new StageDragResize({ container: config.container, disabledDragStart: config.disabledDragStart, - moveableOptions: this.changeCallback(config.moveableOptions), + moveableOptions: this.changeCallback(config.moveableOptions, false), dragResizeHelper: createDrHelper(), getRootContainer: config.getRootContainer, getRenderDocument: config.getRenderDocument, @@ -121,7 +121,7 @@ export default class ActionManager extends EventEmitter { }); this.multiDr = new StageMultiDragResize({ container: config.container, - multiMoveableOptions: config.multiMoveableOptions, + moveableOptions: this.changeCallback(config.moveableOptions, true), dragResizeHelper: createDrHelper(), getRootContainer: config.getRootContainer, getRenderDocument: config.getRenderDocument, @@ -353,14 +353,18 @@ export default class ActionManager extends EventEmitter { this.highlightLayer.destroy(); } - private changeCallback(options: CustomizeMoveableOptions): CustomizeMoveableOptions { + private changeCallback(options: CustomizeMoveableOptions, isMulti: boolean): CustomizeMoveableOptions { // 在actionManager才能获取到各种参数，在这里传好参数有比较好的扩展性 if (typeof options === 'function') { return () => { // 要再判断一次，不然过不了ts检查 if (typeof options === 'function') { const cfg: CustomizeMoveableOptionsCallbackConfig = { + targetEl: this.selectedEl, targetElId: this.selectedEl?.id, + targetEls: this.selectedElList, + targetElIds: this.selectedElList?.map((item) => item.id), + isMulti, }; return options(cfg); } diff --git a/packages/stage/src/StageCore.ts b/packages/stage/src/StageCore.ts index 85e813911..26627dd58 100644 --- a/packages/stage/src/StageCore.ts +++ b/packages/stage/src/StageCore.ts @@ -253,7 +253,6 @@ export default class StageCore extends EventEmitter { containerHighlightDuration: config.containerHighlightDuration, containerHighlightType: config.containerHighlightType, moveableOptions: config.moveableOptions, - multiMoveableOptions: config.multiMoveableOptions, container: this.mask.content, disabledDragStart: config.disabledDragStart, canSelect: config.canSelect, diff --git a/packages/stage/src/StageMultiDragResize.ts b/packages/stage/src/StageMultiDragResize.ts index d62e4826c..bc00c0861 100644 --- a/packages/stage/src/StageMultiDragResize.ts +++ b/packages/stage/src/StageMultiDragResize.ts @@ -47,7 +47,7 @@ export default class StageMultiDragResize extends MoveableOptionsManager { constructor(config: StageMultiDragResizeConfig) { const moveableOptionsManagerConfig: MoveableOptionsManagerConfig = { container: config.container, - moveableOptions: config.multiMoveableOptions, + moveableOptions: config.moveableOptions, getRootContainer: config.getRootContainer, }; super(moveableOptionsManagerConfig); @@ -170,10 +170,12 @@ export default class StageMultiDragResize extends MoveableOptionsManager { target: this.dragResizeHelper.getShadowEls(), }); + console.log(options); + Object.entries(options).forEach(([key, value]) => { (this.moveableForMulti as any)[key] = value; }); - this.moveableForMulti.updateTarget(); + this.moveableForMulti.updateRect(); } /** diff --git a/packages/stage/src/types.ts b/packages/stage/src/types.ts index 158289306..39e6fa946 100644 --- a/packages/stage/src/types.ts +++ b/packages/stage/src/types.ts @@ -65,7 +65,6 @@ export interface StageCoreConfig { containerHighlightDuration?: number; containerHighlightType?: ContainerHighlightType; moveableOptions?: CustomizeMoveableOptions; - multiMoveableOptions?: CustomizeMoveableOptions; /** runtime 的HTML地址，可以是一个HTTP地址，如果和编辑器不同域，需要设置跨域，也可以是一个相对或绝对路径 */ runtimeUrl?: string; render?: (renderer: StageCore) => Promise | HTMLElement; @@ -80,7 +79,6 @@ export interface ActionManagerConfig { containerHighlightDuration?: number; containerHighlightType?: ContainerHighlightType; moveableOptions?: CustomizeMoveableOptions; - multiMoveableOptions?: CustomizeMoveableOptions; disabledDragStart?: boolean; canSelect?: CanSelect; isContainer: IsContainer; @@ -98,7 +96,11 @@ export interface MoveableOptionsManagerConfig { } export interface CustomizeMoveableOptionsCallbackConfig { + targetEl?: HTMLElement; targetElId?: string; + targetEls?: HTMLElement[]; + targetElIds?: string[]; + isMulti: boolean; } export interface StageRenderConfig { @@ -125,7 +127,7 @@ export interface StageDragResizeConfig { export interface StageMultiDragResizeConfig { container: HTMLElement; dragResizeHelper: DragResizeHelper; - multiMoveableOptions?: CustomizeMoveableOptions; + moveableOptions?: CustomizeMoveableOptions; getRootContainer: GetRootContainer; getRenderDocument: GetRenderDocument; markContainerEnd: MarkContainerEnd; diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue index 06f6f5d1a..78bd9413a 100644 --- a/playground/src/pages/Editor.vue +++ b/playground/src/pages/Editor.vue @@ -149,14 +149,20 @@ const menu: MenuBarData = { const moveableOptions = (config?: CustomizeMoveableOptionsCallbackConfig): MoveableOptions => { const options: MoveableOptions = {}; - const id = config?.targetElId; - if (!id || !editor.value) return options; + if (!editor.value) return options; - const node = editor.value.editorService.getNodeById(id); + const page = editor.value.editorService.get('page'); - if (!node) return options; + const ids = config?.targetElIds || []; + let isPage = page && ids.includes(`${page.id}`); - const isPage = node.type === NodeType.PAGE; + 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;