Palette Diagrams

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram.

The following code initializes an empty Diagram on the right side, below. Note that we must set Diagram.allowDrop to true. In this example we do not bother initializing the model with any node data.

This code also creates a Palette, in the same manner as you would any Diagram. You initialize its model in order to show nodes in the Palette.

  // initialize the main Diagram
  diagram.allowDrop = true;  // permit accepting drag-and-drops

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white" },
        new go.Binding("fill", "color"),
        { portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" }),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key"))
    );

  // start off with no Parts
  diagram.undoManager.isEnabled = true;

  // create the Palette
  var myPalette =
    $(go.Palette, "myPaletteDiv");

  // the Palette's node template is different from the main Diagram's
  myPalette.nodeTemplate =
    $(go.Node, "Horizontal",
      $(go.Shape,
        { width: 14, height: 14, fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        new go.Binding("text", "color"))
    );

  // the list of data to show in the Palette
  myPalette.model.nodeDataArray = [
    { key: "LB", color: "lightblue" },
    { key: "P", color: "pink" },
    { key: "Y", color: "yellow" },
    { key: "LG", color: "lightgreen" },
    { key: "O", color: "orange" }
  ];

Notice that when you drag a part from the Palette on the left into the Diagram on the right, that the appearance changes. What is being dragged is just the model data, not the actual Parts. Because each diagram can use its own templates, the same data object can be represented completely differently.

If you want the Palette to show exactly the same kinds of Nodes as your main Diagram, you can have it share the templates of the main Diagram:

  myPalette.nodeTemplateMap = myDiagram.nodeTemplateMap;

Because Palette inherits from Diagram, you can customize it in the normal manners. You can decide to set its Diagram.initialScale if you want its parts to be smaller or larger than normal.

It is also commonplace to customize the ordering of the parts in the palette. The palette's layout property is a GridLayout, so you can set its GridLayout.sorting property, and if needed, its GridLayout.comparer property to a custom sorting function. For example, if you want the Palette to show its parts in exactly the same order in which they appear in the myPalette.model.nodeDataArray:

  myPalette.layout.sorting = go.GridLayout.Forward;