事件系统

视图交互事件

通过鼠标、键盘或者各种可交互的组件与应用产生交互时触发的事件，如单击节点 'node:click' 等。

鼠标事件

事件	node节点	link连线(暂未启用)	视图区域
单击	node:click	link:click	graph:click
双击	node:dblclick	link:dblclick	graph:dblclick
右键	node:contextmenu	link:contextmenu	graph:contextmenu
鼠标按下	node:mousedown	link:mousedown	graph:mousedown
移动鼠标	node:mousemove	link:mousemove	graph:mousemove
鼠标抬起	node:mouseup	link:mouseup	graph:mouseup
鼠标滚轮	-	-	graph:mousewheel
鼠标进入	node:mouseenter	link:mouseenter	-
鼠标离开	node:mouseleave	link:mouseleave	-

注意

需要注意的是，这里的 mousemove 事件和通常的鼠标移动事件有所区别，它需要在鼠标按下后移动鼠标才能触发。

除了 mouseenter 和 mouseleave 外，事件回调函数的参数都包含鼠标相对于画布的位置 x、y 和鼠标事件对象 e 等参数。

netGraph.on('node:click', ({ e, x, y, node }) => { })
netGraph.on('edge:click', ({ e, x, y, link }) => { })
netGraph.on('blank:click', ({ e, x, y }) => { })

netGraph.on('node:mouseenter', ({ e, node }) => { })
netGraph.on('edge:mouseenter', ({ e, edge }) => { })
netGraph.on('graph:mouseenter', ({ e }) => { })

画布缩放/平移

事件名	回调参数	说明
scale	(sx,sy,ox,oy)	缩放画布时触发，sx 和 sy 是缩放比例，ox 和 oy 是缩放中心。
resize	(width,height)	改变画布大小时触发，width 和 height 是画布大小。
translate	(tx,ty)	平移画布时触发，tx 和 ty 分别是 X 和 Y 轴的偏移量。

netGraph.on('scale', ({ sx, sy, ox, oy }) => { })
netGraph.on('resize', ({ width, height }) => { })
netGraph.on('translate', ({ tx, ty }) => { })

节点平移

事件名	回调参数	说明
node:move	(e,x,y,node)	缩放画布时触发，sx 和 sy 是缩放比例，ox 和 oy 是缩放中心。
node:moving	(e,x,y,node)	改变画布大小时触发，width 和 height 是画布大小。
node:moved	(e,x,y,node)	平移画布时触发，tx 和 ty 分别是 X 和 Y 轴的偏移量。

参数中的 x 和 y 是鼠标相对于画布的坐标。

netGraph.on('node:move', ({ e, x, y, node }) => { })
netGraph.on('node:moving', ({ e, x, y, node }) => { })
netGraph.on('node:moved', ({ e, x, y, node }) => { })

添加/删除/修改

当节点/连线被添加到画布时，触发以下事件：

• node:added
• link:added

当节点/连线被移除时，触发以下事件：

• node:removed
• link:removed

当节点/边发生任何改变时，触发以下事件：

• node:changed
• link:changed

在 Graph 上监听：

netGraph.on('node:added', ({ node, index, options }) => { })
netGraph.on('node:removed', ({ node, index, options }) => { })
netGraph.on('node:changed', ({ node, options }) => { })

netGraph.on('link:added', ({ link, index, options }) => { })
netGraph.on('link:removed', ({ link, index, options }) => { })
netGraph.on('link:changed', ({ link, options }) => { })