fix: 修复多个已知问题

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

@@ -1,3 +1,8 @@
+import {
+  createLayer,
+  findInChildLayers,
+  LayerType,
+} from "../utils/layerHelper.js";
 import { createRasterizedImage } from "../utils/selectionToImage.js";
 import { CompositeCommand } from "./Command.js";
 import { CreateImageLayerCommand } from "./LayerCommands.js";
@@ -27,6 +32,15 @@ export class LassoCutoutCommand extends CompositeCommand {
     // 高清截图选项
     this.highResolutionEnabled = options.highResolutionEnabled !== false; // 默认启用
     this.baseResolutionScale = options.baseResolutionScale || 2; // 基础分辨率倍数
+
+    this.groupId = options.groupId || `cutout-group-${Date.now()}`;
+    this.groupName = options.groupName || `选区组`;
+    this.groupLayer = null; // 新增：保存组图层的引用
+    this.originalLayersLength = 0; // 新增：保存原始图层数量
+
+    // 序列化保存选区对象，用于重做时恢复
+    this.serializedSelectionObject = null;
+    this._serializeSelectionObject();
   }
 
   async execute() {
@@ -38,8 +52,11 @@ export class LassoCutoutCommand extends CompositeCommand {
     try {
       this.executedCommands = [];
 
+      // 保存原始图层数量，用于撤销时的验证
+      this.originalLayersLength = this.layerManager.layers.value.length;
+
       // 获取选区
-      const selectionObject = this.selectionManager.getSelectionObject();
+      const selectionObject = await this._getSelectionObject();
       if (!selectionObject) {
         console.error("无法执行套索抠图：当前没有选区");
         return false;
@@ -112,10 +129,47 @@ export class LassoCutoutCommand extends CompositeCommand {
       await clearSelectionCmd.execute();
       this.executedCommands.push(clearSelectionCmd);
 
+      const topLayerIndex = this.layerManager.layers.value.findIndex(
+        (layer) => layer.id === this.newLayerId
+      );
+
+      const selectLayer = this.layerManager.layers.value[topLayerIndex];
+
+      // 创建新的组图层
+      this.groupLayer = createLayer({
+        id: this.groupId,
+        name: this.groupName || `选区组`,
+        type: LayerType.GROUP,
+        visible: true,
+        locked: false,
+        opacity: 1.0,
+        fabricObjects: [],
+        children: [],
+      });
+
+      this.fabricImage.set({
+        selectable: true,
+        evented: true,
+      });
+
+      selectLayer.parentId = this.groupId; // 设置新图层的parentId为组图层ID
+      selectLayer.fabricObjects = [
+        this.fabricImage.toObject("id", "layerId", "layerName", "parentId"),
+      ];
+      this.groupLayer.children.push(selectLayer);
+      // 插入新组图层
+      this.layerManager.layers.value.splice(topLayerIndex, 1, this.groupLayer);
+
+      this.layerManager.updateLayersObjectsInteractivity();
+      this.canvas.discardActiveObject();
+      this.canvas.setActiveObject(this.fabricImage);
+      this.canvas.renderAll();
       console.log(`套索抠图完成，新图层ID: ${this.newLayerId}`);
       return {
         newLayerId: this.newLayerId,
         cutoutImageUrl: this.cutoutImageUrl,
+        guroupId: this.groupId,
+        groupName: this.groupName,
       };
     } catch (error) {
       console.error("套索抠图过程中出错:", error);
@@ -129,32 +183,127 @@ export class LassoCutoutCommand extends CompositeCommand {
         }
       }
 
+      // 清理组图层（如果已创建）
+      if (this.groupLayer && this.groupId) {
+        try {
+          const groupIndex = this.layerManager.layers.value.findIndex(
+            (layer) => layer.id === this.groupId
+          );
+          if (groupIndex !== -1) {
+            this.layerManager.layers.value.splice(groupIndex, 1);
+            console.log(`清理了异常创建的组图层: ${this.groupId}`);
+          }
+          this.groupLayer = null;
+        } catch (cleanupError) {
+          console.warn("清理组图层失败:", cleanupError);
+        }
+      }
+
+      // 尝试回滚已执行的命令
+      if (this.executedCommands.length > 0) {
+        try {
+          for (let i = this.executedCommands.length - 1; i >= 0; i--) {
+            const command = this.executedCommands[i];
+            if (command && typeof command.undo === "function") {
+              await command.undo();
+            }
+          }
+          this.executedCommands = [];
+        } catch (rollbackError) {
+          console.warn("回滚已执行命令失败:", rollbackError);
+        }
+      }
+
       throw error;
     }
   }
 
   async undo() {
     try {
-      // 逆序撤销所有已执行的命令
-      for (let i = this.executedCommands.length - 1; i >= 0; i--) {
-        const command = this.executedCommands[i];
-        if (command && typeof command.undo === "function") {
-          await command.undo();
+      console.log(`↩️ 开始撤销套索抠图操作`);
+
+      // 1. 首先移除组图层（如果存在）
+      if (this.groupId) {
+        const groupIndex = this.layerManager.layers.value.findIndex(
+          (layer) => layer.id === this.groupId
+        );
+
+        if (groupIndex !== -1) {
+          console.log(`↩️ 移除组图层: ${this.groupId}`);
+          // 从图层列表中移除组图层
+          this.layerManager.layers.value.splice(groupIndex, 1);
         }
       }
 
+      if (this.fabricImage) {
+        console.log(`↩️ 移除抠图图像: ${this.fabricImage.id}`);
+        // 从画布中移除抠图图像
+        this.canvas.remove(this.fabricImage);
+      }
+
+      // 2. 逆序撤销所有已执行的子命令
+      for (let i = this.executedCommands.length - 1; i >= 0; i--) {
+        const command = this.executedCommands[i];
+        if (command && typeof command.undo === "function") {
+          try {
+            console.log(`↩️ 撤销子命令: ${command.constructor.name}`);
+            await command.undo();
+            console.log(`✅ 子命令撤销成功: ${command.constructor.name}`);
+          } catch (error) {
+            console.error(
+              `❌ 子命令撤销失败: ${command.constructor.name}`,
+              error
+            );
+            // 子命令撤销失败不中断整个撤销过程
+          }
+        }
+      }
+
+      // 3. 清理状态
       this.executedCommands = [];
       this.newLayerId = null;
       this.cutoutImageUrl = null;
       this.fabricImage = null;
+      this.groupLayer = null; // 清理组图层引用
+      // 注意：不重置groupId，因为重做时可能需要使用相同的ID
 
+      // 4. 更新画布和图层交互性
+      await this.layerManager.updateLayersObjectsInteractivity();
+
+      console.log(`✅ 套索抠图撤销完成`);
       return true;
     } catch (error) {
-      console.error("撤销套索抠图失败:", error);
+      console.error("❌ 撤销套索抠图失败:", error);
       return false;
     }
   }
 
+  /**
+   * 获取命令信息
+   * @returns {Object} 命令详细信息
+   */
+  getInfo() {
+    return {
+      name: this.name,
+      description: this.description,
+      newLayerId: this.newLayerId,
+      newLayerName: this.newLayerName,
+      groupId: this.groupId,
+      groupName: this.groupName,
+      executedCommandsCount: this.executedCommands.length,
+      hasGroupLayer: !!this.groupLayer,
+      sourceLayerId: this.sourceLayerId,
+      highResolutionEnabled: this.highResolutionEnabled,
+      baseResolutionScale: this.baseResolutionScale,
+      hasSerializedSelection: !!this.serializedSelectionObject,
+      selectionType: this.serializedSelectionObject?.type || null,
+      subCommands: this.executedCommands.map((cmd) => ({
+        name: cmd.constructor.name,
+        info: cmd.getInfo ? cmd.getInfo() : {},
+      })),
+    };
+  }
+
   /**
    * 获取图层的所有对象（包括子图层，从画布中查找真实对象）
    * @param {Object} layer 图层对象
@@ -249,6 +398,7 @@ export class LassoCutoutCommand extends CompositeCommand {
         scaleFactor: scaleFactor,
         // isReturenDataURL: true, // 返回DataURL
         preserveOriginalQuality: true, // 启用高质量模式
+        selectionManager: this.selectionManager, // 传递选区管理器，用于获取羽化值
       });
 
       if (!rasterizedDataURL) {
@@ -500,4 +650,129 @@ export class LassoCutoutCommand extends CompositeCommand {
       }
     });
   }
+
+  /**
+   * 序列化选区对象
+   * @private
+   */
+  _serializeSelectionObject() {
+    try {
+      if (!this.selectionManager) {
+        console.warn("选区管理器不存在，无法序列化选区对象");
+        return;
+      }
+
+      const selectionObject = this.selectionManager.getSelectionObject();
+      if (!selectionObject) {
+        console.warn("当前没有选区对象，无法序列化");
+        return;
+      }
+
+      // 将选区对象转换为可序列化的对象
+      this.serializedSelectionObject = selectionObject.toObject([
+        "id",
+        "layerId",
+        "layerName",
+        "parentId",
+      ]);
+
+      console.log("选区对象已序列化保存");
+    } catch (error) {
+      console.error("序列化选区对象失败:", error);
+      this.serializedSelectionObject = null;
+    }
+  }
+
+  /**
+   * 反序列化选区对象
+   * @returns {Promise<Object>} 选区对象
+   * @private
+   */
+  async _getSelectionObject() {
+    try {
+      // 首先尝试从选区管理器获取当前选区
+      const currentSelection = this.selectionManager.getSelectionObject();
+      if (currentSelection) {
+        console.log("从选区管理器获取到当前选区");
+        return currentSelection;
+      }
+
+      // 如果当前没有选区，则从序列化数据恢复
+      if (!this.serializedSelectionObject) {
+        console.error("没有序列化的选区对象数据");
+        return null;
+      }
+
+      console.log("从序列化数据恢复选区对象");
+
+      // 根据选区对象类型进行反序列化
+      return new Promise((resolve, reject) => {
+        const objectType = this.serializedSelectionObject.type;
+
+        if (objectType === "path") {
+          // 如果是路径类型（套索选区）
+          fabric.Path.fromObject(this.serializedSelectionObject, (path) => {
+            if (path) {
+              console.log("路径选区对象反序列化成功");
+              resolve(path);
+            } else {
+              reject(new Error("路径选区对象反序列化失败"));
+            }
+          });
+        } else if (objectType === "polygon") {
+          // 如果是多边形类型
+          fabric.Polygon.fromObject(
+            this.serializedSelectionObject,
+            (polygon) => {
+              if (polygon) {
+                console.log("多边形选区对象反序列化成功");
+                resolve(polygon);
+              } else {
+                reject(new Error("多边形选区对象反序列化失败"));
+              }
+            }
+          );
+        } else if (objectType === "rect") {
+          // 如果是矩形选区
+          fabric.Rect.fromObject(this.serializedSelectionObject, (rect) => {
+            if (rect) {
+              console.log("矩形选区对象反序列化成功");
+              resolve(rect);
+            } else {
+              reject(new Error("矩形选区对象反序列化失败"));
+            }
+          });
+        } else if (objectType === "ellipse" || objectType === "circle") {
+          // 如果是椭圆/圆形选区
+          fabric.Ellipse.fromObject(
+            this.serializedSelectionObject,
+            (ellipse) => {
+              if (ellipse) {
+                console.log("椭圆选区对象反序列化成功");
+                resolve(ellipse);
+              } else {
+                reject(new Error("椭圆选区对象反序列化失败"));
+              }
+            }
+          );
+        } else {
+          // 通用对象反序列化
+          fabric.util.enlivenObjects(
+            [this.serializedSelectionObject],
+            (objects) => {
+              if (objects && objects.length > 0) {
+                console.log("通用选区对象反序列化成功");
+                resolve(objects[0]);
+              } else {
+                reject(new Error("通用选区对象反序列化失败"));
+              }
+            }
+          );
+        }
+      });
+    } catch (error) {
+      console.error("获取选区对象失败:", error);
+      return null;
+    }
+  }
 }