流程图控件GoJS教程：验证方式（上）

---

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

点击下载GoJS最新试用版

验证方式

与上一节中讨论的二进制权限标志相比，某些操作需要更复杂的控件。当用户尝试绘制新链接或重新连接现有链接时，您的应用程序可能希望根据数据限制创建哪些链接。当用户尝试将节点添加到组中时，您的应用程序可能想要控制该特定组中的特定节点是否允许该节点。当用户编辑某些文本时，您的应用程序可能希望限制他们输入的字符串类型。

尽管不是完全“验证”，但您还可以通过在“ 零件”上设置几个属性并自定义DraggingTool来限制用户拖动（移动或复制）零件的方式。

链接验证

有许多GraphObject属性可让您控制用户可以绘制或重新连接的链接。这些属性适用于每个端口元素，并影响可能与该端口连接的链接。

可链接的属性

主要属性是GraphObject.fromLinkable和GraphObject.toLinkable。如果你没有一个节点包含与fromLinkable元素：真实与toLinkable另一个节点：true，则用户将不能够绘制节点之间的新链接。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "Ellipse",
        { fill: "green", portId: "", cursor: "pointer" },
        new go.Binding("fromLinkable", "from"),
        new go.Binding("toLinkable", "to")),
      $(go.TextBlock,
        { stroke: "white", margin: 3 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "From1", loc: "0 0", from: true },
    { key: "From2", loc: "0 100", from: true },
    { key: "To1", loc: "150 0", to: true },
    { key: "To2", loc: "150 100", to: true }
  ];
  var linkDataArray = [
    // initially no links
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

向下滑动绿色椭圆（光标变为“指针”）并拖动以开始绘制新链接。请注意，唯一允许的链接是那些从“从”节点到“到”节点的链接。即使在“收件人”节点上开始链接手势也是如此。

可链接属性的范围

由于上述示例中的TextBlock没有声明为端口（即GraphObject.portId没有值），因此TextBlock上的鼠标事件不会启动LinkingTool。这使用户能够选择和移动节点以及进行许多其他操作。

您当然可以声明一个面板，使GraphObject.fromLinkable或GraphObject.toLinkable为true。这将导致该面板内的所有元素都充当端口的一部分，包括启动链接操作。有时，您需要使整个Node都可链接。如果仍然希望用户能够选择并拖动节点，则需要在节点内使一些易于单击的元素不可链接。您可以通过将GraphObject.fromLinkable和/或GraphObject.toLinkable显式设置为false来实现。这两个属性的默认值为null，这意味着“可链接”是从包含面板继承的。

其他链接权限属性

仅仅因为已在所需的端口对象上将GraphObject.fromLinkable和GraphObject.toLinkable设置为true，并不意味着您要允许用户创建从每个此类端口/节点到每个其他端口/节点的链接。还有其他GraphObject属性，用于控制“从”和“到”端的链接性。

LinkableDuplicates属性

您之前可能已经注意到的一个限制是，用户无法沿相同方向在同一对节点之间绘制第二条链接。本示例将GraphObject.fromLinkableDuplicates或GraphObject.toLinkableDuplicates设置为true，以便允许节点之间的此类重复链接。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "Ellipse",
        { fill: "green", portId: "", cursor: "pointer",
          fromLinkableDuplicates: true, toLinkableDuplicates: true },
        new go.Binding("fromLinkable", "from"),
        new go.Binding("toLinkable", "to")),
      $(go.TextBlock,
        { stroke: "white", margin: 3 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "From1", loc: "0 0", from: true },
    { key: "From2", loc: "0 100", from: true },
    { key: "To1", loc: "150 0", to: true },
    { key: "To2", loc: "150 100", to: true }
  ];
  var linkDataArray = [
    // initially no links
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

现在尝试在“ From1”和“ To1”之间绘制多个链接。您可以看到链接如何自动分开。尝试拖动节点之一，以查看链接路由会发生什么。当链接的Link.curve为Link，Bezier时，也会发生类似的效果。

LinkableSelfNode属性

另一个标准限制是用户无法绘制从节点到其自身的链接。再次消除该限制很容易：只需将GraphObject.fromLinkableSelfNode 和GraphObject.toLinkableSelfNode设置为true。请注意，尽管每个节点都必须是GraphObject.fromLinkable和GraphObject.toLinkable。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "Ellipse",
        { fill: "green", portId: "", cursor: "pointer",
          fromLinkable: true, toLinkable: true,
          fromLinkableDuplicates: true, toLinkableDuplicates: true,
          fromLinkableSelfNode: true, toLinkableSelfNode: true }),
      $(go.TextBlock,
        { stroke: "white", margin: 3 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Node1", loc: "0 0" },
    { key: "Node2", loc: "150 50" }
  ];
  var linkDataArray = [
    // initially no links
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

要绘制自反链接，请开始绘制新链接，但是当您释放鼠标按钮时，请停留在节点附近。本示例还将“ Duplicates”属性设置为true，以便您可以绘制多个自反链接。

在这些示例中，每个节点只有一个端口。当一个节点中有多个端口时，限制实际上适用于每个端口，而不是每个节点。但是“ LinkableSelfNode”属性的限制确实涵盖了整个节点，因此必须将它们应用于节点内的两个端口，链接才能连接到其自己的节点。

MaxLinks属性

最终的链接限制属性控制可以连接到节点/端口的链接数量。即使GraphObject.toLinkableDuplicates为true，此示例也将GraphObject.toMaxLinks属性设置为2，以限制可以进入“到”节点的链接数量。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "Ellipse",
        { fill: "green", portId: "", cursor: "pointer",
          fromLinkableDuplicates: true, toLinkableDuplicates: true,
          toMaxLinks: 2 },  // at most TWO links can come into this node
        new go.Binding("fromLinkable", "from"),
        new go.Binding("toLinkable", "to")),
      $(go.TextBlock,
        { stroke: "white", margin: 3 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "From1", loc: "0 0", from: true },
    { key: "From2", loc: "0 100", from: true },
    { key: "To1", loc: "150 0", to: true },
    { key: "To2", loc: "150 100", to: true }
  ];
  var linkDataArray = [
    // initially no links
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

此示例对“来自”节点的链接数量没有限制。

如果设置了此属性，则通常将其设置为1。当然，这取决于应用程序的性质。

请注意，GraphObject.toMaxLinks和GraphObject.fromMaxLinks属性彼此独立。如果要控制与端口连接的链接总数，不仅要“到”或“从”，还要控制两个方向，则不能使用这两个属性，而必须实现自己的链接验证谓词，如下所述。

图形周期

如果要确保用户创建的图结构永远不会有任何链接循环，或者该图始终是树形结构，则GoJS使其易于实施。只需设置Diagram.validCycle来图，CycleNotDirected或图表，CycleDestinationTree。默认值为Diagram，CycleAll，没有任何限制-允许各种链接周期。

此示例具有允许往返于每个节点的链接的节点。但是，对Diagram.validCycle的分配将阻止用户绘制到任何节点的第二条传入链接，并且还确保用户在图中不绘制任何循环。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse",
        { fill: "green", portId: "", cursor: "pointer",
          fromLinkable: true, toLinkable: true }),
      $(go.TextBlock,
        { stroke: "white", margin: 3 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Node1" }, { key: "Node2" }, { key: "Node3" },
    { key: "Node4" }, { key: "Node5" }, { key: "Node6" },
    { key: "Node7" }, { key: "Node8" }, { key: "Node9" }
  ];
  var linkDataArray = [
    // initially no links
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

  // only allow links that maintain tree-structure
  diagram.validCycle = go.Diagram.CycleDestinationTree;

当您绘制更多链接时，您会看到潜在的链接目标集如何变得越来越小。

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

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

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