流程圖控件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正版授權的朋友可以

有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號