fix(stage,playground): moveableOptions对多选无效

fix #529

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);
         }

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,

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();
   }
 
   /**

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> | 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;

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;