logo GoJS教程2020 我也要发布文档

流程图控件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);

流程图控件GoJS教程:验证方式


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

可链接属性的范围

由于上述示例中的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正版授权的朋友可以咨询慧都官方客服

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