深度画布

src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts

@@ -1,5 +1,5 @@
 import { fabric } from 'fabric-with-all'
-import { OperationType } from '../tools/layerHelper'
+import { OperationType, AI_SELECTBOX_TYPE } from '../tools/layerHelper'
 import { getObjectAlphaToCanvas, traceImageContour } from '../tools/canvasMethod'
 
 /** 智能框选工具管理器 */
@@ -20,6 +20,15 @@ export class AISelectboxToolManager {
 		this.layerManager = options.layerManager
 		this.toolManager = options.toolManager
 	}
+	/** 处理切换工具 */
+	handleToolChange(oldTool: string, newTool: string) {
+		if (newTool === OperationType.SELECTBOX) {
+			// 切换到智能框选工具
+		} else {
+			// 切换到普通框选工具
+
+		}
+	}
 	mouseDownEvent(e) {
 		this.isDragging = true
 		this.startX = e.absolutePointer.x
@@ -65,7 +74,7 @@ export class AISelectboxToolManager {
 		this.canvasManager.canvas.remove(this.demoObject)
 		this.canvasManager.canvas.renderAll()
 
-		this.createSelectbox()
+		// this.createSelectbox()
 	}
 
 

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -142,9 +142,9 @@ export class CanvasManager {
 
 		this.resetZoom(false, true)// 画布居中
 
+		this.stateManager.toolManager.setTool(OperationType.SELECT)
 		this.layerManager.updateLayers()
 		this.stateManager.recordState()
-		// this.stateManager.toolManager.setTool(OperationType.RECTANGLE)
 	}
 	/** 画布添加对象 */
 	async add(obj: any, isRecord = true) {
@@ -293,7 +293,7 @@ export class CanvasManager {
 	async handleDrawImage(fabricImage: fabric.Object) {
 		const activeID = this.stateManager.layerManager.activeID.value
 		const activeLayer = this.getObjectById(activeID)
-		if (activeLayer) {
+		if (activeLayer && activeLayer.fill?.repeat !== "repeat") {
 			this.layerManager.imageMergeToLayer(activeLayer, fabricImage)
 		} else {
 			const emptyLayer = await this.layerManager.createEmptyLayer(false);

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { fabric } from 'fabric-with-all'
 import { createId } from '../../tools/tools'
 import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
-import { OperationType } from '../tools/layerHelper'
+import { OperationType, BlendMode } from '../tools/layerHelper'
 import { getArrowPath, cloneObjects, getStarArr } from '../tools/canvasMethod'
 
 export class LayerManager {
@@ -18,7 +18,12 @@ export class LayerManager {
 	}
 	onMounted() { }
 	setActiveID(id: string, isActive = true) {
-		this.activeID.value = id
+		const layer = this.getLayerById(id)
+		if (layer?.type === "group") {
+			this.activeID.value = ""
+		} else {
+			this.activeID.value = id
+		}
 		if (isActive) {
 			this.canvasManager.setActiveObjectById(id)
 			this.stateManager.toolManager.setTool(OperationType.SELECT)
@@ -399,9 +404,15 @@ export class LayerManager {
 		})
 		const index = this.canvasManager.getObjects().indexOf(targetLayer);
 		this.deleteLayerById(targetLayer.info.id, false)
-		this.setActiveID(mergedImage.info.id, false)
+
+		const nid = mergedImage.info.id
 		await this.canvasManager.add(mergedImage, false);
+		this.setActiveID(nid, false)
 		this.canvasManager.canvas.moveTo(mergedImage, index);
+
+		// this.stateManager.objectManager.setBlendMode(nid, BlendMode.MULTIPLY)
+		// this.stateManager.objectManager.setFillRepeat(nid, false)
+
 		this.canvasManager.renderAll()
 		this.updateLayers()
 		this.stateManager.recordState()

src/components/Canvas/DepthCanvas/manager/ObjectManager.ts

@@ -87,7 +87,7 @@ export class ObjectManager {
 	}
 
 	/** 设置平铺状态 */
-	setFillRepeat(id: string) {
+	setFillRepeat(id: string, isRecord = true) {
 		const object = this.canvasManager.getObjectById(id)
 		if (!object) return console.warn('设置平铺状态失败，对象不存在ID:', id)
 		if (object.type !== 'image') return console.warn('设置平铺状态失败，对象不是图片类型:', id)
@@ -133,7 +133,7 @@ export class ObjectManager {
 		});
 		rect.set("fill", pattern)
 		this.canvasManager.canvas.remove(object)
-		this.canvasManager.add(rect)
+		this.canvasManager.add(rect, isRecord)
 	}
 	/** 获取填充对象 */
 	getFillRepeatObject(id: string) {

src/components/Canvas/DepthCanvas/manager/StateManager.ts

@@ -38,6 +38,7 @@ export class StateManager {
 	brushManager: any
 	keyEventManager: any
 	objectManager: any
+	aiSelectboxToolManager: any
 	// 设置管理器
 	setManager(options) {
 		options.eventManager && (this.eventManager = options.eventManager)
@@ -47,6 +48,7 @@ export class StateManager {
 		options.brushManager && (this.brushManager = options.brushManager)
 		options.keyEventManager && (this.keyEventManager = options.keyEventManager)
 		options.objectManager && (this.objectManager = options.objectManager)
+		options.aiSelectboxToolManager && (this.aiSelectboxToolManager = options.aiSelectboxToolManager)
 	}
 	constructor(options) {
 		this.mxHistory = ref(50)

src/components/Canvas/DepthCanvas/manager/ToolManager.ts

@@ -101,6 +101,7 @@ export class ToolManager {
 	setTool(value: string) {
 		const tool = this.tools.find((t) => t.name === value)
 		if (!tool) return console.warn(`工具${tool}不存在`)
+		const oldTool = this.currentTool.value
 		this.currentTool.value = tool.name
 		this.canvasManager.canvas.defaultCursor = tool.cursor
 		this.setCanvasEvented(!!tool.selection)
@@ -110,6 +111,7 @@ export class ToolManager {
 
 		if (tool.setup) tool.setup()
 
+		this.stateManager?.aiSelectboxToolManager?.handleToolChange?.(oldTool, tool.name)
 		setTimeout(() => {
 			this.canvasManager.renderAll()
 		});
@@ -142,13 +144,16 @@ export class ToolManager {
 			const brushStore = this.brushManager?.brushStore
 			if (brushStore) {
 				// 同步基本属性
-				this.brushManager.setBrushSize(brushStore.state.size);
-				this.brushManager.setBrushColor(brushStore.state.color);
-				this.brushManager.setBrushOpacity(brushStore.state.opacity);
+				// this.brushManager.setBrushSize(brushStore.state.size);
+				// this.brushManager.setBrushColor(brushStore.state.color);
+				// this.brushManager.setBrushOpacity(brushStore.state.opacity);
 
 				// 同步笔刷类型 - 修复方法名，使用正确的setBrushType方法
 				this.brushManager.setBrushType("pencil");
 			}
+			this.brushManager.setBrushSize(5);
+			this.brushManager.setBrushColor("#000");
+			this.brushManager.setBrushOpacity(1);
 
 			// 更新应用到画布
 			this.brushManager.updateBrush();
@@ -168,6 +173,7 @@ export class ToolManager {
 			this.brushManager.createEraser();
 		}
 
+		this.brushManager.setBrushSize(5);
 		this.stateManager.layerManager.setActiveObjectErasable()
 		// 启用笔刷指示器
 		this._enableBrushIndicator();

src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js

@@ -34,6 +34,7 @@ export class CanvasEventManager {
 		}
 		this.shapeToolManager = new ShapeToolManager(managers)
 		this.aiSelectboxToolManager = new AISelectboxToolManager(managers)
+		this.stateManager.setManager({ aiSelectboxToolManager: this.aiSelectboxToolManager })
 
 		// 初始化所有事件
 		this.initEvents();