前言
上文说到了节点和内部器件的交互事件，除此之外。gojs还提供了一些针对可视化图形的一个监听事件。通过Diagram.addDiagramListener来监听不同事件的触发，做出对应的行为代码处理。
监听事件的类型
//图表背景画布的交互事件
BackgroundSingleClicked//背景画布点击事件
BackgroundDoubleClicked//背景画布双击事件
BackgroundContextClicked//背景画布右键点击事件
//图表内部节点连线的交互事件
ObjectSingleClicked//节点/连线的点击事件
ObjectDoubleClicked//节点/连线的双击事件
ObjectContextClicked//节点/连线的右键点击事件
//选中事件
ChangingSelection//图表和内部元素选中之前触发事件
ChangedSelection//图表和内部元素选中之后触发事件
//图表复制和拖动
SelectionCopied//图表中选中的元素复制触发事件
SelectionMoved//图表中选中元素的拖动触发事件
ClipboardChanged//图表元素复制到剪切板触发的事件
ClipboardPasted//图表元素从剪切板粘贴到画布触发的事件
TextEdited//节点内文本元素双击修改之后触发的事件
//图表删除事件
SelectionDeleting//图表元素删除之前触发的事件
SelectionDeleted//图表元素删除之后触发的事件
//树形布局的特殊事件
TreeCollapsed//图表树图折叠事件
TreeExpanded//图表树图展开事件
//动画事件
AnimationStarting//图表动画开始触发事件
AnimationFinished//图表动画结束触发事件
//可视范围变化
ViewportBoundsChanged//可视范围变化触发事件
监听对应事件的使用
其使用方法如下
this.myDiagram.addDiagramListener("BackgroundSingleClicked", function (e,obj) {
console.log(e,obj)
});
图表背景画布的交互事件
图表背景的交互事件包括ObjectSingleClicked(单击)、ObjectDoubleClicked(双击)、ObjectContextClicked(右击)。图表背景的点击的事件打印的参数为背景画板的对象参数，一般来说背景的点击事件多为右键菜单或者其他的交互行为的取消使用，因为一个触发的契机，因此一般不会使用其对象参数。右键点击可以做一些画板使用的菜单处理一些公共行为。
图表内部节点连线的交互事件
图表内部节点和连线的ObjectSingleClicked(单击)、ObjectDoubleClicked(双击)、ObjectContextClicked(右击)。监听方法和上篇文章中提到的在go.Node中绑定click等事件相似。是对节点和连线的鼠标点击事件的触发的事件。
this.myDiagram.addDiagramListener("ObjectSingleClicked", function (e) {
let node = e.diagram.selection.first();
console.log(e,node.data)
});
可以通过e.diagram.selection.first()来获取到选中的节点元素，点击事件会默认触发选中事件，可以通过获取到的选中节点信息来对节点点击做其他的行为绑定。
选中事件
ChangingSelection为图表内元素选中之前触发的事件，ChangedSelection为图表内元素选中之后触发的事件。
因为ChangingSelection是节点选中触发之前的事件，因为我们在获取node的时候第一次因为之前没有选中，所以无法获取node。因此在使用node.data在这个监听事件中使用的时候要做一些短路处理，不然的话会报错。hangedSelection则是在节点选中之后触发的事件，此一定能获取到node.data。
图表复制和拖动
SelectionCopied和SelectionMoved分别是选中的节点复制和选中节点的移动进行触发，该行为是通过DraggingTool拖动工具触发了对应的行为才能触发。lipboardChanged和ClipboardPasted方法分别是选中元素复制到剪切板和从剪切板粘贴到画布中进行触发，该行为可以通过ctrl+c和ctrl+v进行触发，其参数打印和选中事件一样。textEdited为go.TextBlock双击之后进入文字编辑框之后进行触发。
textEdited: function (tb, 第二个参数olds则是修改之前的文字信息., news) {
console.log(tb.part.data,olds,news)
}
其回调函数有三个参数，第一个参数则为操作的go.TextBlock的数据对象，可以通过tb.part.data来获取到操作的节点的信息。第二个参数olds则是修改之前的文本信息。news是修改之后新的文本信息。
图表删除事件
SelectionDeleting是选中节点和连线删除之前触发的事件，其返回的数据是即将删除的节点。此时打印的数据就是删除操作之前的选中数据。SelectionDeleted是选中节点和连线删除之后触发的事件，因此其回调函数中打印的是画布的数据，无法获取到删除之前选中的节点数据，如果在删除之后需要操作删除之前的节点可以先把节点信息进行存储一下。
树形布局的特殊事件
TreeCollapsed为树形布局图的折叠事件，TreeExpanded树形布局图的展开事件。对于树形布局的特殊性，可以根据TreeExpanderButton来创建节点之后的折叠展开按钮，既可以把节点后面的树节点进行展开和折叠，可以触发对应的事件，也可以在展开和折叠事件来处理一些后续节点的特殊展示。和画布点击监听事件类似。
动画事件
AnimationStarting为渲染动画开始时触发的事件。AnimationFinished为渲染动画结束之后触发的事件。但要注意的是。动画开始和结束的的监听事件中不要修改图表的关系数据和模型，因为改变图表关系会默认触发动画事件，因此会出现执行错误。图表的第一次渲染过程中会触发这两个事件，打印内容如下
可以看出其动画的两个监听事件中也是获取不到选择的节点信息的，其数据对象和画布点击的数据对象一样，整个图表的数据。
ViewportBoundsChanged
ViewportBoundsChanged是画布视图变化之后触发的事件，gojs内置了处理方法，在画布可视范围变化的时候会响应式的做一些操作。
由上图可以看出，在图形初次加载的过程中会多次触发视图范围变化的监听事件，然后在后续我们改变浏览器大小导致画布的可视范围变化的时候也都会触发该事件，因此可以做一些处理逻辑。
总结
根据图表的监听方法可更加丰富了交互行为，使交互不只是用户操作的节点，还能在操作过程中提供回调函数构成的钩子函数来触发不同场景的的操作响应。使交互的功能更强大，也使一些操作行为更加细致，增加用户体验。
