事件系统大全（RGListeners）
relation-graph 通过 RGListeners 提供完整事件系统，用于监听图谱生命周期、节点/连线交互、画布行为和编辑流程。
1. 事件如何注册
A. 在组件上直接绑定事件
<template>
<RelationGraph
:options="graphOptions"
@onReady="onReady"
@onNodeClick="onNodeClick"
@onLineClick="onLineClick"
@onContextmenu="onContextmenu"
/>
</template>
B. HTML 配置行为事件
const graph = await createRelationGraph('#my-graph', {
data,
events: {
onNodeClick(node, userEvent) {
console.log(node, userEvent);
}
}
});
document.querySelector('#my-graph').addEventListener('rg:node-click', event => {
console.log(event.detail.node);
});
需要用返回值影响核心行为时必须使用 config.events；rg:* DOM 事件只是只读镜像。
2. 事件分类速查
- 生命周期：
onReady、onViewResize、onForceLayoutFinish - 节点/连线点击与展开：
onNodeClick、onLineClick、onNodeExpand、onNodeCollapse - 拖拽行为：
onNodeDragStart、onNodeDragging、onNodeDragEnd、onCanvasDragStart、onCanvasDragging、onCanvasDragEnd - 画布行为：
onCanvasClick、onCanvasSelectionEnd、onContextmenu、onFullscreen - 缩放与滚动：
beforeZoomStart、onZoomEnd、beforeScrollStart - 编辑流程：
onResizeStart、beforeNodeResize、onResizeEnd、onLineVertexDropped、beforeCreateLine、onLineBeCreated - 数据进入图谱：
beforeAddNodes、beforeAddLines - 键盘：
onKeyboardDown、onKeyboardUp
3. 关键事件与回调签名
onReady
(graphInstance: RelationGraphInstance) => void
用于拿到图实例，后续可调用 setJsonData、addNodes、zoomToFit 等 API。
onNodeClick / onLineClick
(node: RGNode, e: RGUserEvent) => boolean | void | Promise<boolean | void>
(line: RGLine, link: RGLink, e: RGUserEvent) => boolean | void | Promise<boolean | void>
用于节点/连线点击交互。可返回 boolean 或 Promise<boolean> 影响默认后续逻辑。
onContextmenu
(e: RGUserEvent, objectType: 'canvas' | 'node' | 'line', object, eventPositionOnCanvas, eventPositionOnView) => void
用于统一右键菜单入口，可根据 objectType 分支处理画布、节点、连线菜单。
beforeZoomStart / beforeScrollStart
beforeZoomStart: () => void | false
beforeScrollStart: (buffX: number, buffY: number, e: Event) => true | undefined | void
beforeZoomStart返回false可阻止缩放。beforeScrollStart返回true可阻止滚动。
beforeCreateLine / onLineBeCreated
beforeCreateLine: (lineInfo) => void | false
onLineBeCreated: (lineInfo) => void
线条创建和改端点时，常用这两个事件做校验与落库。
onLineBeCreated 中如果是“拖拽改线端点”场景，需要通过 graphInstance.addLines(...) 把新线真正加回图中。
4. 常见事件组合示例
let graphInstance: RelationGraphInstance | undefined;
const onReady = (instance: RelationGraphInstance) => {
graphInstance = instance;
};
const beforeCreateLine = ({ fromNode, toNode }) => {
if (fromNode.id === toNode.id) return false; // 禁止自环
};
const onLineBeCreated = ({ lineJson }) => {
if (!graphInstance) return;
graphInstance.addLines([lineJson]); // 让新线生效
};
5. 与 RGOptions 的关系
部分交互配置会直接影响事件触发体验：
wheelEventAction: 鼠标滚轮是缩放、滚动还是禁用dragEventAction: 拖拽是移动画布、框选还是禁用disableNodePointEvent: 是否禁用节点交互事件disableLinePointEvent: 是否禁用连线交互事件
6. 实践建议
- 先用
onReady保存实例，再写复杂事件逻辑。 - 将“可阻止型事件”作为业务规则入口，例如权限校验、连线合法性校验。
- 大量事件回调中避免重计算，必要时做节流或异步分发。
- 统一通过
objectType和事件参数建模菜单行为，避免在多个事件里重复分支。