2026-03-04 15:06:22 +08:00
|
|
|
import { TOOLS } from "./ToolManager"
|
2026-02-26 11:45:32 +08:00
|
|
|
export class EventManager {
|
|
|
|
|
stateManager: any
|
|
|
|
|
vueFlow: any
|
|
|
|
|
zoom: any
|
|
|
|
|
constructor(options) {
|
|
|
|
|
this.stateManager = options.stateManager;
|
|
|
|
|
this.vueFlow = options.vueFlow
|
|
|
|
|
this.zoom = this.stateManager.zoom
|
2026-03-05 14:25:08 +08:00
|
|
|
this.registerEvents()
|
2026-02-26 11:45:32 +08:00
|
|
|
}
|
2026-03-04 15:06:22 +08:00
|
|
|
/** 处理视口变化 */
|
2026-02-26 11:45:32 +08:00
|
|
|
handleViewportChange(e: any) {
|
|
|
|
|
const { zoom } = e
|
|
|
|
|
this.zoom.value = zoom
|
|
|
|
|
}
|
2026-03-04 15:06:22 +08:00
|
|
|
/** 处理节点拖动停止 */
|
2026-02-26 11:45:32 +08:00
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
2026-03-04 15:06:22 +08:00
|
|
|
/** 处理点击 */
|
|
|
|
|
handleClick(event: any) {
|
2026-03-05 13:46:10 +08:00
|
|
|
this.stateManager.setActiveNodeID("")
|
2026-03-04 15:06:22 +08:00
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-03-05 14:25:08 +08:00
|
|
|
|
|
|
|
|
/** 处理复制 */
|
|
|
|
|
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))
|
|
|
|
|
}
|
2026-02-26 11:45:32 +08:00
|
|
|
}
|