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

2025-07-16 18:08:20 +08:00
parent 5f29e488ed
commit 26581b234a
8 changed files with 409 additions and 164 deletions
--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -35,6 +35,7 @@ export class CanvasManager {
    this.maskLayer = null; // 添加蒙层引用
    this.editorMode = CanvasConfig.defaultTool; // 默认编辑器模式
    this.layers = options.layers || null; // 图层引用
+    this.lastSelectLayerId = options.lastSelectLayerId || null; // 最后选择的图层ID
    this.canvasWidth = options.canvasWidth || this.width; // 画布宽度
    this.canvasHeight = options.canvasHeight || this.height; // 画布高度
    this.canvasColor = options.canvasColor || "#ffffff"; // 画布背景颜色
@@ -282,6 +283,7 @@ export class CanvasManager {
      activeElementId: activeElementId,
      layerManager: layerManager,
      layers: this.layers,
+      lastSelectLayerId: this.lastSelectLayerId,
    });

    // 设置动画交互效果
--- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js
@@ -971,7 +971,6 @@ export class LayerManager {
    //     allObjects.push(object);
    //   }
    // }
-
    if (allObjects.length) {
      // 切换到选择模式
      this?.toolManager?.setTool(OperationType.SELECT);
@@ -1525,13 +1524,32 @@ export class LayerManager {
    };
  }

+  /**
+   * 获取当前图层序列化对象
+   * @param {Object} layer 图层对象
+   * @returns {Array} 图层中的序列化对象列表
+   */
+  getCurrLayerSerializedObjects(layer) {
+    if (!layer || layer?.fabricObjects?.length === 0) {
+      return [];
+    }
+    // 序列化图层中的对象
+    return layer.fabricObjects
+      .map((obj) => {
+        const { object } = findObjectById(this.canvas, obj.id);
+        if (object) return object.toObject(["id", "layerId", "layerName"]);
+        return false;
+      })
+      .filter(Boolean);
+  }
+
  /**
   * 复制图层数据到剪贴板
   * @param {string} layerId 要复制的图层ID
   * @returns {Object} 复制的图层数据
   */
  copyLayer(layerId) {
-    const layer = this.layers.value.find((l) => l.id === layerId);
+    const { layer } = findLayerRecursively(this.layers.value, layerId);
    if (!layer) {
      console.error(`图层 ${layerId} 不存在`);
      return null;
@@ -1548,11 +1566,18 @@ export class LayerManager {

    // 序列化fabricObjects数组
    if (layer.fabricObjects && layer.fabricObjects.length > 0) {
-      layerCopy.serializedObjects = layer.fabricObjects
-        .map((obj) =>
-          typeof obj.toObject === "function" ? obj.toObject(["id", "layerId", "layerName"]) : null
-        )
-        .filter(Boolean);
+      layerCopy.serializedObjects = this.getCurrLayerSerializedObjects(layer);
+    }
+
+    //  处理子图层
+    if (layer?.children?.length) {
+      layerCopy.children = layer.children.map((child) => {
+        const childCopy = JSON.parse(JSON.stringify(child));
+        if (child.fabricObjects && child.fabricObjects.length > 0) {
+          childCopy.serializedObjects = this.getCurrLayerSerializedObjects(child);
+        }
+        return childCopy;
+      });
    }

    // 存储到剪贴板
@@ -1653,7 +1678,7 @@ export class LayerManager {
   * 粘贴图层
   * @returns {string} 新创建的图层ID
   */
-  pasteLayer() {
+  async pasteLayer() {
    if (!this.clipboardData) {
      console.error("剪贴板中没有图层数据");
      return null;
@@ -1668,8 +1693,20 @@ export class LayerManager {
      layerManager: this, // 传递LayerManager实例
    });

+    // 设置命令为可撤销
+    command.undoable = true;
+    if (this.commandManager) {
+      // 使用命令管理器执行命令
+      const result = await this.commandManager.execute(command);
+      this.clipboardData = null; // 清空剪贴板数据  复制一次
+      // 执行命令
+      return result;
+    }
+
+    const result = await command.execute();
+    this.clipboardData = null; // 清空剪贴板数据  复制一次就清空，避免重复粘贴   出现 错误后也清空  总之就是清空  不用给自己找麻烦
    // 执行命令
-    return command.execute();
+    return result;
  }

  /**
@@ -2893,10 +2930,11 @@ export class LayerManager {
    let lastUpdateTime = 0;
    let hasMoved = false; // 追踪是否实际发生了移动
    const UPDATE_THRESHOLD = 32; // 约60fps
-
    // 移动开始事件处理
    const handleMovingStart = (e) => {
-      if (e.target === activeSelection) {
+      // 判断活动对象是否只有一个
+      const isSginleObject = e.target === activeSelection?._objects?.[0];
+      if (e.target === activeSelection || isSginleObject) {
        hasMoved = false; // 重置移动状态
        console.log("🎯 开始移动组选择对象");
        // 记录遮罩初始位置
@@ -2905,8 +2943,8 @@ export class LayerManager {
          `${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}`
        );
        // 记录初始位置
-        initialLeft = activeSelection.left;
-        initialTop = activeSelection.top;
+        initialLeft = isSginleObject ? e.target.left : activeSelection.left;
+        initialTop = isSginleObject ? e.target.top : activeSelection.top;

        maskInitialLeft = layer.clippingMask.left || 0;
        maskInitialTop = layer.clippingMask.top || 0;
@@ -2914,8 +2952,10 @@ export class LayerManager {
    };
    // 移动中事件处理函数（带节流）
    const handleMoving = (e) => {
+      // 判断活动对象是否只有一个
+      const isSginleObject = e.target === activeSelection?._objects?.[0];
      const target = e.target;
-      if (target === activeSelection) {
+      if (target === activeSelection || isSginleObject) {
        hasMoved = true; // 标记发生了移动
        const now = Date.now();

@@ -2949,6 +2989,8 @@ export class LayerManager {
              maskInitialLeft: maskInitialLeft,
              maskInitialTop: maskInitialTop,
              isExecuteRealtime: true,
+              isSginleObject,
+              target,
            });

            // 执行实时更新
@@ -2963,7 +3005,15 @@ export class LayerManager {
    // 修改事件处理函数 - 使用 object:modified 替代 object:moved
    const handleModified = (e) => {
      const target = e.target;
-      if (target === activeSelection && hasMoved) {
+      // 判断活动对象是否只有一个
+      const isSginleObject = e.target === activeSelection?._objects?.[0];
+      if (isSginleObject) {
+        // 如果是单个对象，不处理
+        console.log("🚫 单个对象不处理移动完成");
+        hasMoved = false; // 重置移动状态
+        return;
+      }
+      if ((target === activeSelection || isSginleObject) && hasMoved) {
        console.log("✅ 组选择对象移动完成");

        // 计算最终移动距离
@@ -2982,8 +3032,12 @@ export class LayerManager {
            maskInitialLeft: maskInitialLeft,
            maskInitialTop: maskInitialTop,
            activeSelection,
+            isSginleObject,
+            target,
          });

+          command.undoable = isSginleObject ? false : true; // 设置为可撤销的命令
+
          // 执行可撤销的命令
          if (this.commandManager) {
            this.commandManager.execute(command);
--- a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
@@ -13,6 +13,7 @@ export class CanvasEventManager {
    this.activeElementId = options.activeElementId || { value: null };
    this.layerManager = options.layerManager || null;
    this.layers = options.layers || null;
+    this.lastSelectLayerId = options.lastSelectLayerId || null; // 最后选择的图层ID

    // 事件处理的内部状态 - 优化设备检测
    this.deviceInfo = this._detectDeviceType();
@@ -410,6 +411,9 @@ export class CanvasEventManager {
            finalState: TransformCommand.captureTransformState(activeObj),
            objectType: activeObj.type,
            name: `变换 ${activeObj.type || "对象"}`,
+            layerManager: this.layerManager,
+            layers: this.layers,
+            lastSelectLayerId: this.lastSelectLayerId,
          });

          // 执行并将命令添加到历史栈