# 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.

    diagram.layout = new go.GridLayout({ spacing: new go.Size(25,25) });
    function sh(color) { return new go.Shape({ strokeWidth: 2, margin: 4, width: 20, height: 20, fill: color }) };
    diagram.allowHorizontalScroll = false;
    diagram.allowVerticalScroll = false;

    const panelBackgroundColor = 'palegreen';
    function makepanel(type, desc) {
      return new go.Node("Vertical")
        .add(
          new go.TextBlock("go.Panel(\""+ type + "\")", { margin: 4, font: "13px monospace" }),
          new go.Panel(type, { background: panelBackgroundColor })
            .add(
              sh('lightpink').set({ figure: 'RoundedRectangle' }),
              sh('lightsalmon').set({ figure: 'Triangle', row: 1, width: 15, height: 15 }),
              sh('lightcoral').set({ figure: 'Ellipse', column: 3, width: 25, height: 25 }),
              sh('red').set({ column: 1, row: 2 })
            )
        )
    }

    function makepanelAuto() {
      return new go.Node("Vertical")
        .add(
          new go.TextBlock('go.Panel("Auto")', { margin: 4, font: "13px monospace" }),
          new go.Panel("Auto", { background: panelBackgroundColor, width: 150 })
            .add(
              new go.Shape({ strokeWidth: 2, figure: 'RoundedRectangle', fill: 'lightpink' }),
              new go.TextBlock('Auto Panel\'s first element expands dynamically to fit all other elements, like a border. In this case, the contents are a single TextBlock with a long string.',
                  { margin: 8, textAlign: 'center' })
            )
        )
    }

    function makepanelSpot() {
      return new go.Node("Vertical")
        .add(
          new go.TextBlock('go.Panel("Spot")', { margin: 4, font: "13px monospace" }),
          new go.Panel("Spot", { background: panelBackgroundColor })
            .add(
              new go.Shape({ strokeWidth: 2, figure: 'RoundedRectangle', width: 50, height: 50, fill: 'lightpink' }),
              sh('lightsalmon').set({ figure: 'Triangle', alignment: go.Spot.Left }),
              sh('lightcoral').set({ figure: 'Ellipse', alignment: go.Spot.Right }),
              sh('red').set({ alignment: go.Spot.Top })
            )
        )
      }

    diagram.nodeTemplateMap.add('Horizontal', makepanel("Horizontal"));
    diagram.nodeTemplateMap.add('Vertical', makepanel("Vertical"));
    diagram.nodeTemplateMap.add('Table', makepanel("Table"));
    diagram.nodeTemplateMap.add('Auto', makepanelAuto());
    diagram.nodeTemplateMap.add('Spot', makepanelSpot());
    diagram.nodeTemplateMap.add('Info',
    new go.Node("Spot")
      .add(new go.Shape("RoundedRectangle", { strokeWidth: 1.5, fill: 'pink', width: 90, height: 30 }))
      .add(new go.TextBlock({ font: "16px san-serif" }).bind('text', 'key'))
    )

    diagram.nodeTemplateMap.add('TextBlock',
      new go.Node("Vertical")
        .add(
          new go.TextBlock('go.TextBlock("Some Text")',
              { spacingBelow: 4, font: "13px monospace" }),
          new go.TextBlock("Some Text", { font: "26px serif" })
        )
      );

    diagram.nodeTemplateMap.add('Picture',
      new go.Node("Vertical")
        .add(
          new go.TextBlock('go.Picture("images/55x55.png")',
              { spacingBelow: 4, font: "13px monospace" }),
          new go.Picture("images/55x55.png", { width: 50, height: 50 })
        )
      );

    diagram.nodeTemplateMap.add('Shape',
      new go.Node("Vertical")
        .add(
          new go.TextBlock('go.Shape("Triangle")',
              { spacingBelow: 4, font: "13px monospace" }),
          new go.Shape("Triangle", { width: 50, height: 50, fill: '#00FAFA' })
        )
      );

    diagram.nodeTemplateMap.add('Panel',
      new go.Node("Vertical")
        .add(
          new go.TextBlock('go.Panel("[PanelType]")',
              { spacingBelow: 4, font: "13px monospace", margin: 2 }),
          new go.TextBlock("Panels have no visual unless\na background is specified.\nThey hold other GraphObjects,\nand can be nested.",
              { textAlign: 'center' })
        )
      );

    diagram.nodeTemplateMap.add('Node',
      new go.Node("Vertical")
        .add(
          new go.TextBlock('go.Node("[PanelType]")',
              { spacingBelow: 4, font: "13px monospace", margin: 2 }),
          new go.TextBlock("Nodes can connect with links\n and be members of a Group.",
              { textAlign: 'center' })
        )
      );

    diagram.nodeTemplateMap.add('Link',
      new go.Node("Vertical")
        .add(
          new go.TextBlock('go.Link()',
              { spacingBelow: 4, font: "13px monospace", margin: 2 }),
          new go.TextBlock("Nodes can connect with links\n and be members of a Group.",
              { textAlign: 'center' })
        )
      );

    diagram.groupTemplate =
      new go.Group("Vertical",
          {
            locationSpot: go.Spot.Center,
            layout: new go.GridLayout({ wrappingColumn: 2 })
          })
        .bind("layout")
        .bind("location", "loc")
        .add(
          new go.TextBlock({ margin: 4, font: '13pt sans-serif' }).bind("text"),
          new go.Panel("Auto")
            .add(
              new go.Shape("RoundedRectangle", { fill: 'whitesmoke', stroke: 'darkgray' }),
              new go.Placeholder({ padding: 5 })
            )
        );

    diagram.linkTemplate = new go.Link({
          routing: go.Routing.Orthogonal,
          toShortLength: 2
        })
      .add(
        new go.Shape({strokeWidth: 2}),
        new go.Shape({ toArrow: 'Standard' })
      );

    diagram.model = new go.GraphLinksModel([
      { group: 'Panels', category: 'Horizontal' },
      { group: 'Panels', category: 'Vertical' },
      { group: 'Panels', category: 'Table' },
      { group: 'Panels', category: 'Auto' },
      { group: 'Panels', category: 'Spot' },
      { key: 'GraphObjects', isGroup: true, text: "GraphObjects are the building blocks of GoJS", layout: new go.TreeLayout() },
      { key: 'Panels', isGroup: true, text: "Common Panel Types" },

      { group: 'GraphObjects', category: 'Info', key: 'GraphObject' },
      { group: 'GraphObjects', category: 'Info', key: 'TextBlock' },
      { group: 'GraphObjects', category: 'Info', key: 'Picture' },
      { group: 'GraphObjects', category: 'Info', key: 'Shape' },
      { group: 'GraphObjects', category: 'Info', key: 'Panel' },

      { group: 'GraphObjects', category: 'Info', key: 'Part' },
      { group: 'GraphObjects', category: 'Info', key: 'Node' },
      { group: 'GraphObjects', category: 'Info', key: 'Link' },
      { group: 'GraphObjects', category: 'Info', key: 'Group' },

      // { group: 'GraphObjects', category: 'TextBlock' },
      // { group: 'GraphObjects', category: 'Picture' },
      // { group: 'GraphObjects', category: 'Shape' },
      // { group: 'GraphObjects', category: 'Panel', key:'PanelExample' },

      //{ key: 'Parts', isGroup: true, text: "Parts (Nodes, Links, Groups) are Top-level Panels" },
      //{ group: 'Parts', category: 'Part' },
      //{ group: 'Parts', category: 'Node' },
      //{ group: 'Parts', category: 'Group' },
      //{ group: 'Parts', category: 'Link' },
    ],
    [
      { from: 'GraphObject', to: 'Picture' },
      { from: 'GraphObject', to: 'TextBlock' },
      { from: 'GraphObject', to: 'Shape' },
      { from: 'GraphObject', to: 'Panel' },
      { from: 'Panel', to: 'Part' },
      { from: 'Part', to: 'Node' },
      { from: 'Part', to: 'Link' },
      { from: 'Node', to: 'Group' },
    ]);

