fix(修复撤销功能): 修复了撤销按钮无法撤销画布数据的bug (#562)

* fix(修复撤销功能): 修复了撤销按钮无法撤销画布数据的bug

* fix(补充): 补充了上一个提交遗漏的代码

---------

Co-authored-by: “935183846@qq.com” <“935183846@qq.com”>

Author: chaochao15

packages/core/plugin/AddBaseTypePlugin.ts

@@ -43,9 +43,9 @@ export default class AddBaseTypePlugin implements IPluginTempl {
     if (!event && center) {
       this._toCenter(item);
     }
-    this.canvas.refreshHistory();
     this.canvas.setActiveObject(item);
     this.canvas.renderAll();
+    this.editor.saveState();
   }
 
   _toEvent(item: fabric.Object, event: DragEvent) {

packages/core/plugin/BarCodePlugin.ts

@@ -77,6 +77,8 @@ class BarCodePlugin implements IPluginTempl {
         this.canvas.add(imgEl);
         this.canvas.setActiveObject(imgEl);
         this.editor.position('center');
+        this.canvas.renderAll();
+        this.editor.saveState();
       },
       { crossOrigin: 'anonymous' }
     );

packages/core/plugin/DrawLinePlugin.ts

@@ -126,6 +126,8 @@ class DrawLinePlugin implements IPluginTempl {
       this.lineToDraw.setCoords();
       this.isDrawingLine = false;
       canvas.discardActiveObject();
+      canvas.renderAll();
+      this.editor.saveState();
     });
   }
 

packages/core/plugin/HistoryPlugin.ts

@@ -2,76 +2,156 @@
 /*
  * @Author: 秦少卫
  * @Date: 2023-06-20 13:06:31
- * @LastEditors: George GeorgeSmith163@163.com
- * @LastEditTime: 2024-10-15 09:35:35
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2025-01-06 17:22:47
  * @Description: 历史记录插件
  */
 import { fabric } from 'fabric';
-import '../utils/fabric-history.js';
-import type { IEditor, IPluginTempl } from '@kuaitu/core';
-
-type IPlugin = Pick<HistoryPlugin, 'undo' | 'redo' | 'historyUpdate'>;
-
-declare module '@kuaitu/core' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface IEditor extends IPlugin {}
-}
+import Editor from '../Editor';
 
+type IEditor = Editor;
 type callback = () => void;
