流程圖控件GoJS教程：驗(yàn)證方式（下）

---

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

點(diǎn)擊下載GoJS最新試用版

常規(guī)鏈接驗(yàn)證

在某些情況下，您的應(yīng)用程序的語(yǔ)義將導(dǎo)致有效鏈接目標(biāo)集以某種方式取決于節(jié)點(diǎn)數(shù)據(jù)（即，鏈接從其開(kāi)始的節(jié)點(diǎn)和端口以及可能的目標(biāo)節(jié)點(diǎn)/端口）只能使用代碼來(lái)實(shí)現(xiàn)：謂詞函數(shù)。

您可以通過(guò)設(shè)置LinkingBaseTool.linkValidation或Node.linkValidation來(lái)實(shí)現(xiàn)此類(lèi)特定于域的驗(yàn)證。這些謂詞（如果提供）將為鏈接工具考慮的每對(duì)端口調(diào)用。如果謂詞返回false，則可能無(wú)法建立鏈接。在LinkingTool或RelinkingTool上設(shè)置屬性會(huì)使謂詞應(yīng)用于所有鏈接操作，而在Node上設(shè)置屬性僅適用于涉及該節(jié)點(diǎn)的鏈接操作。根據(jù)上述屬性，只有在所有標(biāo)準(zhǔn)鏈接檢查均通過(guò)的情況下，才調(diào)用謂詞。

