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

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

數(shù)據(jù)綁定

選擇任何節(jié)點(diǎn)，然后單擊“添加”按鈕。請(qǐng)注意，該圖是如何自動(dòng)以樹(shù)狀布局的。

像所有Part一樣，裝飾件也支持?jǐn)?shù)據(jù)綁定。如果裝飾的零件具有數(shù)據(jù)綁定（即，如果Part.data不為空），則該零件的所有裝飾也將綁定到同一數(shù)據(jù)對(duì)象。

  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);

注意每個(gè)裝飾物與選定節(jié)點(diǎn)的data.color具有相同的顏色。

選擇外觀變化

添加選擇裝飾不是視覺(jué)上指示已選擇零件的唯一方法。您還可以修改零件中一個(gè)或多個(gè)對(duì)象的外觀。

一種方法是使用數(shù)據(jù)綁定。在這里，我們的數(shù)據(jù)綁定Shape.fill到Part.isSelected財(cái)產(chǎn)與轉(zhuǎn)換器功能將布爾值設(shè)置為顏色字符串或刷子。我們還關(guān)閉了常規(guī)的矩形藍(lán)色選擇裝飾。

  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"));

現(xiàn)在，當(dāng)您選擇一個(gè)節(jié)點(diǎn)時(shí)，其背景顏色將變?yōu)榍嗌?

通常，當(dāng)Part.isSelected的值更改時(shí)，您可以執(zhí)行代碼來(lái)修改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"));

在此類(lèi)事件處理程序中可以執(zhí)行的操作受到一些限制：您不應(yīng)選擇或取消選擇任何部分，也不應(yīng)在圖中添加或刪除任何部分。

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

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

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號(hào)