UNPKG

19 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6
7<link rel="stylesheet" href="../assets/css/style.css"/>
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS Layers -- Northwoods Software </title>
9 <link rel="stylesheet" href="../assets/css/prism.css" />
10 </head>
11 <script>
12
13 window.diagrams = [];
14 window.goCode = function(pre, w, h, parentid, animation) {
15 window.diagrams.push([pre, w, h, parentid, animation]);
16 }
17 </script>
18 <body>
19 <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
20 <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
21 <div class="md:pl-4">
22 <a class="text-white hover:text-white no-underline hover:no-underline
23 font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
24 <h1 class="mb-0 p-1 ">GoJS</h1>
25 </a>
26 </div>
27 <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
28 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
29 <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
30 <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
31 </svg>
32 </button>
33 <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
34 <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
35 <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
36 <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
37 <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
38 <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
39 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
40 <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
41 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
42 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
43 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
44 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
45 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
46 </ul>
47 </div>
48 </div>
49 <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
50 </nav>
51
52 <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
53
54 <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
55 <div class="flex-shrink-0 px-8 py-4">
56 <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
57 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
58 <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
59 <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
60 </svg>
61 </button>
62 </div>
63 <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
64 <a href="index.html">Basics</a>
65 <a href="buildingObjects.html">Building Parts</a>
66 <a href="usingModels.html">Using Models</a>
67 <a href="dataBinding.html">Data Binding</a>
68 <a href="react.html">GoJS with React</a>
69 <a href="angular.html">GoJS with Angular</a>
70 <a href="textBlocks.html">TextBlocks</a>
71 <a href="shapes.html">Shapes</a>
72 <a href="pictures.html">Pictures</a>
73 <a href="panels.html">Panels</a>
74 <a href="tablePanels.html">Table Panels</a>
75 <a href="brush.html">Brushes</a>
76 <a href="sizing.html">Sizing Objects</a>
77 <a href="itemArrays.html">Item Arrays</a>
78 <a href="changedEvents.html">Changed Events</a>
79 <a href="transactions.html">Transactions</a>
80 <a href="viewport.html">Coordinates</a>
81 <a href="initialView.html">Initial View</a>
82 <a href="collections.html">Collections</a>
83 <a href="links.html">Links</a>
84 <a href="linkLabels.html">Link Labels</a>
85 <a href="connectionPoints.html">Link Points</a>
86 <a href="ports.html">Ports</a>
87 <a href="nodes.html">Nodes</a>
88 <a href="debugging.html">Debugging</a>
89 <a href="layouts.html">Layouts</a>
90 <a href="trees.html">Trees</a>
91 <a href="subtrees.html">SubTrees</a>
92 <a href="groups.html">Groups</a>
93 <a href="subgraphs.html">SubGraphs</a>
94 <a href="sizedGroups.html">Sized Groups</a>
95 <a href="selection.html">Selection</a>
96 <a href="highlighting.html">Highlighting</a>
97 <a href="animation.html">Animation</a>
98 <a href="toolTips.html">ToolTips</a>
99 <a href="contextmenus.html">Context Menus</a>
100 <a href="events.html">Diagram Events</a>
101 <a href="tools.html">Tools</a>
102 <a href="commands.html">Commands</a>
103 <a href="permissions.html">Permissions</a>
104 <a href="validation.html">Validation</a>
105 <a href="HTMLInteraction.html">HTML Interaction</a>
106 <a href="layers.html">Layers &amp; Z-ordering</a>
107 <a href="palette.html">Palette</a>
108 <a href="overview.html">Overview</a>
109 <a href="resizing.html">Resizing Diagrams</a>
110 <a href="replacingDeleting.html">Replacing and Deleting</a>
111 <a href="buttons.html">Buttons</a>
112 <a href="templateMaps.html">Template Maps</a>
113 <a href="legends.html">Legends and Titles</a>
114 <a href="extensions.html">Extensions</a>
115 <a href="geometry.html">Geometry Strings</a>
116 <a href="grids.html">Grid Patterns</a>
117 <a href="graduatedPanels.html">Graduated Panels</a>
118 <a href="makingImages.html">Diagram Images</a>
119 <a href="makingSVG.html">Diagram SVG</a>
120 <a href="printing.html">Printing</a>
121 <a href="serverSideImages.html">Server-side Images</a>
122 <a href="nodeScript.html">GoJS in Node.js</a>
123 <a href="testing.html">Testing</a>
124 <a href="storage.html">Storage</a>
125 <a href="performance.html">Performance</a>
126 <a href="source.html">Building from Source</a>
127 <a href="platforms.html">Platforms</a>
128 <a href="deployment.html">Deployment</a>
129 </nav>
130 </div>
131 <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Layers and Z-ordering</h1>
137<p>
138All <a>Part</a>s that are in a <a>Diagram</a> actually belong to a <a>Layer</a> in the diagram.
139You can control the visibility, Z-order, and various user permissions for all of the parts in each layer.
140</p>
141
142<p>
143Parts can be individually modified to toggle their visibility using <a>Part.visible</a> or <a>Part.opacity</a>.
144Parts can be individually Z-ordered within layers using <a>Part.zOrder</a>.
145</p>
146
147<h2 id="StandardLayers">Standard Layers</h2>
148<p>
149Every Diagram starts off with several standard layers.
150These are their <a>Layer.name</a>s, in order from furthest behind to most in front:
151</p>
152<ul>
153 <li><b>"Grid"</b>, holding the <a>Diagram.grid</a> and any other static Parts that you wish to be behind everything</li>
154 <li><b>"Background"</b></li>
155 <li><b>""</b>, the default layer</li>
156 <li><b>"Foreground"</b></li>
157 <li><b>"Adornment"</b>, holding <a>Adornment</a>s for selection and various Tools</li>
158 <li><b>"Tool"</b>, holding Parts used in the execution of various Tools</li>
159</ul>
160<p>
161Each Part is placed in a Layer according to its <a>Part.layerName</a>.
162The default value is the empty string.
163Use <a>Diagram.findLayer</a> to find a Layer given a layer name.
164Change which layer a part is in by setting <a>Part.layerName</a>.
165</p>
166<p>
167Changes to Parts in the "Grid", "Adornment", and "Tool" Layers are automatically ignored by the <a>UndoManager</a>,
168because <a>Layer.isTemporary</a> is true.
169</p>
170<p>
171Parts in the "Grid" Layer are not selectable, because <a>Layer.allowSelect</a> is false.
172This prevents the user from selecting the background grid when it is visible.
173</p>
174
175<h2 id="LayersExample">Layers Example</h2>
176<p>
177This example adds several <a>Layer</a>s to the diagram, each named by a color,
178and then creates a bunch of colored parts at random locations.
179Every <a>Part.layerName</a> is data-bound to the "color" property of the node data.
180</p>
181<p>
182In addition there are checkboxes for each layer, controlling the visibility of the respective layer.
183You can see how all of the parts of the same color appear and disappear according to the value of the checkbox.
184Furthermore you can see how they all have the same depth in the Z-ordering.
185</p>
186<p>
187Finally, each Part has a <a>Part.selectionChanged</a> function which puts the part in the "Foreground"
188layer when it is selected and back in its normal color layer when it is not selected.
189</p>
190<pre class="lang-js" id="layers"><code>
191 // These new layers come in front of the standard regular layers,
192 // but behind the "Foreground" layer:
193 var forelayer = diagram.findLayer("Foreground");
194 diagram.addLayerBefore($(go.Layer, { name: "blue" }), forelayer);
195 diagram.addLayerBefore($(go.Layer, { name: "green" }), forelayer);
196 diagram.addLayerBefore($(go.Layer, { name: "orange" }), forelayer);
197
198 diagram.nodeTemplate =
199 $(go.Part, "Spot", // no links or grouping, so can use the simpler Part class
200 new go.Binding("layerName", "color"),
201 new go.Binding("location", "loc"),
202 $(go.Shape,
203 { width: 80, height: 80 },
204 new go.Binding("fill", "color")),
205 $(go.TextBlock,
206 { stroke: "white", font: "bold 12px sans-serif" }),
207 {
208 selectionChanged: function(p) {
209 p.layerName = (p.isSelected ? "Foreground" : p.data.color);
210 },
211 layerChanged: function(p, oldLayer, newLayer) {
212 if (newLayer !== null) p.elt(1).text = newLayer.name;
213 }
214 }
215 );
216
217 var array = [];
218 for (var i = 0; i &lt; 12; i++) {
219 var data = { loc: new go.Point(Math.random()*520, Math.random()*200) };
220 switch (Math.floor(Math.random()*3)) {
221 case 0: data.color = "blue"; break;
222 case 1: data.color = "green"; break;
223 case 2: data.color = "orange"; break;
224 default: data.color = "Foreground"; break;
225 }
226 array.push(data);
227 }
228 diagram.model.nodeDataArray = array;
229 diagram.undoManager.isEnabled = true;
230
231 // define this function so that the checkbox event handlers can call it
232 toggleVisible = function(layername, e) {
233 diagram.commit(function(d) {
234 var layer = d.findLayer(layername);
235 if (layer !== null) layer.visible = e.currentTarget.checked;
236 }, 'toggle ' + layername);
237 };
238</code></pre>
239<script>goCode("layers", 610, 290)</script>
240Layer visibility:<br />
241<input type="checkbox" checked="checked" onclick="toggleVisible('blue', event)" />blue
242<input type="checkbox" checked="checked" onclick="toggleVisible('green', event)" />green
243<input type="checkbox" checked="checked" onclick="toggleVisible('orange', event)" />orange
244<input type="checkbox" checked="checked" onclick="toggleVisible('Foreground', event)" />Foreground
245
246
247<h2 id="ZOrderExample">ZOrder Example</h2>
248<p>
249This example adds several <a>Part</a>s to one Layer (the default) in the diagram.
250Every <a>Part.zOrder</a> is data-bound to the "zOrder" property of the node data, as is its text.
251</p>
252<p>
253Buttons on the Part can be used to modify the z-order of each.
254</p>
255<pre class="lang-js" id="zOrder"><code>
256 function changeZOrder(amt, obj) {
257 diagram.commit(function(d) {
258 var data = obj.part.data;
259 d.model.set(data, "zOrder", data.zOrder + amt);
260 }, 'modified zOrder');
261 }
262
263 diagram.nodeTemplate =
264 $(go.Part, "Spot",
265 new go.Binding("layerName", "color"),
266 new go.Binding("location", "loc"),
267 new go.Binding("zOrder"),
268 $(go.Shape,
269 { width: 100, height: 100, stroke: 'rgb(50,50,50)', fill: 'rgb(50,100,255)' }),
270 $(go.TextBlock,
271 { font: "52px sans-serif", stroke: 'whitesmoke' },
272 new go.Binding("text", "zOrder")),
273 $("Button",
274 { alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft,
275 click: function (e, obj) { changeZOrder(-1, obj); } },
276 $(go.Shape, "LineH", { width: 14, height: 14 })),
277 $("Button",
278 { alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight,
279 click: function (e, obj) { changeZOrder(1, obj); } },
280 $(go.Shape, "PlusLine", { width: 14, height: 14 }))
281 );
282
283 var array = [];
284 for (var i = 0; i < 12; i++) {
285 var data = { loc: new go.Point(Math.random()*500, Math.random()*200) };
286 data.zOrder = (Math.floor(Math.random()*20))
287 array.push(data);
288 }
289 diagram.model.nodeDataArray = array;
290 diagram.undoManager.isEnabled = true;
291</code></pre>
292<script>goCode("zOrder", 610, 310)</script>
293
294
295
296
297 </div>
298 </div>
299
300 <div class="bg-nwoods-primary">
301 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
302 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
303 </section>
304 </div><footer class="bg-nwoods-primary text-white">
305 <div class="container max-w-screen-lg mx-auto px-8">
306 <div class="w-full py-6">
307
308 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
309 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
310 <li class="list-none row-span-2">
311 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
312 <ul class="list-none space-y-4 md:space-y-1 px-0">
313 <li>
314 <a href="../samples/index.html">Samples</a>
315 </li>
316 <li>
317 <a href="../learn/index.html">Learn</a>
318 </li>
319 <li>
320 <a href="../intro/index.html">Intro</a>
321 </li>
322 <li>
323 <a href="../api/index.html">API</a>
324 </li>
325 <li>
326 <a href="../changelog.html">Changelog</a>
327 </li>
328 <li>
329 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
330 </li>
331 </ul>
332 </li>
333 <li class="list-none row-span-2">
334 <h2 class="text-base font-semibold tracking-wide">Support</h2>
335 <ul class="list-none space-y-4 md:space-y-1 px-0">
336 <li>
337 <a href="https://www.nwoods.com/contact.html"
338 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
339 </li>
340 <li>
341 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
342 </li>
343 <li>
344 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
345 </li>
346 <li>
347 <a href="https://www.nwoods.com/sales/index.html"
348 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
349 </li>
350 <li>
351 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
352 </li>
353 </ul>
354 </li>
355 <li class="list-none row-span-2">
356 <h2 class="text-base font-semibold tracking-wide">Company</h2>
357 <ul class="list-none space-y-4 md:space-y-1 px-0">
358 <li>
359 <a href="https://www.nwoods.com">Northwoods</a>
360 </li>
361 <li>
362 <a href="https://www.nwoods.com/about.html">About Us</a>
363 </li>
364 <li>
365 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
366 </li>
367 <li>
368 <a href="https://twitter.com/northwoodsgo">Twitter</a>
369 </li>
370
371 </ul>
372 </li>
373 </ul>
374
375
376 <p class="text-sm text-gray-100 md:mb-6">
377 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
378 </p>
379 </div>
380 </div>
381</footer> </body>
382
383<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
384<script>
385 window.dataLayer = window.dataLayer || [];
386 function gtag(){dataLayer.push(arguments);}
387 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
388 var getOutboundLink = function(url, label) {
389 gtag('event', 'click', {
390 'event_category': 'outbound',
391 'event_label': label,
392 'transport_type': 'beacon'
393 });
394 }
395
396 // topnav
397 var topButton = document.getElementById("topnavButton");
398 var topnavList = document.getElementById("topnavList");
399 topButton.addEventListener("click", function() {
400 this.classList.toggle("active");
401 topnavList.classList.toggle("hidden");
402 document.getElementById("topnavOpen").classList.toggle("hidden");
403 document.getElementById("topnavClosed").classList.toggle("hidden");
404 });
405</script>
406 <script src="../assets/js/prism.js"></script>
407 <script src="../release/go.js"></script>
408 <script src="../assets/js/goDoc.js"></script>
409 <script>
410 document.addEventListener("DOMContentLoaded", function() {
411 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
412 if (window.goDoc) window.goDoc();
413 var d = window.diagrams;
414 for (var i = 0; i < d.length; i++) {
415 var dargs = d[i];
416 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
417 }
418 if (window.extra) window.extra();
419 });
420 </script>
421</html>