深度画布框架

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

@@ -0,0 +1,52 @@
+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,
+	},
+
+]
+export class ToolManager {
+	stateManager: any
+	vueFlow: any
+	constructor(options) {
+		this.stateManager = options.stateManager;
+		this.vueFlow = options.vueFlow
+		this.setTool(TOOLS.SELECT)
+	}
+	setTool(value: string) {
+		const tool = 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 || "")
+	}
+
+}