流程图控件GoJS教程：Selection设置（下）

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

点击下载GoJS最新试用版

数据绑定

选择任何节点，然后单击“添加”按钮。请注意，该图是如何自动以树状布局的。

像所有Part一样，装饰件也支持数据绑定。如果装饰的零件具有数据绑定（即，如果Part.data不为空），则该零件的所有装饰也将绑定到同一数据对象。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "RoundedRectangle", { fill: "lightgray", strokeWidth: 2 },
        new go.Binding("stroke", "color")),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key")),
      {
        selectionAdornmentTemplate:
          $(go.Adornment, "Auto",
            $(go.Shape,
              { fill: null, stroke: "dodgerblue", strokeWidth: 6 },
              new go.Binding("stroke", "color")),
            $(go.Placeholder)
          )  // end Adornment
      }
    );

  var nodeDataArray = [
    { key: "Alpha", loc: "0 0", color: "blue" },
    { key: "Beta", loc: "200 50", color: "red" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.selectCollection(diagram.nodes);

注意每个装饰物与选定节点的data.color具有相同的颜色。

选择外观变化

添加选择装饰不是视觉上指示已选择零件的唯一方法。您还可以修改零件中一个或多个对象的外观。

一种方法是使用数据绑定。在这里，我们的数据绑定Shape.fill到Part.isSelected财产与转换器功能将布尔值设置为颜色字符串或刷子。我们还关闭了常规的矩形蓝色选择装饰。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { selectionAdorned: false },  // don't bother with any selection adornment
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "RoundedRectangle", { fill: "lightgray", strokeWidth: 2 },
        // when this Part.isSelected changes value, change this Shape.fill value:
        new go.Binding("fill", "isSelected", function(sel) {
          if (sel) return "cyan"; else return "lightgray";
        }).ofObject("")),  // The object named "" is the root visual element, the Node itself
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.select(diagram.findNodeForKey("Beta"));

现在，当您选择一个节点时，其背景颜色将变为青色。

通常，当Part.isSelected的值更改时，您可以执行代码来修改Part ;。在此示例中，我们将具有与先前示例相同的副作用。

  function onSelectionChanged(node) {
    var icon = node.findObject("Icon");
    if (icon !== null) {
      if (node.isSelected)
        icon.fill = "cyan";
      else
        icon.fill = "lightgray";
    }
  }

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { selectionAdorned: false,  // don't bother with any selection adornment
        selectionChanged: onSelectionChanged },  // executed when Part.isSelected has changed
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "RoundedRectangle",
        { name: "Icon", fill: "lightgray", strokeWidth: 2 }),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", loc: "200 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.select(diagram.findNodeForKey("Beta"));

在此类事件处理程序中可以执行的操作受到一些限制：您不应选择或取消选择任何部分，也不应在图中添加或删除任何部分。

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

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

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