UNPKG

16.3 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> Resizing Diagrams -- 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>Resizing Diagrams</h1>
137<p>
138 Sometimes it may be necessary to resize the div that contains a GoJS Diagram.
139 In older browsers or in Internet Explorer, GoJS does not listen or attempt to detect changes in the div's size,
140 so you must manually tell each Diagram when you perform an action that resizes its containing div.
141</p>
142
143<h2 id="UsingRequestUpdateToResizeDiv">Using <a>Diagram.requestUpdate</a> to resize a Div</h2>
144<p>
145 The following example has a button that enlarges the Diagram's div. When it is clicked,
146 the div is visibly resized but in older browsers the Diagram remains the same size.
147</p>
148
149<pre class="lang-js" id="first"><code>
150 // A minimal Diagram
151 diagram.nodeTemplate =
152 $(go.Node, "Auto",
153 $(go.Shape, "RoundedRectangle",
154 new go.Binding("fill", "color")),
155 $(go.TextBlock,
156 { margin: 3 }, // some room around the text
157 new go.Binding("text", "key"))
158 );
159
160 diagram.model = new go.GraphLinksModel(
161 [
162 { key: "Alpha", color: "lightblue" },
163 { key: "Beta", color: "orange" },
164 { key: "Gamma", color: "lightgreen" },
165 { key: "Delta", color: "pink" }
166 ],
167 [
168 { from: "Alpha", to: "Beta" },
169 { from: "Alpha", to: "Gamma" },
170 { from: "Gamma", to: "Delta" },
171 { from: "Delta", to: "Alpha" }
172 ]);
173
174 // Resize the diagram with this button
175 var button1 = document.getElementById('button1');
176 button1.addEventListener('click', function() {
177 var div = diagram.div;
178 div.style.width = '200px';
179 });
180</code></pre>
181<div id="dia1"></div>
182<p>This button won't work in Internet Explorer: <button id="button1">Expand div</button></p>
183<script>goCode("first", 100, 110, "dia1")</script>
184
185<p>
186 Typically we will want the Diagram to resize to its div at the same time that the div resizes.
187 To do this we add a call to <a>Diagram.requestUpdate</a> <em>after</em> we have resized the div.
188 This checks to see if the Diagram's div has changed size, and if so, redraws the diagram at the appropriate new dimensions.
189</p>
190<p>
191 Below is nearly identical code, except that a call to <a>Diagram.requestUpdate</a> has been added.
192</p>
193
194<pre class="lang-js" id="second"><code>
195 // A minimal Diagram
196 diagram.nodeTemplate =
197 $(go.Node, "Auto",
198 $(go.Shape, "RoundedRectangle",
199 new go.Binding("fill", "color")),
200 $(go.TextBlock,
201 { margin: 3 }, // some room around the text
202 new go.Binding("text", "key"))
203 );
204
205 diagram.model = new go.GraphLinksModel(
206 [
207 { key: "Alpha", color: "lightblue" },
208 { key: "Beta", color: "orange" },
209 { key: "Gamma", color: "lightgreen" },
210 { key: "Delta", color: "pink" }
211 ],
212 [
213 { from: "Alpha", to: "Beta" },
214 { from: "Alpha", to: "Gamma" },
215 { from: "Gamma", to: "Delta" },
216 { from: "Delta", to: "Alpha" }
217 ]);
218
219 // Resize the diagram with this button
220 var button2 = document.getElementById('button2');
221 button2.addEventListener('click', function() {
222 var div = diagram.div;
223 div.style.width = '200px';
224 diagram.requestUpdate(); // Needed!
225 });
226</code></pre>
227<div id="dia2"></div>
228<button id="button2">Expand div</button>
229<script>goCode("second", 100, 110, "dia2")</script>
230
231<p>See also the <a href="../samples/tabs.html">jQuery Tabs sample</a>.</p>
232
233<p>
234 In recent browsers the calls to <a>Diagram.requestUpdate</a> will not be necessary,
235 but they will not cause any harm.
236 Still, if you know that all of your users will be using recent browsers
237 and if you are using GoJS version 2.1.26 or later, you do not need to make this call.
238</p>
239
240 </div>
241 </div>
242
243 <div class="bg-nwoods-primary">
244 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
245 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
246 </section>
247 </div><footer class="bg-nwoods-primary text-white">
248 <div class="container max-w-screen-lg mx-auto px-8">
249 <div class="w-full py-6">
250
251 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
252 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
253 <li class="list-none row-span-2">
254 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
255 <ul class="list-none space-y-4 md:space-y-1 px-0">
256 <li>
257 <a href="../samples/index.html">Samples</a>
258 </li>
259 <li>
260 <a href="../learn/index.html">Learn</a>
261 </li>
262 <li>
263 <a href="../intro/index.html">Intro</a>
264 </li>
265 <li>
266 <a href="../api/index.html">API</a>
267 </li>
268 <li>
269 <a href="../changelog.html">Changelog</a>
270 </li>
271 <li>
272 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
273 </li>
274 </ul>
275 </li>
276 <li class="list-none row-span-2">
277 <h2 class="text-base font-semibold tracking-wide">Support</h2>
278 <ul class="list-none space-y-4 md:space-y-1 px-0">
279 <li>
280 <a href="https://www.nwoods.com/contact.html"
281 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
282 </li>
283 <li>
284 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
285 </li>
286 <li>
287 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
288 </li>
289 <li>
290 <a href="https://www.nwoods.com/sales/index.html"
291 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
292 </li>
293 <li>
294 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
295 </li>
296 </ul>
297 </li>
298 <li class="list-none row-span-2">
299 <h2 class="text-base font-semibold tracking-wide">Company</h2>
300 <ul class="list-none space-y-4 md:space-y-1 px-0">
301 <li>
302 <a href="https://www.nwoods.com">Northwoods</a>
303 </li>
304 <li>
305 <a href="https://www.nwoods.com/about.html">About Us</a>
306 </li>
307 <li>
308 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
309 </li>
310 <li>
311 <a href="https://twitter.com/northwoodsgo">Twitter</a>
312 </li>
313
314 </ul>
315 </li>
316 </ul>
317
318
319 <p class="text-sm text-gray-100 md:mb-6">
320 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
321 </p>
322 </div>
323 </div>
324</footer> </body>
325
326<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
327<script>
328 window.dataLayer = window.dataLayer || [];
329 function gtag(){dataLayer.push(arguments);}
330 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
331 var getOutboundLink = function(url, label) {
332 gtag('event', 'click', {
333 'event_category': 'outbound',
334 'event_label': label,
335 'transport_type': 'beacon'
336 });
337 }
338
339 // topnav
340 var topButton = document.getElementById("topnavButton");
341 var topnavList = document.getElementById("topnavList");
342 topButton.addEventListener("click", function() {
343 this.classList.toggle("active");
344 topnavList.classList.toggle("hidden");
345 document.getElementById("topnavOpen").classList.toggle("hidden");
346 document.getElementById("topnavClosed").classList.toggle("hidden");
347 });
348</script>
349 <script src="../assets/js/prism.js"></script>
350 <script src="../release/go.js"></script>
351 <script src="../assets/js/goDoc.js"></script>
352 <script>
353 document.addEventListener("DOMContentLoaded", function() {
354 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
355 if (window.goDoc) window.goDoc();
356 var d = window.diagrams;
357 for (var i = 0; i < d.length; i++) {
358 var dargs = d[i];
359 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
360 }
361 if (window.extra) window.extra();
362 });
363 </script>
364</html>