流程圖控件GoJS教程：使用Group類構成一個子圖

---

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

點擊下載GoJS最新試用版

組

使用Group類將Node和Link的集合當作單個Node對待。這些節(jié)點和鏈接是該組的成員。它們共同構成一個子圖。

子圖不是另一個Diagram，因此組的子圖沒有單獨的HTML Div元素。屬于組成員的所有Part都與該組屬于同一圖。成員節(jié)點與組外節(jié)點之間可以存在鏈接，組本身與其他節(jié)點之間也可以存在鏈接。成員節(jié)點與包含組本身之間甚至可能存在鏈接。

組也可以折疊和展開，以隱藏或顯示成員零件。

可通過Group.memberParts屬性獲得組的成員部分。相反，如果零件屬于一個，則Part。containsGroup屬性引用該組。一個零件一次最多可以是一組的成員。您可以設置該屬性，以便將該零件添加到組中。但是，您必須確保沒有任何組直接或通過其他組間接包含它自己。

因為每個組都是一個Node，所以可以有嵌套的組。盡管節(jié)點Node和Link屬于包含它們的Group，但是它們不在該組的可視樹中-它們的GraphObject.panel為null，并且該組的Panel.elements集合中沒有成員部分。任何零件都不能在另一零件的視覺樹中。零件通常確實直接屬于一個圖層。

簡單組

在GraphLinksModel中，Model.nodeDataArray保存節(jié)點數(shù)據(jù)，每個節(jié)點數(shù)據(jù)可能由Group而不是常規(guī)Node表示。您可以通過將isGroup數(shù)據(jù)屬性設置為true來聲明它應該是一個組。您可以通過將組的鍵稱為組數(shù)據(jù)屬性值來聲明節(jié)點數(shù)據(jù)是組的成員。這是一個包含兩個嵌套組以及兩個常規(guī)節(jié)點的組。如果移動組，則其成員部分也會一起移動。如果復制組，則其成員部分也會被復制。如果刪除組，則其成員部分也會被刪除。如果移動成員節(jié)點，則其包含的組會膨脹或收縮以覆蓋所有成員占用的區(qū)域。

diagram.model.nodeDataArray = [

  { key: "Alpha", isGroup: true },

  { key: "Beta", group: "Alpha" },

  { key: "Gamma", group: "Alpha", isGroup: true },

  { key: "Delta", group: "Gamma" },

  { key: "Epsilon", group: "Gamma" },

  { key: "Zeta", group: "Alpha" },

  { key: "Eta", group: "Alpha", isGroup: true},

  { key: "Theta", group: "Eta" }

 ];

組和鏈接

因為Group是Node，所以Link既可以連接到組也可以連接到普通節(jié)點。

這是四個常規(guī)節(jié)點和一個組節(jié)點的簡單示例。在此示例中，來自“ Alpha”的鏈接直接到達“ Beta”節(jié)點，但是到“ Delta”的鏈接實際上來自“ Omega”組，而不是來自該組的任何特定成員。

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta", group: "Omega" },
    { key: "Gamma", group: "Omega" },
    { key: "Omega", isGroup: true },
    { key: "Delta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
    { from: "Omega", to: "Delta" }  // from the Group to a Node
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

如果在周圍拖動“ Delta”節(jié)點，則可以看到“ Omega”組中的鏈接是如何出現(xiàn)在該組的中心，并開始于該組的邊緣而不是任何成員節(jié)點。這與從“ Alpha”到“ Beta”的鏈接不同。

還請注意，從“ Beta”到“ Gamma”的鏈接如何有效地歸“ Omega”組所有，因為兩個節(jié)點都屬于該組。復制組也會自動復制鏈接。

本示例未設置以下任何屬性： Diagram.nodeTemplate，Diagram.groupTemplate和Diagram.linkTemplate，以演示各種節(jié)點數(shù)據(jù)和鏈接數(shù)據(jù)的默認模板。

組模板

這是一個示例，說明如何為節(jié)點和組定義模板。節(jié)點模板非常簡單：橢圓中的一些文本。組模板在幾個方面與節(jié)點模板不同。

首先，組模板將構建go.Group，而不是go.Node或go.Part。該組可以使用多種面板類型，就像節(jié)點可以使用各種面板類型一樣。

其次，組模板包括一個占位符對象。該對象在一個組的可視樹中最多可以包含一個對象，它獲取成員零件邊界的并集的大小和位置以及一些填充。無論成員節(jié)點放置在何處，使用占位符都會使Group圍繞組成員的集合。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse", { fill: "white" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );

  diagram.groupTemplate =
    $(go.Group, "Vertical",
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",  // surrounds the Placeholder
          { parameter1: 14,
            fill: "rgba(128,128,128,0.33)" }),
        $(go.Placeholder,    // represents the area of all member parts,
          { padding: 5})  // with some extra padding around them
      ),
      $(go.TextBlock,         // group title
        { alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta", group: "Omega" },
    { key: "Gamma", group: "Omega" },
    { key: "Omega", isGroup: true },
    { key: "Delta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
    { from: "Omega", to: "Delta" }  // from the Group to a Node
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

請注意，當您移動“ Beta”或“ Gamma”節(jié)點時，“ Omega”組會自動調(diào)整大小，以使該組上的TextBlock保持在“ RoundedRectangle”形狀的下方和右側(cè)。

就像圖可以有自己的布局一樣，組也可以有自己的Group.layout。在有關SubGraphs的頁面中對此進行了討論。

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

想要購買GoJS正版授權的朋友可以咨詢慧都官方客服

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