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 Sized Groups -- 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>Groups Without Placeholders</h1> <p> Although it is very common to use a <a>Placeholder</a> inside a <a>Group</a>, it is not required. Using a <a>Shape</a>, for example, instead of a <a>Placeholder</a> permits features such as having a group maintain a fixed size, independent of the sizes and positions of its member nodes, and even when there are no member nodes at all. It also may allow the user to resize the "area" if that functionality is desired. </p> <h2 id="FixedSizeGroups">Fixed size Groups</h2> <p> Not using a <a>Placeholder</a> in a <a>Group</a> means that you have to maintain the size and position of the group, because it cannot depend on the size and position of its member nodes. In these examples we will explicitly set and/or bind the <a>Part.location</a> of the nodes, including the groups. The <a>Shape</a> that replaces the Placeholder in the group's template should also get its <a>GraphObject.desiredSize</a> set or bound. </p> <pre class="lang-js" id="fixedSize"><code> diagram.nodeTemplate = $(go.Node, new go.Binding("location", "loc", go.Point.parse), $(go.TextBlock, new go.Binding("text", "key")) ); diagram.groupTemplate = $(go.Group, "Vertical", { selectionObjectName: "PH", locationObjectName: "PH" }, new go.Binding("location", "loc", go.Point.parse), $(go.TextBlock, // group title { font: "Bold 12pt Sans-Serif" }, new go.Binding("text", "key")), $(go.Shape, // using a Shape instead of a Placeholder { name: "PH", fill: "lightyellow" }, new go.Binding("desiredSize", "size", go.Size.parse)) ); var nodeDataArray = [ { key: "Alpha", loc: "0 0" }, { key: "Beta", group: "Omega", loc: "75 75" }, { key: "Gamma", group: "Omega", loc: "125 75" }, { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" }, { key: "Delta", loc: "200 0" } ]; var linkDataArray = [ { from: "Alpha", to: "Beta" }, // from outside the Group to inside it { from: "Beta", to: "Gamma" }, // this link is a member of the Group { from: "Omega", to: "Delta" } // from the Group to a Node ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); diagram.select(diagram.findNodeForKey("Omega")); </code></pre> <script>goCode("fixedSize", 600, 150)</script> <p> Note that moving the "Beta" or "Gamma" nodes does <i>not</i> change the size or position of the "Omega" group. However moving or copying or deleting the group includes those member nodes in the operation. </p> <p> One can control where the user may drag member nodes. For example, the <a href="../samples/swimlanes.html" target="_blank">Swim Lanes</a> sample demonstrates a custom <a>Part.dragComputation</a> function that limits the motion of a member node to stay within its containing group. </p> <h2 id="ResizableGroups">Resizable Groups</h2> <p> You can make the main shape resizable by the user. (At the current time groups are not rotatable.) </p> <p> This example also makes the <a>Part.location</a> and <a>GraphObject.desiredSize</a> data bindings TwoWay, so that as the user moves groups or resizes their main shapes, the data in the model is updated automatically. </p> <pre class="lang-js" id="resizable"><code> diagram.nodeTemplate = $(go.Node, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.TextBlock, new go.Binding("text", "key")) ); diagram.groupTemplate = $(go.Group, "Vertical", { selectionObjectName: "PH", locationObjectName: "PH", resizable: true, resizeObjectName: "PH" }, new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.TextBlock, // group title { font: "Bold 12pt Sans-Serif" }, new go.Binding("text", "key")), $(go.Shape, // using a Shape instead of a Placeholder { name: "PH", fill: "lightyellow" }, new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)) ); var nodeDataArray = [ { key: "Alpha", loc: "0 0" }, { key: "Beta", group: "Omega", loc: "75 75" }, { key: "Gamma", group: "Omega", loc: "125 75" }, { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" }, { key: "Delta", loc: "200 0" } ]; var linkDataArray = [ { from: "Alpha", to: "Beta" }, // from outside the Group to inside it { from: "Beta", to: "Gamma" }, // this link is a member of the Group { from: "Omega", to: "Delta" } // from the Group to a Node ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); diagram.select(diagram.findNodeForKey("Omega")); </code></pre> <script>goCode("resizable", 600, 150)</script> <p> It is also possible to control how the user resizes a group. For example, the <a href="../samples/swimlanes.html" target="_blank">Swim Lanes</a> sample demonstrates a custom <a>ResizingTool</a> that limits how small each lane can go. It also demonstrates a custom <a>Adornment</a> that has only two resize handles. </p> <h2 id="ContainersThatAreNotGroups">Containers that are not Groups</h2> <p> You do not have to use <a>Group</a>s as the only mechanism by which to organize a collection of <a>Part</a>s. For example, the <a href="../samples/swimBands.html" target="_blank">Layer Bands</a> sample demonstrates how some <a>Layout</a>s can be customized to automatically maintain the positions and sizes of special parts that are in the background, appearing to surround the nodes that belong to each layout layer. </p> <p> Not using <a>Group</a>s also means that it becomes possible to avoid some of the restrictions inherent in Groups, such as the limitation that each Part can have at most one <a>Part.containingGroup</a>. The <a href="../samples/sharedStates.html" target="_blank">Shared States</a> sample demonstrates how one can make it appear that more than one "group" can contain a node. However, this requires some additional custom <a>Tool</a>s and custom <a>Layout</a>s, or always explicitly setting/binding the location and size of every node and "group". </p> </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>