流程图控件GoJS教程：使用Group类构成一个子图

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

点击下载GoJS最新试用版

组

使用Group类将Node和Link的集合当作单个Node对待。这些节点和链接是该组的成员。它们共同构成一个子图。

子图不是另一个Diagram，因此组的子图没有单独的HTML Div元素。属于组成员的所有Part都与该组属于同一图。成员节点与组外节点之间可以存在链接，组本身与其他节点之间也可以存在链接。成员节点与包含组本身之间甚至可能存在链接。

组也可以折叠和展开，以隐藏或显示成员零件。

可通过Group.memberParts属性获得组的成员部分。相反，如果零件属于一个，则Part。containsGroup属性引用该组。一个零件一次最多可以是一组的成员。您可以设置该属性，以便将该零件添加到组中。但是，您必须确保没有任何组直接或通过其他组间接包含它自己。

因为每个组都是一个Node，所以可以有嵌套的组。尽管节点Node和Link属于包含它们的Group，但是它们不在该组的可视树中-它们的GraphObject.panel为null，并且该组的Panel.elements集合中没有成员部分。任何零件都不能在另一零件的视觉树中。零件通常确实直接属于一个图层。

在GraphLinksModel中，Model.nodeDataArray保存节点数据，每个节点数据可能由Group而不是常规Node表示。您可以通过将isGroup数据属性设置为true来声明它应该是一个组。您可以通过将组的键称为组数据属性值来声明节点数据是组的成员。这是一个包含两个嵌套组以及两个常规节点的组。如果移动组，则其成员部分也会一起移动。如果复制组，则其成员部分也会被复制。如果删除组，则其成员部分也会被删除。如果移动成员节点，则其包含的组会膨胀或收缩以覆盖所有成员占用的区域。

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既可以连接到组也可以连接到普通节点。

这是四个常规节点和一个组节点的简单示例。在此示例中，来自“ Alpha”的链接直接到达“ Beta”节点，但是到“ 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”节点，则可以看到“ Omega”组中的链接是如何出现在该组的中心，并开始于该组的边缘而不是任何成员节点。这与从“ Alpha”到“ Beta”的链接不同。

还请注意，从“ Beta”到“ Gamma”的链接如何有效地归“ Omega”组所有，因为两个节点都属于该组。复制组也会自动复制链接。

本示例未设置以下任何属性： Diagram.nodeTemplate，Diagram.groupTemplate和Diagram.linkTemplate，以演示各种节点数据和链接数据的默认模板。

组模板

这是一个示例，说明如何为节点和组定义模板。节点模板非常简单：椭圆中的一些文本。组模板在几个方面与节点模板不同。

首先，组模板将构建go.Group，而不是go.Node或go.Part。该组可以使用多种面板类型，就像节点可以使用各种面板类型一样。

其次，组模板包括一个占位符对象。该对象在一个组的可视树中最多可以包含一个对象，它获取成员零件边界的并集的大小和位置以及一些填充。无论成员节点放置在何处，使用占位符都会使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”节点时，“ Omega”组会自动调整大小，以使该组上的TextBlock保持在“ RoundedRectangle”形状的下方和右侧。

就像图可以有自己的布局一样，组也可以有自己的Group.layout。在有关SubGraphs的页面中对此进行了讨论。

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

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

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