GoJs的节点和内部元素的事件交互

沅芷湘兰
2,378 阅读2分钟

前言

一个完整的可视化图形除了丰富的节点内容和之间的关系连线之外，还会有很多的交互事件才能让图形更加完整，并且功能更加丰富，用户体验比较好。其实很多的js事件在gojs里面也都是可以使用的，使用方法和js也差不多，给交互事件绑定一个回调函数进行一些对应交互事件的处理。

预先的一些准备工作

在上篇文章的布局类型的数据简单进行一些处理之后,显示如下

//data
nodes:[
    { key: "1", color: "#99FFFF",text:"三国",figure:"Rectangle" },
    { key: "1-1", color: "#FF0000",text:"魏",figure:"Circle" },
    { key: "1-2", color: "#FFFF66",text:"蜀",figure:"Circle"},
    { key: "1-3", color: "#0000FF",text:"吴",figure:"Circle" },
  ],
  links:[
    {
      from:"1",
      to:"1-1"
    },
    {
      from:"1",
      to:"1-2"
    },
    {
      from:"1",
      to:"1-3"
    },
  ]
  
  //methods
  this.myDiagram = $$(go.Diagram, "myDiagramDiv", {
    layout: $$(go.TreeLayout),
  });
  this.myDiagram.nodeTemplate =
    $$(go.Node, "Vertical"},
    $$(go.Shape, "Circle",
        { width: 30, height: 30 },
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
      ),
    $$(go.TextBlock, { margin: 5 },
        new go.Binding("text", "text"))
   );
   this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

常见的交互事件

click,//鼠标单击事件
doubleClick,//双击事件
mouseEnter,// 鼠标移入事件
mouseLeave,//鼠标移出事件
mouseHover,//鼠标悬停事件
selectionChanged,//节点的选中和取消选中事件
contextMenu,//鼠标右键点击事件

click、doubleClick事件

click和JavaScript的原生onclick事件一样，都是通过鼠标单击进行触发。单击事件默认存在，只是事件的行为绑定为空。而我们做的就是给元素的鼠标点击事件绑定对应的方法，来处理一些事物，或者产生一些行为。

以go.Node的配置项为例，其使用方法如下

//第一种方式,直接在nodeTemplate的配置中写回调函数
$$(go.Node, "Vertical",{click: function(e,node){
    console.log(e,node)
}},

//第二种方式,把回调函数写成单独的方法,方便服用,也简化nodeTemplate回调模板的复杂度
$$(go.Node, "Vertical",{click: this.NodeClick},
NodeClick(e,node){
    console.log(e,node)
}

两种方法都是给节点Node的点击事件绑定方法，其对应的参数打印之后是

image.png

image.png

通过上图可以看到两个参数e和node两个参数分别存储了很多的节点的对象信息。但是第二个参数的node有个为data的属性，我们可以通过node.data来获取到nodes参数的对象信息，因此我们可以根据node.data获取到节点的数据然后对其产生的行为进行一个处理。

双击事件的使用方法和参数和单击事件一样，只是触发方式为鼠标双击。

mouseEnter、mouseLeave、mouseHover事件

mouseEnter为鼠标的移入事件，mouseLeave为鼠标的移除事件，mouseHover为鼠标的悬停事件。

$$(go.Node, "Vertical",{mouseEnter: this.NodeMouseEnter},

其回调函数的参数和鼠标点击事件一样，也是可以通过node.data来获取移入和移出的节点数据。可以通过移入移出事件可以做节点的移入来对节点进行一些特殊展示，或者节点的图片的预览功能。mouseHover的鼠标悬停事件需要结合Diagram.toolManager.hoverDelay设置悬停时间。

contextMenu鼠标的右键点击事件

contextMenu右键菜单也可以用之前的绘图模板进行绘制，主要是能新增、复制、剪切等做一个菜单的功能拓展。

$$(go.Node, "Vertical",
{
    contextMenu:
    $$('ContextMenu',
        $$('ContextMenuButton',
            $$(go.TextBlock, '复制'),
            { click: function () {
                _this.myDiagram.commandHandler.copySelection();
            }}
        ),
        $$('ContextMenuButton',
            $$(go.TextBlock, '剪切'),
            { click: function () {
                _this.myDiagram.commandHandler.cutSelection();
            }}
        )
    )
},

contextMenu内部可以通过ContextMenuButton模板绘制每个菜单的按钮，其内部可以用之前的绘制模板对菜单进行一个丰富，加入几何图形或者矢量图表让菜单的显示更加形象。 动画.gif

总结

图形的交互事件在可以拓展图形的交互显示，使很多的键盘交互行为可以以菜单的形式展示，其中点击事件和鼠标移入移出事件在节点内部的元素都有这些事件。因此，内部元素也可以给对应的事件绑定对应的方法，因此在鼠标内部通过go.Picture绘制出来的缩略图也可以通过鼠标移入移出结合modal框对图片进行一个预览功能。

avatar
文章
阅读
粉丝