-type extendCanvas = {
-  undo: (callback?: callback) => void;
-  redo: (callback?: callback) => void;
-  clearHistory: () => void;
-  historyStack: any[];
-  historyIndex: number;
-};
 
 class HistoryPlugin implements IPluginTempl {
   static pluginName = 'HistoryPlugin';
-  static apis = ['undo', 'redo', 'historyUpdate'];
+  static apis = ['undo', 'redo', 'historyUpdate', 'clearAndSaveState', 'saveState'];
   static events = [];
+
+  // 历史记录相关属性
+  private stack: string[] = [];
+  private currentIndex = 0;
+  private maxLength = 100;
+  private isProcessing = false;
+  private isLoading = false;
+
   hotkeys: string[] = ['ctrl+z', 'ctrl+shift+z', '⌘+z', '⌘+shift+z'];
-  constructor(public canvas: fabric.Canvas & extendCanvas, public editor: IEditor) {
-    fabric.Canvas.prototype._historyNext = () => {
-      return this.editor.getJson();
-    };
+
+  constructor(public canvas: fabric.Canvas, public editor: IEditor) {
     this._init();
   }
 
-  _init() {
+  private _init() {
+    // 监听对象变更事件
+    const events = {
+      'object:removed': () => this.saveState(),
+      'object:modified': () => this.saveState(),
+      'object:skewing': () => this.saveState(),
+    };
+
+    // 绑定事件
+    Object.entries(events).forEach(([event, handler]) => {
+      this.canvas.on(event, handler);
+    });
+
+    // 初始化状态
+    this.saveState();
+
+    // 更新历史记录状态
     this.canvas.on('history:append', () => {
       this.historyUpdate();
     });
+
+    // 页面离开提示
     window.addEventListener('beforeunload', (e) => {
-      if (this.canvas.historyStack.length > 0) {
+      const { undoCount } = this.getState();
+      if (undoCount > 0) {
         (e || window.event).returnValue = '确认离开';
       }
     });
   }
 
+  // 获取当前状态
+  private getCurrentState() {
+    return this.editor.getJson();
+  }
+
+  // 保存状态
+  private saveState() {
+    if (this.isProcessing) return;
+
+    // 清除当前索引后的记录
+    this.stack.splice(this.currentIndex);
+    this.stack.push(this.getCurrentState());
+
+    // 维护最大长度
+    if (this.stack.length > this.maxLength) {
+      this.stack.shift();
+    } else {
+      this.currentIndex++;
+    }
+    this.historyUpdate();
+  }
+
+  // 加载状态
+  private _loadState(state: string, eventName: string, callback?: callback) {
+    this.isLoading = true;
+    this.isProcessing = true;
+
+    // 处理 workspace 的特殊情况
+    const parsedState = JSON.parse(state);
+    const workspace = parsedState.objects?.find((item: any) => item.id === 'workspace');
+    if (workspace) {
+      workspace.evented = false;
+    }
+
+    this.canvas.loadFromJSON(state, () => {
+      this.canvas.renderAll();
+      this.canvas.fire(eventName);
+      this.isProcessing = false;
+      this.isLoading = false;
+      callback?.();
+    });
+  }
+
+  // 获取历史记录状态
+  private getState() {
+    return {
+      undoCount: this.currentIndex - 1,
+      redoCount: this.stack.length - this.currentIndex,
+    };
+  }
+
+  // 清空历史记录
+  private clear() {
+    this.stack = [];
+    this.currentIndex = 0;
+    this.saveState();
+  }
+
+  // 公开方法
   historyUpdate() {
-    const { historyStack, historyIndex } = this.canvas;
-    this.editor.emit('historyUpdate', historyIndex, historyStack.length - historyIndex);
+    const { undoCount, redoCount } = this.getState();
+    this.editor.emit('historyUpdate', undoCount, redoCount);
   }
 
-  // 导入模板之后，清理 History 缓存
   hookImportAfter() {
-    this.canvas.clearHistory(true);
+    this.clear();
     this.historyUpdate();
     return Promise.resolve();
   }
 
   undo() {
-    this.canvas.undo();
-    this.historyUpdate();
+    if (this.isLoading || this.currentIndex <= 1) return;
+
+    this.currentIndex--;
+    const state = this.stack[this.currentIndex - 1];
+    if (state) {
+      this._loadState(JSON.stringify(state), 'history:undo');
+      this.historyUpdate();
+    }
   }
 
   redo() {
-    this.canvas.redo();
-    this.historyUpdate();
+    if (this.isLoading || this.currentIndex >= this.stack.length) return;
+
+    const state = this.stack[this.currentIndex];
+    if (state) {
+      this._loadState(JSON.stringify(state), 'history:redo');
+      this.currentIndex++;
+      this.historyUpdate();
+    }
   }
 
-  // 快捷键扩展回调
   hotkeyEvent(eventName: string, e: KeyboardEvent) {
     if (e.type === 'keydown') {
       switch (eventName) {
@@ -86,6 +166,13 @@ class HistoryPlugin implements IPluginTempl {
       }
     }
   }
+
+  clearAndSaveState() {
+    const currentState = this.getCurrentState();
+    this.stack = [currentState]; // 只保留当前状态作为第一条记录
+    this.currentIndex = 1;
+    this.historyUpdate();
+  }
 }
 
 export default HistoryPlugin;

packages/core/plugin/QrCodePlugin.ts

@@ -131,6 +131,8 @@ class QrCodePlugin implements IPluginTempl {
         this.canvas.add(imgEl);
         this.canvas.setActiveObject(imgEl);
         this.editor.position('center');
+        this.canvas.renderAll();
+        this.editor.saveState();
       },
       { crossOrigin: 'anonymous' }
     );