基础事件 Event

阅读时间约 19 分钟

本章介绍的事件可以通过 graph.ongraph.off 进行绑定/解绑监听函数。

通用事件、Node 事件、Edge 事件及 Canvas 事件回调的参数请参考 Behavior API

交互事件

使用如下形式进行交互事件的监听:

graph.on(eventName, evt => {
  // 一些操作
})

其中,事件对象 evt 的属性值有:

  • type: 事件类型
  • name: 事件名称
  • x: 画布上的 x 坐标
  • y: 画布上的 y 坐标
  • clientX: 浏览器窗口上的 x 坐标
  • clientY: 浏览器窗口上的 y 坐标
  • canvasX: 画布父容器视口上的 x 坐标
  • canvasY: 画布父容器视口上的 y 坐标

(x/y,clientX/clientY,canvasX/canvasY 三套坐标系详解见 G6 坐标系深度解析

  • item: 事件的触发元素(节点/边/ Combo)
  • target: 事件的触发图形 Shape 或画布对象
  • bubbles: 是否允许冒泡
  • defaultPrevented: 是否阻止了原生事件
  • originalEvent: 原始浏览器事件对象,其中的 button 可以用于区分 click 事件的左/中/右键
  • timeStamp: 触发事件的时间
  • propagationStopped: 是否阻止传播(向上冒泡)
  • propagationPath: 触发事件的路径

eventName 见下方内容。

通用交互事件

事件名称描述
click单击鼠标左键或者按下回车键时触发
dblclick双击鼠标左键时触发,同时会触发两次 click
mouseenter鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发
mousemove鼠标在元素内部移到时不断触发,不能通过键盘触发
mouseout鼠标移出目标元素后触发
mouseover鼠标移入目标元素上方,鼠标移到其后代元素上时会触发
mouseleave鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发
mousedown鼠标按钮被按下(左键或者右键)时触发,不能通过键盘触发
mouseup鼠标按钮被释放弹起时触发,不能通过键盘触发
contextmenu用户右击鼠标时触发并打开上下文菜单,见 Demo
dragstart当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
drag当拖拽元素在拖动过程中时触发的事件,此事件作用于被拖拽元素上
dragend当拖拽完成后触发的事件,此事件作用在被拖曳元素上
dragenter当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
dragleave当拖曳元素离开目标元素的时候触发的事件,此事件作用在目标元素上
drop被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
keydown按下键盘键触发该事件
keyup释放键盘键触发该事件
wheel鼠标滚轮滚动时触发该事件
touchstart当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
touchmove当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用 preventDefault() 事件可以阻止滚动。
touchend当手指从屏幕上离开的时候触发

Node 交互事件

事件名称描述
node:click鼠标左键单击节点时触发
node:dblclick鼠标双击左键节点时触发,同时会触发两次 node:click
node:mouseenter鼠标移入节点时触发
node:mousemove鼠标在节点内部移到时不断触发,不能通过键盘触发
node:mouseout鼠标移出节点后触发
node:mouseover鼠标移入节点上方时触发
node:mouseleave鼠标移出节点时触发
node:mousedown鼠标按钮在节点上按下(左键或者右键)时触发,不能通过键盘触发
node:mouseup节点上按下的鼠标按钮被释放弹起时触发,不能通过键盘触发
node:dragstart当节点开始被拖拽的时候触发的事件,此事件作用在被拖曳节点上
node:drag当节点在拖动过程中时触发的事件,此事件作用于被拖拽节点上
node:dragend当拖拽完成后触发的事件,此事件作用在被拖曳节点上
node:dragenter当拖曳节点进入目标元素的时候触发的事件,此事件作用在目标元素上
node:dragleave当拖曳节点离开目标元素的时候触发的事件,此事件作用在目标元素上
node:dragover当拖曳节点在另一目标元素上移动时触发此事件,此事件作用在目标元素上
node:drop被拖拽的节点在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
node:touchstart在触控屏上,当节点开始被触碰的时候触发的事件
node:touchmove在触控屏上,当节点开始被触碰过程中触发的事件
node:touchend在触控屏上,当节点开始被触碰结束的时候触发的事件
node:contextmenu用户在节点上右击鼠标时触发并打开右键菜单,见 Demo

Edge 交互事件

事件名称描述
edge:click鼠标左键单击边时触发
edge:dblclick鼠标双击左键边时触发,同时会触发两次 edge:click
edge:mouseenter鼠标移入边时触发
edge:mousemove鼠标在边上移到时不断触发,不能通过键盘触发
edge:mouseout鼠标移出边后触发
edge:mouseover鼠标移入边上方时触发
edge:mouseleave鼠标移出边时触发
edge:mousedown鼠标按钮在边上按下(左键或者右键)时触发,不能通过键盘触发
edge:mouseup边上按下的鼠标按钮被释放弹起时触发,不能通过键盘触发
edge:dragenter当拖曳元素进入目标边元素的时候触发的事件,此事件作用在目标边元素上
edge:dragleave当拖曳元素离开目标边元素的时候触发的事件,此事件作用在目标边元素上
edge:dragover当拖曳元素在另一目标边上移动时触发此事件,此事件作用在目标边元素上
edge:drop被拖拽的元素在目标边元素上同时鼠标放开触发的事件,此事件作用在目标边元素上
edge:contextmenu用户在边上右击鼠标时触发并打开右键菜单,见 Demo

Combo 交互事件

Combo 继承所有 Node 事件。

Canvas 交互事件

事件名称描述
canvas:click鼠标左键单击画布时触发
canvas:dblclick鼠标双击左键画布时触发
canvas:mouseenter鼠标移入画布时触发
canvas:mousemove鼠标在画布内部移到时不断触发,不能通过键盘触发
canvas:mouseout鼠标移出画布后触发
canvas:mouseover鼠标移入画布上方时触发
canvas:mouseleave鼠标移出画布时触发
canvas:mousedown鼠标按钮在画布上按下(左键或者右键)时触发,不能通过键盘触发
canvas:mouseup画布上按下的鼠标按钮被释放弹起时触发,不能通过键盘触发
canvas:contextmenu用户在画布上右击鼠标时触发并打开右键菜单,见 Demo
canvas:dragstart当画布开始被拖拽的时候触发的事件,此事件作用在被拖曳画布上
canvas:drag当画布在拖动过程中时触发的事件,此事件作用于被拖拽画布上
canvas:dragend当拖拽完成后触发的事件,此事件作用在被拖曳画布上
canvas:dragenter当拖曳画布进入目标元素的时候触发的事件,此事件作用在目标画布上
canvas:dragleave当拖曳画布离开目标元素的时候触发的事件,此事件作用在目标画布上
canvas:drop被拖拽的元素在空白画布上同时鼠标放开触发的事件,此事件作用在目标画布上
canvas:touchstart在触控屏上,当画布开始被触碰的时候触发的事件
canvas:touchmove在触控屏上,当画布开始被触碰过程中触发的事件
canvas:touchend在触控屏上,当画布开始被触碰结束的时候触发的事件

时机事件

用于监听图的某方法调用前后的时机。使用如下形式进行交互事件的监听:

graph.on(timingEventName, evt => {
  // 一些操作
})

timingEventName 见下方内容。

事件名称描述
beforerender调用 graph.render / graph.read 方法之前触发
afterrender调用 graph.render / graph.read 方法之后触发
beforeadditem调用 graph.add / graph.addItem 方法之前触发
afteradditem调用 graph.add / graph.addItem 方法之后触发
beforeremoveitem调用 graph.remove / graph.removeItem 方法之前触发
afterremoveitem调用 graph.remove / graph.removeItem 方法之后触发
beforeupdateitem调用 graph.update / graph.updateItem 方法之前触发
afterupdateitem调用 graph.update / graph.updateItem 方法之后触发
beforeitemvisibilitychange调用 graph.showItem / graph.hideItem 方法之前触发
afteritemvisibilitychange调用 graph.showItem / graph.hideItem 方法之后触发
beforeitemstatechange调用 graph.setItemState 方法之前触发
afteritemstatechange调用 graph.setItemState 方法之后触发
beforeitemrefresh调用 graph.refreshItem 方法之前触发
afteritemrefresh调用 graph.refreshItem 方法之后触发
beforeitemstatesclear调用 graph.clearItemStates 方法之前触发
afteritemstatesclear调用 graph.clearItemStates 方法之后触发
beforemodechange调用 graph.setMode / graph.addBehaviors / graph.removeBehaviors 方法之前触发
aftermodechange调用 graph.setMode / graph.addBehaviors / graph.removeBehaviors 方法之后触发
beforelayout布局前触发。调用 graph.render 时会进行布局,因此 render 时会触发。或用户主动调用图的 graph.layout 时触发。
afterlayout布局完成后触发。调用 graph.render 时会进行布局,因此 render 时布局完成后会触发。或用户主动调用图的 graph.layout 时布局完成后触发。
beforegraphrefreshpositiongraph.refreshPositions 被调用前触发
aftergraphrefreshpositiongraph.refreshPositions 被调用后触发
beforegraphrefreshgraph.refresh 被调用前触发
aftergraphrefreshgraph.refresh 被调用后触发
beforeanimate全局动画发生前触发
afteranimate全局动画发生后触发
beforecreateedge使用内置交互 create-edge,创建边之前触发
aftercreateedge使用内置交互 create-edge,创建边之后触发
beforecollapseexpandcombo当一个 combo 被收起或展开之前被触发,参数 action 指明了是收起还是展开
aftercollapseexpandcombo当一个 combo 被收起或展开之后被触发,参数 action 指明了是收起还是展开
graphstatechange调用 graph.updateItemState 方法之后触发
afteractivaterelations使用了 'activate-relations' Behavior 并触发了该行为后,该事件被触发
nodeselectchange使用了 'brush-select' , 'click-select''lasso-select' Behavior 且选中元素发生变化时,该事件被触发
itemcollapsed在 TreeGraph 上使用了 'collapse-expand' Behavior 并触发了该行为后,该事件被触发
tooltipchange使用了 'tooltip''edge-tooltip' Behavior 且 tooltip 的显示/隐藏被改变后,该事件被触发
wheelzoom使用了 'zoom-canvas' Behavior 并用滚轮对图进行缩放后,该事件被触发
viewportchange调用 graph.moveTograph.translate,或 graph.zoom 均会触发该事件
dragnodeend使用了 'drag-node' Behavior,当拖动结束时,该事件被触发
stackchange撤销/重做栈发生变化时,该事件触发

插件中的时机事件

TimeBar 插件:

事件名称描述
valuechange时间轴的时间范围发生变化时触发
timebarstartplay时间轴开始播放时触发
timebarendplay时间轴播放结束时触发

Tooltip 插件:

事件名称描述
tooltipchangeTooltip 发生变化时触发

回调参数

不同时机监听事件的回调参数不同,下面针对各个自定义事件的回调参数进行说明。

beforerender / afterrender

无参数

beforeadditem

名称类型描述
typeString当前添加的类型
modelObjectitem 数据模型

afteradditem

名称类型描述
itemItem已经添加的 item 实例
modelObjectitem 数据模型

beforeremoveitem / afterremoveitem

名称类型描述
itemItem被删除的 item 实例数据
type'node' / 'edge' / 'combo'被删除的 item 类型

beforeupdateitem / afterupdateitem

名称类型描述
itemItem要更新的 item 实例
modelObjectitem 数据模型

beforeitemvisibilitychange / afteritemvisibilitychange

名称类型描述
itemItem当前操作的 item 实例
visibleBoolean是否可见,true 为可见,false 为不可见

beforeitemstatechange / afteritemstatechange

名称类型描述
itemItem当前操作的 item 实例
stateString状态
enabledBoolean状态是否可用,true 可用,false 不可用

beforeitemstatesclear / afteritemstatesclear

名称类型描述
itemItem当前操作的 item 实例
statesArray / String需要批量清除的状态

beforemodechange / aftermodechange

名称类型描述
modeString当前的模式名称

beforeitemrefresh / afteritemrefresh

名称类型描述
itemItem当前操作的 item 实例

beforelayout / afterlayout

无参数

graphstatechange

名称类型描述
statesObject当前各个状态下的元素,格式举例 { hover: [Node, Node], selected: [ Node ] }

afteractivaterelations

名称类型描述
itemItem当前操作的 item 实例
actionString当前操作名

nodeselectchange

名称类型描述
targetItem当前操作的 item 实例
selectedItemsObject当前被选中的所有 item 实例,形如 { nodes: [...], edges: [...]}

beforecreateedge / aftercreateedge

beforecreateedge 无参数。aftercreateedge 参数如下:

名称类型描述
edgeItem当前被创建的边实例

beforecollapseexpandcombo / aftercollapseexpandcombo

名称类型描述
actionstring具体的操作, 'collapse''expand'
comboItem被操作的 combo item

itemcollapsed

名称类型描述
itemItem当前操作的 item 实例
collapsedBoolean当前操作后,操作对象的 collapsed 状态

tooltipchange

名称类型描述
itemItem当前操作的 item 实例
actionStringtooltip 当前是显示 'show' 还是隐藏 'hide'

wheelzoom

名称类型描述
deltaXNumber滚动的 x 方向,取值 10-10 代表没有该方向的滚动
deltaYNumber滚动的 y 方向,取值 10-10 代表没有该方向的滚动
... 其他滚轮事件的回调参数

viewportchange

名称类型描述
action'translate' / 'move' / 'zoom'视窗变换的类型,'translate''move''zoom' 分别标识该时机是由 graph.translategraph.move、还是 graph.zoom 函数的调用而产生
matrixArray视窗变换后的图的矩阵

dragnodeend

名称类型描述
itemsItem[]当前操作的 item 实例
targetItemnull/Node/Combo拖动节点结束后,节点是放到 canvas、Node 还是 Combo 上面

stackchange

名称类型描述
redoStackObject[]重做堆栈
undoStackObject[]撤销堆栈

valuechange

名称类型描述
valuenumber[]时间轴当前时间范围,value[0] 为起始值,value[1] 为结束值

timelinestart / timelineend

无参数

tooltipchange

名称类型描述
itemItemtooltip 所关联的元素(节点/边)
action'show' / 'hide'tooltip 当前的变化时显示还是隐藏