feat: 优化选区编辑+修复部分bug

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

@@ -286,12 +286,6 @@ export class LayerManager {
     // 应用图层视觉属性
     if (layer.opacity !== undefined) obj.opacity = layer.opacity;
     if (layer.blendMode) obj.globalCompositeOperation = layer.blendMode;
-    if (layer.clippingMask) {
-      const { object } = findObjectById(this.canvas, layer.clippingMask?.id);
-      if (object) {
-        obj.clipPath = object;
-      }
-    }
   }
 
   // 私有方法：应用交互规则
@@ -337,6 +331,42 @@ export class LayerManager {
         }
       });
     });
+
+    // 设置裁剪对象
+    layers.forEach((layer) => {
+      if (layer.clippingMask) {
+        // 如果是组图层  则给所有子对象设置裁剪对象
+        if (layer.type === LayerType.GROUP || layer.children?.length > 0) {
+          layer.children.forEach((childLayer) => {
+            const { object } = findObjectById(
+              this.canvas,
+              layer.clippingMask?.id
+            );
+            if (object) {
+              const tempClipPath = fabric.util.object.clone(object);
+              tempClipPath.set({
+                // 设置绝对定位
+                absolutePositioned: true,
+              });
+              const childObj = this.canvas
+                .getObjects()
+                .find((o) => o.layerId === childLayer.id);
+              if (childObj) {
+                childObj.clipPath = tempClipPath;
+              }
+            }
+          });
+        } else {
+          const { object } = findObjectById(
+            this.canvas,
+            layer.clippingMask?.id
+          );
+          if (object) {
+            obj.clipPath = object;
+          }
+        }
+      }
+    });
   }
   /**
    * 创建新图层
@@ -393,7 +423,7 @@ export class LayerManager {
     command.undoable = options.undoable;
 
     // 如果是第一个图层，或者普通图层数量小于等于3，设置为不可撤销
-    if (this.layers.value.length === 3 || normalLayersCount < 1) {
+    if (normalLayersCount < 1) {
       command.undoable = false;
     }