流程圖控件GoJS教程：驗證方式（上）

---

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

點擊下載GoJS最新試用版

驗證方式

與上一節(jié)中討論的二進制權(quán)限標志相比，某些操作需要更復雜的控件。當用戶嘗試繪制新鏈接或重新連接現(xiàn)有鏈接時，您的應用程序可能希望根據(jù)數(shù)據(jù)限制創(chuàng)建哪些鏈接。當用戶嘗試將節(jié)點添加到組中時，您的應用程序可能想要控制該特定組中的特定節(jié)點是否允許該節(jié)點。當用戶編輯某些文本時，您的應用程序可能希望限制他們輸入的字符串類型。

盡管不是完全“驗證”，但您還可以通過在“ 零件”上設置幾個屬性并自定義DraggingTool來限制用戶拖動（移動或復制）零件的方式。

鏈接驗證

有許多GraphObject屬性可讓您控制用戶可以繪制或重新連接的鏈接。這些屬性適用于每個端口元素，并影響可能與該端口連接的鏈接。

可鏈接的屬性

主要屬性是GraphObject.fromLinkable和GraphObject.toLinkable。如果你沒有一個節(jié)點包含與fromLinkable元素：真實與toLinkable另一個節(jié)點：true，則用戶將不能夠繪制節(jié)點之間的新鏈接。

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

向下滑動綠色橢圓（光標變?yōu)椤爸羔槨保┎⑼蟿右蚤_始繪制新鏈接。請注意，唯一允許的鏈接是那些從“從”節(jié)點到“到”節(jié)點的鏈接。即使在“收件人”節(jié)點上開始鏈接手勢也是如此。

可鏈接屬性的范圍

由于上述示例中的TextBlock沒有聲明為端口（即GraphObject.portId沒有值），因此TextBlock上的鼠標事件不會啟動LinkingTool。這使用戶能夠選擇和移動節(jié)點以及進行許多其他操作。

您當然可以聲明一個面板，使GraphObject.fromLinkable或GraphObject.toLinkable為true。這將導致該面板內(nèi)的所有元素都充當端口的一部分，包括啟動鏈接操作。有時，您需要使整個Node都可鏈接。如果仍然希望用戶能夠選擇并拖動節(jié)點，則需要在節(jié)點內(nèi)使一些易于單擊的元素不可鏈接。您可以通過將GraphObject.fromLinkable和/或GraphObject.toLinkable顯式設置為false來實現(xiàn)。這兩個屬性的默認值為null，這意味著“可鏈接”是從包含面板繼承的。

其他鏈接權(quán)限屬性

僅僅因為已在所需的端口對象上將GraphObject.fromLinkable和GraphObject.toLinkable設置為true，并不意味著您要允許用戶創(chuàng)建從每個此類端口/節(jié)點到每個其他端口/節(jié)點的鏈接。還有其他GraphObject屬性，用于控制“從”和“到”端的鏈接性。

LinkableDuplicates屬性

您之前可能已經(jīng)注意到的一個限制是，用戶無法沿相同方向在同一對節(jié)點之間繪制第二條鏈接。本示例將GraphObject.fromLinkableDuplicates或GraphObject.toLinkableDuplicates設置為true，以便允許節(jié)點之間的此類重復鏈接。

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

現(xiàn)在嘗試在“ From1”和“ To1”之間繪制多個鏈接。您可以看到鏈接如何自動分開。嘗試拖動節(jié)點之一，以查看鏈接路由會發(fā)生什么。當鏈接的Link.curve為Link，Bezier時，也會發(fā)生類似的效果。

LinkableSelfNode屬性

另一個標準限制是用戶無法繪制從節(jié)點到其自身的鏈接。再次消除該限制很容易：只需將GraphObject.fromLinkableSelfNode 和GraphObject.toLinkableSelfNode設置為true。請注意，盡管每個節(jié)點都必須是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);

要繪制自反鏈接，請開始繪制新鏈接，但是當您釋放鼠標按鈕時，請停留在節(jié)點附近。本示例還將“ Duplicates”屬性設置為true，以便您可以繪制多個自反鏈接。

在這些示例中，每個節(jié)點只有一個端口。當一個節(jié)點中有多個端口時，限制實際上適用于每個端口，而不是每個節(jié)點。但是“ LinkableSelfNode”屬性的限制確實涵蓋了整個節(jié)點，因此必須將它們應用于節(jié)點內(nèi)的兩個端口，鏈接才能連接到其自己的節(jié)點。

MaxLinks屬性

最終的鏈接限制屬性控制可以連接到節(jié)點/端口的鏈接數(shù)量。即使GraphObject.toLinkableDuplicates為true，此示例也將GraphObject.toMaxLinks屬性設置為2，以限制可以進入“到”節(jié)點的鏈接數(shù)量。

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

此示例對“來自”節(jié)點的鏈接數(shù)量沒有限制。

如果設置了此屬性，則通常將其設置為1。當然，這取決于應用程序的性質(zhì)。

請注意，GraphObject.toMaxLinks和GraphObject.fromMaxLinks屬性彼此獨立。如果要控制與端口連接的鏈接總數(shù)，不僅要“到”或“從”，還要控制兩個方向，則不能使用這兩個屬性，而必須實現(xiàn)自己的鏈接驗證謂詞，如下所述。

圖形周期

如果要確保用戶創(chuàng)建的圖結(jié)構(gòu)永遠不會有任何鏈接循環(huán)，或者該圖始終是樹形結(jié)構(gòu)，則GoJS使其易于實施。只需設置Diagram.validCycle來圖，CycleNotDirected或圖表，CycleDestinationTree。默認值為Diagram，CycleAll，沒有任何限制-允許各種鏈接周期。

此示例具有允許往返于每個節(jié)點的鏈接的節(jié)點。但是，對Diagram.validCycle的分配將阻止用戶繪制到任何節(jié)點的第二條傳入鏈接，并且還確保用戶在圖中不繪制任何循環(huán)。

  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正版授權(quán)的朋友可以咨詢慧都官方客服

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