UNPKG

18.8 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 Sized Groups -- 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>Groups Without Placeholders</h1>
137<p>
138Although it is very common to use a <a>Placeholder</a> inside a <a>Group</a>, it is not required.
139Using a <a>Shape</a>, for example, instead of a <a>Placeholder</a> permits features such as
140having a group maintain a fixed size, independent of the sizes and positions of its member nodes,
141and even when there are no member nodes at all.
142It also may allow the user to resize the "area" if that functionality is desired.
143</p>
144
145<h2 id="FixedSizeGroups">Fixed size Groups</h2>
146<p>
147Not using a <a>Placeholder</a> in a <a>Group</a> means that you have to maintain the size and position of the group,
148because it cannot depend on the size and position of its member nodes.
149In these examples we will explicitly set and/or bind the <a>Part.location</a> of the nodes, including the groups.
150The <a>Shape</a> that replaces the Placeholder in the group's template should also get its <a>GraphObject.desiredSize</a> set or bound.
151</p>
152<pre class="lang-js" id="fixedSize"><code>
153 diagram.nodeTemplate =
154 $(go.Node,
155 new go.Binding("location", "loc", go.Point.parse),
156 $(go.TextBlock,
157 new go.Binding("text", "key"))
158 );
159
160 diagram.groupTemplate =
161 $(go.Group, "Vertical",
162 { selectionObjectName: "PH",
163 locationObjectName: "PH" },
164 new go.Binding("location", "loc", go.Point.parse),
165 $(go.TextBlock, // group title
166 { font: "Bold 12pt Sans-Serif" },
167 new go.Binding("text", "key")),
168 $(go.Shape, // using a Shape instead of a Placeholder
169 { name: "PH",
170 fill: "lightyellow" },
171 new go.Binding("desiredSize", "size", go.Size.parse))
172 );
173
174 var nodeDataArray = [
175 { key: "Alpha", loc: "0 0" },
176 { key: "Beta", group: "Omega", loc: "75 75" },
177 { key: "Gamma", group: "Omega", loc: "125 75" },
178 { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
179 { key: "Delta", loc: "200 0" }
180 ];
181 var linkDataArray = [
182 { from: "Alpha", to: "Beta" }, // from outside the Group to inside it
183 { from: "Beta", to: "Gamma" }, // this link is a member of the Group
184 { from: "Omega", to: "Delta" } // from the Group to a Node
185 ];
186 diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
187 diagram.select(diagram.findNodeForKey("Omega"));
188</code></pre>
189<script>goCode("fixedSize", 600, 150)</script>
190<p>
191Note that moving the "Beta" or "Gamma" nodes does <i>not</i> change the size or position of the "Omega" group.
192However moving or copying or deleting the group includes those member nodes in the operation.
193</p>
194<p>
195One can control where the user may drag member nodes.
196For example, the <a href="../samples/swimlanes.html" target="_blank">Swim Lanes</a> sample
197demonstrates a custom <a>Part.dragComputation</a> function that limits the
198motion of a member node to stay within its containing group.
199</p>
200
201<h2 id="ResizableGroups">Resizable Groups</h2>
202<p>
203You can make the main shape resizable by the user.
204(At the current time groups are not rotatable.)
205</p>
206<p>
207This example also makes the <a>Part.location</a> and <a>GraphObject.desiredSize</a> data bindings TwoWay,
208so that as the user moves groups or resizes their main shapes, the data in the model is updated automatically.
209</p>
210<pre class="lang-js" id="resizable"><code>
211 diagram.nodeTemplate =
212 $(go.Node,
213 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
214 $(go.TextBlock,
215 new go.Binding("text", "key"))
216 );
217
218 diagram.groupTemplate =
219 $(go.Group, "Vertical",
220 { selectionObjectName: "PH",
221 locationObjectName: "PH",
222 resizable: true,
223 resizeObjectName: "PH" },
224 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
225 $(go.TextBlock, // group title
226 { font: "Bold 12pt Sans-Serif" },
227 new go.Binding("text", "key")),
228 $(go.Shape, // using a Shape instead of a Placeholder
229 { name: "PH",
230 fill: "lightyellow" },
231 new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify))
232 );
233
234 var nodeDataArray = [
235 { key: "Alpha", loc: "0 0" },
236 { key: "Beta", group: "Omega", loc: "75 75" },
237 { key: "Gamma", group: "Omega", loc: "125 75" },
238 { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
239 { key: "Delta", loc: "200 0" }
240 ];
241 var linkDataArray = [
242 { from: "Alpha", to: "Beta" }, // from outside the Group to inside it
243 { from: "Beta", to: "Gamma" }, // this link is a member of the Group
244 { from: "Omega", to: "Delta" } // from the Group to a Node
245 ];
246 diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
247 diagram.select(diagram.findNodeForKey("Omega"));
248</code></pre>
249<script>goCode("resizable", 600, 150)</script>
250<p>
251It is also possible to control how the user resizes a group.
252For example, the <a href="../samples/swimlanes.html" target="_blank">Swim Lanes</a> sample
253demonstrates a custom <a>ResizingTool</a> that limits how small each lane can go.
254It also demonstrates a custom <a>Adornment</a> that has only two resize handles.
255</p>
256
257<h2 id="ContainersThatAreNotGroups">Containers that are not Groups</h2>
258<p>
259You do not have to use <a>Group</a>s as the only mechanism by which to organize a collection of <a>Part</a>s.
260For example, the <a href="../samples/swimBands.html" target="_blank">Layer Bands</a> sample demonstrates
261how some <a>Layout</a>s can be customized to automatically maintain the positions and sizes of special parts
262that are in the background, appearing to surround the nodes that belong to each layout layer.
263</p>
264<p>
265Not using <a>Group</a>s also means that it becomes possible to avoid some of the restrictions inherent in Groups,
266such as the limitation that each Part can have at most one <a>Part.containingGroup</a>.
267The <a href="../samples/sharedStates.html" target="_blank">Shared States</a> sample demonstrates how one can make
268it appear that more than one "group" can contain a node.
269However, this requires some additional custom <a>Tool</a>s and custom <a>Layout</a>s,
270or always explicitly setting/binding the location and size of every node and "group".
271</p>
272
273 </div>
274 </div>
275
276 <div class="bg-nwoods-primary">
277 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
278 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
279 </section>
280 </div><footer class="bg-nwoods-primary text-white">
281 <div class="container max-w-screen-lg mx-auto px-8">
282 <div class="w-full py-6">
283
284 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
285 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
286 <li class="list-none row-span-2">
287 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
288 <ul class="list-none space-y-4 md:space-y-1 px-0">
289 <li>
290 <a href="../samples/index.html">Samples</a>
291 </li>
292 <li>
293 <a href="../learn/index.html">Learn</a>
294 </li>
295 <li>
296 <a href="../intro/index.html">Intro</a>
297 </li>
298 <li>
299 <a href="../api/index.html">API</a>
300 </li>
301 <li>
302 <a href="../changelog.html">Changelog</a>
303 </li>
304 <li>
305 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
306 </li>
307 </ul>
308 </li>
309 <li class="list-none row-span-2">
310 <h2 class="text-base font-semibold tracking-wide">Support</h2>
311 <ul class="list-none space-y-4 md:space-y-1 px-0">
312 <li>
313 <a href="https://www.nwoods.com/contact.html"
314 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
315 </li>
316 <li>
317 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
318 </li>
319 <li>
320 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
321 </li>
322 <li>
323 <a href="https://www.nwoods.com/sales/index.html"
324 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
325 </li>
326 <li>
327 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
328 </li>
329 </ul>
330 </li>
331 <li class="list-none row-span-2">
332 <h2 class="text-base font-semibold tracking-wide">Company</h2>
333 <ul class="list-none space-y-4 md:space-y-1 px-0">
334 <li>
335 <a href="https://www.nwoods.com">Northwoods</a>
336 </li>
337 <li>
338 <a href="https://www.nwoods.com/about.html">About Us</a>
339 </li>
340 <li>
341 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
342 </li>
343 <li>
344 <a href="https://twitter.com/northwoodsgo">Twitter</a>
345 </li>
346
347 </ul>
348 </li>
349 </ul>
350
351
352 <p class="text-sm text-gray-100 md:mb-6">
353 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
354 </p>
355 </div>
356 </div>
357</footer> </body>
358
359<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
360<script>
361 window.dataLayer = window.dataLayer || [];
362 function gtag(){dataLayer.push(arguments);}
363 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
364 var getOutboundLink = function(url, label) {
365 gtag('event', 'click', {
366 'event_category': 'outbound',
367 'event_label': label,
368 'transport_type': 'beacon'
369 });
370 }
371
372 // topnav
373 var topButton = document.getElementById("topnavButton");
374 var topnavList = document.getElementById("topnavList");
375 topButton.addEventListener("click", function() {
376 this.classList.toggle("active");
377 topnavList.classList.toggle("hidden");
378 document.getElementById("topnavOpen").classList.toggle("hidden");
379 document.getElementById("topnavClosed").classList.toggle("hidden");
380 });
381</script>
382 <script src="../assets/js/prism.js"></script>
383 <script src="../release/go.js"></script>
384 <script src="../assets/js/goDoc.js"></script>
385 <script>
386 document.addEventListener("DOMContentLoaded", function() {
387 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
388 if (window.goDoc) window.goDoc();
389 var d = window.diagrams;
390 for (var i = 0; i < d.length; i++) {
391 var dargs = d[i];
392 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
393 }
394 if (window.extra) window.extra();
395 });
396 </script>
397</html>