You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
5.9 KiB
163 lines
5.9 KiB
<!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>
|