feat: 添加对图层操作的支持，优化图层粘贴和变换命令，增强组图层遮罩位置更新逻辑

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

@@ -13,6 +13,7 @@ import {
   removeCanvasObjectByObject,
 } from "../utils/helper";
 import { fabric } from "fabric-with-all";
+import { restoreFabricObject } from "../utils/objectHelper";
 
 /**
  * 添加图层命令
@@ -188,12 +189,13 @@ export class PasteLayerCommand extends Command {
     this.clipboardData = options.clipboardData;
     this.layerManager = options.layerManager;
 
-    // 新图层相关属性
     this.newLayer = null;
-    this.newLayerId = null;
+    this.newLayerId = generateId("layer_");
     this.insertIndex = null;
     this.oldActiveLayerId = null;
     this.createdObjects = [];
+    this.isGroupLayer = false;
+    this.childLayerIdMap = new Map();
   }
 
   async execute() {
@@ -201,27 +203,9 @@ export class PasteLayerCommand extends Command {
       console.error("剪贴板中没有图层数据");
       return null;
     }
-
-    const data = this.clipboardData;
-    const fabric = window.fabric;
-
-    if (!fabric) {
-      console.error("未找到fabric库");
-      return null;
-    }
-
-    // 生成新的图层ID
-    this.newLayerId = `layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
-
-    // 创建新图层
-    this.newLayer = {
-      ...data,
-      id: this.newLayerId,
-      name: `${data.name} 副本`,
-      fabricObjects: [],
-      isCut: undefined,
-      serializedObjects: undefined,
-    };
+    const data = JSON.parse(JSON.stringify(this.clipboardData));
+    // 判断是否为组图层
+    this.isGroupLayer = data.type === "group" || !!data?.children?.length;
 
     // 保存当前活动图层ID
     this.oldActiveLayerId = this.activeLayerId.value;
@@ -229,144 +213,263 @@ export class PasteLayerCommand extends Command {
     // 计算插入位置
     this.insertIndex = this.layerManager._getInsertIndexAboveActiveLayer();
 
-    // 执行添加图层操作
-    if (this.insertIndex !== undefined && this.insertIndex !== null) {
-      this.layers.value.splice(this.insertIndex, 0, this.newLayer);
-    } else {
-      this.layers.value.push(this.newLayer);
-    }
+    if (this.isGroupLayer) {
+      // 粘贴为新的组图层，递归生成子图层ID
+      const { groupLayer, allObjects } = await this._createGroupLayerFromClipboard(data);
+      if (groupLayer?.clippingMask) {
+        // 给遮罩蒙层也添加上偏移
+        groupLayer.clippingMask.left += 30;
+        groupLayer.clippingMask.top += 30;
+      }
+      this.newLayer = groupLayer;
+      this.newLayer.id = this.newLayerId;
 
-    // 更新活动图层
-    if (!this.newLayer.isBackground) {
+      // 插入组图层
+      if (this.insertIndex !== undefined && this.insertIndex !== null) {
+        this.layers.value.splice(this.insertIndex, 0, this.newLayer);
+      } else {
+        this.layers.value.push(this.newLayer);
+      }
+      // 重新创建遮罩对象
+      const clippingMaskFabricObject =
+        (await restoreFabricObject(groupLayer?.clippingMask, this.canvas)) || null;
+
+      clippingMaskFabricObject.clipPath = null;
+      clippingMaskFabricObject.set({
+        absolutePositioned: true,
+      });
+
+      clippingMaskFabricObject.dirty = true;
+      clippingMaskFabricObject.setCoords();
+      // 添加所有对象到画布
+      allObjects.forEach((obj) => {
+        obj.clipPath = clippingMaskFabricObject;
+        obj.dirty = true;
+        obj.setCoords();
+        this.canvas.add(obj);
+      });
+      this.createdObjects = allObjects;
+
+      // 设置活动图层为新组图层
       this.activeLayerId.value = this.newLayer.id;
-    }
-
-    // 如果有序列化的对象，异步恢复它们
-    if (
-      data.serializedObjects &&
-      Array.isArray(data.serializedObjects) &&
-      data.serializedObjects.length > 0
-    ) {
-      await this._restoreObjectsAsync(data);
     } else {
-      this._onObjectsRestored(data);
+      // 普通图层粘贴逻辑
+      this.newLayer = {
+        ...data,
+        id: this.newLayerId,
+        name: `${data.name} 副本`,
+        fabricObjects: [],
+        isCut: undefined,
+        serializedObjects: undefined,
+      };
+
+      if (this.insertIndex !== undefined && this.insertIndex !== null) {
+        this.layers.value.splice(this.insertIndex, 0, this.newLayer);
+      } else {
+        this.layers.value.push(this.newLayer);
+      }
+
+      if (!this.newLayer.isBackground) {
+        this.activeLayerId.value = this.newLayer.id;
+      }
+
+      if (
+        data.serializedObjects &&
+        Array.isArray(data.serializedObjects) &&
+        data.serializedObjects.length > 0
+      ) {
+        await this._restoreObjectsAsync(data);
+      } else {
+        this._onObjectsRestored(data);
+      }
     }
+    // 取消画布激活对象
+
+    this.canvas.discardActiveObject(); // 取消当前活动对象
+    // 重新排序
+    await this.layerManager?.sortLayersWithTool?.();
+
+    // 更新画布上对象的可选择状态
+    await this.layerManager?.updateLayersObjectsInteractivity?.();
 
     return this.newLayerId;
   }
 
   /**
-   * 异步恢复序列化的对象
-   * @param {Object} data 剪贴板数据
-   * @private
+   * 递归创建组图层及其所有子图层和对象
    */