在此示例中，存在三種不同顏色的節(jié)點(diǎn)。該LinkingTool和RelinkingTool自定義為使用的功能，sameColor以確保鏈接只有相同顏色的連接節(jié)點(diǎn)。鼠標(biāo)向下拖動(dòng)并在橢圓上拖動(dòng)（光標(biāo)變?yōu)椤爸羔槨保_(kāi)始繪制新鏈接。您將看到，唯一允許的鏈接目標(biāo)是相同顏色的節(jié)點(diǎn)，這些節(jié)點(diǎn)尚未從同一節(jié)點(diǎn)進(jìn)行鏈接。

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

  diagram.linkTemplate =
    $(go.Link,
      { curve: go.Link.Bezier, relinkableFrom: true, relinkableTo: true },
      $(go.Shape, { strokeWidth: 2 },
        new go.Binding("stroke", "fromNode", function(n) { return n.data.color; })
            .ofObject()),
      $(go.Shape, { toArrow: "Standard", stroke: null},
        new go.Binding("fill", "fromNode", function(n) { return n.data.color; })
            .ofObject())
    );

  // this predicate is true if both nodes have the same color
  function sameColor(fromnode, fromport, tonode, toport) {
    return fromnode.data.color === tonode.data.color;
    // this could look at the fromport.fill and toport.fill instead,
    // assuming that the ports are Shapes, which they are because portID was set on them,
    // and that there is a data Binding on the Shape.fill
  }

  // only allow new links between ports of the same color
  diagram.toolManager.linkingTool.linkValidation = sameColor;

  // only allow reconnecting an existing link to a port of the same color
  diagram.toolManager.relinkingTool.linkValidation = sameColor;

  var nodeDataArray = [
    { key: "Red1", color: "red" },
    { key: "Blue1", color: "blue" },
    { key: "Green1", color: "green" },
    { key: "Green2", color: "green" },
    { key: "Red2", color: "red" },
    { key: "Blue2", color: "blue" },
    { key: "Red3", color: "red" },
    { key: "Green3", color: "green" },
    { key: "Blue3", color: "blue" }
  ];
  var linkDataArray = [
    // initially no links
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

為了強(qiáng)調(diào)顏色限制，鏈接的顏色綁定到“ from”節(jié)點(diǎn)數(shù)據(jù)。

限制與節(jié)點(diǎn)連接的鏈接總數(shù)

可以通過(guò)設(shè)置GraphObject.toMaxLinks來(lái)限制進(jìn)入端口的鏈接數(shù)。同樣，可以通過(guò)設(shè)置GraphObject.fromMaxLinks來(lái)限制從端口出來(lái)的鏈接數(shù)。但是，如果要限制與端口連接的鏈接總數(shù)，而不管它們是進(jìn)入端口還是離開(kāi)端口，該怎么辦？這樣的約束只能通過(guò)鏈接驗(yàn)證謂詞來(lái)實(shí)現(xiàn)。

當(dāng)要限制任一方向上與每個(gè)端口連接的鏈路總數(shù)時(shí)，可以使用此Node.linkValidation謂詞：

$(go.Node, . . .,
    {
      linkValidation: function(fromnode, fromport, tonode, toport) {
        // total number of links connecting with a port is limited to 1:
        return fromnode.findLinksConnected(fromport.portId).count +
               tonode.findLinksConnected(toport.portId).count < 1; } }, . . .

當(dāng)想要限制任一方向的鏈接總數(shù)，并為一個(gè)節(jié)點(diǎn)的所有端口連接時(shí)，可以使用此Node.linkValidation謂詞：

  $(go.Node, . . .,
    {
      linkValidation: function(fromnode, fromport, tonode, toport) {
        // total number of links connecting with all ports of a node is limited to 1:
        return fromnode.linksConnected.count + tonode.linksConnected.count < 1; } }, . . .

分組驗(yàn)證

當(dāng)要限制用戶可以添加到特定組的節(jié)點(diǎn)的類(lèi)型時(shí)，可以將謂詞實(shí)現(xiàn)為CommandHandler.memberValidation或Group.memberValidation屬性。在CommandHandler上設(shè)置屬性會(huì)使謂詞應(yīng)用于所有組，而在Group上設(shè)置屬性僅適用于該組。

在此示例中，samePrefix謂詞用于確定是否可以將節(jié)點(diǎn)放入組中。嘗試將左側(cè)的簡(jiǎn)單文本節(jié)點(diǎn)拖到右側(cè)的任一組中。僅當(dāng)將節(jié)點(diǎn)放到高亮“綠色”的組上時(shí)，該節(jié)點(diǎn)才被添加為該組的成員。您可以通過(guò)移動(dòng)組以查看文本節(jié)點(diǎn)是否也移動(dòng)來(lái)進(jìn)行驗(yàn)證。

  // this predicate is true if both node data keys start with the same letter
  function samePrefix(group, node) {
    if (group === null) return true;  // when maybe dropping a node in the background
    if (node instanceof go.Group) return false;  // don't add Groups to Groups
    return group.data.key.charAt(0) === node.data.key.charAt(0);
  };

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

  diagram.groupTemplate =
    $(go.Group, "Vertical",
      {
        // only allow those simple nodes that have the same data key prefix:
        memberValidation: samePrefix,
        // don't need to define handlers on member Nodes and Links
        handlesDragDropForMembers: true,
        // support highlighting of Groups when allowing a drop to add a member
        mouseDragEnter: function(e, grp, prev) {
          // this will call samePrefix; it is true if any node has the same key prefix
          if (grp.canAddMembers(grp.diagram.selection)) {
            var shape = grp.findObject("SHAPE");
            if (shape) shape.fill = "green";
            grp.diagram.currentCursor = "";
          } else {
            grp.diagram.currentCursor = "not-allowed";
          }
        },
        mouseDragLeave: function(e, grp, next) {
          var shape = grp.findObject("SHAPE");
          if (shape) shape.fill = "rgba(128,128,128,0.33)";
          grp.diagram.currentCursor = "";
        },
        // actually add permitted new members when a drop occurs
        mouseDrop: function(e, grp) {
          if (grp.canAddMembers(grp.diagram.selection)) {
            // this will only add nodes with the same key prefix
            grp.addMembers(grp.diagram.selection, true);
          } else {  // and otherwise cancel the drop
            grp.diagram.currentTool.doCancel();
          }
        }
      },
      // make sure all Groups are behind all regular Nodes
      { layerName: "Background" },
      new go.Binding("location", "loc", go.Point.parse),
      $(go.TextBlock,
        { alignment: go.Spot.Left, font: "Bold 12pt Sans-Serif" },
        new go.Binding("text", "key")),
      $(go.Shape,
        { name: "SHAPE", width: 100, height: 100,
          fill: "rgba(128,128,128,0.33)" })
    );

  diagram.mouseDrop = function(e) {
    // dropping in diagram background removes nodes from any group
    diagram.commandHandler.addTopLevelParts(diagram.selection, true);
  };

  var nodeDataArray = [
    { key: "A group", isGroup: true, loc: "100 10" },
    { key: "B group", isGroup: true, loc: "100 140" },
    { key: "A1", loc: "10 30" },  // can be added to "A" group
    { key: "A2", loc: "10 60" },
    { key: "B1", loc: "10 90" },  // can be added to "B" group
    { key: "B2", loc: "10 120" },
    { key: "C1", loc: "10 150" }  // cannot be added to either group
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, []);

這些組是固定大小的組-它們不使用Placeholder。因此，當(dāng)將節(jié)點(diǎn)放入其中時(shí)，該組不會(huì)自動(dòng)調(diào)整自身大小以包圍其成員節(jié)點(diǎn)。但這在將節(jié)點(diǎn)拖出組時(shí)也是有好處的。

拖動(dòng)已經(jīng)是組成員的節(jié)點(diǎn)時(shí)，也會(huì)調(diào)用驗(yàn)證謂詞。您可以看到將節(jié)點(diǎn)放入其現(xiàn)有的包含組是如何可接受的。當(dāng)將其拖動(dòng)到組的外部到圖的背景中時(shí)，謂詞將以null作為“組”參數(shù)被調(diào)用。

在此示例中，將節(jié)點(diǎn)放到圖的背景中而不是放到一個(gè)組中總是可以的。如果要禁止在后臺(tái)拖放，可以myDiagram.currentTool.doCancel() 在Diagram.mouseDrop事件處理程序中調(diào)用。如果要在后臺(tái)拖動(dòng)過(guò)程中顯示反饋，則可以實(shí)現(xiàn)一個(gè)set 的Diagram.mouseDragOver事件處理程序 myDiagram.currentCursor = "not-allowed"。當(dāng)在“組”中拖動(dòng)時(shí)，此行為將類(lèi)似于上面實(shí)現(xiàn)的行為。

文字編輯驗(yàn)證

您還可以限制用戶在對(duì)TextBlock進(jìn)行就地文本編輯時(shí)輸入的文本。首先，要完全啟用任何編輯，您需要將TextBlock.editable設(shè)置為true。零件中可能有許多TextBlock，但是您可能希望將文本編輯限制為特定的TextBlock。

通常，用戶可以輸入什么文字沒(méi)有限制。如果要提供斷言以在用戶完成編輯時(shí)批準(zhǔn)輸入，請(qǐng)設(shè)置TextEditingTool.textValidation或TextBlock.textValidation屬性。在TextEditingTool上設(shè)置屬性會(huì)使謂詞應(yīng)用于所有TextBlock，而在TextBlock上設(shè)置屬性僅應(yīng)用于該文本對(duì)象。

  // this predicate is true if the new string has at least three characters
  // and has a vowel in it
  function okName(textblock, oldstr, newstr) {
    return newstr.length >= 3 && /[aeiouy]/i.test(newstr);
  };

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, { fill: "lightyellow" }),
      $(go.Panel, "Vertical",
        { margin: 3 },
        $(go.TextBlock,
          { editable: true },  // no validation predicate
          new go.Binding("text", "text1")),
        $(go.TextBlock,
          { editable: true,
            isMultiline: false,  // don't allow embedded newlines
            textValidation: okName },  // new string must be an OK name
          new go.Binding("text", "text2"))
      )
    );

  var nodeDataArray = [
    { key: 1, text1: "Hello", text2: "Dolly!" },
    { key: 2, text1: "Goodbye", text2: "Mr. Chips" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, []);

請(qǐng)注意，如何編輯頂部的TextBlock如何接受不帶任何元音的文本，但是底部的TextBlock不接受它，而是使文本編輯器處于打開(kāi)狀態(tài)。

如果要在文本編輯完成后執(zhí)行代碼，請(qǐng)通過(guò)調(diào)用Diagram.addDiagramListener來(lái)實(shí)現(xiàn)“ TextEdited” DiagramEvent偵聽(tīng)器。

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

想要購(gòu)買(mǎi)GoJS正版授權(quán)的朋友可以

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