事件替换颜色等画布

src/component/Canvas/CanvasEditor/index.vue

@@ -977,6 +977,17 @@ defineExpose({
       ...opts,
     });
   },
+  updateOtherLayers: async (otherData) => {
+    await canvasManager?.createOtherLayers?.(otherData, true);
+	layerManager.activeLayerId.value = ""
+	layerManager?.sortLayers();
+	await layerManager?.updateLayersObjectsInteractivity?.(true);
+	canvasManager?.canvas?.renderAll();
+	setTimeout(() => {
+      canvasManager.updateAllThumbnails();
+    }, 500);
+	return true;
+  },
   //图片url或者base64
   addImageToLayer: async (
     url,

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

@@ -1325,12 +1325,12 @@ export class CanvasManager {
               // }
 
               // 重载代码后支持回调中操作一些内容
-              await calllBack?.();
 
               // 确保所有对象的交互性正确设置
               await this.layerManager?.updateLayersObjectsInteractivity?.();
               console.log(this.layerManager.layers.value);
 
+              await calllBack?.();
               // 更新所有缩略图
               setTimeout(() => {
                 this.updateAllThumbnails();
@@ -1357,13 +1357,22 @@ export class CanvasManager {
    * 创建其他图层：印花、颜色、元素...
    * @param {Object} otherData - 其他图层数据
   */
-  async createOtherLayers(otherData) {
+  async createOtherLayers(otherData, isUpdate = false) {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
 	console.log("==========创建其他图层", otherData_);
 	
+	const updateColor = !!otherData_.color;
+	const updateSpecialGroup = !!otherData_.printObject || !!otherData_.trims;
 	// 删除颜色图层和特殊组图层
-	const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
+	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)
+	}
 	this.layers.value = this.layers.value.filter((layer) => {
 	  if(ids.includes(layer.id)){
 	  	ids.push(...layer.children?.map((child) => child.id));
@@ -1375,11 +1384,11 @@ export class CanvasManager {
 
 
 	// 创建颜色图层
-	await this.createColorLayer(otherData_.color);
+	otherData_.color && await this.createColorLayer(otherData_.color);
 
 	const printTrimsLayers = [];// 印花和元素图层
 	const singleLayers = [];// 平铺图层
-	otherData_?.printObject?.prints?.forEach((print, index) => {
+	otherData_.printObject?.prints?.forEach((print, index) => {
 		print.name = t("Canvas.Print") + (index + 1);
 		if(print.ifSingle){
 			printTrimsLayers.unshift({...print});
@@ -1387,12 +1396,13 @@ export class CanvasManager {
 			singleLayers.unshift({...print});
 		}
 	})
-	otherData_?.trims?.prints?.forEach((trims, index) => {
+	otherData_.trims?.prints?.forEach((trims, index) => {
 		trims.name = t("Canvas.Elements") + (index + 1);
 		printTrimsLayers.unshift({...trims});
 	})
-	await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
-
+	if(isUpdate ? updateSpecialGroup : true){
+		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
+	}
 	await this.changeCanvas();
   }
 
@@ -1432,8 +1442,8 @@ export class CanvasManager {
     });
     tagObject.set('clipPath', transparentMask);
   }
-  async createColorLayer(color){
-	if(!color) return console.warn("颜色为空不需要添加");
+  async createColorLayer(color_){
+	const color = color_ || {r:0,g:0,b:0,a:0};
 	// if(findLayer(this.layers.value, SpecialLayerId.COLOR)) {
 	// 	return console.warn("画布中已存在颜色图层");
 	// }
@@ -1619,7 +1629,7 @@ export class CanvasManager {
 	//   })
 	//   children.push(layer);
 	// }
-	if(children.length === 0) return;
+	// if(children.length === 0) return;
 	const groupRect = new fabric.Rect({});
 	await this.setObjecCliptInfo(groupRect);
 	// 插入组图层
@@ -1638,6 +1648,8 @@ export class CanvasManager {
 		specialType: SpecialType.PRINT_TRIMS_G,
 	});
 	this.layers.value.splice(groupIndex, 0, groupLayer);
+	console.log("==========layers", [...this.layers.value]);
+
   }
 
   /**

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

@@ -199,9 +199,12 @@ export class LayerManager {
     if (!this.canvas) return;
     if (isUseOptimize) {
       // 优化渲染  -  统一批处理  支持异步回调
-      await optimizeCanvasRendering(this.canvas, async () => {
-        // 应用图层交互规则
-        await this._applyInteractionRules({ isMoveing });
+      await new Promise((resolve) => {
+        optimizeCanvasRendering(this.canvas, async () => {
+          // 应用图层交互规则
+          await this._applyInteractionRules({ isMoveing });
+          resolve();
+        });
       });
     } else {
       // 直接应用图层交互规则
@@ -333,7 +336,6 @@ export class LayerManager {
     const objects = this.canvas.getObjects();
     const editorMode = this.editorMode || CanvasConfig.defaultTool;
     const layers = this.layers?.value || [];
-
     // 创建缓存以避免重复查找
     const layerMap = {};
     layers.forEach((layer) => {