使用GraphObjects创建部件
你可以使用传统的JavaScript代码构建Node或其他类型的Part。 GoJS 还提供了一个更具声明性的构建组成部件的方式,它比代码有几个优点。.
下面页面将讨论可用于构建节点的基本对象类型. 这些页面通过显式创建和添加节点和链接来构建图 后面的页面将显示如何使用模型而不是使用此类代码来构建图。
节点和链接的视觉结构
首先,查看一个图,其中包含有关用于构建一些示例节点和链接的GraphObjects的注释:
如你所见,节点或链接可以由许多GraphObject组成, 包括可能嵌套的Panel 您可以在任何注释周围拖动,以查看GraphObject所指向的注释链接末尾的区域,链接本身内的GraphObjects除外。
用代码构建
GraphObject是一个JavaScript对象,可以像任何其他对象一样构造和初始化 Node是一个GraphObject 包含 GraphObjects 如 TextBlocks, Shapes, Pictures, and Panels 它们可能包含更多的GraphObjects.
一个非常简单的节点可能由一个形状和一个文本块组成 您可以使用以下代码构建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制作部件。
此外,后面的部分将讨论如何使用模型,模板和数据绑定自动创建节点和链接。在此之前,这些页面将显式创建节点并将其直接添加到图。
使用GraphObject.make构建
GoJS 定义了一个静态函数GraphObject,make, 它在构造GraphObjects时非常有用 无需考虑和跟踪临时变量名。该静态函数还支持以嵌套方式构建对象,缩进为您提供了可视树深度的线索,这与上面显示的简单线性代码不同。
GraphObject.make是一个函数,其第一个参数必须是类类型,通常是GraphObject的子类
GraphObject.make的其他参数可能有以下几种类型
- 一个带有属性/值对的普通JavaScript对象 - 这些属性值在被构造的对象上设置
- 一个GraphObject, 作为一个元素添加到正在构建的Panel中
- 一个GoJS枚举常量值,用作被构造对象的唯一属性的值,该属性可以接受这样的值
- 一个字符串,用于设置正在构造的对象的TextBlock.text, Shape.figure, Picture.source, 或者 Panel.type 等属性
- 一个RowColumnDefinition(行列定义), 用于描述Table Panel中的行或列
- 一个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来构建一个Diagram也很常见 在这样的用法中,字符串参数(如果提供该参数必须是第二个参数)将命名图应使用的DIV HTML元素 同样,您可以将直接引用DIV元素作为第二个参数。
另外,在图上设置属性时,可以使用属性名称,这些属性名称是由用句点分隔的两个标识符组成的字符串。 句点之前的名称用作图表上的属性的名称,或者用作返回要设置其属性的对象的Diagram.toolManager。句号之后的名称是设置的属性的名称。请注意,由于存在嵌入式句点,因此JavaScript属性语法要求使用引号。
你还可以声明DiagramEvent侦听器, 就好像调用 Diagram.addDiagramListener, 假装设置一个Diagram属性,该属性实际上是一个DiagramEvent的名称。因为所有的DiagramEvent都有大写的名字,所以这些名字不会和任何图表属性名称冲突。
这是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和Geometry 对象可以共享, 但是 GraphObject不可以被共享.
以下页面将提供有关基本构建TextBlock, Shape, 和 Picture, 的更多详细信息,以及它们与Panel 类聚合的方法