intro/palette.html

﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GoJS Palette -- Northwoods Software</title>
  <!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
  <script src="../release/go.js"></script>
  <script src="goIntro.js"></script>
</head>
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">

<h1>Palette Diagrams</h1>
<p>
A <a>Palette</a> is a subclass of <a>Diagram</a> that is used to display a number of <a>Part</a>s that
can be dragged into the diagram that is being modified by the user.
The initialization of a <a>Palette</a> is just like the initialization of any <a>Diagram</a>.
Like Diagrams, you can have more than one Palette on the page at the same time.
</p>
<p>
See samples that make use of <a>Palette</a>s in the <a href="../samples/index.html#palette">samples index</a>.
</p>
<p>
The following code initializes an empty Diagram on the right side, below.
Note that <a>Diagram.allowDrop</a> must be true, which it is now by default.
In this example we do not bother initializing the model with any node data.
</p>
<p>
This code also creates two <a>Palette</a>s, in the same manner as you would any Diagram.
You initialize a Palette's model in order to show nodes in that Palette.
</p>
<pre class="lang-js" id="diagramPre">
  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"))
    );

  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" }
  ];
</pre>
<div style="width:100%">
  <span id="paletteSpan" style="display: inline-block; vertical-align: top">
    <b>Palette 1 (blues):</b><br />
    <div id="myPaletteDiv" style="width: 120px; height: 250px" class="diagramStyling"></div>
  </span>
  <span id="diagramSpan" style="display: inline-block; vertical-align: top">
    <b>Diagram:</b><br />
  </span>
  <span id="paletteSpan2" style="display: inline-block; vertical-align: top">
    <b>Palette 2 (reds):</b><br />
    <div id="myPaletteDiv2" style="width: 120px; height: 250px" class="diagramStyling"></div>
  </span>
</div>
<script>goCode("diagramPre", 250, 250, go.Diagram, "diagramSpan");</script>
<p>
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.
</p>
<p>
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.
<em>What is being dragged is just the model data, not the actual <a>Node</a>s.</em>
Because each diagram can use its own templates, the same data object can be represented completely differently.
</p>
<p>
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:
</p>
<pre class="lang-js">
  myPalette.nodeTemplateMap = myDiagram.nodeTemplateMap;
</pre>
<p>
Because <a>Palette</a> inherits from <a>Diagram</a>, you can customize it in the normal manners.
You can decide to set its <a>Diagram.initialScale</a> if you want its parts to be smaller or larger than normal.
</p>
<p>
It is also commonplace to customize the ordering of the parts in the palette.
The palette's layout property is a <a>GridLayout</a>, so you can set its <a>GridLayout.sorting</a> property,
and if needed, its <a>GridLayout.comparer</a> 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 <code>myPalette.model.nodeDataArray</code>:
</p>
<pre class="lang-js">
  myPalette.layout.sorting = go.GridLayout.Forward;
</pre>
<p>
If you wanted to sort the parts in the Palette according to some property on the model data:
</p>
<pre class="lang-js">
  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;
    };
</pre>

</div>
</div>
</body>
</html>