深度画布

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

@@ -1,52 +1,69 @@
-export const TOOLS = {
-	SELECT: "SELECT",
-	MOVE: "MOVE",
-	BRUSH: "BRUSH",
-	ERASER: "ERASER",
-	IMAGE: "IMAGE",
-	SELECTBOX: "SELECTBOX",
-	RECTANGLE: "RECTANGLE",
-	TEXT: "TEXT",
-	UNDO: "UNDO",
-	REDO: "REDO",
-}
-export const tools = [
-	/** 选择工具 */
-	{
-		name: TOOLS.SELECT,
-		nodesDraggable: true,
-		panOnDrag: false,
-	},
-	/** 移动工具 */
-	{
-		name: TOOLS.MOVE,
-		nodesDraggable: false,
-		panOnDrag: true,
-	},
-	/** 文本工具 */
-	{
-		name: TOOLS.TEXT,
-		cursor: "text",
-		nodesDraggable: false,
-		panOnDrag: false,
-	},
-
-]
+import { ref } from 'vue'
+import { OperationType } from '../tools/layerHelper'
 export class ToolManager {
 	stateManager: any
-	vueFlow: any
+	canvasManager: any
+	currentTool: any
+	tools: any[]
 	constructor(options) {
 		this.stateManager = options.stateManager;
-		this.vueFlow = options.vueFlow
-		this.setTool(TOOLS.SELECT)
+		this.canvasManager = options.canvasManager;
+		this.currentTool = ref(null)
+		this.tools = [
+			/** 选择工具 */
+			{
+				name: OperationType.SELECT,
+				cursor: "default",
+				setup: this.setupSelectTool.bind(this),
+				selection: true,
+			},
+			/** 移动工具 */
+			{
+				name: OperationType.PAN,
+				cursor: "grab",
+				setup: this.setupMoveTool.bind(this),
+			},
+			/** 画笔工具 */
+			{
+				name: OperationType.DRAW,
+				cursor: "crosshair",
+			},
+			/** 橡皮擦工具 */
+			{
+				name: OperationType.ERASER,
+				cursor: "crosshair",
+			},
+			/** 智能选框工具 */
+			{
+				name: OperationType.SELECTBOX,
+				cursor: "crosshair",
+			},
+			/** 矩形工具 */
+			{
+				name: OperationType.RECTANGLE,
+				cursor: "crosshair",
+			},
+		]
 	}
 	setTool(value: string) {
-		const tool = tools.find((t) => t.name === value)
+		const tool = this.tools.find((t) => t.name === value)
 		if (!tool) return console.warn(`工具${tool}不存在`)
-		this.stateManager.tool.value = tool.name
-		this.stateManager.setNodesDraggable(!!tool.nodesDraggable)
-		this.stateManager.setPanOnDrag(!!tool.panOnDrag)
-		this.stateManager.setCursor(tool.cursor || "")
-	}
+		this.currentTool.value = tool.name
+		this.canvasManager.canvas.defaultCursor = tool.cursor
+		this.setCanvasEvented(!!tool.selection)
+		this.canvasManager.canvas.isDragging = !!tool.isDragging
 
+		if (tool.setup) tool.setup()
+	}
+	// 切换工具时，设置画布事件
+	setCanvasEvented(value: boolean) {
+		this.canvasManager.canvas.selection = value
+		this.canvasManager.canvas.getObjects().forEach((v) => v.evented = value)
+	}
+	/** 选择工具 */
+	setupSelectTool() {
+	}
+	/** 移动工具 */
+	setupMoveTool() {
+	}
 }