Building Parts with GraphObjects

You can construct a Node or other kind of Part in traditional JavaScript code. GoJS also offers a more declarative-looking manner of building parts that has several advantages over code.

The following pages will discuss the basic kinds of objects you can use to build a node. 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 using such code.

First, look at a diagram that includes comments about the GraphObjects used to build some example nodes and links:

As you can see, a node or a link can be composed of many GraphObjects, including Panels that may be nested. You can drag around any comment in order to see the area covered by the GraphObject at the end of the comment link to it, except for the GraphObjects within the Link itself.

Building with Code

A GraphObject is a JavaScript object that can be constructed and initialized in the same manner as any other object. A Node is a GraphObject that contains GraphObjects such as TextBlocks, Shapes, Pictures, and Panels that may contain yet more GraphObjects.

A very simple Node might consist of a Shape and a TextBlock. You can build such a visual tree of GraphObjects using code such as: 

  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);

This code produces the following diagram. It is a "live" diagram, not a screenshot image, so you can click on the node to select it and then drag it around.

Although building a node in this manner will work, as the nodes get more complicated the code will become more complicated to read and to maintain. Fortunately GoJS has a better way to make Parts out of GraphObjects.

Furthermore, later sections will discuss how Nodes and Links should be created automatically using models, templates, and data-binding. Until that time, these pages will create Nodes explicitly and add them to Diagrams directly.

Building with GraphObject.make

GoJS defines a static function, GraphObject.make, that is very useful in constructing GraphObjects without having to think of and keep track of temporary variable names. This static function also supports building objects in a nested fashion, where the indentation gives you a clue about depth in the visual tree, unlike the simple linear code shown above.

GraphObject.make is a function whose first argument must be a class type, typically a subclass of GraphObject.

Additional arguments to GraphObject.make may be of several types:

We can rewrite the code above with go.GraphObject.make to produce exactly the same results: 

  var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, go.Panel.Auto,
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "lightblue" }),
      $(go.TextBlock,
        { text: "Hello!",
          margin: 5 })
    ));

This can be simplified a bit by using string arguments: 

  var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));

Notice how we set the Panel.type, Shape.figure, and TextBlock.text properties by just using the string value.

The use of $ as an abbreviation for go.GraphObject.make is so handy that we will assume its use from now on. Having the call to go.GraphObject.make be minimized into a single character helps remove clutter from the code and lets the indentation match the nesting of GraphObjects in the visual tree that is being constructed.

Some other JavaScript libraries automatically define "$" to be a handy-to-type function name, assuming that they are the only library that matters. But you cannot have the same symbol have two different meanings at the same time in the same scope, of course. So you may want to choose to use a different short name, such as "$$" or "GO" when using GoJS. The GoJS documentation and samples make use of "$" because it makes the resulting code most clear.

Another advantage of using GraphObject.make is that it will make sure that any properties that you set are defined properties on the class. If you have a typo in the name of the property, it will throw an error, for which you can see a message in the console log.

GraphObject.make also works to build GoJS classes other than ones inheriting from GraphObject. Here is an example of using go.GraphObject.make to build a Brush rather than a GraphObject subclass. 

  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: $(go.Brush, "Linear",
                  { 0.0: "Violet", 1.0: "Lavender" }) }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));

It is also common to use GraphObject.make to build a Diagram. In such a use a string argument, which if provided must be the second argument, will name the DIV HTML element that the Diagram should use. Equivalently you can pass a direct reference to the DIV element as the second argument.

Also, when setting properties on a Diagram, 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.

Here is a moderately extensive usage of GraphObject.make to build a Diagram: 

  var myDiagram =
    $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
      {
        // any initial diagram is centered in the viewport
        initialContentAlignment: go.Spot.Center,

        // 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) { . . . }

All of this initialization using GraphObject.make is still JavaScript code, so we can call functions and easily share objects such as brushes: 

  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 })
    ));

Brushes and Geometry objects may be shared, but GraphObjects may not be shared.

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.