流程圖控件GoJS教程：沒有占位符的組的設(shè)置方法

---

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

點擊下載GoJS最新試用版

固定大小的組

在組中 不使用占位符意味著您必須保持組的大小和位置，因為它不能取決于其成員節(jié)點的大小和位置。在這些示例中，我們將顯式設(shè)置和/或綁定節(jié)點（包括組）的Part.location。替換組模板中占位符的Shape也應(yīng)獲取其GraphObject.desiredSize設(shè)置或綁定。

 diagram.nodeTemplate =
    $(go.Node,
      new go.Binding("location", "loc", go.Point.parse),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );

  diagram.groupTemplate =
    $(go.Group, "Vertical",
      { selectionObjectName: "PH",
        locationObjectName: "PH" },
      new go.Binding("location", "loc", go.Point.parse),
      $(go.TextBlock,  // group title
        { font: "Bold 12pt Sans-Serif" },
        new go.Binding("text", "key")),
      $(go.Shape,  // using a Shape instead of a Placeholder
        { name: "PH",
          fill: "lightyellow" },
        new go.Binding("desiredSize", "size", go.Size.parse))
    );

  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", group: "Omega", loc: "75 75" },
    { key: "Gamma", group: "Omega", loc: "125 75" },
    { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
    { key: "Delta", loc: "200 0" }
  ];
  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);
  diagram.select(diagram.findNodeForKey("Omega"));

需要注意的是移動的“測試版”或“伽馬”節(jié)點并不會改變大小或“歐米茄”組的位置。但是，移動或復(fù)制或刪除組時，操作中將包括那些成員節(jié)點。

可以控制用戶可以將成員節(jié)點拖動到何處。例如，“ 泳道”示例演示了一個自定義的Part.dragComputation函數(shù)，該函數(shù)將成員節(jié)點的運動限制在其包含組內(nèi)。

可調(diào)整大小的組

您可以使主要形狀由用戶調(diào)整大小。（當前，組不可旋轉(zhuǎn)。）

此示例還使Part.location和GraphObject.desiredSize數(shù)據(jù)綁定TwoWay，以便當用戶移動組或調(diào)整其主要形狀的大小時，模型中的數(shù)據(jù)將自動更新。

  diagram.nodeTemplate =
    $(go.Node,
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );

  diagram.groupTemplate =
    $(go.Group, "Vertical",
      { selectionObjectName: "PH",
        locationObjectName: "PH",
        resizable: true,
        resizeObjectName: "PH" },
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.TextBlock,  // group title
        { font: "Bold 12pt Sans-Serif" },
        new go.Binding("text", "key")),
      $(go.Shape,  // using a Shape instead of a Placeholder
        { name: "PH",
          fill: "lightyellow" },
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify))
    );

  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" },
    { key: "Beta", group: "Omega", loc: "75 75" },
    { key: "Gamma", group: "Omega", loc: "125 75" },
    { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
    { key: "Delta", loc: "200 0" }
  ];
  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);
  diagram.select(diagram.findNodeForKey("Omega"));

不是組的容器

也可以控制用戶如何調(diào)整組的大小。例如，“ 泳道”示例演示了一個自定義的“ 調(diào)整大小工具”，該工具可以限制每個泳道可以走多小。它還演示了只有兩個調(diào)整大小手柄的自定義裝飾。

您不必使用Groups作為組織Part集合的唯一機制。例如，“ 圖層帶”示例演示了如何自定義某些Layout來自動維護背景中特殊零件的位置和大小，這些零件似乎圍繞著屬于每個布局層的節(jié)點。

不使用Group也意味著可以避免Groups固有的某些限制，例如每個Part最多可以具有一個Part。containsGroup的限制。將共享國示例演示如何可以使它看起來不止一個“組”可以包含一個節(jié)點。但是，這需要一些其他的自定義Tool和自定義Layout，或者始終顯式設(shè)置/綁定每個節(jié)點和“組”的位置和大小。

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

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

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