流程图控件GoJS教程：上下文菜单

---

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新试用版

注意：GoJS上下文菜单无法在图外部渲染，因为它们是图内部的对象，因此只能在图上绘制。如果您需要部分或全部绘制在关系图外部的上下文菜单，请考虑制作HTML上下文菜单。

GoJS上下文菜单是一种装饰，当用户上下文单击（其右键单击或长时间按住）设置了GraphObject.contextMenu的对象时显示。上下文菜单与零件本身绑定到相同的数据。

通常，将上下文菜单实现为包含“ ContextMenuButton”的“ ContextMenu”面板，如下面的代码所示，在节点的GraphObject.contextMenu和Diagram.contextMenu属性的分配中可以看到。每个“ ContextMenu”只是一个“ 阴影”的“垂直”面板装饰。每个“ ContextMenuButton”都是一个面板，可以在其上设置GraphObject.click事件处理程序。在事件处理程序中，obj.part将使用整个上下文菜单装饰。 obj.part.adornedPart将装饰节点或链接。绑定的数据是obj.part.data，它将与相同obj.part.adornedPart.data。

你可以看到如何在“文本菜单”和“ContextMenuButton”助洗剂的定义 Buttons.js。

在此示例中，每个节点的GraphObject.contextMenu属性设置为装饰，该装饰显示单个按钮，单击该按钮可更改绑定模型数据的color属性。通过设置Diagram.contextMenu，该图可获得自己的上下文菜单。

  // This method is called as a context menu button's click handler.
  // Rotate the selected node's color through a predefined sequence of colors.
  function changeColor(e, obj) {
    diagram.commit(function(d) {
      // get the context menu that holds the button that was clicked
      var contextmenu = obj.part;
      // get the node data to which the Node is data bound
      var nodedata = contextmenu.data;
      // compute the next color for the node
      var newcolor = "lightblue";
      switch (nodedata.color) {
        case "lightblue": newcolor = "lightgreen"; break;
        case "lightgreen": newcolor = "lightyellow"; break;
        case "lightyellow": newcolor = "orange"; break;
        case "orange": newcolor = "lightblue"; break;
      }
      // modify the node data
      // this evaluates data Bindings and records changes in the UndoManager
      d.model.set(nodedata, "color", newcolor);
    }, "changed color");
  }

  // this is a normal Node template that also has a contextMenu defined for it
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key")),
      {
        contextMenu:     // define a context menu for each node
          $("ContextMenu",  // that has one button
            $("ContextMenuButton",
              $(go.TextBlock, "Change Color"),
              { click: changeColor })
            // more ContextMenuButtons would go here
          )  // end Adornment
      }
    );

  // also define a context menu for the diagram's background
  diagram.contextMenu =
    $("ContextMenu",
      $("ContextMenuButton",
        $(go.TextBlock, "Undo"),
        { click: function(e, obj) { e.diagram.commandHandler.undo(); } },
        new go.Binding("visible", "", function(o) {
                                          return o.diagram.commandHandler.canUndo();
                                        }).ofObject()),
      $("ContextMenuButton",
        $(go.TextBlock, "Redo"),
        { click: function(e, obj) { e.diagram.commandHandler.redo(); } },
        new go.Binding("visible", "", function(o) {
                                          return o.diagram.commandHandler.canRedo();
                                        }).ofObject()),
      // no binding, always visible button:
      $("ContextMenuButton",
        $(go.TextBlock, "New Node"),
        { click: function(e, obj) {
          e.diagram.commit(function(d) {
            var data = {};
            d.model.addNodeData(data);
            part = d.findPartForData(data);  // must be same data reference, not a new {}
            // set location to saved mouseDownPoint in ContextMenuTool
            part.location = d.toolManager.contextMenuTool.mouseDownPoint;
          }, 'new node');
        } })
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightyellow" },
    { key: "Beta", color: "orange" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.undoManager.isEnabled = true;

尝试上下文单击节点并多次调用“更改颜色”命令。使用图表上下文菜单，您可以“撤消”和/或“重做”，也可以使用Control-Z和/或Control-Y。

定位

有两种方法可以自定义上下文菜单相对于装饰的GraphObject的位置。一种方法是重写ContextMenuTool.positionContextMenu。另一种方法是使上下文菜单装饰包含一个占位符。占位符的位置和装饰对象的位置和位置相同。上下文菜单将没有背景，因此在使用占位符时默认情况下不会显示阴影。

  // this is a shared context menu button click event handler, just for demonstration
  function cmCommand(e, obj) {
    var node = obj.part.adornedPart;  // the Node with the context menu
    var buttontext = obj.elt(1);  // the TextBlock
    alert(buttontext.text + " command on " + node.data.key);
  }

  // this is a normal Node template that also has a contextMenu defined for it
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key")),
      {
        contextMenu:                            // define a context menu for each node
          $("ContextMenu", "Spot",              // that has several buttons around
            $(go.Placeholder, { padding: 5 }),  // a Placeholder object
            $("ContextMenuButton", $(go.TextBlock, "Top"),
              { alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, click: cmCommand }),
            $("ContextMenuButton", $(go.TextBlock, "Right"),
              { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, click: cmCommand }),
            $("ContextMenuButton", $(go.TextBlock, "Bottom"),
              { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, click: cmCommand }),
            $("ContextMenuButton", $(go.TextBlock, "Left"),
              { alignment: go.Spot.Left, alignmentFocus: go.Spot.Right, click: cmCommand })
          )  // end Adornment
      }
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightyellow" },
    { key: "Beta", color: "orange" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

HTML上下文菜单

可以使用HTML而不是使用HTMLInfo类定义装饰来定义自定义上下文菜单。“ 自定义上下文菜单”示例和“ 灯箱上下文菜单”示例显示了两个此类自定义上下文菜单。

与使用默认的GoJS “ ContextMenu”和“ ContextMenuButton” 相比，HTML上下文菜单需要更多的精力来实现。但是，您将具有HTML / CSS / JavaScript的全部功能来显示所需的内容。这包括创建上下文菜单，这些菜单可以存在于或浮动在图表之外。

为上下文菜单创作HTML和CSS时，有两个主要注意事项。上下文菜单通常应该是关系图的同级元素，并且绝不能嵌套在关系图DIV中：

<div style="position: relative;">
  <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px;"></div>
  <div id="contextMenu">
    <!-- ... context menu HTML -->
  </div>
</div>

并且ContextMenu可能需要设置z-index以确保它始终位于最上面。GoJS Diagrams的z-index为2，有些工具的z-index为100。

#contextMenu {
   z-index：1000 ; 
  ... 
}

启用触摸的设备的默认上下文菜单

假定触摸设备没有键盘功能，这会使复制和粘贴等操作变得更加困难。因此，GoJS在触摸设备上提供了内置的默认上下文菜单，该菜单以HTML实现。该菜单上的按钮是动态填充的，具体取决于目标GraphObject（如果有）和Diagram及其属性。

可以通过将ContextMenuTool.defaultTouchContextMenu设置为null 来禁用默认上下文菜单。如果您要修改，“ 灯箱上下文菜单”示例将包含该菜单的重新实现。

如果定义自己的自定义上下文菜单，它们将阻止默认上下文菜单出现在触摸设备上。我们建议您的自定义上下文菜单包括适用于您的应用程序的所有常用命令。

---

温馨提示：疫情期间返岗上班需戴口罩、勤洗手、常通风，做好防护措施！

想要购买GoJS正版授权的朋友可以