画布添加印花等图层时候先删除旧的数据

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

@@ -44,7 +44,7 @@ import {
 } from "../utils/layerUtils";
 import { imageModeHandler } from "../utils/imageHelper";
 import { getObjectAlphaToCanvas } from "../utils/objectHelper";
-import { AddLayerCommand } from "../commands/LayerCommands";
+import { AddLayerCommand, RemoveLayerCommand } from "../commands/LayerCommands";
 import { fa, id } from "element-plus/es/locales.mjs";
 import i18n from "@/lang/index.ts";
 const {t} = i18n.global;
@@ -1344,7 +1344,7 @@ export class CanvasManager {
               // console.log("图层关联验证结果:", isValidate);
               // 排序
               // 使用LayerSort工具重新排列画布对象（如果可用）
-            //   await this?.layerManager?.layerSort?.rearrangeObjects();
+              await this?.layerManager?.layerSort?.rearrangeObjects();
 
               this.layerManager.activeLayerId.value = this.layers.value[0]
                 .children?.length
@@ -1393,28 +1393,37 @@ export class CanvasManager {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
 	console.log("==========创建其他图层", otherData_);
+	
+	// 删除颜色图层和特殊组图层
+	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));
+		return false;
+	  }
+	  return true;
+	})
+	this.canvas.getObjects().forEach((v) => ids.includes(v.id) && this.canvas.remove(v))
+
+
 	// 创建颜色图层
 	await this.createColorLayer(otherData_.color);
 
-	if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)){
-		console.warn("画布中已存在印花和元素组图层");
-	}else{
-		const printTrimsLayers = [];// 印花和元素图层
-		const singleLayers = [];// 平铺图层
-		otherData_?.printObject?.prints?.forEach((print, index) => {
-			print.name = t("Canvas.Print") + (index + 1);
-			if(print.ifSingle){
-				printTrimsLayers.unshift({...print});
-			}else{
-				singleLayers.unshift({...print});
-			}
-		})
-		otherData_?.trims?.prints?.forEach((trims, index) => {
-			trims.name = t("Canvas.Elements") + (index + 1);
-			printTrimsLayers.unshift({...trims});
-		})
-		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
-	}
+	const printTrimsLayers = [];// 印花和元素图层
+	const singleLayers = [];// 平铺图层
+	otherData_?.printObject?.prints?.forEach((print, index) => {
+		print.name = t("Canvas.Print") + (index + 1);
+		if(print.ifSingle){
+			printTrimsLayers.unshift({...print});
+		}else{
+			singleLayers.unshift({...print});
+		}
+	})
+	otherData_?.trims?.prints?.forEach((trims, index) => {
+		trims.name = t("Canvas.Elements") + (index + 1);
+		printTrimsLayers.unshift({...trims});
+	})
+	await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
 
 	await this.changeCanvas();
   }
@@ -1457,7 +1466,9 @@ export class CanvasManager {
   }
   async createColorLayer(color){
 	if(!color) return console.warn("颜色为空不需要添加");
-	if(findLayer(this.layers.value, SpecialLayerId.COLOR)) return console.warn("画布中已存在颜色图层");
+	// if(findLayer(this.layers.value, SpecialLayerId.COLOR)) {
+	// 	return console.warn("画布中已存在颜色图层");
+	// }
 	console.log("==========添加颜色图层", color, this.layers.value.length)
 	// 创建颜色图层对象
 	const colorRect = new fabric.Rect({
@@ -1466,6 +1477,9 @@ export class CanvasManager {
       layerName: t("Canvas.color"),
       isVisible: true,
 	  isLocked: true,
+	  selectable: false,
+      hasControls: false,
+      hasBorders: false,
 	  globalCompositeOperation: BlendMode.MULTIPLY,
 	  originColor: color,
 	});
@@ -1496,6 +1510,9 @@ export class CanvasManager {
 
   // 创建印花和元素图层
   async createPrintTrimsLayers(printTrimsLayers, singleLayers){
+	// if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)) {
+	// 	return console.warn("画布中已存在印花和元素组图层");
+	// }
 	console.log("==========添加印花和元素图层组", printTrimsLayers, singleLayers)
 	const fixedLayerObj = this.getFixedLayerObject();
 	const flWidth = fixedLayerObj.width