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

---

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

點(diǎn)擊下載GoJS最新試用版

注意：GoJS上下文菜單無(wú)法在圖外部渲染，因?yàn)樗鼈兪菆D內(nèi)部的對(duì)象，因此只能在圖上繪制。如果您需要部分或全部繪制在關(guān)系圖外部的上下文菜單，請(qǐng)考慮制作HTML上下文菜單。

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

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

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

在此示例中，每個(gè)節(jié)點(diǎn)的GraphObject.contextMenu屬性設(shè)置為裝飾，該裝飾顯示單個(gè)按鈕，單擊該按鈕可更改綁定模型數(shù)據(jù)的color屬性。通過(guò)設(shè)置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ǎn)并多次調(diào)用“更改顏色”命令。使用圖表上下文菜單，您可以“撤消”和/或“重做”，也可以使用Control-Z和/或Control-Y。

定位

有兩種方法可以自定義上下文菜單相對(duì)于裝飾的GraphObject的位置。一種方法是重寫ContextMenuTool.positionContextMenu。另一種方法是使上下文菜單裝飾包含一個(gè)占位符。占位符的位置和裝飾對(duì)象的位置和位置相同。上下文菜單將沒(méi)有背景，因此在使用占位符時(shí)默認(rèn)情況下不會(huì)顯示陰影。

  // 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類定義裝飾來(lái)定義自定義上下文菜單。“ 自定義上下文菜單”示例和“ 燈箱上下文菜單”示例顯示了兩個(gè)此類自定義上下文菜單。

與使用默認(rèn)的GoJS “ ContextMenu”和“ ContextMenuButton” 相比，HTML上下文菜單需要更多的精力來(lái)實(shí)現(xiàn)。但是，您將具有HTML / CSS / JavaScript的全部功能來(lái)顯示所需的內(nèi)容。這包括創(chuàng)建上下文菜單，這些菜單可以存在于或浮動(dòng)在圖表之外。

為上下文菜單創(chuàng)作HTML和CSS時(shí)，有兩個(gè)主要注意事項(xiàng)。上下文菜單通常應(yīng)該是關(guān)系圖的同級(jí)元素，并且絕不能嵌套在關(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可能需要設(shè)置z-index以確保它始終位于最上面。GoJS Diagrams的z-index為2，有些工具的z-index為100。

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

啟用觸摸的設(shè)備的默認(rèn)上下文菜單

假定觸摸設(shè)備沒(méi)有鍵盤功能，這會(huì)使復(fù)制和粘貼等操作變得更加困難。因此，GoJS在觸摸設(shè)備上提供了內(nèi)置的默認(rèn)上下文菜單，該菜單以HTML實(shí)現(xiàn)。該菜單上的按鈕是動(dòng)態(tài)填充的，具體取決于目標(biāo)GraphObject（如果有）和Diagram及其屬性。

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

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

---

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

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