流程圖控件GoJS教程：集合類

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

GoJS現(xiàn)已更新至最新版本2.0.17發(fā)布，修復(fù)了一些bug，增強(qiáng)用戶體驗，趕快下載試試吧~

點擊下載GoJS最新試用版

GoJS提供了自己的集合類：List，Set和Map。您可以使用Iterator遍歷集合。

與將JavaScript數(shù)組用作列表或?qū)ο笥米鞯貓D相比，這些集合類具有多個優(yōu)點。如果自獲取迭代器以來對集合進(jìn)行了修改，則在嘗試獲取迭代器的下一項時，它們會引發(fā)錯誤。可以將它們設(shè)為只讀，以避免意外的修改。它們提供了在簡單數(shù)組或?qū)ο螅ɡ鏘terator.any，Iterator.all和Iterator.each）上找不到的方法。如果您使用TypeScript編寫，則可以選擇對項目類型強(qiáng)制執(zhí)行編譯時類型檢查。

在GoJS中，大多數(shù)返回描述圖結(jié)構(gòu)的集合的屬性和方法都返回一個Iterator。那是因為集合的實現(xiàn)是內(nèi)部的-您只需要知道如何遍歷結(jié)果集合即可。其他方法或?qū)傩詫⒃试S您修改圖表。一個示例是Diagram.nodes，它以迭代器的形式返回圖中的Node和Group的當(dāng)前集合。當(dāng)程序員在模型中添加或刪除節(jié)點數(shù)據(jù)時，或者通過直接調(diào)用Diagram.add或Diagram.remove，將自動修改該集合 。

但是，有一些屬性可以返回允許修改的集合。示例包括通常在初始化后凍結(jié)的類的集合： Geometry.figures，PathFigure.segments和Brush.colorStops。其他示例包括很少被修改的集合，通常僅在圖初始化時才進(jìn)行修改： ToolManager.mouseDownTools（和其他工具列表）和Diagram.nodeTemplateMap （和其他模板圖）。

列表

一個列表是由整數(shù)索引的一個從零小于計數(shù)值的有序集合。

var l = new go.List();
  l.add("A");
  l.add("B");
  l.add("C");
 
  assert(l.count === 3);
  assert(l.elt(0) === "A");
  assert(l.has("B"));
  assert(l.indexOf("B") === 1);
 
  l.setElt(1, "z");  // replace an item
  assert(l.elt(1) === "z");
 
  l.removeAt(1);  // remove an item
  assert(l.count === 2);
  assert(l.elt(1) === "C");

在2.0中，List構(gòu)造函數(shù)的可選參數(shù)已刪除。但是，如果你在寫打字稿，GoJS集合類（List，Map，Set）現(xiàn)在是通用的，并會幫助你執(zhí)行類型：

  // TypeScript:
  var l = new go.List<string>(); // Create a list of only strings
  l.add("A");
  l.add(23);  // throws an error during compilation or in an IDE
  l.add({});  // throws an error during compilation or in an IDE

要遍歷List，請獲取其List.iterator，然后對其調(diào)用Iterator.next 以提高其在列表中的位置。它的Iterator.value將是一個列表項；它的Iterator.key將是列表中的相應(yīng)索引。

  var l = new go.List();
  l.add("A");
  l.add("B");
  l.add("C");
 
  var it = l.iterator;
  while (it.next()) {
    console.log(it.key + ": " + it.value);
  }
  // This outputs:
  // 0: A
  // 1: B
  // 2: C

組

一組是值的無序集合，不允許重復(fù)的值。此類類似于SetECMAScript 2015（ES6）中定義的對象。

Set構(gòu)造函數(shù) 的可選參數(shù)指定可以添加到集合中的項的類型。

 var s = new go.Set();
  s.add("A");
  s.add("B");
  s.add("C");
  s.add("B");  // duplicate is ignored
 
  assert(s.count === 3);
  assert(s.has("B"));
 
  s.remove("B");  // remove an item
  assert(s.count === 2);
  assert(!s.has("B"));

與List和一樣Map，在2.0中，Set構(gòu)造函數(shù)的可選參數(shù)已刪除，但現(xiàn)在它是TypeScript中的泛型類，可以強(qiáng)制執(zhí)行類型：

   // TypeScript:
  var s = new go.Set<string>(); // Create a set of only strings
  s.add("A");
  s.add(23);  // throws an error during compilation or in an IDE
  s.add({});  // throws an error during compilation or in an IDE

