diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index 71f948d0..f7c7b9f6 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -336,7 +336,7 @@ export class LayerManager { const layerMap = {}; layers.forEach((layer) => { layerMap[layer.id] = layer; - layers?.children?.forEach((childLayer) => { + layer?.children?.forEach((childLayer) => { layerMap[childLayer.id] = childLayer; }); }); @@ -359,7 +359,7 @@ export class LayerManager { await this._setObjectInteractivity(obj, layer, editorMode); // 设置子图层对象的交互性 - layer?.childLayer?.forEach(async (childLayer) => { + layer?.children?.forEach(async (childLayer) => { const childObj = this.canvas .getObjects() .find((o) => o.layerId === childLayer.id); diff --git a/src/component/Canvas/CanvasEditor/managers/ToolManager.js b/src/component/Canvas/CanvasEditor/managers/ToolManager.js index 7f630b24..116a0d83 100644 --- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js @@ -10,6 +10,7 @@ import { InitLiquifyToolCommand } from "../commands/LiquifyCommands"; import { RasterizeLayerCommand } from "../commands/RasterizeLayerCommand"; import { message, Modal } from "ant-design-vue"; import { h } from "vue"; +import { findObjectById } from "../utils/helper"; /** * 工具管理器 @@ -258,7 +259,10 @@ export class ToolManager { const shiftKey = event.shiftKey; // 当处于输入状态时不触发快捷键 - if (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") { + if ( + event.target.tagName === "INPUT" || + event.target.tagName === "TEXTAREA" + ) { return; } @@ -283,7 +287,10 @@ export class ToolManager { } // 在红绿图模式下检查工具可用性 - if (this.isRedGreenMode && !this.isToolAvailableInRedGreenMode(toolId)) { + if ( + this.isRedGreenMode && + !this.isToolAvailableInRedGreenMode(toolId) + ) { continue; } @@ -558,7 +565,9 @@ export class ToolManager { // 通知选区管理器切换到矩形套索工具 if (this.canvasManager && this.canvasManager.selectionManager) { - this.canvasManager.selectionManager.setCurrentTool(OperationType.LASSO_RECTANGLE); + this.canvasManager.selectionManager.setCurrentTool( + OperationType.LASSO_RECTANGLE + ); } } @@ -573,7 +582,9 @@ export class ToolManager { // 通知选区管理器切换到椭圆套索工具 if (this.canvasManager && this.canvasManager.selectionManager) { - this.canvasManager.selectionManager.setCurrentTool(OperationType.LASSO_ELLIPSE); + this.canvasManager.selectionManager.setCurrentTool( + OperationType.LASSO_ELLIPSE + ); } } @@ -588,7 +599,9 @@ export class ToolManager { // 通知选区管理器切换到椭圆套索工具 if (this.canvasManager && this.canvasManager.selectionManager) { - this.canvasManager.selectionManager.setCurrentTool(OperationType.AREA_CUSTOM); + this.canvasManager.selectionManager.setCurrentTool( + OperationType.AREA_CUSTOM + ); } } @@ -606,7 +619,9 @@ export class ToolManager { console.log("矩形选区工具已激活"); if (this.canvasManager && this.canvasManager.selectionManager) { - this.canvasManager.selectionManager.setCurrentTool(OperationType.AREA_RECTANGLE); + this.canvasManager.selectionManager.setCurrentTool( + OperationType.AREA_RECTANGLE + ); } } @@ -662,9 +677,18 @@ export class ToolManager { // 设置目标对象 if (layer) { if (layer.isBackground || layer.type === "background") { - panelDetail.targetObject = layer.fabricObject; - } else if (layer.fabricObjects && layer.fabricObjects.length > 0) { - panelDetail.targetObject = layer.fabricObjects[0]; + panelDetail.targetObject = findObjectById( + this.canvas, + layer.fabricObject?.id + )?.object; + } else if ( + layer.fabricObjects && + layer.fabricObjects.length > 0 + ) { + panelDetail.targetObject = findObjectById( + this.canvas, + layer.fabricObjects?.[0]?.id + )?.object; } // 准备液化环境,获取原始图像数据 @@ -889,7 +913,9 @@ export class ToolManager { }); // 准备液化操作,获取原始图像数据 - const prepareResult = await liquifyManager.prepareForLiquify(targetObject); + const prepareResult = await liquifyManager.prepareForLiquify( + targetObject + ); // 创建和初始化命令 const initCommand = new InitLiquifyToolCommand({ @@ -1091,7 +1117,9 @@ export class ToolManager { const target = e.target; if ( target && - (target.type === "text" || target.type === "i-text" || target.type === "textbox") + (target.type === "text" || + target.type === "i-text" || + target.type === "textbox") ) { // 获取对应的图层 const layer = this.layerManager.getLayerById(target.layerId); @@ -1359,7 +1387,11 @@ export class ToolManager { } // 从画布笔刷获取 - if (this.canvas && this.canvas.freeDrawingBrush && this.canvas.freeDrawingBrush.width) { + if ( + this.canvas && + this.canvas.freeDrawingBrush && + this.canvas.freeDrawingBrush.width + ) { return this.canvas.freeDrawingBrush.width; } @@ -1384,7 +1416,11 @@ export class ToolManager { } // 从画布笔刷获取 - if (this.canvas && this.canvas.freeDrawingBrush && this.canvas.freeDrawingBrush.color) { + if ( + this.canvas && + this.canvas.freeDrawingBrush && + this.canvas.freeDrawingBrush.color + ) { return this.canvas.freeDrawingBrush.color; }