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. Like Diagrams, you can have more than one Palette on the page at the same time.

See samples that make use of Palettes in the samples index.

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 two Palettes, in the same manner as you would any Diagram. You initialize a Palette's model in order to show nodes in that 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: "C", color: "cyan" },
    { key: "LC", color: "lightcyan" },
    { key: "A", color: "aquamarine" },
    { key: "T", color: "turquoise" },
    { key: "PB", color: "powderblue" },
    { key: "LB", color: "lightblue" },
    { key: "LSB", color: "lightskyblue" },
    { key: "DSB", color: "deepskyblue" }
  ];

  // create the Palette
  var myPalette2 =
    $(go.Palette, "myPaletteDiv2",
      { // customize the GridLayout to align the centers of the locationObjects
        layout: $(go.GridLayout, { alignment: go.GridLayout.Location })
      });

  // the Palette's node template is different from the main Diagram's
  myPalette2.nodeTemplate =
    $(go.Node, "Vertical",
      { locationObjectName: "TB", locationSpot: go.Spot.Center },
      $(go.Shape,
        { width: 20, height: 20, fill: "white" },
        new go.Binding("fill", "color")),
      $(go.TextBlock, { name: "TB" },
        new go.Binding("text", "color"))
    );

  // the list of data to show in the Palette
  myPalette2.model.nodeDataArray = [
    { key: "IR", color: "indianred" },
    { key: "LC", color: "lightcoral" },
    { key: "S", color: "salmon" },
    { key: "DS", color: "darksalmon" },
    { key: "LS", color: "lightsalmon" }
  ];

First, notice that although both Palettes have been initialized with the same kind of model data, the appearances of the items in the palettes are different because the two use different node templates.

Furthermore when you drag a part from the Palette on either side into the Diagram in the middle, that the appearance changes, because the Diagram uses a third node template. What is being dragged is just the model data, not the actual Nodes. 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 Nodes for the same data 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;

If you wanted to sort the parts in the Palette according to some property on the model data:

  myPalette.layout.comparer = function(a, b) {
      // A and B are Parts
      var av = a.data.someProp;
      var bv = b.data.someProp;
      if (av < bv) return -1;
      if (av > bv) return 1;
      return 0;
    };