70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
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() {
|
|
}
|
|
}
|