UNPKG

19.9 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 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</h1>
137<p>
138Use the <a>Group</a> class to treat a collection of <a>Node</a>s and <a>Link</a>s as if they were a single <a>Node</a>.
139Those nodes and links are members of the group; together they constitute a subgraph.
140</p>
141
142<p>
143A subgraph is <em>not</em> another <a>Diagram</a>, so there is no separate HTML Div element for the subgraph of a group.
144All of the <a>Part</a>s that are members of a <a>Group</a> belong to the same Diagram as the Group.
145There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes.
146There can even be links between member nodes and the containing group itself.
147</p>
148
149<p>
150Groups can also be collapsed and expanded, to hide or show the member parts.
151</p>
152
153<p>
154The member parts of a group are available via the <a>Group.memberParts</a> property.
155Conversely, the <a>Part.containingGroup</a> property refers to the group, if the part belongs to one.
156A part can be member of at most one group at a time.
157You can set that property in order to add that part to a group.
158However you must make sure that no group contains itself, either directly or indirectly through other groups.
159</p>
160
161<p>
162Because every <a>Group</a> is a <a>Node</a>, you can have nested groups.
163Although member <a>Node</a>s and <a>Link</a>s belong to the <a>Group</a> that contains them,
164they are not in the visual tree of the group -- their <a>GraphObject.panel</a> is null and no member part
165is in the group's <a>Panel.elements</a> collection.
166No <a>Part</a> can be in the visual tree of another <a>Part</a>.
167Parts normally do belong directly to one <a>Layer</a>.
168</p>
169<p>
170See samples that make use of Groups in the <a href="../samples/index.html#groups">samples index</a>.
171</p>
172<h2 id="SimpleGroups">Simple Groups</h2>
173<p>
174In a <a>GraphLinksModel</a> the <a>Model.nodeDataArray</a> holds node data, each of which might be
175represented by a <a>Group</a> rather than by a regular <a>Node</a>.
176You can declare that it should be a group by setting the isGroup data property to true.
177You can declare that a node data be a member of a group by referring to the group's key as
178the group data property value.
179</p>
180<p>
181Here is a group containing two nested groups as well as two regular nodes.
182If you move a group, its member parts move along.
183If you copy a group, its member parts are copied too.
184If you delete a group, its member parts are deleted too.
185If you move a member node, its containing group inflates or shrinks to cover the area occupied by all of the members.
186</p>
187<pre class="lang-js" id="simple"><code>
188 diagram.model.nodeDataArray = [
189 { key: "Alpha", isGroup: true },
190 { key: "Beta", group: "Alpha" },
191 { key: "Gamma", group: "Alpha", isGroup: true },
192 { key: "Delta", group: "Gamma" },
193 { key: "Epsilon", group: "Gamma" },
194 { key: "Zeta", group: "Alpha" },
195 { key: "Eta", group: "Alpha", isGroup: true},
196 { key: "Theta", group: "Eta" }
197 ];
198</code></pre>
199<script>goCode("simple", 600, 200)</script>
200
201<h3 id="GroupsLinks">Groups and Links</h2>
202<p>
203Because <a>Group</a>s are <a>Node</a>s, a <a>Link</a> may connect with a group as well as with a plain node.
204</p>
205<p>
206Here is a simple example of four regular nodes and one group node.
207In this example the link from "Alpha" goes directly to the "Beta" node,
208but the link to "Delta" actually comes from the "Omega" group rather than from any particular member of the group.
209</p>
210<pre class="lang-js" id="links"><code>
211 var nodeDataArray = [
212 { key: "Alpha" },
213 { key: "Beta", group: "Omega" },
214 { key: "Gamma", group: "Omega" },
215 { key: "Omega", isGroup: true },
216 { key: "Delta" }
217 ];
218 var linkDataArray = [
219 { from: "Alpha", to: "Beta" }, // from outside the Group to inside it
220 { from: "Beta", to: "Gamma" }, // this link is a member of the Group
221 { from: "Omega", to: "Delta" } // from the Group to a Node
222 ];
223 diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
224</code></pre>
225<script>goCode("links", 600, 150)</script>
226<p>
227If you drag the "Delta" node around you can see how the link from the "Omega" group appears to come from the center
228of the group and start at the group's edge rather than at any member node.
229This is different than for the link from "Alpha" to "Beta".
230</p>
231<p>
232Note also how the link from "Beta" to "Gamma" is effectively owned by the "Omega" group because
233both of the nodes are owned by that group. Copying the group automatically copies the link too.
234</p>
235<p>
236This example did not set any of the following properties:
237<a>Diagram.nodeTemplate</a>, <a>Diagram.groupTemplate</a>, and <a>Diagram.linkTemplate</a>,
238in order to demonstrate the default templates for all kinds of node data and link data.
239</p>
240
241<h2 id="GroupTemplates">Group Templates</h2>
242<p>
243Here is an example of how one might define templates for nodes and for groups.
244The node template is very simple: some text inside an ellipse.
245The group template is different from a node template in several aspects.
246</p>
247<p>
248First, the group template builds a go.Group, not a go.Node or go.Part.
249The group can use a number of the panel types, just as a node may use various panel types.
250</p>
251<p>
252Second, the group template includes a <a>Placeholder</a> object.
253This object, of which you may have at most one within the visual tree of a group,
254gets the size and position of the union of the bounds of the member parts, plus some padding.
255The use of a Placeholder results in the Group surrounding the collection of group members,
256no matter where the member nodes are placed.
257</p>
258<pre class="lang-js" id="groupTemplates"><code>
259 diagram.nodeTemplate =
260 $(go.Node, "Auto",
261 $(go.Shape, "Ellipse", { fill: "white" }),
262 $(go.TextBlock,
263 new go.Binding("text", "key"))
264 );
265
266 diagram.groupTemplate =
267 $(go.Group, "Vertical",
268 $(go.Panel, "Auto",
269 $(go.Shape, "RoundedRectangle", // surrounds the Placeholder
270 { parameter1: 14,
271 fill: "rgba(128,128,128,0.33)" }),
272 $(go.Placeholder, // represents the area of all member parts,
273 { padding: 5}) // with some extra padding around them
274 ),
275 $(go.TextBlock, // group title
276 { alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" },
277 new go.Binding("text", "key"))
278 );
279
280 var nodeDataArray = [
281 { key: "Alpha" },
282 { key: "Beta", group: "Omega" },
283 { key: "Gamma", group: "Omega" },
284 { key: "Omega", isGroup: true },
285 { key: "Delta" }
286 ];
287 var linkDataArray = [
288 { from: "Alpha", to: "Beta" }, // from outside the Group to inside it
289 { from: "Beta", to: "Gamma" }, // this link is a member of the Group
290 { from: "Omega", to: "Delta" } // from the Group to a Node
291 ];
292 diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
293</code></pre>
294<script>goCode("groupTemplates", 600, 200)</script>
295<p>
296Note how when you move the "Beta" or "Gamma" nodes the "Omega" group automatically resizes so that the
297TextBlock on the group stays below and on the right side of the "RoundedRectangle" shape.
298</p>
299
300<p>
301Just as a <a>Diagram</a> can have its own <a>Layout</a>, a <a>Group</a> can have its own <a>Group.layout</a>.
302This is discussed in the page about <a href="subgraphs.html">SubGraphs</a>.
303</p>
304
305 </div>
306 </div>
307
308 <div class="bg-nwoods-primary">
309 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
310 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
311 </section>
312 </div><footer class="bg-nwoods-primary text-white">
313 <div class="container max-w-screen-lg mx-auto px-8">
314 <div class="w-full py-6">
315
316 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
317 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
318 <li class="list-none row-span-2">
319 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
320 <ul class="list-none space-y-4 md:space-y-1 px-0">
321 <li>
322 <a href="../samples/index.html">Samples</a>
323 </li>
324 <li>
325 <a href="../learn/index.html">Learn</a>
326 </li>
327 <li>
328 <a href="../intro/index.html">Intro</a>
329 </li>
330 <li>
331 <a href="../api/index.html">API</a>
332 </li>
333 <li>
334 <a href="../changelog.html">Changelog</a>
335 </li>
336 <li>
337 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
338 </li>
339 </ul>
340 </li>
341 <li class="list-none row-span-2">
342 <h2 class="text-base font-semibold tracking-wide">Support</h2>
343 <ul class="list-none space-y-4 md:space-y-1 px-0">
344 <li>
345 <a href="https://www.nwoods.com/contact.html"
346 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
347 </li>
348 <li>
349 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
350 </li>
351 <li>
352 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
353 </li>
354 <li>
355 <a href="https://www.nwoods.com/sales/index.html"
356 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
357 </li>
358 <li>
359 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
360 </li>
361 </ul>
362 </li>
363 <li class="list-none row-span-2">
364 <h2 class="text-base font-semibold tracking-wide">Company</h2>
365 <ul class="list-none space-y-4 md:space-y-1 px-0">
366 <li>
367 <a href="https://www.nwoods.com">Northwoods</a>
368 </li>
369 <li>
370 <a href="https://www.nwoods.com/about.html">About Us</a>
371 </li>
372 <li>
373 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
374 </li>
375 <li>
376 <a href="https://twitter.com/northwoodsgo">Twitter</a>
377 </li>
378
379 </ul>
380 </li>
381 </ul>
382
383
384 <p class="text-sm text-gray-100 md:mb-6">
385 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
386 </p>
387 </div>
388 </div>
389</footer> </body>
390
391<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
392<script>
393 window.dataLayer = window.dataLayer || [];
394 function gtag(){dataLayer.push(arguments);}
395 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
396 var getOutboundLink = function(url, label) {
397 gtag('event', 'click', {
398 'event_category': 'outbound',
399 'event_label': label,
400 'transport_type': 'beacon'
401 });
402 }
403
404 // topnav
405 var topButton = document.getElementById("topnavButton");
406 var topnavList = document.getElementById("topnavList");
407 topButton.addEventListener("click", function() {
408 this.classList.toggle("active");
409 topnavList.classList.toggle("hidden");
410 document.getElementById("topnavOpen").classList.toggle("hidden");
411 document.getElementById("topnavClosed").classList.toggle("hidden");
412 });
413</script>
414 <script src="../assets/js/prism.js"></script>
415 <script src="../release/go.js"></script>
416 <script src="../assets/js/goDoc.js"></script>
417 <script>
418 document.addEventListener("DOMContentLoaded", function() {
419 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
420 if (window.goDoc) window.goDoc();
421 var d = window.diagrams;
422 for (var i = 0; i < d.length; i++) {
423 var dargs = d[i];
424 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
425 }
426 if (window.extra) window.extra();
427 });
428 </script>
429</html>