-  async _restoreObjectsAsync(data) {
+  async _createGroupLayerFromClipboard(data) {
+    const groupId = generateId("group_layer_");
+    const childLayerIdMap = new Map();
+    const allObjects = [];
+
+    // 递归处理子图层
+    const processChildren = async (children) => {
+      const result = [];
+      for (const child of children) {
+        const newChildId = generateId("layer_");
+        childLayerIdMap.set(child.id, newChildId);
+
+        // 递归处理子组
+        let childLayer;
+        if (child.type === "group" && Array.isArray(child.children)) {
+          const { groupLayer, allObjects: childObjs } =
+            await this._createGroupLayerFromClipboard(child);
+          childLayer = groupLayer;
+          allObjects.push(...childObjs);
+        } else {
+          // 普通子图层
+          childLayer = {
+            ...child,
+            id: newChildId,
+            name: `${child.name} 副本`,
+            fabricObjects: [],
+            isCut: undefined,
+            serializedObjects: undefined,
+          };
+          // 恢复对象
+          if (
+            child.serializedObjects &&
+            Array.isArray(child.serializedObjects) &&
+            child.serializedObjects.length > 0
+          ) {
+            const objs = await this._enlivenObjects(
+              child.serializedObjects,
+              newChildId,
+              `${child.name} 副本`
+            );
+            childLayer.fabricObjects = objs.map((obj) =>
+              obj.toObject(["id", "layerId", "layerName"])
+            );
+            allObjects.push(...objs);
+          }
+        }
+        result.push(childLayer);
+      }
+      return result;
+    };
+
+    // 处理当前组的子图层
+    const children = await processChildren(data.children);
+
+    // 创建组图层对象
+    const groupLayer = {
+      ...data,
+      id: groupId,
+      name: `${data.name} 副本`,
+      type: "group",
+      children,
+      fabricObjects: [],
+      isCut: undefined,
+      serializedObjects: undefined,
+    };
+
+    this.childLayerIdMap = childLayerIdMap;
+
+    // 取消画布激活对象
+
+    this.canvas.discardActiveObject(); // 取消当前活动对象
+    return { groupLayer, allObjects };
+  }
+
+  /**
+   * 恢复对象（用于普通图层和组图层的子图层）
+   */
+  async _enlivenObjects(serializedObjects, layerId, layerName) {
     return new Promise((resolve, reject) => {
-      fabric.util.enlivenObjects(data.serializedObjects, (objects) => {
+      fabric.util.enlivenObjects(serializedObjects, (objects) => {
         try {
           objects.forEach((obj) => {
-            // 生成新的对象ID
-            const newObjId = `obj_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
-            obj.id = newObjId;
-            obj.layerId = this.newLayerId;
-            obj.layerName = this.newLayer.name;
-
-            // 如果是复制操作，给对象添加偏移量
-            if (!data.isCut) {
-              const offset = 10;
-              if (obj.left !== undefined) obj.left += offset;
-              if (obj.top !== undefined) obj.top += offset;
-            }
-
-            // 添加到画布
-            this.canvas.add(obj);
-
-            // 添加到图层
-            this.newLayer.fabricObjects.push(obj);
-
-            // 记录创建的对象，用于撤销
-            this.createdObjects.push(obj);
+            obj.id = generateId("obj_");
+            obj.layerId = layerId;
+            obj.layerName = layerName;
+            // 添加偏移
+            const offset = 30;
+            if (obj.left !== undefined) obj.left += offset;
+            if (obj.top !== undefined) obj.top += offset;
           });
-
-          this._onObjectsRestored(data);
-          resolve();
+          resolve(objects);
+        } catch (error) {
+          reject(error);
+        }
+      });
+    });
+  }
+
+  async _restoreObjectsAsync(data) {
+    return new Promise((resolve, reject) => {
+      fabric.util.enlivenObjects(data.serializedObjects, (objects) => {
+        try {
+          objects.forEach((obj) => {
+            const newObjId = generateId("obj_");
+            obj.id = newObjId;
+            obj.layerId = this.newLayerId;
+            obj.layerName = this.newLayer.name;
+            if (!data.isCut) {
+              const offset = 30;
+              if (obj.left !== undefined) obj.left += offset;
+              if (obj.top !== undefined) obj.top += offset;
+            }
+            this.canvas.add(obj);
+            this.newLayer.fabricObjects.push(obj.toObject(["id", "layerId", "layerName"]));
+            this.createdObjects.push(obj);
+          });
+          this._onObjectsRestored(data);
+          resolve();
         } catch (error) {
-          console.error("恢复对象时发生错误:", error);
           reject(error);
         }
       });
     });
   }
 
-  /**
-   * 对象恢复完成后的处理
-   * @param {Object} data 剪贴板数据
-   * @private
-   */
   _onObjectsRestored(data) {
-    // 更新对象交互性
     this.layerManager?.updateLayersObjectsInteractivity?.();
-
-    // 重新排列对象
     this.layerManager?._rearrangeObjects?.();
-
-    // 判断如果是剪切操作，粘贴完后需要删除剪贴板数据
     if (data.isCut && this.layerManager) {
       this.layerManager.clipboardData = null;
-      console.log(`已粘贴图层：${this.newLayer.name}（剪切）`);
-    } else {
-      console.log(`已粘贴图层：${this.newLayer.name}（复制）`);
     }
-
-    // 重新渲染画布
     if (this.canvas) {
       this.canvas.renderAll();
     }
   }
 
-  undo() {
+  async undo() {
     if (!this.newLayer || !this.newLayerId) return;
-
-    // 从图层列表删除该图层
-    const index = this.layers.value.findIndex((layer) => layer.id === this.newLayerId);
-    if (index !== -1) {
-      this.layers.value.splice(index, 1);
+    const { layer, parent } = findLayerRecursively(this.layers.value, this.newLayerId);
+    if (!layer) {
+      console.error(`图层 ${this.newLayerId} 不存在, 无法撤销`);
+      return false;
     }
 
-    // 恢复原活动图层
-    this.activeLayerId.value = this.oldActiveLayerId;
+    if (parent) {
+      // 如果是子图层，直接从父图层中删除
+      const index = parent.children.findIndex((child) => child.id === this.newLayerId);
+      if (index !== -1) {
+        parent.children.splice(index, 1);
+      }
+    } else {
+      // 如果是顶级图层，直接从图层列表中删除
+      const index = this.layers.value.findIndex((l) => l.id === this.newLayerId);
+      if (index !== -1) {
+        this.layers.value.splice(index, 1);
+      }
+    }
 
-    // 从画布移除所有创建的对象
-    this.createdObjects.forEach((obj) => {
-      this.canvas.remove(obj);
+    this.createdObjects?.forEach((obj) => {
+      removeCanvasObjectByObject(this.canvas, obj);
     });
 
-    // 如果图层有其他fabric对象，也要移除
-    if (this.newLayer.fabricObjects && this.newLayer.fabricObjects.length > 0) {
-      this.newLayer.fabricObjects.forEach((obj) => {
-        if (!this.createdObjects.includes(obj)) {
-          this.canvas.remove(obj);
-        }
-      });
-    }
+    this.activeLayerId.value = this.oldActiveLayerId;
 
-    // 如果是剪切操作的撤销，需要恢复剪贴板数据
-    if (this.clipboardData && this.clipboardData.isCut && this.layerManager) {
-      this.layerManager.clipboardData = this.clipboardData;
-    }
+    // 取消激活对象
 
-    // 重新渲染画布
-    if (this.canvas) {
-      this.canvas.renderAll();
-    }
-
-    // 更新对象交互性
-    if (
-      this.layerManager &&
-      typeof this.layerManager.updateLayersObjectsInteractivity === "function"
-    ) {
-      this.layerManager.updateLayersObjectsInteractivity();
-    }
+    this.canvas.discardActiveObject(); // 取消当前活动对象
+    // 重新排序
+    await this.layerManager?.sortLayersWithTool?.();
+    // 更新画布上对象的可选择状态
+    await this.layerManager?.updateLayersObjectsInteractivity?.();
+    return true;
   }
 
   getInfo() {
@@ -375,6 +478,7 @@ export class PasteLayerCommand extends Command {
       layerName: this.newLayer?.name || "未知图层",
       layerId: this.newLayerId,
       objectCount: this.createdObjects.length,
+      isGroupLayer: this.isGroupLayer,
     };
   }
 }