遍歷Set中 的項目就像遍歷List一樣，只是項目的順序可能會有所不同。

  var s = new go.Set();
  s.add("A");
  s.add("B");
  s.add("C");
  s.add("B");  // duplicate is ignored
 
  var it = s.iterator;
  while (it.next()) {
    console.log(it.value);
  }
  // This might output, perhaps in different order:
  // A
  // B
  // C

地圖

一個地圖是由密鑰索引鍵-值對的無序集合。此類類似于MapECMAScript 2015（ES6）中定義的對象。

Map構(gòu)造函數(shù) 的兩個可選參數(shù)指定鍵的類型以及可以添加到地圖的項目值的類型。

  var m = new go.Map();
  m.add("A", 1);  // associate "A" with 1
  m.add("B", 2);
  m.add("C", 3);
 
  assert(s.count === 3);
  assert(s.has("B"));
  assert(s.get("B") === 2);
 
  m.add("B", 222);  // replace the value for "B"
  assert(s.get("B") === 222);
 
  s.remove("B");  // remove an item
  assert(s.count === 2);
  assert(!s.has("B"));
  assert(s.get("B") === null);

與List和一樣Set，在2.0中，已刪除了Map構(gòu)造函數(shù)的可選參數(shù)，但現(xiàn)在它是TypeScript中的泛型類，可以強(qiáng)制執(zhí)行類型：

  // TypeScript:
  var m = new go.Map<string, number>(); // Create a map of strings to numbers
  m.add("A", 1);
  m.add(23, 23);  // throws an error during compilation or in an IDE
  m.add({}, 23);  // throws an error during compilation or in an IDE

遍歷Map中 的項目就像遍歷List一樣，但是提供對鍵和值的訪問。與Set一樣，項目的順序可能有所不同。

  var m = new go.Map();
  m.add("A", 1);  // associate "A" with 1
  m.add("B", 2);
  m.add("C", 3);
  m.add("B", 222);  // replace the value for "B"
 
  // Normal iteration lets you get both the key and its corresponding value:
  var it = m.iterator;
  while (it.next()) {
    console.log(it.key + ": " + it.value);
  }
  // This might output, perhaps in different order:
  // A: 1
  // B: 222
  // C: 3
 
  // To get a collection of the keys, use Map.iteratorKeys:
  var kit = m.iteratorKeys;
  while (kit.next()) {
    console.log(kit.value);
  }
  // This might output, perhaps in different order:
  // A
  // B
  // C
 
  // To get a collection of the values, use Map.iteratorValues:
  var vit = m.iteratorValues;
  while (vit.next()) {
    console.log(vit.value);
  }
  // This might output, perhaps in different order:
  // 1
  // 222
  // 3

當(dāng)需要將集合傳遞給采用Iterator的其他方法時， 通常使用Map.iteratorKeys或Map.iteratorValues。

更多迭代示例

這是司空見慣的遍歷選定部分一第圖：

  for (var it = diagram.selection.iterator; it.next(); ) {
    var part = it.value;  // part is now a Node or a Group or a Link or maybe a simple Part
    if (part instanceof go.Node) { . . . }
    else if (part instanceof go.Link) { . . . }
  }

或者

  diagram.selection.each(function(part) {
    // part is now a Node or a Group or a Link or maybe a simple Part
    if (part instanceof go.Node) { . . . }
    else if (part instanceof go.Link) { . . . }
  });

有時一個需要遍歷節(jié)點 ■在一個圖表：

  for (var it = diagram.nodes; it.next(); ) {
    var n = it.value;  // n is now a Node or a Group
    if (n.category === "Special") { . . . }
  }

您還可以遍歷Node中的端口元素或連接到端口元素的Link：

  for (var pit = node.ports; pit.next(); ) {
    var port = pit.value;  // port is now a GraphObject within the node
    for (var lit = node.findLinksConnected(port.portId); lit.next(); ) {
      var link = lit.value;  // link is now a Link connected with the port
      if (link.data.xyz === 17) { . . . }
    }
  }

或者，也許您需要遍歷Panel的元素：

  for (var it = panel.elements; it.next(); ) {
    var elt = it.value;  // elt is now a GraphObject that is an immediate child of the Panel
    if (elt instanceof go.TextBlock) { . . . }
    else if (elt instanceof go.Panel) { . . . recurse . . . }
  }

如果要查找作為Group直屬成員的Node：

  for (var mit = group.memberParts; mit.next(); ) {
    var part = mit.value;  // part is now a Part within the Group
    if (part instanceof go.Node) { . . . maybe work with part.data . . . }
  }

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

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服。

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