翻譯|使用教程|編輯:楊鵬連|2020-12-02 10:58:55.837|閱讀 331 次
概述:本指南將向您展示一些與GoJS節(jié)點,鏈接和模型數(shù)據(jù)進行編程交互的基本方法。在整個頁面中,我們將以以下圖表設(shè)置為起點。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
GoJS是一款功能強大,快速且輕量級的流程圖控件,可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖,且極大地簡化您的JavaScript / Canvas 程序。
與節(jié)點進行編程交互
本指南將向您展示一些與GoJS節(jié)點,鏈接和模型數(shù)據(jù)進行編程交互的基本方法。在整個頁面中,我們將以以下圖表設(shè)置為起點:
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
// don't draw any outline
{ stroke: null },
// the Shape.fill comes from the Node.data.color property
new go.Binding("fill", "color")),
$(go.TextBlock,
// leave some space around larger-than-normal text
{ margin: 6, font: "18px sans-serif" },
// the TextBlock.text comes from the Node.data.key property
new go.Binding("text", "key"))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
]);
代碼產(chǎn)生此圖:
您可以Diagram.findNodeForKey(key)用來獲取對JavaScript中Node的引用。GoJS中的鍵值可以是字符串或數(shù)字。然后,您可以使用Node引用來檢查和操作Node。
var node = myDiagram.findNodeForKey("Alpha");
// Selects the node programmatically, rather than clicking interactively:
myDiagram.select(node);
// Outputs a JavaScript object in the developer console window.
// The format of what is output will differ per browser, but is essentially the object:
// { key: "Alpha", color: "lightblue" }
// plus some internal implementation details.
console.log(node.data);
但是,如果沒有節(jié)點數(shù)據(jù)使用該鍵值,則findNodeForKey可能會返回null。同樣,它僅查看模型數(shù)據(jù)以查找使用給定鍵值的節(jié)點數(shù)據(jù),并從中找到圖中的相應(yīng)節(jié)點。它不查看節(jié)點內(nèi)任何TextBlock的文本值,因此即使根本沒有顯示文本,它也可以工作。
一旦有了Node,就可以通過Node.key屬性或通過查看其data:來獲取其鍵someNode.data.key,就像可以查看任何數(shù)據(jù)屬性一樣。
節(jié)點和鏈接的集合
圖具有一些屬性和方法,這些屬性和方法返回描述零件集合的迭代器。節(jié)點和鏈接都是零件。 Diagram.nodes并分別Diagram.links返回圖中所有節(jié)點和鏈接的迭代器。 Diagram.selection返回選定零件(選定節(jié)點和選定鏈接)的迭代器。
還有一些用于通用操作的更具體的方法,例如,Diagram.findTreeRoots() 該方法返回沒有父節(jié)點的所有頂級節(jié)點的迭代器。
下一個示例使用Diagram.nodes并顯示如何遍歷集合。
// Calling Diagram.commit executes the given function between startTransaction and commitTransaction
// calls. That automatically updates the display and allows the effects to be undone.
myDiagram.commit(function(d) { // this Diagram
// iterate over all nodes in Diagram
d.nodes.each(function(node) {
if (node.data.key === "Beta") continue; //skip Beta, just to contrast
node.scale = 0.4; // shrink each node
});
}, "decrease scale");
結(jié)果,除了Beta以外,我們的節(jié)點規(guī)模非常小:
通常,我們想要操縱一個屬性,該屬性屬于Node的元素之一,也許是模板中任意深的元素。在示例圖中,每個節(jié)點都有一個Shape,如果我們想直接更改Shape的顏色,則需要對其進行引用。為了找到它,我們可以給Shape命名:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
{ stroke: null, name: "SHAPE" }, // added the name property
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 6, font: "18px sans-serif" },
new go.Binding("text", "key"))
);
名稱使我們能夠使用輕松地在Panel(所有節(jié)點也是Panel)內(nèi)找到GraphObjects Panel.findObject,這將從該面板開始搜索Panel的可視樹。因此,當我們有一個Node的引用時,我們可以調(diào)用someNode.findObject("SomeName") 來搜索該節(jié)點中的命名對象。如果找到,則它將返回對已命名GraphObject的引用null。
使用此按鈕,我們可以創(chuàng)建一個HTML按鈕,以更改選定節(jié)點內(nèi)部Shape的填充:
var selectionButton = document.getElementById("selectionButton");
selectionButton.addEventListener("click", function() {
myDiagram.commit(function(d) {
d.selection.each(function(node) {
var shape = node.findObject("SHAPE");
// If there was a GraphObject in the node named SHAPE, then set its fill to red:
if (shape !== null) {
shape.fill = "red";
}
});
}, "change color");
});
選擇一些節(jié)點;然后單擊此處更改選定節(jié)點內(nèi)的Shape.fill
使用數(shù)據(jù)綁定更改屬性和更新模型
再次查看我們的Node模板,我們將Shape.fill 屬性數(shù)據(jù)綁定到Node數(shù)據(jù)的“ color”屬性:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
{ stroke: null, name: "SHAPE" },
new go.Binding("fill", "color")), // note this data binding
$(go.TextBlock,
{ margin: 6, font: "18px sans-serif" },
new go.Binding("text", "key"))
);
更改fill節(jié)點內(nèi)部的Shape屬性不會像當前Node模板那樣更新模型數(shù)據(jù)。var node = myDiagram.findNodeForKey("Alpha");
var shape = node.findObject("SHAPE");
shape.fill = "red";
// outputs "lightblue" - the model has not changed!
console.log(node.data.color);
在某些情況下,這是不希望的。當我們希望更改在保存和加載后繼續(xù)存在時,我們也希望更新模型數(shù)據(jù)。
但是,在某些情況下,缺乏持久性可能是一件好事。例如,如果我們只希望出于外觀目的更改顏色,例如在將鼠標懸停在按鈕上時更改按鈕的顏色,則我們不希望修改可能保存的模型數(shù)據(jù)。
現(xiàn)在,假設(shè)我們確實要更新模型。執(zhí)行此操作的首選方法是修改模型中的數(shù)據(jù),并依靠數(shù)據(jù)綁定自動更新Shape。但是,我們不能僅通過設(shè)置JavaScript屬性來直接修改數(shù)據(jù)。
var node = myDiagram.findNodeForKey("Alpha");
// DO NOT DO THIS!
// This would update the data, but GoJS would not be notified
// that this arbitrary JavaScript object has been modified,
// and the associated Node will not be updated appropriately
node.data.color = "red";
相反,我們應(yīng)該使用方法設(shè)置data屬性 Model.set(data, propertyName, propertyValue)。 var node = myDiagram.findNodeForKey("Alpha");
// Model.commit executes the given function within a transaction
myDiagram.model.commit(function(m) { // m == the Model
// This is the safe way to change model data.
// GoJS will be notified that the data has changed
// so that it can update the node in the Diagram
// and record the change in the UndoManager.
m.set(node.data, "color", "red");
}, "change color");
// outputs "red" - the model has changed!
console.log(node.data.color);
// and the user will see the red node

請注意,不再需要將Shape命名為“ SHAPE”,因為不再需要調(diào)用findObject來查找特定的Shape。數(shù)據(jù)綁定將自動更新屬性,因此我們不必自己做。
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Rectangle",
{ stroke: null }, // removed the name property
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 6, font: "18px sans-serif" },
new go.Binding("text", "key"))
);
提及的主題和進一步閱讀
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: