您可以在傳統的JavaScript代碼中構造Node或其他類型的Part。 GoJS還提供了一種更具聲明性的構建部件方式,與代碼相比具有多個優勢。
本文將討論可用於構建節點的基本對象類型。這些頁面通過顯式創建和添加節點和鏈接來構建圖表。後面的頁面將展示如何使用模型而不是使用此類代碼來構建圖表。
節點和鏈接的可視化結構
首先,查看包含有關用於構建一些示例節點和鏈接的GraphObject的註釋的圖表:
如您所見,節點或鏈接可以由許多GraphObject組成,包括可以嵌套的Panel。您可以拖動任何註釋,以便在註釋鏈接的末尾看到GraphObject所覆蓋的區域,但鏈接本身中的GraphObjects除外。
用代碼構建
GraphObject是可以被構造和任何其他對象以相同的方式初始化的JavaScript對象。一個節點是一個GraphObject包含GraphObject S,從而爲TextBlock的 S,形狀 S, 圖片 s和麪板 s表示可能還包含更多GraphObjects。
一個非常簡單的Node可能包含Shape和TextBlock。您可以使用以下代碼構建GraphObjects的這種可視化樹:
var node = new go.Node(go.Panel.Auto); var shape = new go.Shape(); shape.figure = "RoundedRectangle"; shape.fill = "lightblue"; node.add(shape); var textblock = new go.TextBlock(); textblock.text = "Hello!"; textblock.margin = 5; node.add(textblock); diagram.add(node);
雖然以這種方式構建節點將起作用,但隨着節點變得更復雜,代碼將變得更加複雜以便閱讀和維護。幸運的是,GoJS有更好的方法從GraphObjects製作零件。
此外,後面的部分將討論如何使用模型,模板和數據綁定自動創建節點和鏈接。在此之前,這些頁面將顯式創建節點並直接將它們添加到Diagrams。
使用GraphObject.make構建
GoJS定義了一個靜態函數GraphObject.make,它在構造GraphObjects時非常有用,而不必考慮和跟蹤臨時變量名。此靜態函數還支持以嵌套方式構建對象,其中縮進爲您提供有關可視樹中深度的線索,與上面顯示的簡單線性代碼不同。
GraphObject.make是一個函數,其第一個參數必須是類類型,通常是GraphObject的子類。
GraphObject.make的 其他參數可能有以下幾種類型:
具有屬性/值對的純JavaScript對象 - 在要構造的對象上設置這些屬性值
一個GraphObject,作爲元素添加到正在構造的Panel中
一個GoJS枚舉值常量,用作可以接受這樣一個值的正在構造的對象的唯一屬性的值
一個字符串,用於設置正在構造的對象的TextBlock.text,Shape.figure,Picture.source或Panel.type屬性
一個RowColumnDefinition,用於描述在表的行或列面板小號
一個JavaScript數組,保存GraphObject.make的參數,在從函數返回多個參數時很有用
以適當方式用於正在構造的對象的其他專用對象
我們可以使用go.GraphObject.make重寫上面的代碼,以產生完全相同的結果:
var $ = go.GraphObject.make; diagram.add( $(go.Node, go.Panel.Auto, $(go.Shape, { figure: "RoundedRectangle", fill: "lightblue" }), $(go.TextBlock, { text: "Hello!", margin: 5 }) ));
通過使用字符串參數可以簡化這一點:
var $ = go.GraphObject.make; diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "lightblue" }), $(go.TextBlock, "Hello!", { margin: 5 }) ));
注意我們如何通過使用字符串值來設置Panel.type,Shape.figure和TextBlock.text屬性。
使用$作爲go.GraphObject.make的縮寫是非常方便的,我們將從現在開始使用它。將go.GraphObject.make調用最小化爲單個字符有助於消除代碼中的混亂,並使縮進與正在構造的可視樹中的GraphObject的嵌套匹配 。
其他一些JavaScript庫自動將“$”定義爲一個方便的類型函數名稱,假設它們是唯一重要的庫。但是,當然,你不能讓同一個符號在同一範圍內同時具有兩種不同的含義。因此,您可能希望在使用GoJS時選擇使用其他短名稱,例如“$$”或“GO” 。該GoJS文檔和示例使用“$”,因爲它使生成的代碼最清楚。
使用GraphObject.make的另一個好處是,它將確保您設置的任何屬性都是類的定義屬性。如果屬性名稱中有拼寫錯誤,則會拋出錯誤,您可以在控制檯日誌中看到一條消息。
GraphObject.make也可用於構建除繼承自GraphObject的GoJS類之外的GoJS類。下面是使用go.GraphObject.make構建Brush 而不是GraphObject子類的示例。
diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: $(go.Brush, "Linear", { 0.0: "Violet", 1.0: "Lavender" }) }), $(go.TextBlock, "Hello!", { margin: 5 }) ));
使用GraphObject.make構建Diagram也很常見。在這樣的用法中,字符串參數(如果提供的話必須是第二個參數)將命名圖應該使用的DIV HTML元素。等效地,您可以將對DIV元素的直接引用作爲第二個參數傳遞。
此外,在圖表上設置屬性時,您可以使用屬性名稱,這些屬性名稱由兩個以句點分隔的標識符組成。句點之前的名稱用作圖表或Diagram.toolManager上的屬性名稱,該圖表返回要設置其屬性的對象。句點後面的名稱是設置的屬性的名稱。請注意,由於存在嵌入的句點,因此JavaScript屬性語法要求您使用引號。
您還可以聲明DiagramEvent聽衆,彷彿呼喚Diagram.addDiagramListener,假裝設置圖表屬性,它實際上是一個DiagramEvent的名稱。因爲所有DiagramEvent都具有大寫的名稱,所以名稱不會與任何Diagram屬性名稱衝突。
以下是GraphObject.make用於構建圖表的適度廣泛用法:
var myDiagram = $(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element { // don't initialize some properties until after a new model has been loaded "InitialLayoutCompleted": loadDiagramProperties, // a DiagramEvent listener // have mouse wheel events zoom in and out instead of scroll up and down "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, // specify a data object to copy for each new Node that is created by clicking "clickCreatingTool.archetypeNodeData": { text: "new node" } }); // the DiagramEvent listener for "InitialLayoutCompleted" function loadDiagramProperties(e) { . . . }
使用GraphObject.make進行的所有這些初始化仍然是JavaScript代碼,因此我們可以調用函數並輕鬆共享諸如畫筆之類的對象:
var violetbrush = $(go.Brush, "Linear", { 0.0: "Violet", 1.0: "Lavender" }); diagram.add( $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: violetbrush }), $(go.TextBlock, "Hello!", { margin: 5 }) )); diagram.add( $(go.Node, "Auto", $(go.Shape, "Ellipse", { fill: violetbrush }), $(go.TextBlock, "Goodbye!", { margin: 5 }) ));
可以共享Brush es和Geometry對象,但可能不共享GraphObject。