GoJs中的右键菜单--contextMenu

前言

在前面的文章中说到了增删改查，是对图形中的节点和连线进行的操作。而触发这个操作的行为就需要一个按钮和菜单，我们可以对节点内的元素绑定交互的事件，但是如果节点内需要操作的行为比较多，就会造成节点显示拥挤。因此和节点提示信息toolTip一样，就需要一个右键点击菜单来完成对应的需求。

contextMenu的使用

菜单从显示上也是一种提示信息，但是根据菜单的惯有样式内置的菜单显示成按钮形状。然后给每一个菜单单元绑定点击事件，从而达到了菜单的功能。

给节点绑定菜单

给节点绑定菜单和toolTip，在nodeTemplate配置中和go.Node同级，并且和节点共享节点数据。

this.myDiagram.nodeTemplate =
$$(go.Node, "auto",
    $$(go.Shape, "Circle",
        { width: 80, height: 80 },
        new go.Binding("fill", "color"),
        new go.Binding("figure", "figure"),
      ),
    $$(go.TextBlock, { margin: 5 },
        new go.Binding("text", "text")),
    {
    contextMenu:     
        $$("ContextMenu",  
            $$("ContextMenuButton",
                $$(go.TextBlock, "修改颜色"),{ click: this.changeColor }
            ),
            $$("ContextMenuButton",
                $$(go.TextBlock, "修改文字"),{ click: this.changeText }
            )
        ) 
    }
);
   
changeColor(e,obj){
    let nodeData = obj.part.data;
    this.myDiagram.model.setDataProperty(nodeData,'color',"#67B73C")
},
changeText(e,obj){
    let nodeData = obj.part.data;
    this.myDiagram.model.setDataProperty(nodeData,'text',"三国")
}   

给节点添加右键菜单的时候，通过鼠标点击右键触发，对应的菜单点击的回调函数中可以通过第二个参数obj.part.data获取到节点的数据，然后根据前面文章中提到的增删改查来对操作的节点进行功能添加。

给图标绑定菜单

给图标绑定菜单是通过this.myDiagram.contextMenu来绑定菜单，菜单内部元素和节点菜单一致，示例如下

this.myDiagram.contextMenu =
    $$("ContextMenu",
        $$("ContextMenuButton",
        $$(go.TextBlock, "修改选中节点颜色"),
        { click: this.changeColor },
        ),
        $$("ContextMenuButton",
        $$(go.TextBlock, "修改选中节点文字"),
        { click: this.changeText },
     )
);

changeColor(e,obj){
    let nodeData = this.myDiagram.selection.first()&&this.myDiagram.selection.first().data;
    this.myDiagram.model.setDataProperty(nodeData,'color',"#67B73C")
},
changeText(e,obj){
    let nodeData = this.myDiagram.selection.first()&&this.myDiagram.selection.first().data;
    this.myDiagram.model.setDataProperty(nodeData,'text',"三国")
}

这里的示例是修改选中节点的颜色和文字，因此在画布刚刚加载完成之后，点击图表的菜单是不会有反应的，在选中之后才会切换对应选中节点的颜色和文字。

菜单显示位置的选择

{
        contextMenu:                           
        $$("ContextMenu", "Spot",              
        $$(go.Placeholder, { padding: 5 }),  
        $$("ContextMenuButton", 
        $$(go.TextBlock, "上方"),{ alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, }),
        $$("ContextMenuButton", $$(go.TextBlock, "右方"),
            { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, }),
        $$("ContextMenuButton", $$(go.TextBlock, "下方"),
            { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, }),
        $$("ContextMenuButton", $$(go.TextBlock, "左方"),
            { alignment: go.Spot.Left, alignmentFocus: go.Spot.Right, })
        )  
}

根据Spot布局来调整右键菜单的位置，和toolTip显示原理相同。

总结

通过菜单的显示可以极大的拓展节点的交互功能，并且在可视化图像的显示中又不会影响到图中节点和连线等等信息的阅读。