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。