Building Parts with GraphObjects
The following pages will discuss the basic kinds of objects you can use to build Parts. These pages build up a diagram by explicitly creating and adding nodes and links. Later pages will show how to build diagrams using models rather than adding Parts directly.
The building blocks of GoJS
GoJS Diagrams display top-level Parts and Part subclasses: Nodes, Links, and Groups.
Parts are Panels, which can hold any number of Shapes, Pictures, TextBlocks, or other, nested Panels. All together, these are subclasses of GraphObject.
Nodes and Links are usually composed of many GraphObjects, including several Panels that may be nested.
Building Parts
Many GraphObject and Diagram methods return the object instance, this, such as
Panel.add and GraphObject.bind.
These methods can be chained to build Parts.
Panels hold any number of child elements, which are added as comma separated arguments: Panel.add(elt1, elt2, elt3...)
Nodes and Links are typically a nested series of Panels. For example:
Every GraphObject constructor takes an optional argument that is a JavaScript object, which can be used to set properties. In addition, GraphObject constructors optionally take a common setting as the first argument. These are:
- TextBlock.text - for example,
new go.TextBlock("Hello") - Picture.source - for example,
new go.Picture("https://example.com/image1.jpg") - Shape.figure - for example,
new go.Shape("RoundedRectangle"). See Figures for a complete list of predefined figure names, or define your own figures. - Panel.type as a string - for example,
new go.Panel("Auto"). Built-in values include "Position", "Vertical", "Horizontal", "Auto", "Spot", "Table", and a few specialty panels. You can use the PanelTypes constant instead of strings for autocompletion. See PanelLayout or the page on Panels for more information. - Nodes, Parts, and Groups all inherit from Panel, and take the same constructor argument.
- Links are a special type of Panel that are always of the "Link" type.
As mentioned earlier, it's uncommon to add Nodes directly to a Diagram. Usually you will want to create one or more templates, with data bindings, and have the model create the nodes and links:
See Using Models for more.
The Diagram constructor
The Diagram constructor also takes an object of settable properties. However the Diagram constructor additionally uses Diagram.setProperties to process the initialization object to a Diagram constructor. You can use property names that are strings consisting of two identifiers separated by a period. The name before the period is used as the name of a property on the Diagram or on the Diagram.toolManager that returns an object whose property is to be set. The name after the period is the name of the property that is set. Note that because there is an embedded period, JavaScript property syntax requires that you use quotes.
You can also declare DiagramEvent listeners, as if calling Diagram.addDiagramListener, by pretending to set a Diagram property that is actually the name of a DiagramEvent. Because all DiagramEvents have names that are capitalized, the names will not conflict with any Diagram property names.
Further Reading
The fastest way to build the Node and Link templates you want might be to view the samples and study the templates that are closest to what you want to build, or else contact us and we can help you get started.
The following pages will provide more details about the basic building block classes, TextBlock, Shape, and Picture, and about ways of aggregating them with the Panel class.