feat: 实现画布的回退和恢复功能

main/src/view/canvas/index.vue

@@ -17,6 +17,8 @@ onMounted(() => {
 <template>
   <div class="wrapper">
     <div class="tools">
+      <button @click="app.undo()">回退</button>
+      <button @click="app.redo()">恢复</button>
       <button @click="app.setTool(selectTool)">选择🖱️</button>
       <!-- <button @click="app.setModel('drawing')">铅笔✏️</button> -->
       <button @click="app.setTool(rectTool)">矩形⬜️</button>

packages/core/src/app.ts

@@ -111,6 +111,13 @@ export class App extends BaseService<EventArgs> {
     aboutToChangePlugins?.forEach((plugin) => plugin?.dispose());
     return this;
   }
+
+  public dispose(): void {
+    this.currentTool = null;
+    this.disposePlugins(Array.from(this.installedPlugins.keys()));
+    this.canvas.dispose();
+    this.removeAllListeners();
+  }
 }
 
 export default App;

packages/plugin-history/src/commands/index.ts

@@ -1 +1,2 @@
 export * from './add-object-cmd';
+export * from './remove-object-cmd';

packages/plugin-history/src/commands/remove-object-cmd.ts

@@ -0,0 +1,27 @@
+import { App } from '@pictode/core';
+
+import { Cmd } from '../types';
+
+import { BaseCmd } from './base';
+
+export class RemoveObjectCmd extends BaseCmd<Cmd.RemoveObjectCmd> {
+  constructor(app: App, options: Cmd.RemoveObjectCmd) {
+    super(app, options);
+  }
+
+  public execute(): void {
+    if (!this.app || !this.options?.object) {
+      return;
+    }
+    this.app.canvas.remove(this.options.object);
+  }
+
+  public undo(): void {
+    if (!this.app || !this.options?.object) {
+      return;
+    }
+    this.app.canvas.add(this.options.object);
+  }
+}
+
+export default RemoveObjectCmd;

packages/plugin-history/src/index.ts

@@ -3,7 +3,7 @@ import { App, BaseFabricObject, Plugin } from '@pictode/core';
 import './methods';
 
 import { BaseCmd } from './commands/base';
-import { AddObjectCmd } from './commands';
+import { AddObjectCmd, RemoveObjectCmd } from './commands';
 import { History } from './history';
 import { Cmd, Options } from './types';
 
@@ -19,20 +19,23 @@ export class HistoryPlugin implements Plugin {
 
   constructor(options?: Options) {
     this.history = new History(undefined, options);
+    (['onObjectAdded'] as (keyof this)[]).forEach((method) => {
+      method = method as keyof HistoryPlugin;
+      this[method] = (this[method] as Function).bind(this);
+    });
   }
 
   public install(app: App) {
     this.app = app;
     this.history.app = app;
-    this.app.canvas.on('object:added', ({ target }: { target: BaseFabricObject }) => {
-      if (this.app) {
-        this.history.execute(new AddObjectCmd(this.app, { object: target }));
-      }
-    });
+    this.app.canvas.on('object:added', this.onObjectAdded);
+    this.app.canvas.on('object:removed', this.onObjectRemove);
   }
 
   public dispose(): void {
     this.history.dispose();
+    this.app?.canvas.off('object:added', this.onObjectAdded);
+    this.app?.canvas.off('object:added', this.onObjectRemove);
     this.app?.emit('history:destroy', {
       history: this,
     });
@@ -49,6 +52,20 @@ export class HistoryPlugin implements Plugin {
   public isEnabled(): boolean {
     return this.history.enabled;
   }
+
+  private onObjectAdded({ target }: { target: BaseFabricObject }) {
+    if (!this.app) {
+      return;
+    }
+    this.history.execute(new AddObjectCmd(this.app, { object: target }));
+  }
+
+  private onObjectRemove({ target }: { target: BaseFabricObject }) {
+    if (!this.app) {
+      return;
+    }
+    this.history.execute(new RemoveObjectCmd(this.app, { object: target }));
+  }
 }
 
 export default HistoryPlugin;

packages/plugin-history/src/types.ts

@@ -41,6 +41,10 @@ export namespace Cmd {
   export interface AddObjectOptions {
     object: BaseFabricObject;
   }
+
+  export interface RemoveObjectCmd {
+    object: BaseFabricObject;
+  }
 }
 
 export interface Options {