Nodes and Links are usually composed of many GraphObjects, including several Panels that may be nested.

## Building with Code

A very simple Node might consist of a Shape and a TextBlock. You could build such a visual tree of GraphObjects using code. The following code produces the following "live" diagram, so you can click on the node to select it and then drag it around.

      const node = new go.Node("Auto");
      const shape = new go.Shape();
      shape.figure = "RoundedRectangle";
      shape.fill = "lightblue";
      shape.strokeWidth = 3;
      node.add(shape);
      const textblock = new go.TextBlock();
      textblock.text = "Hello!";
      textblock.margin = 5;
      node.add(textblock);
      diagram.add(node);

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 Chaining Functions

Starting in GoJS 2.2, many GraphObject and Diagram methods return the object instance, such as Panel.add and GraphObject.bind. These methods can be chained to build Parts.

Every GraphObject constructor optionally takes a common setting as its first argument. These are:

- TextBlock: The TextBlock.text - for example, `new go.TextBlock("Hello")`
- Picture: The Picture.source - for example, `new go.Picture("https://example.com/image1.jpg")`
- Shape: The Shape.figure - for example, `new go.Shape("RoundedRectangle")`
- Panel: The panel.type as a string - for example, `new go.Panel("Auto")`. Possible values are "Position", "Vertical", "Horizontal", "Auto", "Spot", "Table", and a few specialty panels. See the page on Panels for more.
- 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.

