画布问题id丢失、撤回...

src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js

@@ -42,13 +42,25 @@ export class FillGroupLayerBackgroundCommand extends Command {
     this.firstObj = null; // 用于存储组图层的原始对象
   }
 
-  async execute() {
-    const layer = this.layer;
+  async execute(isUndo = false) {
+	const { layer, parent } = findLayerRecursively(
+      this.layers.value,
+      this.layerId
+    );
+    this.layer = layer;
+    this.parent = parent;
+	console.log("==========",layer);
     if (!layer) return false;
 
-    this.oldFill = layer.fill ?? null;
-    this.oldFillColor = layer.oldFillColor ?? null;
-
+	if(!isUndo){
+		this.oldFill = layer.fill ?? null;
+		this.oldFillColor = layer.fillColor ?? null;
+		if(this.oldFill){
+			// 移除旧的填充对象
+			removeCanvasObjectByObject(this.canvas, this.oldFill);
+		}
+	}
+	const fillColor = isUndo ? this.oldFillColor : this.fillColor;
     // 构建填充对象
     let clippingMaskFabricObject = null;
     if (layer.clippingMask) {
@@ -63,7 +75,7 @@ export class FillGroupLayerBackgroundCommand extends Command {
         height: clippingMaskFabricObject.height,
         left: clippingMaskFabricObject.left || 0,
         top: clippingMaskFabricObject.top || 0,
-        fill: this.fillColor,
+        fill: fillColor,
         layerId: this.layerId,
         id: this.oldFill?.id || generateId("fill-"),
         selectable: false,
@@ -84,7 +96,7 @@ export class FillGroupLayerBackgroundCommand extends Command {
           height: originalInfo.height,
           left: originalInfo.left + originalInfo.width / 2 || 0,
           top: originalInfo.top + originalInfo.height / 2 || 0,
-          fill: this.fillColor,
+          fill: fillColor,
           layerId: this.layerId,
           id: this.oldFill?.id || generateId("fill-"),
           selectable: false,
@@ -111,7 +123,7 @@ export class FillGroupLayerBackgroundCommand extends Command {
           height: clippingMaskFabricObject.height,
           left: clippingMaskFabricObject.left || 0,
           top: clippingMaskFabricObject.top || 0,
-          fill: this.fillColor,
+          fill: fillColor,
           layerId: this.layerId,
           id: this.oldFill?.id || generateId("fill-"),
           selectable: false,
@@ -127,7 +139,7 @@ export class FillGroupLayerBackgroundCommand extends Command {
           height: this.canvasManager?.canvasHeight?.value || this.canvas.height,
           left: this.canvas.width / 2 || 0,
           top: this.canvas.height / 2 || 0,
-          fill: this.fillColor,
+          fill: fillColor,
           layerId: this.layerId,
           id: this.oldFill?.id || generateId("fill-"),
           selectable: false,
@@ -143,8 +155,8 @@ export class FillGroupLayerBackgroundCommand extends Command {
       layer.fabricObjects = [
         this.newFill.toObject(["id", "layerId"]) || this.newFill,
       ];
-      layer.fill = null; // this.newFill.toObject(["id", "layerId"]);
-      layer.fillColor = this.fillColor;
+      layer.fill = this.newFill; // this.newFill.toObject(["id", "layerId"]);
+      layer.fillColor = fillColor;
       // 取消激活对象
 
       this.canvas.discardActiveObject(); // 取消当前活动对象
@@ -222,8 +234,8 @@ export class FillGroupLayerBackgroundCommand extends Command {
     // this.group?.addWithUpdate?.();
     // layer.fabricObjects = [this.group?.toObject?.(["id", "layerId"]) || this.group];
     // this.canvas.renderAll();
-    layer.fill = null; // this.newFill.toObject(["id", "layerId"]);
-    layer.fillColor = this.fillColor;
+    layer.fill = this.newFill; // this.newFill.toObject(["id", "layerId"]);
+    layer.fillColor = fillColor;
     // 取消激活对象
 
     this.canvas.discardActiveObject(); // 取消当前活动对象
@@ -237,14 +249,11 @@ export class FillGroupLayerBackgroundCommand extends Command {
     return true;
   }
   async undo() {
-    this.layer.fillColor = this.oldFillColor;
-    this.layer.fill = this.oldFill;
-
-    if (!this.originalInfo && this.firstObj) {
+    if (!this.originalInfo && this.layer.fill) {
       this.canvas.discardActiveObject();
-      this.canvas.remove(this.firstObj);
+      this.canvas.remove(this.layer.fill);
       this.canvas.renderAll();
-      this.canvasManager.thumbnailManager?.generateLayerThumbnail(
+      this.parent && this.canvasManager.thumbnailManager?.generateLayerThumbnail(
         this.parent.id
       );
       this.canvasManager.thumbnailManager?.generateLayerThumbnail(
@@ -264,7 +273,8 @@ export class FillGroupLayerBackgroundCommand extends Command {
       canvasObj?._objects?.length > 0
     ) {
       // 移除新添加的填充对象
-      if (canvasObj._objects?.[0] === this.newFill) {
+    //   if (canvasObj._objects?.[0] === this.newFill) {
+      if (/^fill-/.test(canvasObj._objects?.[0]?.id)) {
         canvasObj._objects.shift();
         canvasObj.addWithUpdate();
         canvasObj.setCoords();
@@ -284,6 +294,14 @@ export class FillGroupLayerBackgroundCommand extends Command {
       this.canvas.renderAll();
       this.group = null;
     }
+	if(this.oldFill){
+		this.layer.fill = this.oldFill;
+		this.layer.fillColor = this.oldFillColor;
+		return this.execute(true);
+	}else{
+		this.layer.fill = null;
+		this.layer.fillColor = null;
+	}
 
     this.canvas.discardActiveObject(); // 取消当前活动对象
     // 重新排序

src/component/Canvas/CanvasEditor/commands/LayerCommands.js

@@ -70,7 +70,7 @@ export class AddLayerCommand extends Command {
 
   undo() {
     // 从图层列表删除该图层
-    this.layers.value = this.beforeLayers;
+    this.layers.value = [...this.beforeLayers];
 
     // 恢复原活动图层
     this.activeLayerId.value = this.oldActiveLayerId;
@@ -563,6 +563,12 @@ export class RemoveLayerCommand extends Command {
         allObjects.push(object);
       }
     }
+	layer.fabricObjects?.forEach((fabric) => {
+      const { object } = findObjectById(this.canvas, fabric.id);
+      if (object && !allObjects.includes(object)) {
+        allObjects.push(object);
+      }
+	});
 
     // 递归收集子图层的对象
     if (layer.children && Array.isArray(layer.children)) {
@@ -609,7 +615,7 @@ export class RemoveLayerCommand extends Command {
     //   this.canvas.renderAll();
     // }
     await this.layerManager?.updateLayersObjectsInteractivity?.();
-    // this.canvas.renderAll();
+    this.canvas.renderAll();
 
     console.log(
       `✅ 已移除图层: ${this.removedLayer.name} (ID: ${this.layerId})，包含 ${this.originalObjects.length} 个对象`
@@ -2013,7 +2019,7 @@ export class LayerObjectsToGroupCommand extends Command {
       console.error("图层或Canvas未初始化");
       return null;
     }
-
+	this.activeLayer = this.layerManager.getActiveLayer();
     // 查找图层中是否已有组对象
     const existingGroup = this._findExistingGroup();
     this.existingGroupId = existingGroup?.id || null;
@@ -2067,10 +2073,10 @@ export class LayerObjectsToGroupCommand extends Command {
         }
 
         // 更新交互性
-        this.layerManager?.updateLayersObjectsInteractivity?.(false);
-
-        // 更新缩略图
-        this._updateThumbnail();
+        this.layerManager?.updateLayersObjectsInteractivity?.(false).then(()=>{
+          // 更新缩略图
+          this._updateThumbnail();
+		});
       });
 
       // 标记为非首次执行
@@ -2220,7 +2226,7 @@ export class LayerObjectsToGroupCommand extends Command {
 
   async undo() {
     if (!this.activeLayer || !this.canvas || !this.groupObjectId) return;
-
+	this.activeLayer = this.layerManager.getActiveLayer();
     try {
       await optimizeCanvasRendering(this.canvas, async () => {
         if (this.wasGroupCreated) {
@@ -2338,7 +2344,7 @@ export class LayerObjectsToGroupCommand extends Command {
 
           // 将对象添加回画布
           this.canvas.add(obj);
-          restoredObjects.push(obj);
+          restoredObjects.push(obj.toObject("id", "layerId", "layerName"));
 
           console.log(
             `✅ 恢复原始对象 ${obj.id || obj.type} 到位置 (${position.left}, ${
@@ -2537,9 +2543,9 @@ export class LayerObjectsToGroupCommand extends Command {
    * @private
    */
   _updateThumbnail() {
-    // this.canvas?.thumbnailManager?.generateLayerThumbnail?.(
-    //   this.activeLayer.id
-    // );
+    this.canvas?.thumbnailManager?.generateLayerThumbnail?.(
+      this.activeLayer.id
+    );
   }
 
   getInfo() {

src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js

@@ -343,7 +343,7 @@ export class RasterizeLayerCommand extends Command {
       visible: this.layer.visible,
       locked: this.layer.locked,
       opacity: this.layer.opacity,
-      fabricObjects: [rasterizedImage],
+      fabricObjects: [],
     });
 
     // 更新图像对象的图层关联
@@ -353,7 +353,7 @@ export class RasterizeLayerCommand extends Command {
       layerId: this.rasterizedLayerId,
       layerName: this.rasterizedLayer.name,
     });
-
+	this.rasterizedLayer.fabricObjects = [rasterizedImage.toObject(["id", "layerId", "layerName"])]
     // 在适当位置添加新的组合图层
     this._replaceLayerInStructure();
 

src/component/Canvas/CanvasEditor/commands/TextCommands.js

@@ -1,4 +1,4 @@
-import { generateId, optimizeCanvasRendering } from "../utils/helper";
+import { generateId, optimizeCanvasRendering, getLayerObjectsZIndex } from "../utils/helper";
 import { createLayer, LayerType, OperationType } from "../utils/layerHelper";
 import { Command } from "./Command";
 import i18n from "@/lang/index.ts";
@@ -536,6 +536,12 @@ export class CreateTextCommand extends Command {
       if (this.textObject && this.canvas) {
         this.canvas.remove(this.textObject);
       }
+	  const layerObjects = getLayerObjectsZIndex(this.canvas, this.layerId);
+	  layerObjects.forEach((obj) => {
+        if (obj.id === this.textObject?.id) {
+          this.canvas.remove(obj.object);
+        }
+      });
 
       // 智能移除创建的图层
       if (this.layerId && this.layerManager) {