fix: 修复红绿图擦除撤销失败问题

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

@@ -1,4 +1,8 @@
-import { findObjectById, generateId, optimizeCanvasRendering } from "../utils/helper.js";
+import {
+  findObjectById,
+  generateId,
+  optimizeCanvasRendering,
+} from "../utils/helper.js";
 import { imageModeHandler } from "../utils/imageHelper.js";
 import { LayerType, OperationType } from "../utils/layerHelper.js";
 import { Command, CompositeCommand } from "./Command.js";
@@ -54,7 +58,9 @@ export class BatchInitializeRedGreenModeCommand extends Command {
         const layers = this.layerManager.layers?.value || [];
         const backgroundLayer = layers.find((layer) => layer.isBackground);
         const fixedLayer = layers.find((layer) => layer.isFixed);
-        const normalLayers = layers.filter((layer) => !layer.isBackground && !layer.isFixed);
+        const normalLayers = layers.filter(
+          (layer) => !layer.isBackground && !layer.isFixed
+        );
 
         if (!backgroundLayer || !fixedLayer || normalLayers.length === 0) {
           throw new Error("缺少必要的图层结构");
@@ -70,7 +76,9 @@ export class BatchInitializeRedGreenModeCommand extends Command {
             }
           : null;
 
-        this.originalFixedObjects = fixedLayer.fabricObject ? [fixedLayer.fabricObject] : [];
+        this.originalFixedObjects = fixedLayer.fabricObject
+          ? [fixedLayer.fabricObject]
+          : [];
 
         this.originalNormalObjects = normalLayer.fabricObjects
           ? [...normalLayer.fabricObjects]
@@ -110,7 +118,11 @@ export class BatchInitializeRedGreenModeCommand extends Command {
         await this._setupClothingImage(clothingImg, fixedLayer);
 
         // 7. 设置红绿图到普通图层，位置和大小与衣服底图一致
-        await this._setupRedGreenImage(redGreenImg, normalLayer, this.clothingImage);
+        await this._setupRedGreenImage(
+          redGreenImg,
+          normalLayer,
+          this.clothingImage
+        );
 
         // 4. 确保背景图层大小和衣服地图大小一致
         const backgroundObject = await this._setupBackgroundLayer(
@@ -146,7 +158,6 @@ export class BatchInitializeRedGreenModeCommand extends Command {
           this.redGreenImageMask.set({
             absolutePositioned: true,
             opacity: 0.01, // 设置为几乎透明
-            type: "redGreenImageMask",
             id: generateId("redGreenImageMask_"),
           });
           // this.canvas.add(this.redGreenImageMask);
@@ -195,9 +206,13 @@ export class BatchInitializeRedGreenModeCommand extends Command {
   async _createAndActivateEmptyLayer() {
     // 创建新的空白图层
     const newLayerName = "绘制图层";
-    const newLayerId = await this.layerManager.createLayer(newLayerName, LayerType.BITMAP, {
-      undoable: false,
-    });
+    const newLayerId = await this.layerManager.createLayer(
+      newLayerName,
+      LayerType.BITMAP,
+      {
+        undoable: false,
+      }
+    );
 
     // 设置为活动图层
     if (newLayerId) {
@@ -212,14 +227,19 @@ export class BatchInitializeRedGreenModeCommand extends Command {
       await optimizeCanvasRendering(this.canvas, async () => {
         // 1. 恢复画布背景
         if (this.originalCanvasBackground !== null) {
-          this.canvas.setBackgroundColor(this.originalCanvasBackground, () => {});
+          this.canvas.setBackgroundColor(
+            this.originalCanvasBackground,
+            () => {}
+          );
         }
 
         // 2. 恢复图层对象
         const layers = this.layerManager.layers?.value || [];
         const backgroundLayer = layers.find((layer) => layer.isBackground);
         const fixedLayer = layers.find((layer) => layer.isFixed);
-        const normalLayers = layers.filter((layer) => !layer.isBackground && !layer.isFixed);
+        const normalLayers = layers.filter(
+          (layer) => !layer.isBackground && !layer.isFixed
+        );
 
         // 移除当前添加的对象
         if (this.clothingImage) {
@@ -231,7 +251,9 @@ export class BatchInitializeRedGreenModeCommand extends Command {
 
         // 移除新创建的空白图层
         if (this.newEmptyLayerId) {
-          const emptyLayerIndex = layers.findIndex((layer) => layer.id === this.newEmptyLayerId);
+          const emptyLayerIndex = layers.findIndex(
+            (layer) => layer.id === this.newEmptyLayerId
+          );
           if (emptyLayerIndex !== -1) {
             layers.splice(emptyLayerIndex, 1);
           }
@@ -247,7 +269,9 @@ export class BatchInitializeRedGreenModeCommand extends Command {
         // 恢复固定图层
         if (fixedLayer) {
           fixedLayer.fabricObject =
-            this.originalFixedObjects.length > 0 ? this.originalFixedObjects[0] : null;
+            this.originalFixedObjects.length > 0
+              ? this.originalFixedObjects[0]
+              : null;
 
           if (fixedLayer.fabricObject) {
             this.canvas.add(fixedLayer.fabricObject);
@@ -286,7 +310,8 @@ export class BatchInitializeRedGreenModeCommand extends Command {
 
         // 4. 恢复工具状态
         if (this.toolManager && this.originalToolState) {
-          this.toolManager.isRedGreenMode = this.originalToolState.isRedGreenMode;
+          this.toolManager.isRedGreenMode =
+            this.originalToolState.isRedGreenMode;
           if (this.originalToolState.currentTool) {
             this.toolManager.setTool(this.originalToolState.currentTool);
           }
@@ -408,7 +433,10 @@ export class BatchInitializeRedGreenModeCommand extends Command {
 
     // 清除固定图层原有内容
     if (fixedLayer.fabricObject) {
-      const { object } = findObjectById(this.canvas, fixedLayer.fabricObject.id);
+      const { object } = findObjectById(
+        this.canvas,
+        fixedLayer.fabricObject.id
+      );
       if (object) this.canvas.remove(object);
     }