流程圖控件GoJS教程：節點中的端口
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
GoJS現已更新至最新版本2.1發布，添加了動畫功能，修復了一些bug，增強用戶體驗，趕快下載試試吧~
節點中的端口
盡管您可以控制鏈接在節點上的連接位置（在特定位置，沿著一個或多個側面或在與邊緣的相交處），但是有時您希望在鏈接上使用不同的邏輯和圖形位置應該連接。鏈接可以連接的元素稱為 端口。節點中可以有任意數量的端口。默認情況下，只有一個端口，即整個節點，這導致將整個節點用作端口的效果，如您在所有前面的示例中所看到的。
要聲明Node中的特定元素是端口，請將GraphObject.portId屬性設置為字符串。請注意，與端口或鏈接相關的屬性可以應用于節點的可視樹中的任何元素，這就是為什么它們是GraphObject而不是Node的屬性的原因。
類似于端口的GraphObjects只能位于Node或Group中，而不能位于Link或Adornment或簡單Part中。因此，沒有理由嘗試在Link中的任何對象上設置GraphObject.portId。
單端口
在許多情況下，您想考慮與整個節點在邏輯上相關的鏈接，但是您不希望鏈接到整個節點。在這種情況下，每個節點只有一個端口，但是您不希望整個節點都充當一個端口。
例如，考慮當整個節點以一種通用方式充當端口時，鏈路如何連接到節點。該GraphObject.fromSpot和GraphObject.toSpot是在雙方的中段。因為整個節點的高度都包含文本標簽，所以邊的中間不是“圖標”的中間，在這種情況下，該“圖標”是一個圓。
diagram.nodeTemplate =
$(go.Node, "Vertical",
{ fromSpot: go.Spot.Right, toSpot: go.Spot.Left }, // port properties on the node
$(go.Shape, "Ellipse",
{ width: 30, height: 30, fill: "green" }),
$(go.TextBlock,
{ font: "20px sans-serif" },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
這種外觀看起來或行為不正確。確實，我們希望鏈接連接到圓形Shape。
如果要讓特定元素充當端口而不是整個節點，則只需將其GraphObject.portId設置為空字符串即可。空字符串是默認端口的名稱。
在此示例中，我們在圓形上設置GraphObject.portId。請注意，我們也將其他與端口相關的屬性（例如端口斑點）移到了該對象。
diagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.Shape, "Ellipse",
{ width: 30, height: 30, fill: "green",
portId: "", // now the Shape is the port, not the whole Node
fromSpot: go.Spot.Right, // port properties go on the port!
toSpot: go.Spot.Left
}),
$(go.TextBlock,
{ font: "20px sans-serif" },
new go.Binding("text", "key"))
);
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" }
];
var linkDataArray = [
{ from: "Alpha", to: "Beta" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
注意鏈接如何通過忽略文本標簽很好地連接圓形。
一般端口
在節點中需要多個端口的圖表中也很常見。端口數量甚至可能動態變化。
為了使鏈接數據對象能夠區分鏈接應該連接到哪個端口，GraphLinksModel支持兩個附加的數據屬性，這些屬性標識鏈接兩端節點中端口的名稱。 GraphLinksModel.getToKeyForLinkData標識要連接的節點； GraphLinksModel.getToPortIdForLinkData標識節點內的端口。同樣，GraphLinksModel.getFromKeyForLinkData和GraphLinksModel.getFromPortIdForLinkData標識節點及其端口。
通常，GraphLinksModel假定不需要識別鏈接數據上的端口信息。如果要在鏈接數據上支持端口標識符，則需要將GraphLinksModel.linkToPortIdProperty ;和GraphLinksModel.linkFromPortIdProperty設置為鏈接數據屬性的名稱。如果未設置這些屬性，則所有端口標識符都假定為空字符串，這是節點的一個默認端口的名稱。
如果已將任何元素上的GraphObject.portId設置或綁定為非空字符串，則需要使用GraphLinksModel并將GraphLinksModel.linkToPortIdProperty 和GraphLinksModel.linkFromPortIdProperty設置為鏈接數據上兩個屬性的名稱，或者將需要對鏈接模板中的portId名稱進行硬編碼（即Link.fromPortId和Link.toPortId），以便用戶能夠與這些端口鏈接。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle", { fill: "lightgray" }),
$(go.Panel, "Table",
$(go.RowColumnDefinition,
{ column: 0, alignment: go.Spot.Left}),
$(go.RowColumnDefinition,
{ column: 2, alignment: go.Spot.Right }),
$(go.TextBlock, // the node title
{ column: 0, row: 0, columnSpan: 3, alignment: go.Spot.Center,
font: "bold 10pt sans-serif", margin: new go.Margin(4, 2) },
new go.Binding("text", "key")),
$(go.Panel, "Horizontal",
{ column: 0, row: 1 },
$(go.Shape, // the "A" port
{ width: 6, height: 6, portId: "A", toSpot: go.Spot.Left }),
$(go.TextBlock, "A") // "A" port label
),
$(go.Panel, "Horizontal",
{ column: 0, row: 2 },
$(go.Shape, // the "B" port
{ width: 6, height: 6, portId: "B", toSpot: go.Spot.Left }),
$(go.TextBlock, "B") // "B" port label
),
$(go.Panel, "Horizontal",
{ column: 2, row: 1, rowSpan: 2 },
$(go.TextBlock, "Out"), // "Out" port label
$(go.Shape, // the "Out" port
{ width: 6, height: 6, portId: "Out", fromSpot: go.Spot.Right })
)
)
);
diagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 3 },
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
diagram.layout = $(go.LayeredDigraphLayout, { columnSpacing: 10 });
diagram.model =
$(go.GraphLinksModel,
{ linkFromPortIdProperty: "fromPort", // required information:
linkToPortIdProperty: "toPort", // identifies data property names
nodeDataArray: [
{ key: "Add1" },
{ key: "Add2" },
{ key: "Subtract1" }
],
linkDataArray: [
{ from: "Add1", fromPort: "Out", to: "Subtract1", toPort: "A" },
{ from: "Add2", fromPort: "Out", to: "Subtract1", toPort: "B" }
] });
繪制新鏈接
將GraphObject.fromLinkable和GraphObject.toLinkable 屬性中的一個或兩個設置為true可使用戶以交互方式在端口之間繪制新鏈接。
要繪制新鏈接，請在“ Out”端口上向下拖動鼠標，將其移動（拖動）到附近的輸入端口，然后向上拖動鼠標以完成鏈接。
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle", { fill: "lightgray" }),
$(go.Panel, "Table",
$(go.RowColumnDefinition,
{ column: 0, alignment: go.Spot.Left}),
$(go.RowColumnDefinition,
{ column: 2, alignment: go.Spot.Right }),
$(go.TextBlock, // the node title
{ column: 0, row: 0, columnSpan: 3, alignment: go.Spot.Center,
font: "bold 10pt sans-serif", margin: new go.Margin(4, 2) },
new go.Binding("text", "key")),
$(go.Panel, "Horizontal",
{ column: 0, row: 1 },
$(go.Shape, // the "A" port
{ width: 6, height: 6, portId: "A", toSpot: go.Spot.Left,
toLinkable: true, toMaxLinks: 1 }), // allow user-drawn links from here
$(go.TextBlock, "A") // "A" port label
),
$(go.Panel, "Horizontal",
{ column: 0, row: 2 },
$(go.Shape, // the "B" port
{ width: 6, height: 6, portId: "B", toSpot: go.Spot.Left,
toLinkable: true, toMaxLinks: 1 }), // allow user-drawn links from here
$(go.TextBlock, "B") // "B" port label
),
$(go.Panel, "Horizontal",
{ column: 2, row: 1, rowSpan: 2 },
$(go.TextBlock, "Out"), // "Out" port label
$(go.Shape, // the "Out" port
{ width: 6, height: 6, portId: "Out", fromSpot: go.Spot.Right,
fromLinkable: true }) // allow user-drawn links to here
)
)
);
diagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 3 },
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
diagram.layout = $(go.LayeredDigraphLayout, { columnSpacing: 10 });
diagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
diagram.model =
$(go.GraphLinksModel,
{ linkFromPortIdProperty: "fromPort", // required information:
linkToPortIdProperty: "toPort", // identifies data property names
nodeDataArray: [
{ key: "Add1" },
{ key: "Add2" },
{ key: "Subtract1" }
],
linkDataArray: [
// no predeclared links
] });
默認情況下，用戶不得在任何一對端口之間沿相同方向繪制多個鏈接，也不能繪制將節點與其自身連接的鏈接。
如本示例所示， 通過將GraphObject.toMaxLinks設置為1，用戶最多可以繪制一個進入該端口的鏈接。并且由于該端口元素的GraphObject.fromLinkable為false，因此用戶將無法連接從該端口發出的任何鏈接。
如果要阻止用戶將一個Link連接到一個以上的Link，無論方向如何，都需要實現LinkingBaseTool.linkValidation或Node.linkValidation謂詞。
=====================================================
想要購買GoJS正版授權的朋友可以。
更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線