流程图控件GoJS教程：按钮的设置

---

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

点击下载GoJS最新版

通用按钮

预定义面板中最通用的一种是“按钮”。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { locationSpot: go.Spot.Center },
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.Panel, "Vertical",
        { margin: 3 },
        $("Button",
          { margin: 2,
            click: incrementCounter },
          $(go.TextBlock, "Click me!")),
        $(go.TextBlock,
          new go.Binding("text", "clickCount",
                         function(c) { return "Clicked " + c + " times."; }))
      )
    );

  function incrementCounter(e, obj) {
    var node = obj.part;
    var data = node.data;
    if (data && typeof(data.clickCount) === "number") {
      node.diagram.model.commit(function(m) {
        m.set(data, "clickCount", data.clickCount + 1);
      }, "clicked");
    }
  }

  diagram.model = new go.GraphLinksModel(
    [ { clickCount: 0 } ]);

TreeExpanderButtons

 想要展开和折叠子树是很常见的。通过将“ TreeExpanderButton”的实例添加到您的节点模板，很容易让用户控制它。

  diagram.nodeTemplate =
    $(go.Node, "Spot",
      $(go.Panel, "Auto",
        $(go.Shape, "Rectangle",
          { fill: "gold" }),
        $(go.TextBlock, "Click small button\nto collapse/expand subtree",
          { margin: 5 })
      ),
      $("TreeExpanderButton",
        { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
        { visible: true })
    );

  diagram.layout = $(go.TreeLayout, { angle: 90 });

  diagram.model = new go.GraphLinksModel(
    [ { key: 1 },
      { key: 2 } ],
    [ { from: 1, to: 2 } ] );

SubGraphExpanderButtons

想要展开和折叠包含子图的组也很常见。您可以通过将“ SubGraphExpanderButton”的实例添加到组模板来让用户控制此操作。

  diagram.groupTemplate =
    $(go.Group, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.Panel, "Vertical",
        { margin: 5,
          defaultAlignment: go.Spot.Left },
        $(go.Panel, "Horizontal",
          $("SubGraphExpanderButton",
            { margin: new go.Margin(0, 3, 5, 0) }),
          $(go.TextBlock, "Group")
        ),
        $(go.Placeholder)
      )
    );

  diagram.model = new go.GraphLinksModel(
    [ { key: 0, isGroup: true },
      { key: 1, group: 0 },
      { key: 2, group: 0 },
      { key: 3, group: 0 } ] );

PanelExpanderButtons

通常需要扩展和折叠一个节点，从而显示或隐藏有时不需要的细节。通过将“ PanelExpanderButton”的实例添加到您的节点模板，很容易让用户控制它。GraphObject.make的第二个参数应该是一个字符串，该字符串为希望按钮切换其GraphObject.visible属性的节点中的元素命名 。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { fill: "gold" }),
      $(go.Panel, "Table",
        { defaultAlignment: go.Spot.Top, defaultColumnSeparatorStroke: "black" },
        $(go.Panel, "Table",
          { column: 0 },
          $(go.TextBlock, "List 1",
            { column: 0, margin: new go.Margin(3, 3, 0, 3),
              font: "bold 12pt sans-serif" }),
          $("PanelExpanderButton", "LIST1",
            { column: 1 }),
          $(go.Panel, "Vertical",
            { name: "LIST1", row: 1, column: 0, columnSpan: 2 },
            new go.Binding("itemArray", "list1"))
        ),
        $(go.Panel, "Table",
          { column: 1 },
          $(go.TextBlock, "List 2",
            { column: 0, margin: new go.Margin(3, 3, 0, 3),
              font: "bold 12pt sans-serif" }),
          $("PanelExpanderButton", "LIST2",
            { column: 1 }),
          $(go.Panel, "Vertical",
            { name: "LIST2", row: 1, column: 0, columnSpan: 2 },
            new go.Binding("itemArray", "list2"))
        )
      )
    );

  diagram.model = new go.GraphLinksModel([
    {
      key: 1,
      list1: [ "one", "two", "three", "four", "five" ],
      list2: [ "first", "second", "third", "fourth" ]
    }
  ]);

ContextMenuButtons

尽管可以以任何选择的方式实现上下文菜单，但是通常使用预定义的“ ContextMenuButton”。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.TextBlock, "Use ContextMenu!",
        { margin: 5 })
    );

  diagram.nodeTemplate.contextMenu =
    $("ContextMenu",
      $("ContextMenuButton",
        $(go.TextBlock, "Shift Left"),
        { click: function(e, obj) { shiftNode(obj, -20); } }),
      $("ContextMenuButton",
        $(go.TextBlock, "Shift Right"),
        { click: function(e, obj) { shiftNode(obj, +20); } })
    );

  function shiftNode(obj, dist) {
    var adorn = obj.part;
    var node = adorn.adornedPart;
    node.diagram.commit(function(d) {
      var pos = node.location.copy();
      pos.x += dist;
      node.location = pos;
    }, "Shift");
  }

  diagram.model = new go.GraphLinksModel(
    [ { key: 1 } ] );

按钮定义

在Extensions目录的Buttons.js中 提供了所有预定义按钮的实现。创建自己的按钮时，您可能希望复制并改写这些定义。

这些定义可能不是GoJS中由GraphObject.make使用的实际标准按钮实现的最新描述。

请注意，这些按钮的定义使用了GraphObject.defineBuilder静态函数。这扩展了GraphObject.make的行为，以允许通过名称（带有可选参数）创建相当复杂的可视树。您可以在整个示例和扩展中找到各种控件的定义，例如：

• Buttons.js
• HyperlinkText.js
• ScrollingTable.js
• 自动重复按钮

====================================================

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

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号