画布增加的新功能

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

@@ -31,6 +31,7 @@ import {
 } from "../commands/ObjectLayerCommands";
 import {
   LayerType,
+  SpecialLayerId,
   BlendMode,
   createLayer,
   createBackgroundLayer,
@@ -343,35 +344,36 @@ export class LayerManager {
     });
 
     // 批量更新对象
-    objects.forEach(async (obj) => {
-      const layer = layerMap[obj.layerId];
+	for(let obj of objects){
+      let layer = layerMap[obj.layerId];
 
       if (!obj.layerId) {
         // 没有关联图层的对象使用默认设置
         obj.selectable = false;
         obj.evented = false;
         obj.erasable = false; // 未关联图层的对象不可擦除
-        return;
+        break;
       }
 
-      if (!layer) return;
+      if (!layer) break;
 
       // 设置一级图层对象的交互性
       await this._setObjectInteractivity(obj, layer, editorMode);
 
       // 设置子图层对象的交互性
-      layer?.children?.forEach(async (childLayer) => {
-        const childObj = this.canvas
+	  for(let childLayer of layer.children){
+        let childObj = this.canvas
           .getObjects()
           .find((o) => o.layerId === childLayer.id);
         if (childObj) {
           await this._setObjectInteractivity(childObj, childLayer, editorMode);
         }
-      });
-    });
-
+	  };
+    };
+	
     // 设置裁剪对象
-    layers.forEach(async (layer) => {
+	for(let layer of layers){
+      if(layer.id === SpecialLayerId.COLOR) break;
       let clippingMaskFabricObject = null;
       if (layer.clippingMask) {
         // 反序列化 clippingMask
@@ -379,7 +381,7 @@ export class LayerManager {
           layer.clippingMask,
           this.canvas
         );
-        clippingMaskFabricObject.clipPath = null;
+        // clippingMaskFabricObject.clipPath = null;
 
         clippingMaskFabricObject.set({
           // 设置绝对定位
@@ -403,7 +405,7 @@ export class LayerManager {
             .find((o) => o.layerId === childLayer.id);
           if (childObj) {
             childObj.clipPath = clippingMaskFabricObject;
-            childObj.dirty = true; // 标记为脏对象
+            // childObj.dirty = true; // 标记为脏对象
             childObj.setCoords();
           }
 
@@ -499,7 +501,7 @@ export class LayerManager {
           isOldSelectObject
         );
       }
-    });
+    };
   }
 
   /**
@@ -952,18 +954,28 @@ export class LayerManager {
     // 查找要删除的图层
     const { layer, parent } = findLayerRecursively(this.layers.value, layerId);
     // 如果是背景层或固定层，不允许删除
-    if (layer && (layer.isBackground || layer.isFixed)) {
+    if (layer && (layer.isBackground || layer.isFixed || layer.isFixedOther)) {
       console.warn(layer.isBackground ? "背景层不可删除" : "固定层不可删除");
-      message.warning(layer.isBackground ? "背景层不可删除" : "固定层不可删除");
+      message.warning(layer.isBackground ? this.t("Canvas.backLayerCannotDelete") : this.t("Canvas.fixedLayerCannotDelete"));
       return false;
     }
 
+
     // 检查是否是唯一的普通图层
-    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed);
+	var isChild = false;
+	var parentLength = 0;
+	const normalLayers = this.layers.value.filter((layer) => {
+		if(layer.children.some(v => v.id == layerId)){
+			isChild = true;
+			parentLength = layer.children.length;
+		}
+		return !layer.isFixed && !layer.isFixedOther && !layer.isBackground
+	})
+    // const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther);
 	console.log("普通图层:", normalLayers)
-    if (normalLayers.length === 1) {
+    if (isChild ? parentLength <= 1 : normalLayers.length <= 1) {
       console.warn("不能删除唯一的普通图层");
-      message.warning("不能删除唯一的普通图层");
+      message.warning(this.t("Canvas.cannotDeleteOnlyLayer"));
       return false;
     }
     // // 如果图层有子图层，提示确认
@@ -1132,7 +1144,7 @@ export class LayerManager {
 
       return acc;
     }, []);
-
+	console.log("==========", allObjects)
     // if (layer.fill) {
     //   // 如果图层有填充颜色，设置所有对象的填充颜色
     //   const { object } = findObjectById(this.canvas, layer.fill.id);
@@ -1578,6 +1590,12 @@ export class LayerManager {
       // 如果b是固定图层而a不是固定图层，b应该排在后面（固定图层在普通图层下方）
       if (b.isFixed && !a.isFixed) return -1;
 
+	  // 如果a是固定图层而b不是固定图层，a应该排在后面（固定图层在普通图层下方）
+      if (a.isFixedOther && !b.isFixedOther) return 1;
+      // 如果b是固定图层而a不是固定图层，b应该排在后面（固定图层在普通图层下方）
+      if (b.isFixedOther && !a.isFixedOther) return -1;
+
+	  
       // 其他情况保持原有顺序
       return 0;
     });
@@ -1848,9 +1866,9 @@ export class LayerManager {
     }
 
     // 检查是否是唯一的普通图层
-    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed);
+    const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther);
 	console.log("普通图层:", normalLayers)
-    if (normalLayers.length === 1) {
+    if (normalLayers.length <= 1) {
       console.warn("不能剪切唯一的普通图层");
       return null;
     }
@@ -3250,7 +3268,7 @@ export class LayerManager {
    * @private
    */
   _setupGroupMaskMovementSync(activeSelection, layer) {
-    if (!activeSelection || !layer || !layer.clippingMask) {
+    if (!activeSelection || !layer || !layer.clippingMask || layer.isFixedClipMask) {
       return;
     }
 
@@ -3314,7 +3332,6 @@ export class LayerManager {
             // 计算移动距离
             const deltaX = target.left - initialLeft;
             const deltaY = target.top - initialTop;
-
             // 创建更新遮罩位置的命令
             const command = new UpdateGroupMaskPositionCommand({
               canvas: this.canvas,