Every GraphObject additionally takes an optional constructor argument that is a JavaScript object, which can be used to set any object properties. For example, instead of writing:

    const shape = new go.Shape();
    shape.figure = "RoundedRectangle";
    shape.fill = "lightblue";
    shape.strokeWidth = 3;

We could write this:

    const shape = new go.Shape("RoundedRectangle", {
        fill: "lightblue",
        strokeWidth: 3
      });

The first argument is the Shape.figure, the second argument is an object for setting other Shape properties. If you use TypeScript and the npm gojs package, this code will also be type-checked for you.

To rewrite the code block in the previous section, that had a Node with one Shape and one TextBlock added, we would write this:

    // Create a node and .add a Shape and TextBlock to it
    myDiagram.add(
      new go.Node("Auto")
        .add(
          new go.Shape("RoundedRectangle",
              { fill: "lightblue", strokeWidth: 3 }),
          new go.TextBlock("Hello!",
              { margin: 5 })
        )
      );

Unlike the GraphObject.make methodology below, this code is typed at compile time or in your IDE, if using TypeScript.

## Building with GraphObject.make

Unlike building with .add, GraphObject.make is not well type-checked when using TypeScript definitions. However, it is more flexible, and many of our samples still use it.

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 initially on this page.

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:

- a plain JavaScript object with property/value pairs -- these property values are set on the object being constructed
- a GraphObject, which is added as an element to the Panel that is being constructed
- a string, which sets the TextBlock.text, Shape.figure, Picture.source, or Panel.type property of the object that is being constructed
- a RowColumnDefinition, for describing rows or columns in Table Panels
- a JavaScript Array, holding arguments to GraphObject.make, useful when returning more than one argument from a function
- other specialized objects that are used in the appropriate manner for the object being constructed

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

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

      diagram.add(
        $(go.Node, "Auto",
          $(go.Shape, "RoundedRectangle",
            { fill: "lightblue", strokeWidth: 3 }),
          $(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 if you see its use, you can assume it refers to go.GraphObject.make unless noted otherwise. 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. The GoJS documentation and samples make use of "$" because it makes the resulting code most clear and compact. In your code you may want to use a different identifer, such as "$$" or "GO" if there might be a conflict with other code.

Another advantage of using GraphObject.make is that it will make sure at run-time 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.

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

      const 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(
        new go.Node("Auto")
          .add(
            new go.Shape("Ellipse", { fill: violetbrush }),
            new go.TextBlock("Goodbye!", { margin: 5 })
          ));

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

### The Diagram Constructor

The Diagram constructor 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.

      const myDiagram = new 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.WheelMode.Zoom,

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

## The Visual Structure of Nodes and Links

Here is a diagram that includes comments about the GraphObjects used to build some example nodes and links, using a number of GoJS concepts:

      diagram.nodeTemplate =
        new go.Node("Auto", {
            scale: 2,  // make it easier to see
            locationSpot: go.Spot.Center, portId: "Node"
          })
          .bind("location", "loc", go.Point.parse)
          .add(
            new go.Shape("RoundedRectangle", { fill: "white", portId: "Shape" })
              .bind("fill", "color"),
            new go.TextBlock({ margin: 4, stroke: "blue", portId: "TextBlock" })
              .bind("text")
          );

      diagram.linkTemplate =
        new go.Link()  // make it easier to see
          .add(
            new go.Shape({ strokeWidth: 3 }),
            new go.Shape({ scale: 2, toArrow: "Standard" })
          );

      // define several shared Brushes
      const bluegrad = new go.Brush("Linear", { 0: "rgb(150, 150, 250)", 0.5: "rgb(86, 86, 186)", 1: "rgb(86, 86, 186)" });
      const yellowgrad = new go.Brush("Linear", { 0: "rgb(254, 221, 50)", 1: "rgb(254, 182, 50)" });
      const lightgrad = new go.Brush("Linear", { 1: "#E6E6FA", 0: "#FFFAF0" });

      // the template for each attribute in a node's array of item data
      const itemTempl =
        new go.Panel("TableRow")
          .bind("portId", "name", n => n + "ITEMPANEL")
          .bindObject("background", "row", i => (i === 2) ? "lightgreen" : "transparent")
          .add(
            new go.Shape({ column: 0, desiredSize: new go.Size(10, 10) })
              .bind("portId", "name", n => n + "SHAPE")
              .bind("figure", "figure")
              .bind("fill", "color"),
            new go.TextBlock({
                shadowVisible:false,
                column: 1,
                stroke: "#333333",
                font: "bold 14px sans-serif"
              })
              .bind("text", "name")
              .bind("portId", "name", n => n + "TEXTBLOCK")
          );

        // define the Node template, representing an entity
        diagram.nodeTemplateMap.add("Complex",
          new go.Node("Auto",  // the whole node panel
              {
                locationSpot: go.Spot.Center,
                scale: 1.5,
                selectionAdorned: true,
                fromSpot: go.Spot.AllSides,
                toSpot: go.Spot.AllSides,
                isShadowed: true,
                shadowColor: "#C5C1AA"
              })
            .bind("location", "loc", go.Point.parse)
            .add(
              // define the node's outer shape, which will surround the Table
              new go.Shape("Rectangle", {
                portId: "RECTANGLE",
                fill: lightgrad, stroke: "#756875", strokeWidth: 3
              }),
              new go.Panel("Table", { margin: 8, stretch: go.Stretch.Fill })
                .addRowDefinition(0, { sizing: go.Sizing.None })
                .add(
                  // the table header
                  new go.TextBlock({
                      portId: "HEADER",
                      row: 0, alignment: go.Spot.Center,
                      margin: new go.Margin(0, 14, 0, 2),  // leave room for Button
                      font: "bold 16px sans-serif"
                    })
                    .bind("text"),
                  // the collapse/expand button
                  go.GraphObject.build("Button", {
                      portId: "BUTTON",
                      row: 0, alignment: go.Spot.TopRight,
                      "ButtonBorder.stroke": null,
                      click: (e, but) => {
                        const list = but.part.findObject("LIST");
                        if (list !== null) {
                          list.diagram.startTransaction("collapse/expand");
                          list.visible = !list.visible;
                          const shape = but.findObject("SHAPE");
                          if (shape !== null) shape.figure = (list.visible ? "TriangleUp" : "TriangleDown");
                          list.diagram.commitTransaction("collapse/expand");
                        }
                      }
                    })
                    .add(
                      new go.Shape("TriangleUp", { name: "SHAPE", width: 6, height: 4 })
                    ),
                  // the list of Panels, each showing an attribute
                  new go.Panel("Table", {
                    name: "LIST", background: "pink", portId: "LIST",
                    row: 1,
                    padding: 3,
                    alignment: go.Spot.TopLeft,
                    defaultAlignment: go.Spot.Left,
                    itemTemplate: itemTempl
                  })
                  .bind("itemArray", "items")
                )  // end Table Panel
            )  // end Node
          );

      // annotations -- brown text
      diagram.nodeTemplateMap.add("Comment",
        new go.Node({ locationSpot: go.Spot.Center })
          .bind("location", "loc", go.Point.parse)
          .add(
            new go.TextBlock({ stroke: "brown", textAlign: "center" })
              .bind("text")
              .bind("font", "bold", b => b ? "bold 10pt sans-serif" : "10pt sans-serif")
          )
      );

      // so that comments can point at any named GraphObject in a Link
      diagram.nodeTemplateMap.add("LinkLabel",
        new go.Node()
          .bind("segmentIndex")
          .bind("segmentOffset")
      );

      // brown curved links connecting with a Comment node
      diagram.linkTemplateMap.add("Comment",
        new go.Link({ curve: go.Curve.Bezier })
          .bind("curviness")
          .add(
            new go.Shape({ stroke: "brown" }),
            new go.Shape({ toArrow: "OpenTriangle", stroke: "brown" })
          )
      );

      diagram.model = new go.GraphLinksModel({
        linkToPortIdProperty: "pid",
        linkLabelKeysProperty: "labs",
        nodeDataArray: [
    { key: 1, text: "Alpha", color: "lightblue", loc: "0 0" },
    { key: 2, text: "Beta", color: "lightgreen", loc: "200 0" },
    { key: -1, text: "two Nodes", category: "Comment", bold: true, loc: "100 -60" },
    { key: -2, text: "a Shape of figure\n'RoundedRectangle',\nwith black stroke\nand lightblue fill", category: "Comment", loc: "-140 0" },
    { key: -3, text: "a TextBlock with blue stroke\nand no background\nshowing the string 'Alpha'", category: "Comment", loc: "-50 70" },
    { key: -4, text: "a Link's\nmain path\nShape", category: "Comment", loc: "100 40" },
    { key: -41, category: "LinkLabel" },
    { key: -5, text: "a Link's\narrowhead\nShape", category: "Comment", loc: "170 80" },
    { key: -51, category: "LinkLabel", segmentIndex: -1, segmentOffset: new go.Point(-8, 4) },
    { key: -6, text: "a Link", category: "Comment", bold: true, loc: "100 -30" },
    { key: -7, text: "this Node Panel\nalso acts as the\nNode's only port", category: "Comment", loc: "320 0" },

    { key: 11, text: "Entity", category: "Complex", loc: "0 230",
        items: [{ name: "SupplierID", iskey: true, figure: "Decision", color: yellowgrad },
                { name: "CompanyName", iskey: false, figure: "Cube1", color: bluegrad },
                { name: "ContactName", iskey: false, figure: "Cube1", color: bluegrad },
                { name: "Address", iskey: false, figure: "Cube1", color: bluegrad }]
    },
    { key: -11, text: "a Rectangle Shape", category: "Comment", loc: "-70 120" },
    { key: -12, text: "a TextBlock\nacting as a header", category: "Comment", loc: "70 120" },
    { key: -13, text: "a Button Panel consisting\nof two Shapes", category: "Comment", loc: "200 150" },
    { key: -14, text: "a Vertical items Panel\nwith pink background,\nholding 4 Panels,\none per item", category: "Comment", loc: "200 220" },
    { key: -15, text: "a TextBlock\nin a Panel for item #3", category: "Comment", loc: "50 340" },
    { key: -16, text: "a Shape\nin a Panel for item #3", category: "Comment", loc: "-140 320" },
    { key: -17, text: "a TableRow Panel\nfor item #2\nwith lightgreen\nbackground", category: "Comment", loc: "-200 250" }
        ],
        linkDataArray: [
    { from: 1, to: 2, labs: [-41, -51] },
    { from: -1, category: "Comment", to: 1, pid: "Node", curviness: -10 },
    { from: -1, category: "Comment", to: 2, pid: "Node" },
    { from: -2, category: "Comment", to: 1, pid: "Shape" },
    { from: -3, category: "Comment", to: 1, pid: "TextBlock", curviness: -10 },
    { from: -4, category: "Comment", to: -41, curviness: 0 },
    { from: -5, category: "Comment", to: -51, curviness: 5 },
    { from: -6, category: "Comment", to: -41, curviness: -5 },
    { from: -7, category: "Comment", to: 2, pic: "Node", curviness: -10 },

    { from: -11, category: "Comment", to: 11, pid: "RECTANGLE", curviness: 0 },
    { from: -12, category: "Comment", to: 11, pid: "HEADER" },
    { from: -13, category: "Comment", to: 11, pid: "BUTTON" },
    { from: -14, category: "Comment", to: 11, pid: "LIST" },
    { from: -15, category: "Comment", to: 11, pid: "AddressTEXTBLOCK" },
    { from: -16, category: "Comment", to: 11, pid: "AddressSHAPE" },
    { from: -17, category: "Comment", to: 11, pid: "ContactNameITEMPANEL" }
        ]
      });

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.