add ICommandElementObject

Author: huanghaiyang

src/modules/command/ElementsAddedCommand.ts

@@ -3,15 +3,19 @@ import ElementsBaseCommand from "@/modules/command/ElementsBaseCommand";
 
 export default class ElementsAddedCommand extends ElementsBaseCommand {
   undo(): void {
+    this.store.deSelectAll();
     this.payload.dataList.forEach(data => {
-      const { id } = data;
+      const {
+        model: { id },
+      } = data;
       this.store.removeElement(id);
     });
   }
 
   redo(): void {
+    this.store.deSelectAll();
     this.payload.dataList.forEach(data => {
-      this.store.addElementByModel(data as ElementObject);
+      this.store.addElementByModel(data.model as ElementObject);
     });
   }
 }

src/modules/command/ElementsRemovedCommand.ts

@@ -0,0 +1,21 @@
+import { ElementObject } from "@/types/IElement";
+import ElementsBaseCommand from "@/modules/command/ElementsBaseCommand";
+
+export default class ElementsRemovedCommand extends ElementsBaseCommand {
+  undo(): void {
+    this.store.deSelectAll();
+    this.payload.dataList.forEach(data => {
+      this.store.addElementByModel(data.model as ElementObject);
+    });
+  }
+
+  redo(): void {
+    this.store.deSelectAll();
+    this.payload.dataList.forEach(data => {
+      const {
+        model: { id },
+      } = data;
+      this.store.removeElement(id);
+    });
+  }
+}

src/modules/command/ElementsUpdatedCommand.ts

@@ -1,16 +1,16 @@
 import ElementsBaseCommand from "@/modules/command/ElementsBaseCommand";
-import { ElementObject } from "@/types/IElement";
+import { ICommandElementObject } from "@/types/ICommand";
 
 export default class ElementsUpdatedCommand extends ElementsBaseCommand {
   /**
    * 恢复数据
    *
    * @param dataList
    */
-  private _restoreElementsFromData(dataList: Array<Partial<ElementObject>>) {
+  private _restoreElementsFromData(dataList: Array<ICommandElementObject>) {
     dataList.forEach(data => {
-      const { id } = data;
-      const element = this.store.updateElementModel(id, data);
+      const { model } = data;
+      const element = this.store.updateElementModel(model.id, model);
       element && element.refresh();
     });
   }

src/modules/render/RenderTaskCargo.ts

@@ -68,7 +68,7 @@ export default class RenderTaskCargo extends RenderTaskBase implements IRenderTa
         try {
           await task.run();
         } catch (e) {
-          console.error(e);
+          console.error("RenderTaskCargo: error running task", task.id, e);
         } finally {
           if (task.destroy) {
             await task.destroy();

src/modules/stage/StageShield.ts

@@ -37,9 +37,10 @@ import DOMUtils from "@/utils/DOMUtils";
 import RenderQueue from "@/modules/render/RenderQueue";
 import IStageUndo from "@/types/IStageUndo";
 import StageUndo from "@/modules/stage/StageUndo";
-import { CommandTypes } from "@/types/ICommand";
+import { CommandTypes, ICommandElementObject, IRemovedCommandElementObject } from "@/types/ICommand";
 import ElementsAddedCommand from "@/modules/command/ElementsAddedCommand";
-import ElementsUpdatedCommand from "../command/ElementsUpdatedCommand";
+import ElementsUpdatedCommand from "@/modules/command/ElementsUpdatedCommand";
+import ElementsRemovedCommand from "@/modules/command/ElementsRemovedCommand";
 
 export default class StageShield extends DrawerBase implements IStageShield, IStageAlignFuncs {
   // 当前正在使用的创作工具
@@ -882,8 +883,8 @@ export default class StageShield extends DrawerBase implements IStageShield, ISt
     const command = new ElementsUpdatedCommand(
       {
         type: CommandTypes.ElementsUpdated,
-        dataList: await Promise.all(selectedElements.map(element => element.toOriginalTranslateJson())),
-        rDataList: await Promise.all(selectedElements.map(element => element.toTranslateJson())),
+        dataList: await Promise.all(selectedElements.map(async element => ({ model: await element.toOriginalTranslateJson() }) as ICommandElementObject)),
+        rDataList: await Promise.all(selectedElements.map(async element => ({ model: await element.toTranslateJson() }) as ICommandElementObject)),
       },
       this.store,
     );
@@ -993,7 +994,7 @@ export default class StageShield extends DrawerBase implements IStageShield, ISt
       const command = new ElementsAddedCommand(
         {
           type: CommandTypes.ElementsAdded,
-          dataList: await Promise.all(provisionalElements.map(element => element.toJson())),
+          dataList: await Promise.all(provisionalElements.map(async element => ({ model: await element.toJson() }) as ICommandElementObject)),
         },
         this.store,
       );
@@ -1316,22 +1317,23 @@ export default class StageShield extends DrawerBase implements IStageShield, ISt
   }
 
   /**
-   * 删除选中组件
+   * 处理选中组件删除
    */
-  deleteSelectElements(): void {
+  async _handleSelectsDelete(): Promise<void> {
     if (this.store.isSelectedEmpty) {
       return;
     }
+    const command = new ElementsRemovedCommand(
+      {
+        type: CommandTypes.ElementsRemoved,
+        dataList: await Promise.all(this.store.selectedElements.map(async element => ({ model: await element.toJson() }) as IRemovedCommandElementObject)),
+      },
+      this.store,
+    );
+    this.undo.undoStack.push(command);
     this.store.deleteSelects();
   }
 
-  /**
-   * 处理选中组件删除
-   */
-  _handleSelectsDelete(): void {
-    this.deleteSelectElements();
-  }
-
   /**
    * 选中所有组件
    */

src/types/ICommand.ts

@@ -1,5 +1,16 @@
 import { ElementObject } from "@/types/IElement";
 
+// 通用组件命令对象
+export type ICommandElementObject = {
+  model: Partial<ElementObject>;
+};
+
+// 组件删除命令对象
+export type IRemovedCommandElementObject = ICommandElementObject & {
+  prevId?: string;
+  nextId?: string;
+};
+
 export default interface ICommand {
   payload: ICommandPayload;
   undo(): void;
@@ -8,8 +19,8 @@ export default interface ICommand {
 
 export interface ICommandPayload {
   type: CommandTypes;
-  dataList: Array<Partial<ElementObject>>;
-  rDataList?: Array<Partial<ElementObject>>;
+  dataList: Array<ICommandElementObject>;
+  rDataList?: Array<ICommandElementObject>;
 }
 
 export enum CommandTypes {

src/types/IStageShield.ts

@@ -89,8 +89,6 @@ export default interface IStageShield extends IStageDrawer, IStageSetter {
   setScaleReduce(): void;
   // 设置放大
   setScaleIncrease(): void;
-  // 删除选区组件
-  deleteSelectElements(): void;
   // 全选
   selectAll(): void;
   // 上传图片