UNPKG

19 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 Initial Viewport -- 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>Initial, Automatic, and Programmatic Viewport Management</h1>
137<p>
138Once you have created and assigned a model to cause some Parts to appear in your Diagram,
139you can control where your parts initially appear in the viewport, and you can control
140where they are shown after the diagram has been modified.
141</p>
142
143<h2 id="InitialViewport">Initial viewport</h2>
144<p>
145You can very easily set the <a>Diagram.initialPosition</a> and/or <a>Diagram.initialScale</a> properties
146at any time, even before assigning the model. This will cause the <a>Diagram.position</a> and/or <a>Diagram.scale</a>
147properties to be set to the specified initial value(s) once all of the Parts have been created and any initial layout has been performed.
148</p>
149<p>
150But what if you do not know how big your diagram document will be?
151If you want to show a particular area of the document, you will not know what position to set.
152If you want to show a big document at the largest scale that shows all of it, you will not know what scale to set.
153</p>
154<p>
155One solution to this problem is to set the <a>Diagram.initialDocumentSpot</a> and <a>Diagram.initialViewportSpot</a> properties
156to particular <a>Spot</a> values.
157For example, if you are showing a tree-like diagram and you want tree to be centered horizontally but positioned vertically at the top,
158you can do something like this when you create the Diagram:
159</p>
160<pre class="lang-js"><code>
161 $(go.Diagram, "myDiagramDiv",
162 {
163 initialDocumentSpot: go.Spot.Top,
164 initialViewportSpot: go.Spot.Top
165 })
166</code></pre>
167<p>
168This makes sure that after the initial layout of your diagram the middle top point of the diagram contents
169is positioned to be at the middle top point of the viewport.
170</p>
171<p>
172Another solution to this problem is to set the <a>Diagram.initialContentAlignment</a> or <a>Diagram.initialAutoScale</a> properties.
173For example it is fairly common to want to make sure that small documents appear top-centered within the diagram window --
174just set <a>Diagram.initialContentAlignment</a> to <a>Spot,Top</a>.
175Or if you want to "zoom-to-fit" the diagram, just set <a>Diagram.initialAutoScale</a> to <a>Diagram,Uniform</a>.
176</p>
177<pre class="lang-js"><code>
178 $(go.Diagram, "myDiagramDiv",
179 {
180 initialAutoScale: go.Diagram.Uniform
181 })
182</code></pre>
183<p>
184More generally, you may want to try to center a particular <a>Node</a>.
185Here is how you can do that:
186</p>
187<pre class="lang-js" id="centernode"><code>
188 diagram.nodeTemplate =
189 $(go.Node, "Auto",
190 new go.Binding("location", "loc"),
191 $(go.Shape, { fill: "lightyellow" }),
192 $(go.TextBlock, { margin: 5 },
193 // show the location as text in the node
194 new go.Binding("text", "loc",
195 function (p) { return p.x.toFixed() + ", " + p.y.toFixed(); }))
196 );
197
198 // initialize the model with random nodes:
199 var nodeDataArray = [];
200 for (var i = 0; i &lt; 20; i++ ) {
201 nodeDataArray.push({ loc: new go.Point(Math.random() * 600, Math.random() * 300) });
202 }
203 diagram.model.nodeDataArray = nodeDataArray;
204
205 // this event handler is called when the diagram is first ready
206 diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
207 // pick a random node data
208 var data = nodeDataArray[Math.floor(Math.random()*nodeDataArray.length)];
209 // find the corresponding Node
210 var node = diagram.findNodeForData(data);
211 // and center it and select it
212 diagram.centerRect(node.actualBounds);
213 diagram.select(node);
214 });
215</code></pre>
216<script>goCode("centernode", 300, 150)</script>
217<p>
218Note: because by default one cannot scroll past any edge of the document plus any <a>Diagram.scrollMargin</a>,
219if the selected node happens to be at or near an edge, the node cannot actually be centered in the viewport.
220</p>
221
222<h2 id="AutomaticViewportManagement">Automatic viewport management</h2>
223<p>
224There are also times when you will want to control the viewport (i.e. the <a>Diagram.position</a> and <a>Diagram.scale</a>)
225after every change to the diagram.
226For example, if you always want to keep the document centered after the user has moved or deleted or inserted nodes,
227set <a>Diagram.contentAlignment</a> (rather than <a>Diagram.initialContentAlignment</a>) to <a>Spot.Center</a>.
228</p>
229<p>
230Or if you always want to keep the document "zoomed-to-fit", set <a>Diagram.autoScale</a>
231(rather than <a>Diagram.initialAutoScale</a>) to <a>Diagram,Uniform</a>.
232As an example, the <a>Overview</a> diagram does this.
233</p>
234
235<h2 id="ProgrammaticViewportManagement">Programmatic viewport management</h2>
236<p>
237If you do not want continual repositioning or rescaling of the diagram, but you do sometimes want to change
238the <a>Diagram.position</a> and/or the <a>Diagram.scale</a>, you can set those properties to whatever values you like.
239However, please note that the ultimate value for <a>Diagram.position</a> is normally limited by the <a>Diagram.documentBounds</a>
240and the size of the viewport and the scale of the diagram.
241The <a>Diagram.scale</a> is limited by <a>Diagram.minScale</a> and <a>Diagram.maxScale</a>.
242</p>
243<p>
244But it is more common to call a method on Diagram to achieve the results that you want.
245For example, to get the effect of the <a>Diagram.initialDocumentSpot</a> and <a>Diagram.initialViewportSpot</a> properties
246that are used when the "InitialLayoutCompleted" DiagramEvent occurs, call
247<a>Diagram.alignDocument</a> with the two desired Spots that you want to have coincide.
248</p>
249<p>
250As already demonstrated above, if you want to try to center a particular node in the viewport,
251you can call <a>Diagram.centerRect</a> with the node's <a>GraphObject.actualBounds</a>.
252</p>
253<p>
254If you want to make sure that a particular node is within the viewport, but not necessarily centered,
255call <a>Diagram.scrollToRect</a>.
256</p>
257<p>
258If you just want to scroll the diagram, in the same manners as the user might via a scrollbar or the mouse wheel,
259call <a>Diagram.scroll</a> with arguments that specify how much to scroll and in which direction.
260</p>
261
262<p>
263The just-mentioned Diagram methods do not change the <a>Diagram.scale</a>.
264If you want to rescale the diagram so that the whole document bounds are shown, call <a>Diagram.zoomToFit</a>.
265More generally, if you want a particular area of your diagram to be shown at whatever scale will make it fit in the viewport, call <a>Diagram.zoomToRect</a>.
266</p>
267
268 </div>
269 </div>
270
271 <div class="bg-nwoods-primary">
272 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
273 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
274 </section>
275 </div><footer class="bg-nwoods-primary text-white">
276 <div class="container max-w-screen-lg mx-auto px-8">
277 <div class="w-full py-6">
278
279 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
280 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
281 <li class="list-none row-span-2">
282 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
283 <ul class="list-none space-y-4 md:space-y-1 px-0">
284 <li>
285 <a href="../samples/index.html">Samples</a>
286 </li>
287 <li>
288 <a href="../learn/index.html">Learn</a>
289 </li>
290 <li>
291 <a href="../intro/index.html">Intro</a>
292 </li>
293 <li>
294 <a href="../api/index.html">API</a>
295 </li>
296 <li>
297 <a href="../changelog.html">Changelog</a>
298 </li>
299 <li>
300 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
301 </li>
302 </ul>
303 </li>
304 <li class="list-none row-span-2">
305 <h2 class="text-base font-semibold tracking-wide">Support</h2>
306 <ul class="list-none space-y-4 md:space-y-1 px-0">
307 <li>
308 <a href="https://www.nwoods.com/contact.html"
309 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
310 </li>
311 <li>
312 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
313 </li>
314 <li>
315 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
316 </li>
317 <li>
318 <a href="https://www.nwoods.com/sales/index.html"
319 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
320 </li>
321 <li>
322 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
323 </li>
324 </ul>
325 </li>
326 <li class="list-none row-span-2">
327 <h2 class="text-base font-semibold tracking-wide">Company</h2>
328 <ul class="list-none space-y-4 md:space-y-1 px-0">
329 <li>
330 <a href="https://www.nwoods.com">Northwoods</a>
331 </li>
332 <li>
333 <a href="https://www.nwoods.com/about.html">About Us</a>
334 </li>
335 <li>
336 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
337 </li>
338 <li>
339 <a href="https://twitter.com/northwoodsgo">Twitter</a>
340 </li>
341
342 </ul>
343 </li>
344 </ul>
345
346
347 <p class="text-sm text-gray-100 md:mb-6">
348 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
349 </p>
350 </div>
351 </div>
352</footer> </body>
353
354<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
355<script>
356 window.dataLayer = window.dataLayer || [];
357 function gtag(){dataLayer.push(arguments);}
358 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
359 var getOutboundLink = function(url, label) {
360 gtag('event', 'click', {
361 'event_category': 'outbound',
362 'event_label': label,
363 'transport_type': 'beacon'
364 });
365 }
366
367 // topnav
368 var topButton = document.getElementById("topnavButton");
369 var topnavList = document.getElementById("topnavList");
370 topButton.addEventListener("click", function() {
371 this.classList.toggle("active");
372 topnavList.classList.toggle("hidden");
373 document.getElementById("topnavOpen").classList.toggle("hidden");
374 document.getElementById("topnavClosed").classList.toggle("hidden");
375 });
376</script>
377 <script src="../assets/js/prism.js"></script>
378 <script src="../release/go.js"></script>
379 <script src="../assets/js/goDoc.js"></script>
380 <script>
381 document.addEventListener("DOMContentLoaded", function() {
382 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
383 if (window.goDoc) window.goDoc();
384 var d = window.diagrams;
385 for (var i = 0; i < d.length; i++) {
386 var dargs = d[i];
387 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
388 }
389 if (window.extra) window.extra();
390 });
391 </script>
392</html>