画布删除撤回、频繁撤回反撤回、图片裁剪id丢失问题修复

src/component/Canvas/CanvasEditor/commands/LayerCommands.js

@@ -70,7 +70,7 @@ export class AddLayerCommand extends Command {
 
   undo() {
     // 从图层列表删除该图层
-    this.layers.value = this.beforeLayers;
+	this.layers.value = [...this.beforeLayers];
 
     // 恢复原活动图层
     this.activeLayerId.value = this.oldActiveLayerId;
@@ -563,7 +563,12 @@ export class RemoveLayerCommand extends Command {
         allObjects.push(object);
       }
     }
-
+	layer.fabricObjects?.forEach((fabric) => {
+		const { object } = findObjectById(this.canvas, fabric.id);
+		if (object && !allObjects.includes(object)) {
+		  allObjects.push(object);
+		}
+	  });
     // 递归收集子图层的对象
     if (layer.children && Array.isArray(layer.children)) {
       layer.children.forEach((childLayer) => {

src/component/Canvas/CanvasEditor/index.vue

@@ -693,25 +693,26 @@ function removeLayer(layerId) {
     return;
 	}
 
-  if (canvasManager && canvasManager.canvas) {
+	layerManager.removeLayer(layerId);
-    const layerToRemove = layers.value.find((l) => l.id === layerId);
+//   此处删除画布上内容导致撤回操作无效（多余）
-    if (layerToRemove) {
+//   if (canvasManager && canvasManager.canvas) {
-      const elementIds = layerToRemove?.fabricObjects?.map((e) => e.id);
+//     const layerToRemove = layers.value.find((l) => l.id === layerId);
-      elementIds.forEach((elementId) => {
+//     if (layerToRemove) {
-        const objectToRemove = canvasManager.canvas
+//       const elementIds = layerToRemove?.fabricObjects?.map((e) => e.id);
-          .getObjects()
+//       elementIds.forEach((elementId) => {
-          .find((obj) => obj.id === elementId);
+//         const objectToRemove = canvasManager.canvas
-        if (objectToRemove) {
+//           .getObjects()
-          canvasManager.canvas.remove(objectToRemove);
+//           .find((obj) => obj.id === elementId);
-        }
+//         if (objectToRemove) {
-      });
+//           canvasManager.canvas.remove(objectToRemove);
-      if (activeLayerId.value === layerId) {
+//         }
-        activeElementId.value = null;
+//       });
-      }
+//       if (activeLayerId.value === layerId) {
-      canvasManager.canvas.renderAll();
+//         activeElementId.value = null;
-    }
+//       }
-  }
+//       canvasManager.canvas.renderAll();
-  layerManager.removeLayer(layerId);
+//     }
+//   }
 }
 
 function triggerImageUpload() {

src/component/Canvas/CanvasEditor/managers/LayerManager.js

@@ -1819,7 +1819,8 @@ export class LayerManager {
     }
 
     // 检查是否是唯一的普通图层
-    const normalLayers = this.layers.value.filter((l) => !l.isBackground);
+    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed);
+	console.log("普通图层:", normalLayers)
     if (normalLayers.length === 1) {
       console.warn("不能剪切唯一的普通图层");
       return null;