180 lines
6.8 KiB
HTML
180 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS Layers -- Northwoods Software</title>
|
|
<!-- Copyright 1998-2017 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>Layers and Z-ordering</h1>
|
|
<p>
|
|
All <a>Part</a>s that are in a <a>Diagram</a> actually belong to a <a>Layer</a> in the diagram.
|
|
You can control the visibility, Z-order, and various user permissions for all of the parts in each layer.
|
|
</p>
|
|
|
|
<p>
|
|
Parts can be individually modified to toggle their visibility using <a>Part.visible</a> or <a>Part.opacity</a>.
|
|
Parts can be individually Z-ordered within layers using <a>Part.zOrder</a>.
|
|
</p>
|
|
|
|
<h2 id="StandardLayers">Standard Layers</h2>
|
|
<p>
|
|
Every Diagram starts off with several standard layers.
|
|
These are their <a>Layer.name</a>s, in order from furthest behind to most in front:
|
|
</p>
|
|
<ul>
|
|
<li><b>"Grid"</b>, holding the <a>Diagram.grid</a> and any other static Parts that you wish to be behind everything</li>
|
|
<li><b>"Background"</b></li>
|
|
<li><b>""</b>, the default layer</li>
|
|
<li><b>"Foreground"</b></li>
|
|
<li><b>"Adornment"</b>, holding <a>Adornment</a>s for selection and various Tools</li>
|
|
<li><b>"Tool"</b>, holding Parts used in the execution of various Tools</li>
|
|
</ul>
|
|
<p>
|
|
Each Part is placed in a Layer according to its <a>Part.layerName</a>.
|
|
The default value is the empty string.
|
|
Use <a>Diagram.findLayer</a> to find a Layer given a layer name.
|
|
Change which layer a part is in by setting <a>Part.layerName</a>.
|
|
</p>
|
|
<p>
|
|
Changes to Parts in the "Grid", "Adornment", and "Tool" Layers are automatically ignored by the <a>UndoManager</a>,
|
|
because <a>Layer.isTemporary</a> is true.
|
|
</p>
|
|
<p>
|
|
Parts in the "Grid" Layer are not selectable, because <a>Layer.allowSelect</a> is false.
|
|
This prevents the user from selecting the background grid when it is visible.
|
|
</p>
|
|
|
|
<h2 id="LayersExample">Layers Example</h2>
|
|
<p>
|
|
This example adds several <a>Layer</a>s to the diagram, each named by a color,
|
|
and then creates a bunch of colored parts at random locations.
|
|
Every <a>Part.layerName</a> is data-bound to the "color" property of the node data.
|
|
</p>
|
|
<p>
|
|
In addition there are checkboxes for each layer, controlling the visibility of the respective layer.
|
|
You can see how all of the parts of the same color appear and disappear according to the value of the checkbox.
|
|
Furthermore you can see how they all have the same depth in the Z-ordering.
|
|
</p>
|
|
<p>
|
|
Finally, each Part has a <a>Part.selectionChanged</a> function which puts the part in the "Foreground"
|
|
layer when it is selected and back in its normal color layer when it is not selected.
|
|
</p>
|
|
<pre data-language="javascript" id="layers">
|
|
// These new layers come in front of the standard regular layers,
|
|
// but behind the "Foreground" layer:
|
|
var forelayer = diagram.findLayer("Foreground");
|
|
diagram.addLayerBefore($(go.Layer, { name: "blue" }), forelayer);
|
|
diagram.addLayerBefore($(go.Layer, { name: "green" }), forelayer);
|
|
diagram.addLayerBefore($(go.Layer, { name: "orange" }), forelayer);
|
|
|
|
diagram.nodeTemplate =
|
|
$(go.Part, "Spot", // no links or grouping, so can use the simpler Part class
|
|
new go.Binding("layerName", "color"),
|
|
new go.Binding("location", "loc"),
|
|
$(go.Shape,
|
|
{ width: 80, height: 80 },
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock,
|
|
{ stroke: "white", font: "bold 12px sans-serif" }),
|
|
{
|
|
selectionChanged: function(p) {
|
|
p.layerName = (p.isSelected ? "Foreground" : p.data.color);
|
|
},
|
|
layerChanged: function(p, oldLayer, newLayer) {
|
|
if (newLayer !== null) p.elt(1).text = newLayer.name;
|
|
}
|
|
}
|
|
);
|
|
|
|
var array = [];
|
|
for (var i = 0; i < 12; i++) {
|
|
var data = { loc: new go.Point(Math.random()*520, Math.random()*200) };
|
|
switch (Math.floor(Math.random()*3)) {
|
|
case 0: data.color = "blue"; break;
|
|
case 1: data.color = "green"; break;
|
|
case 2: data.color = "orange"; break;
|
|
default: data.color = "Foreground"; break;
|
|
}
|
|
array.push(data);
|
|
}
|
|
diagram.model.nodeDataArray = array;
|
|
diagram.undoManager.isEnabled = true;
|
|
|
|
// define this function so that the checkbox event handlers can call it
|
|
toggleVisible = function(layername, e) {
|
|
diagram.startTransaction('toggle ' + layername);
|
|
var layer = diagram.findLayer(layername);
|
|
if (layer !== null) layer.visible = e.currentTarget.checked;
|
|
diagram.commitTransaction('toggle ' + layername);
|
|
};
|
|
</pre>
|
|
<script>goCode("layers", 610, 290)</script>
|
|
Layer visibility:<br />
|
|
<input type="checkbox" checked="checked" onclick="toggleVisible('blue', event)" />blue
|
|
<input type="checkbox" checked="checked" onclick="toggleVisible('green', event)" />green
|
|
<input type="checkbox" checked="checked" onclick="toggleVisible('orange', event)" />orange
|
|
<input type="checkbox" checked="checked" onclick="toggleVisible('Foreground', event)" />Foreground
|
|
|
|
|
|
<h2 id="ZOrderExample">ZOrder Example</h2>
|
|
<p>
|
|
This example adds several <a>Part</a>s to one Layer (the default) in the diagram.
|
|
Every <a>Part.zOrder</a> is data-bound to the "zOrder" property of the node data, as is its text.
|
|
</p>
|
|
<p>
|
|
Buttons on the Part can be used to modify the z-order of each.
|
|
</p>
|
|
<pre data-language="javascript" id="zOrder">
|
|
function changeZOrder(amt, obj) {
|
|
var data = obj.part.data;
|
|
diagram.startTransaction('modified zOrder');
|
|
diagram.model.setDataProperty(data, "zOrder", data.zOrder + amt);
|
|
diagram.commitTransaction('modified zOrder');
|
|
}
|
|
|
|
diagram.nodeTemplate =
|
|
$(go.Part, "Spot",
|
|
new go.Binding("layerName", "color"),
|
|
new go.Binding("location", "loc"),
|
|
new go.Binding("zOrder"),
|
|
$(go.Shape,
|
|
{ width: 100, height: 100, stroke: 'rgb(50,50,50)', fill: 'rgb(50,100,255)' }),
|
|
$(go.TextBlock,
|
|
{ font: "52px sans-serif", stroke: 'whitesmoke' },
|
|
new go.Binding("text", "zOrder")),
|
|
$("Button",
|
|
{ alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft,
|
|
click: function (e, obj) { changeZOrder(-1, obj); } },
|
|
$(go.Shape, "LineH", { width: 14, height: 14 })),
|
|
$("Button",
|
|
{ alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight,
|
|
click: function (e, obj) { changeZOrder(1, obj); } },
|
|
$(go.Shape, "PlusLine", { width: 14, height: 14 }))
|
|
);
|
|
|
|
var array = [];
|
|
for (var i = 0; i < 12; i++) {
|
|
var data = { loc: new go.Point(Math.random()*500, Math.random()*200) };
|
|
data.zOrder = (Math.floor(Math.random()*20))
|
|
array.push(data);
|
|
}
|
|
diagram.model.nodeDataArray = array;
|
|
diagram.undoManager.isEnabled = true;
|
|
</pre>
|
|
<script>goCode("zOrder", 610, 310)</script>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|