diff --git a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js index cf5c8f89..ca77a529 100644 --- a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js @@ -42,13 +42,24 @@ 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; 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 +74,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 +95,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 +122,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 +138,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 +154,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 +233,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 +248,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 +272,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 +293,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(); // 取消当前活动对象 // 重新排序 diff --git a/src/component/Canvas/CanvasEditor/commands/TextCommands.js b/src/component/Canvas/CanvasEditor/commands/TextCommands.js index 24c47c62..4b02f510 100644 --- a/src/component/Canvas/CanvasEditor/commands/TextCommands.js +++ b/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) {