[译] Building Parts with GraphObjects

全篇共 4295 字。按500字/分钟阅读速度,阅读完预计需要 8.6 分钟。

您可以用传统的原生JavaScript代码构造Node或其他类型的Part。GoJS还提供了一种更具声明性的构建部件方式,与原生代码的构建方式相比具有一些优势。本篇将讨论可用于构建节点的基本对象类型。本篇通过显式创建和添加节点和链接来构建图表。后续篇章将展示如何使用模型而不是使用此类代码来构建图表。

Nodes和Links结构可视化

首先查看一个图,其中包含有关用于构建一些示例节点和链接的GraphObjects的注释:

如您所见,节点或链接可以由许多GraphObject组成,包括可能嵌套的Panel。您可以在任何注释周围拖动,以查看GraphObject所覆盖的区域,该注释链接的末尾是链接自身的GraphObjects。

代码构建

GraphObject只是一个普通的JavaScript对象,可以使用与其他任何对象相同的方式来构造和初始化它。一个节点就是一个GraphObject,其中包含多个GraphObject,比如TextBlocks,Shape,Pictures和Panel,它们其中可能也包含更多GraphObject。

一个最简单的节点可能由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);

此代码产生下图。在官网这是一个“实时”图,因此您可以单击该节点以选择它,然后将其拖动。在我的这篇文章里这是GIF图像。

尽管以这种方式构建节点是可行的,但是随着节点变得越来越复杂,代码将变得更加难以阅读和维护。幸运的是,GoJS有一个更好的方法,可以用GraphObjects制作零件。

此外,后面篇章将讨论如何使用模型,模板和数据绑定自动创建节点和链接。

使用GraphObject.make方法构建

GoJS定义了一个静态函数GraphObject.make,该函数在构造GraphObjects时非常有用,而无需考虑和跟踪临时变量名。该静态函数还支持以嵌套方式构建对象,缩进为您提供了可视树深度的线索,这与上面显示的简单线性代码不同。

GraphObject.make是一个函数,其第一个参数必须是类类型,通常是GraphObject的子类,比如Panel、Shape、TextBlock、Picture和Placeholder。

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类。这是使用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构建图表也是很常见的。在这样的用法中,字符串参数(如果提供该参数必须是第二个参数)将命名图应使用的DIV HTML元素。等效地,您可以将直接引用DIV元素作为第二个参数。

另外,在图表上设置属性时,可以使用由两个用句点分隔的标识符组成的字符串的属性名称。句点之前的名称用作图上或返回要设置其属性的对象的Diagram.toolManager上的属性名称。句点后的名称是所设置属性的名称。请注意,由于存在嵌入式句点,因此JavaScript属性语法要求您使用引号。

您还可以通过假装设置一个实际上是DiagramEvent的名称的Diagram属性来声明DiagramEvent侦听器,就像调用Diagram.addDiagramListener一样。因为所有DiagramEvents的名称都大写,所以这些名称不会与任何Diagram属性名称冲突。

这是GraphObject.make的另一广泛用法,用于构建图表:

var myDiagram =
  $(go.Diagram, "myDiagramDiv",  // 必须是DIV元素的id名称或其引用
    {
      // 在加载新模型之前,不要初始化某些属性
      "InitialLayoutCompleted": loadDiagramProperties,  // DiagramEvent监听器

      // 让鼠标滚轮事件放大和缩小,而不是上下滚动
      "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,

      // 指定一个数据对象,以复制通过单击创建的每个新节点
      "clickCreatingTool.archetypeNodeData": { text: "new node" }
    });

// 当发生“InitialLayoutCompleted”事件时的DiagramEvent事件处理函数
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 })
  ));

笔刷和几何对象可以共享,但GraphObjects不可以共享。

后续篇章将介绍有关基本构件块类,TextBlock,Shape和Picture以及将它们与Panel类聚合的方式的更多详细信息。


原文链接:GoJS Building Parts with GraphObjects

译者 » 陈帅华
发布日期 » 2020年6月16日 周二
更新日期 » 2020年7月1日 周三
上一篇 » [译] Introduction to GoJS Diagramming Components
下一篇 » [译] Using Models and Templates
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录