53 lines
1.0 KiB
TypeScript
53 lines
1.0 KiB
TypeScript
|
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 || "")
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|