gojs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/> <link rel="stylesheet" href="../assets/css/style.css"/>  <title> GoJS Layers -- Northwoods Software </title> <link rel="stylesheet" href="../assets/css/prism.css" /> </head> <script> window.diagrams = []; window.goCode = function(pre, w, h, parentid, animation) { window.diagrams.push([pre, w, h, parentid, animation]); } </script> <body> <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"> <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"> <div class="md:pl-4"> <a class="text-white hover:text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../"> <h1 class="my-0 p-1 ">GoJS</h1> </a> </div> <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <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> <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> </svg> </button> <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"> <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"> <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto"> <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0"> <div class="flex-shrink-0 px-8 py-4"> <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <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> <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> </svg> </button> </div> <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"> <a href="index.html">Basics</a> <a href="buildingObjects.html">Building Parts</a> <a href="usingModels.html">Using Models</a> <a href="dataBinding.html">Data Binding</a> <a href="react.html">GoJS with React</a> <a href="angular.html">GoJS with Angular</a> <a href="textBlocks.html">TextBlocks</a> <a href="shapes.html">Shapes</a> <a href="pictures.html">Pictures</a> <a href="panels.html">Panels</a> <a href="tablePanels.html">Table Panels</a> <a href="brush.html">Brushes</a> <a href="sizing.html">Sizing Objects</a> <a href="itemArrays.html">Item Arrays</a> <a href="changedEvents.html">Changed Events</a> <a href="transactions.html">Transactions</a> <a href="viewport.html">Coordinates</a> <a href="initialView.html">Initial View</a> <a href="collections.html">Collections</a> <a href="links.html">Links</a> <a href="linkLabels.html">Link Labels</a> <a href="connectionPoints.html">Link Points</a> <a href="ports.html">Ports</a> <a href="nodes.html">Nodes</a> <a href="typings.html">Typings</a> <a href="debugging.html">Debugging</a> <a href="layouts.html">Layouts</a> <a href="trees.html">Trees</a> <a href="subtrees.html">SubTrees</a> <a href="groups.html">Groups</a> <a href="subgraphs.html">SubGraphs</a> <a href="sizedGroups.html">Sized Groups</a> <a href="selection.html">Selection</a> <a href="highlighting.html">Highlighting</a> <a href="animation.html">Animation</a> <a href="toolTips.html">ToolTips</a> <a href="contextmenus.html">Context Menus</a> <a href="events.html">Diagram Events</a> <a href="tools.html">Tools</a> <a href="commands.html">Commands</a> <a href="permissions.html">Permissions</a> <a href="validation.html">Validation</a> <a href="HTMLInteraction.html">HTML Interaction</a> <a href="layers.html">Layers & Z-ordering</a> <a href="palette.html">Palette</a> <a href="overview.html">Overview</a> <a href="resizing.html">Resizing Diagrams</a> <a href="replacingDeleting.html">Replacing and Deleting</a> <a href="buttons.html">Buttons</a> <a href="templateMaps.html">Template Maps</a> <a href="legends.html">Legends and Titles</a> <a href="extensions.html">Extensions</a> <a href="geometry.html">Geometry Strings</a> <a href="grids.html">Grid Patterns</a> <a href="graduatedPanels.html">Graduated Panels</a> <a href="makingImages.html">Diagram Images</a> <a href="makingSVG.html">Diagram SVG</a> <a href="printing.html">Printing</a> <a href="serverSideImages.html">Server-side Images</a> <a href="nodeScript.html">GoJS in Node.js</a> <a href="testing.html">Testing</a> <a href="storage.html">Storage</a> <a href="performance.html">Performance</a> <a href="source.html">Building from Source</a> <a href="platforms.html">Platforms</a> <a href="deployment.html">Deployment</a> </nav> </div> <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden"> <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 class="lang-js" id="layers"><code> // 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: p => { p.layerName = (p.isSelected ? "Foreground" : p.data.color); }, layerChanged: (p, oldLayer, newLayer) => { if (newLayer !== null) p.elt(1).text = newLayer.name; } } ); var array = []; for (let 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 = (layername, e) => { diagram.commit(d => { var layer = d.findLayer(layername); if (layer !== null) layer.visible = e.currentTarget.checked; }, 'toggle ' + layername); }; </code></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 class="lang-js" id="zOrder"><code> function changeZOrder(amt, obj) { diagram.commit(d => { var data = obj.part.data; d.model.set(data, "zOrder", data.zOrder + amt); }, '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: (e, obj) => changeZOrder(-1, obj) }, $(go.Shape, "LineH", { width: 14, height: 14 })), $("Button", { alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight, click: (e, obj) => changeZOrder(1, obj) }, $(go.Shape, "PlusLine", { width: 14, height: 14 })) ); var array = []; for (let 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; </code></pre> <script>goCode("zOrder", 610, 310)</script> </div> </div> <div class="bg-nwoods-primary"> <section class="max-w-screen-lg text-white container mx-auto py-2 px-12"> <p id="version" class="leading-none mb-2 my-4">GoJS</p> </section> </div><footer class="bg-nwoods-primary text-white"> <div class="container max-w-screen-lg mx-auto px-8"> <div class="w-full py-6"> <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8"> <ul class="text-sm font-medium pb-6 grid grid-cols-2 sm:grid-cols-3 gap-y-10"> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">GoJS</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a href="../samples/index.html">Samples</a> </li> <li> <a href="../learn/index.html">Learn</a> </li> <li> <a href="../intro/index.html">Intro</a> </li> <li> <a href="../api/index.html">API</a> </li> <li> <a href="../changelog.html">Changelog</a> </li> <li> <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a> </li> </ul> </li> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">Support</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a> </li> <li> <a href="https://forum.nwoods.com/c/gojs">Forum</a> </li> <li> <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a> </li> <li> <a href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a> </li> <li> <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a> </li> </ul> </li> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">Company</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a target="_blank" href="https://www.nwoods.com">Northwoods</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/about.html">About Us</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a> </li> <li> <a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a> </li> </ul> </li> </ul> <p class="text-sm text-gray-100 md:mb-6"> Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a> </p> </div> </div> </footer> </body> <script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-S5QK8VSK84'); var getOutboundLink = function(url, label) { gtag('event', 'click', { 'event_category': 'outbound', 'event_label': label, 'transport_type': 'beacon' }); } // topnav var topButton = document.getElementById("topnavButton"); var topnavList = document.getElementById("topnavList"); topButton.addEventListener("click", function() { this.classList.toggle("active"); topnavList.classList.toggle("hidden"); document.getElementById("topnavOpen").classList.toggle("hidden"); document.getElementById("topnavClosed").classList.toggle("hidden"); }); </script> <script src="../assets/js/prism.js"></script> <script src="../release/go.js"></script> <script src="../assets/js/goDoc.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version; if (window.goDoc) window.goDoc(); var d = window.diagrams; for (var i = 0; i < d.length; i++) { var dargs = d[i]; goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]); } if (window.extra) window.extra(); }); </script> </html>