GoJS Guide [2019]: Строительство деталей, используемых GraphObjects

Загрузить последнюю версию GoJS

    Вы можете построить узел или другие типы части В традиционном коде JavaScript. GoJS также обеспечивает средство для построения более декларативно, и имеет ряд преимуществ по сравнению с кодом.

    В данной статье рассматриваются основные типы объектов могут быть использованы для построения узлов. Эти страницы графика построены в явном виде создания и добавлении узлов и связей. На следующих страницах показано, как использовать эту модель, а не использовать такой код для построения графика.

Визуальные структуры узлов и соединений

    Во-первых, проверьте график содержит комментарии о некоторых примерах для построения узлов и ссылки GraphObject из:

    Как вы можете видеть, узел или ссылка может быть составлена ​​из многих GraphObject, включая возможную вложенную панель. Вы можете перетаскивать любые комментарии, для того, чтобы увидеть площадь, покрытую комментариями GraphObject в конце линии, но связь сама за исключением GraphObjects.

Построенный с кодом

    GraphObject может быть сконфигурирован с любыми другими объектами таким же образом, как JavaScript инициализации объекта. Узел, содержащий GraphObject GraphObject S, что указывает на более GraphObjects может также содержать в качестве TextBlock S, S формы, изображения, S, S панель.

    Очень простой узел может содержать Форма и TextBlock. Вы можете использовать следующий код для создания такого визуального дерева GraphObjects из:

вар узел = новый go.Node (go.Panel.Auto); переменная форма = новый go.Shape (); 
  shape.figure = "RoundedRectangle"; 
  shape.fill = "Lightblue"; 
  node.add (форма); вар TextBlock = новый go.TextBlock (); 
  textblock.text = "Hello!"; 
  textblock.margin = 5; 
  node.add (TextBlock); 
  diagram.add (узел);

    Несмотря на то, построен таким образом, узел будет работать, но с узлами становятся все более сложными, код станет более сложным для того, чтобы читать и поддерживать. К счастью, GoJS есть лучшие способы сделать детали из GraphObjects.

Кроме того, последняя часть будет обсудить, как использовать модели, шаблоны и привязки данных для автоматического создания узлов и связей. До этого эти страницы будут явно создавать узлы и добавлять их непосредственно в диаграммах.

Используйте GraphObject.make здание

    GoJS определяет статическую функцию GraphObject.make, это очень полезно при построении GraphObjects, независимо от временных переменных и имен дорожек. Эта статическая функция также поддерживает вложенную сборку объекта, который отступы, чтобы предоставить вам подсказки о визуальной глубины дерева, отличается простой линейный код, указанный выше.

    GraphObject.make это функция, первый аргумент должен быть тип класса, как правило, подкласс GraphObject.

    Другие параметры GraphObject.make могут иметь следующие типы:

• Имея атрибут / значение пары чистых объектов JavaScript - эти значения свойств, установленные на объекте будут построены

• GraphObject, добавляется к панели строится как элемент

• Значение одного атрибута значения перечисления постоянных GoJS, такие объекты, как это приемлемо конфигурация значения

• TextBlock.text строка для объекта строится, чтобы установить, Shape.figure, свойства Picture.source или Panel.type

• RowColumnDefinition, для описания строки или столбца таблицы панели трубы

• Массив JavaScript, сохранить параметры GraphObject.make, очень полезно при возврате из функции множества параметров

• Другие конкретные объекты надлежащим образом для объекта в стадии строительства

    Мы можем переписать код выше go.GraphObject.make производить точно такие же результаты:

 вар $ = go.GraphObject.make; 
  diagram.add ( 
    $ (go.Node, go.Panel.Auto, 
      $ (go.Shape, 
        {фигура: "RoundedRectangle", введите: "LightBlue"}), 
      $ (go.TextBlock, 
        {текст: "Здравствуйте!" рентабельность: 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-код, так что мы можем вызвать функцию и легко обмениваться объекты, такие как кисти и т.п.:

вар violetbrush = $ (go.Brush, "Линейный", {0,0: "Фиолетовый", 1,0: "лаванда"}); 

  diagram.add ( 
    $ (go.Node, "Авто", 
      $ (go.Shape, "RoundedRectangle", 
        {заполнить: violetbrush}), 
      $ (go.TextBlock, "Привет!", 
        {поле: 5}) 
    )) ; 

  diagram.add ( 
    $ (go.Node, "Авто", 
      $ (go.Shape, "Эллипс", 
        {заполнить: violetbrush}), 
      $ (go.TextBlock, "До свидания!", 
        {поле: 5}) 
    )) ;

    Кисть эс и геометрия могут совместно использовать объекты, но может не разделять GraphObject.