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 a Diagram with a family tree. Note that Diagram.allowDrop must be true, which it is now by default.

This code also creates two Palettes from which you can drag components of the family tree, above the main diagram, in the same manner as you would any Diagram. You initialize a Palette's model in order to show nodes in that Palette.

Try dragging items from the Palettes (above) to the Diagram (below).

First, notice that each Diagram, and each Palette, has its own nodeTemplate or nodeTemplateMap. The main (target) Diagram and family palette have the same kind of model data for family members, but very different appearances. This is because their default nodeTemplates are different.

Furthermore notice when you drag a part from the Palette on either side above into the Diagram below, that the appearance changes. 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:

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:

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