流程图控件GoJS教程：没有占位符的组的设置方法-控件新闻-慧都网

流程图控件GoJS教程：没有占位符的组的设置方法

翻译|使用教程|编辑：吴园园|2020-01-02 11:14:58.783|阅读 363 次

概述：尽管在组内使用占位符很常见，但这不是必需的。例如，使用Shape代替占位符可实现一些功能，例如使组保持固定的大小，而与其成员节点的大小和位置无关，甚至根本没有成员节点。如果需要该功能，还可以允许用户调整“区域”的大小。

相关链接：

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

固定大小的组

在组中不使用占位符意味着您必须保持组的大小和位置，因为它不能取决于其成员节点的大小和位置。在这些示例中，我们将显式设置和/或绑定节点（包括组）的Part.location。替换组模板中占位符的Shape也应获取其GraphObject.desiredSize设置或绑定。

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

需要注意的是移动的“测试版”或“伽马”节点并不会改变大小或“欧米茄”组的位置。但是，移动或复制或删除组时，操作中将包括那些成员节点。

可以控制用户可以将成员节点拖动到何处。例如，“ 泳道”示例演示了一个自定义的Part.dragComputation函数，该函数将成员节点的运动限制在其包含组内。

可调整大小的组

您可以使主要形状由用户调整大小。（当前，组不可旋转。）

此示例还使Part.location和GraphObject.desiredSize数据绑定TwoWay，以便当用户移动组或调整其主要形状的大小时，模型中的数据将自动更新。

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

不是组的容器

也可以控制用户如何调整组的大小。例如，“ 泳道”示例演示了一个自定义的“ 调整大小工具”，该工具可以限制每个泳道可以走多小。它还演示了只有两个调整大小手柄的自定义装饰。

您不必使用Groups作为组织Part集合的唯一机制。例如，“ 图层带”示例演示了如何自定义某些Layout来自动维护背景中特殊零件的位置和大小，这些零件似乎围绕着属于每个布局层的节点。

不使用Group也意味着可以避免Groups固有的某些限制，例如每个Part最多可以具有一个Part。containsGroup的限制。将共享国示例演示如何可以使它看起来不止一个“组”可以包含一个节点。但是，这需要一些其他的自定义Tool和自定义Layout，或者始终显式设置/绑定每个节点和“组”的位置和大小。

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

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

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