GoJS教程[2019]：使用GraphObjects構建零件

下載GoJS最新版本

    您能夠在傳統的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。