パレットダイアグラム(Palette Diagrams)

  // メインダイアグラムを初期化
  diagram.allowDrop = true;  // ドラッグ·アンド·ドロップ受け入れを許可

  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;

  // パレットを作成する
  var myPalette =
    $(go.Palette, "myPaletteDiv");

  // パレットのノードテンプレートは、メイン·ダイアグラムのテンプレートとは異なっている
  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" }
  ];

  myPalette.nodeTemplateMap = myDiagram.nodeTemplateMap;

Paletteは、Diagramを継承しているので、通常の方法でカスタマイズ可能。パーツを大きくしたい場合は、Diagram.initialScaleを設定することで変更可能。

パレット内のパーツ部品の順序をカスタマイズすることも可能。パレットのレイアウトプロパティはGridLayoutなので、GridLayout.sortingプロパティを設定することが可能。例えば、myPalette.model.nodeDataArrayに表示されるとまったく同じ順序で、パレットを表示したい場合、必要に応じて、カスタムソートする関数GridLayout.comparerのプロパティを設定すれば良い

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