import { TOOLS } from "./ToolManager" export class EventManager { stateManager: any vueFlow: any zoom: any constructor(options) { this.stateManager = options.stateManager; this.vueFlow = options.vueFlow this.zoom = this.stateManager.zoom this.registerEvents() } /** 处理视口变化 */ handleViewportChange(e: any) { const { zoom } = e this.zoom.value = zoom } /** 处理节点拖动停止 */ handleNodeDragStop(e: any) { const { node } = e const { id, position } = node this.stateManager.nodes.value.forEach((item) => { if (item.id === id) { item.position.x = position.x item.position.y = position.y } }) } /** 处理点击 */ handleClick(event: any) { this.stateManager.setActiveNodeID("") const tool = this.stateManager.tool.value if (tool === TOOLS.TEXT) { const { x, y, zoom } = this.vueFlow.value.viewport const position = { x: (event.offsetX - x) / zoom, y: (event.offsetY - y) / zoom } this.stateManager.nodeManager.createTextNode({ position }) this.stateManager.toolManager.setTool(TOOLS.SELECT) } } /** 处理复制 */ handleCopy(event: any, activeNodeID: string) { event.preventDefault() if (!activeNodeID) return console.warn('没有选中节点') this.stateManager.nodeManager.copyNodeById(activeNodeID) } /** 处理删除 */ handleDelete(event: any, activeNodeID: string) { event.preventDefault() if (!activeNodeID) return console.warn('没有选中节点') this.stateManager.nodeManager.deleteNode(activeNodeID) } /** 处理键盘事件 */ handleKeyDown(event: any) { const activeNodeID = this.stateManager.activeNodeID.value; // const shiftKey const ctrl = event.ctrlKey ? 'ctrl-' : ""; const shift = event.shiftKey ? 'shift-' : ""; const key = event.key; const reg = new RegExp(`^${ctrl}${shift}${key}$`, 'i') const list = [ { key: "ctrl-c", handler: () => this.handleCopy(event, activeNodeID) }, { key: "delete", handler: () => this.handleDelete(event, activeNodeID) }, { key: "ctrl-z", handler: () => this.stateManager.undoState() }, { key: "ctrl-shift-z", handler: () => this.stateManager.redoState() }, ] list.forEach((v: any) => { if (reg.test(v.key)) v.handler(event) }) } /** 注册事件 */ registerEvents() { // document.addEventListener('copy', this.handleCopy.bind(this)) document.addEventListener('keydown', this.handleKeyDown.bind(this)) } /** 删除事件 */ removeEvents() { // document.removeEventListener('copy', this.handleCopy.bind(this)) document.removeEventListener('keydown', this.handleKeyDown.bind(this)) } }