流程圖控件GoJS教程：上下文菜單

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

注意：GoJS上下文菜單無法在圖外部渲染，因為它們是圖內(nèi)部的對象，因此只能在圖上繪制。如果您需要部分或全部繪制在關(guān)系圖外部的上下文菜單，請考慮制作HTML上下文菜單。

GoJS上下文菜單是一種裝飾，當用戶上下文單擊（其右鍵單擊或長時間按住）設置了GraphObject.contextMenu的對象時顯示。上下文菜單與零件本身綁定到相同的數(shù)據(jù)。

通常，將上下文菜單實現(xiàn)為包含“ ContextMenuButton”的“ ContextMenu”面板，如下面的代碼所示，在節(jié)點的GraphObject.contextMenu和Diagram.contextMenu屬性的分配中可以看到。每個“ ContextMenu”只是一個“ 陰影”的“垂直”面板裝飾。每個“ ContextMenuButton”都是一個面板，可以在其上設置GraphObject.click事件處理程序。在事件處理程序中，obj.part將使用整個上下文菜單裝飾。 obj.part.adornedPart將裝飾節(jié)點或鏈接。綁定的數(shù)據(jù)是obj.part.data，它將與相同obj.part.adornedPart.data。

你可以看到如何在“文本菜單”和“ContextMenuButton”助洗劑的定義 Buttons.js。

在此示例中，每個節(jié)點的GraphObject.contextMenu屬性設置為裝飾，該裝飾顯示單個按鈕，單擊該按鈕可更改綁定模型數(shù)據(jù)的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;

嘗試上下文單擊節(jié)點并多次調(diào)用“更改顏色”命令。使用圖表上下文菜單，您可以“撤消”和/或“重做”，也可以使用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上下文菜單需要更多的精力來實現(xiàn)。但是，您將具有HTML / CSS / JavaScript的全部功能來顯示所需的內(nèi)容。這包括創(chuàng)建上下文菜單，這些菜單可以存在于或浮動在圖表之外。

為上下文菜單創(chuàng)作HTML和CSS時，有兩個主要注意事項。上下文菜單通常應該是關(guān)系圖的同級元素，并且絕不能嵌套在關(guān)系圖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在觸摸設備上提供了內(nèi)置的默認上下文菜單，該菜單以HTML實現(xiàn)。該菜單上的按鈕是動態(tài)填充的，具體取決于目標GraphObject（如果有）和Diagram及其屬性。

可以通過將ContextMenuTool.defaultTouchContextMenu設置為null 來禁用默認上下文菜單。如果您要修改，“ 燈箱上下文菜單”示例將包含該菜單的重新實現(xiàn)。

如果定義自己的自定義上下文菜單，它們將阻止默認上下文菜單出現(xiàn)在觸摸設備上。我們建議您的自定義上下文菜單包括適用于您的應用程序的所有常用命令。

---

溫馨提示：疫情期間返崗上班需戴口罩、勤洗手、常通風，做好防護措施！

想要購買GoJS正版授權(quán)的朋友可以