import { ref } from 'vue' import { OperationType } from '../tools/layerHelper' export class ToolManager { stateManager: any canvasManager: any currentTool: any tools: any[] constructor(options) { this.stateManager = options.stateManager; 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 = this.tools.find((t) => t.name === value) if (!tool) return console.warn(`工具${tool}不存在`) 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() { } }