流程圖控件GoJS教程：驗證方式（上）
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
驗證方式
與上一節中討論的二進制權限標志相比，某些操作需要更復雜的控件。當用戶嘗試繪制新鏈接或重新連接現有鏈接時，您的應用程序可能希望根據數據限制創建哪些鏈接。當用戶嘗試將節點添加到組中時，您的應用程序可能想要控制該特定組中的特定節點是否允許該節點。當用戶編輯某些文本時，您的應用程序可能希望限制他們輸入的字符串類型。
盡管不是完全“驗證”，但您還可以通過在“ 零件”上設置幾個屬性并自定義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正版授權的朋友可以
有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線