添加印花元素排序priority

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

@@ -1160,7 +1160,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	const flScaleY = fixedLayerObj.scaleY
 	const prints = [];
 	const trims = [];
-	objects.forEach((v) => {
+	objects.forEach((v, i) => {
 		const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
 		const sourceData = label?.metadata?.sourceData;
 		if(!sourceData) return;
@@ -1174,7 +1174,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			scale: [0, 0],
 			angle: v.angle,
 			name: sourceData.name,
-			priority: sourceData.priority,
+			priority: i + 1,
 			object:{
 				top: 0,
 				left: 0,
@@ -1240,8 +1240,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		}
 	})
 	// prints.sort((a, b) => a.ifSingle ? 1 : -1);
-	prints.forEach((v, i) => v.priority = i + 1);
-	trims.forEach((v, i) => v.priority = i + 1);
+	// prints.forEach((v, i) => v.priority = i + 1);
+	// trims.forEach((v, i) => v.priority = i + 1);
 	return {prints, trims};
   }
   
@@ -1507,7 +1507,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
    * 创建其他图层：印花、颜色、元素...
    * @param {Object} otherData - 其他图层数据
   */
-  async createOtherLayers(otherData, isUpdate = false) {
+  async createOtherLayers(otherData) {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
 	this.canvas.loading.value = true;
 	let resolve = ()=>{};
@@ -1515,17 +1515,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
 	console.log("==========创建其他图层", otherData_);
 	
-	const updateColor = !!otherData_.color;
-	const updateSpecialGroup = !!otherData_.printObject || !!otherData_.trims;
 	// 删除颜色图层和特殊组图层
-	const ids = [];
-	if(isUpdate){
-		updateColor && ids.push(SpecialLayerId.COLOR)
-		updateSpecialGroup && ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}else{
-		ids.push(SpecialLayerId.COLOR)
-		ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}
+	const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
 	this.layers.value = this.layers.value.filter((layer) => {
 	  if(ids.includes(layer.id)){
 	  	ids.push(...layer.children?.map((child) => child.id));
@@ -1533,11 +1524,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  }
 	  return true;
 	})
-	this.canvas.getObjects().forEach((v) => ids.includes(v.id) && this.canvas.remove(v))
+	this.canvas.getObjects().forEach((v) => {
+		if(ids.includes(v.id) || ids.includes(v.layerId)){
+			this.canvas.remove(v)
+		}
+	})
 
 
 	// 创建颜色图层
-	otherData_.color && await this.createColorLayer(otherData_.color);
+	await this.createColorLayer(otherData_.color);
 
 	const printTrimsLayers = [];// 印花和元素图层
 	const singleLayers = [];// 平铺图层
@@ -1555,7 +1550,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		trims.type = "trims";
 		printTrimsLayers.unshift({...trims});
 	})
-	if(isUpdate ? updateSpecialGroup : true){
+	if(printTrimsLayers.length || singleLayers.length){
 		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
 	}
 	await this.changeCanvas();
@@ -1686,7 +1681,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  let opacity = 1
 	  let flipX = false;
 	  let flipY = false;
-	  let blendMode = BlendMode.MULTIPLY;
+	  let blendMode = BlendMode.NORMAL;
 	//   if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
 	  if(item.object){
 		opacity = item.object.opacity
@@ -1712,7 +1707,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
         hasBorders: true,
         isPrintTrims: true,
       });
-      this.canvas.add(image);
+    //   this.canvas.add(image);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
@@ -1723,7 +1718,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		isPrintTrims: true,
 		blendMode: blendMode,
 	    fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
-		metadata: {sourceData: item, level2Type: item.level2Type},
+		metadata: {sourceData: item},
+		object: image,
 	  })
 	  children.push(layer);
 	};
@@ -1808,7 +1804,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		},
 		isPrintTrims: true,
       });
-      this.canvas.add(rect);
+    //   this.canvas.add(rect);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
@@ -1820,6 +1816,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		blendMode: blendMode,
 	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
 		metadata: {sourceData: item},
+		object: rect,
 	  })
 	  children.push(layer);
 	};
@@ -1836,6 +1833,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	//   children.push(layer);
 	// }
 	if(children.length === 0) return;
+	// 印花元素排序
+	children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
+	children.forEach(layer => {
+		this.canvas.add(layer.object);
+	});
 	const groupRect = new fabric.Rect({});
 	await this.setObjecCliptInfo(groupRect);
 	// 插入组图层