UNPKG

27.6 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 Sizing of GraphObjects -- 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<h1>Sizing GraphObjects</h1>
134<p>
135The size of a <a>GraphObject</a> is determined by the values of the <a>GraphObject.desiredSize</a>,
136<a>GraphObject.minSize</a>, <a>GraphObject.maxSize</a> and <a>GraphObject.stretch</a> properties.
137The actual size of an object after its containing panel measures and arranges it is given by several
138read-only properties: <a>GraphObject.naturalBounds</a>, <a>GraphObject.measuredBounds</a>, and <a>GraphObject.actualBounds</a>.
139</p>
140<p>
141The <a>GraphObject.width</a> property is exactly the same as the <a>Size.width</a> component of the <a>GraphObject.desiredSize</a>.
142Similarly, the <a>GraphObject.height</a> property corresponds to the desiredSize's height.
143The default value of <a>GraphObject.desiredSize</a> is <code>(NaN, NaN)</code> -- meaning that the size must be computed.
144One can set the width to a real number and leave the height to be <code>NaN</code>, or vice-versa.
145</p>
146<p>
147Users can also change the size of an object within a Part via the <a>ResizingTool</a>: Introduction to the <a href="tools.html#ResizingTool">ResizingTool</a>.
148</p>
149
150<h3 id="DesiredSizeMinSizeAndMaxSize">DesiredSize, MinSize, and MaxSize</h3>
151<p>
152When the <a>GraphObject.desiredSize</a> property is set to real numbers it gets that as its natural size.
153When the desiredSize property is not set but there is a <a>GraphObject.stretch</a> value,
154it will get the size of the available space.
155When desiredSize is not set and there is no stretch,
156an object prefers being its natural size,
157based on the type of object that it is and the other properties that it has.
158</p>
159<p>
160But the effective width and effective height, whether given by desiredSize or computed,
161are each constrained by the <a>GraphObject.maxSize</a> and by the <a>GraphObject.minSize</a>.
162The minimum size takes precedence over the maximum size in case of conflict.
163</p>
164<p>
165The size for a GraphObject in a Table <a>Panel</a> may also be constrained by the width
166of the column and the height of the row that the object is in.
167</p>
168
169<pre class="lang-js" id="shapeSizes"><code>
170 diagram.add(
171 $(go.Part,
172 $(go.Panel, "Table",
173 { defaultAlignment: go.Spot.Left },
174 $(go.RowColumnDefinition, { column: 0, width: 200 }),
175 $(go.RowColumnDefinition, { column: 1, width: 15 }),
176 $(go.Shape, "Rectangle",
177 { row: 0, column: 0, fill: "green",
178 width: 100, height: 20 }),
179 $(go.TextBlock, { row: 0, column: 2,
180 text: "desiredSize: 100x20, no minSize, no maxSize" }),
181 $(go.Shape, "Rectangle",
182 { row: 1, column: 0, fill: "red",
183 width: 100, height: 20,
184 minSize: new go.Size(150, 10) }),
185 $(go.TextBlock, { row: 1, column: 2,
186 text: "desired: 100x20, min: 150x10" }),
187 $(go.Shape, "Rectangle",
188 { row: 2, column: 0, fill: "yellow",
189 width: 100, height: 20,
190 maxSize: new go.Size(50, 300) }),
191 $(go.TextBlock, { row: 2, column: 2,
192 text: "desired: 100x20, max: 50x300" }),
193 $(go.Shape, "Rectangle",
194 { row: 3, column: 0, fill: "red",
195 width: 100, height: 20,
196 minSize: new go.Size(150, 10), maxSize: new go.Size(50, 300) }),
197 $(go.TextBlock, { row: 3, column: 2,
198 text: "desired: 100x20, min: 150x10, max: 50x300" })
199 )
200 ));
201</code></pre>
202<script>goCode("shapeSizes", 600, 120)</script>
203
204<h3 id="MeasuredAndActualSizes">Measured and Actual Sizes</h3>
205<p>
206Every GraphObject also has a <a>GraphObject.measuredBounds</a>,
207which describes how big the object seems to be, and a <a>GraphObject.actualBounds</a>,
208which describes the position and size of an object.
209These read-only properties take into account any non-zero <a>GraphObject.angle</a> or non-unitary <a>GraphObject.scale</a>.
210These measurements are in the containing <a>Panel</a>'s coordinate system.
211</p>
212<pre class="lang-js" id="sizedShapes"><code>
213 function getSizeString(s) {
214 return s.width.toFixed(2) + "x" + s.height.toFixed(2);
215 }
216 var table =
217 $(go.Part, "Table",
218 $(go.Shape, { name: "A", row: 0, column: 1,
219 figure: "Club", fill: "green", background: "lightgray",
220 width: 40, height: 40,
221 }), // default angle is zero; default scale is one
222 $(go.Shape, { name: "B", row: 0, column: 2,
223 figure: "Club", fill: "green", background: "lightgray",
224 width: 40, height: 40,
225 angle: 30 }),
226 $(go.Shape, { name: "C", row: 0, column: 3,
227 figure: "Club", fill: "green", background: "lightgray",
228 width: 40, height: 40,
229 scale: 1.5 }),
230 $(go.Shape, { name: "D", row: 0, column: 4,
231 figure: "Club", fill: "green", background: "lightgray",
232 width: 40, height: 40,
233 angle: 30, scale: 1.5 }),
234 $(go.TextBlock, { row: 1, column: 1, margin: 4 },
235 new go.Binding("text", "naturalBounds", getSizeString).ofObject("A")),
236 $(go.TextBlock, { row: 1, column: 2, margin: 4 },
237 new go.Binding("text", "naturalBounds", getSizeString).ofObject("B")),
238 $(go.TextBlock, { row: 1, column: 3, margin: 4 },
239 new go.Binding("text", "naturalBounds", getSizeString).ofObject("C")),
240 $(go.TextBlock, { row: 1, column: 4, margin: 4 },
241 new go.Binding("text", "naturalBounds", getSizeString).ofObject("D")),
242 $(go.TextBlock, { row: 2, column: 1, margin: 4 },
243 new go.Binding("text", "measuredBounds", getSizeString).ofObject("A")),
244 $(go.TextBlock, { row: 2, column: 2, margin: 4 },
245 new go.Binding("text", "measuredBounds", getSizeString).ofObject("B")),
246 $(go.TextBlock, { row: 2, column: 3, margin: 4 },
247 new go.Binding("text", "measuredBounds", getSizeString).ofObject("C")),
248 $(go.TextBlock, { row: 2, column: 4, margin: 4 },
249 new go.Binding("text", "measuredBounds", getSizeString).ofObject("D")),
250 $(go.TextBlock, { row: 3, column: 1, margin: 4 },
251 new go.Binding("text", "actualBounds", getSizeString).ofObject("A")),
252 $(go.TextBlock, { row: 3, column: 2, margin: 4 },
253 new go.Binding("text", "actualBounds", getSizeString).ofObject("B")),
254 $(go.TextBlock, { row: 3, column: 3, margin: 4 },
255 new go.Binding("text", "actualBounds", getSizeString).ofObject("C")),
256 $(go.TextBlock, { row: 3, column: 4, margin: 4 },
257 new go.Binding("text", "actualBounds", getSizeString).ofObject("D")),
258 $(go.TextBlock, "naturalBounds:", { row: 1, column: 0, alignment: go.Spot.Left }),
259 $(go.TextBlock, "measuredBounds:", { row: 2, column: 0, alignment: go.Spot.Left }),
260 $(go.TextBlock, "actualBounds:", { row: 3, column: 0, alignment: go.Spot.Left })
261 );
262 diagram.add(table);
263 setTimeout(function() {
264 table.data = {}; // cause bindings to be evaluated after Shapes are measured
265 }, 500);
266</code></pre>
267<script>goCode("sizedShapes", 600, 180)</script>
268<p>
269Note that the size of the regular 40x40 shape is 41x41.
270The additional size is due to the thickness of the pen (<a>Shape.strokeWidth</a>) used to outline the shape.
271Rotating or increasing the scale causes the 40x40 shape to actually take up significantly more space.
272</p>
273<p>
274To summarize: the <a>GraphObject.desiredSize</a> (a.k.a. <a>GraphObject.width</a> and <a>GraphObject.height</a>)
275and the <a>GraphObject.naturalBounds</a> are in the object's local coordinate system.
276The <a>GraphObject.minSize</a>, <a>GraphObject.maxSize</a>, <a>GraphObject.margin</a>, <a>GraphObject.measuredBounds</a>, and
277<a>GraphObject.actualBounds</a> are all in the containing <a>Panel</a>'s coordinate system, or in document
278coordinates if there is no such panel because it is a <a>Part</a>.
279</p>
280
281<h3 id="StretchingOfGraphObjects">Stretching of GraphObjects</h3>
282<p>
283When you specify a <a>GraphObject.stretch</a> value other than <a>GraphObject,None</a>,
284the object will stretch or contract to fill the available space.
285However, the <a>GraphObject.maxSize</a> and <a>GraphObject.minSize</a> properties still limit the size.
286</p>
287<p>
288But setting the <a>GraphObject.desiredSize</a> (or equivalently, the <a>GraphObject.width</a> and/or <a>GraphObject.height</a>)
289will cause any stretch value to be ignored.
290</p>
291<p>
292In the following examples the left column is constrained to have a width of 200.
293</p>
294<pre class="lang-js" id="stretchSizes"><code>
295 diagram.add(
296 $(go.Part,
297 $(go.Panel, "Table",
298 { defaultAlignment: go.Spot.Left },
299 $(go.RowColumnDefinition, { column: 0, width: 200 }),
300 $(go.RowColumnDefinition, { column: 1, width: 15 }),
301 $(go.Shape, "Rectangle",
302 { row: 0, column: 0, fill: "green",
303 stretch: go.GraphObject.Fill }),
304 $(go.TextBlock, { row: 0, column: 2,
305 text: "stretch: Fill, no minSize, no maxSize" }),
306 $(go.Shape, "Rectangle",
307 { row: 1, column: 0, fill: "red",
308 stretch: go.GraphObject.Fill,
309 minSize: new go.Size(150, 10) }),
310 $(go.TextBlock, { row: 1, column: 2,
311 text: "stretch: Fill, min: 150x10" }),
312 $(go.Shape, "Rectangle",
313 { row: 2, column: 0, fill: "yellow",
314 stretch: go.GraphObject.Fill,
315 maxSize: new go.Size(50, 300) }),
316 $(go.TextBlock, { row: 2, column: 2,
317 text: "stretch: Fill, max: 50x300" }),
318 $(go.Shape, "Rectangle",
319 { row: 3, column: 0, fill: "red",
320 stretch: go.GraphObject.Fill,
321 minSize: new go.Size(150, 10), maxSize: new go.Size(50, 300) }),
322 $(go.TextBlock, { row: 3, column: 2,
323 text: "stretch: Fill, min: 150x10, max: 50x300" }),
324 $(go.Shape, "Rectangle",
325 { row: 4, column: 0, fill: "red",
326 width: 100, stretch: go.GraphObject.Fill }),
327 $(go.TextBlock, { row: 4, column: 2,
328 text: "desired width & stretch: ignore stretch" })
329 )
330 ));
331</code></pre>
332<script>goCode("stretchSizes", 600, 120)</script>
333<p>
334To summarize, if <a>GraphObject.desiredSize</a> is set, any <a>GraphObject.stretch</a> is ignored.
335If <a>GraphObject.maxSize</a> conflicts with that value, it takes precedence.
336And if <a>GraphObject.minSize</a> conflicts with those values, it takes precedence.
337The width values are constrained independently of the height values.
338</p>
339
340<h2 id="StretchAndAlignment">Stretch and Alignment</h2>
341<p>
342The size of a <a>GraphObject</a> in a <a>Panel</a> is determined by many factors.
343The <a>GraphObject.stretch</a> property specifies whether the width and/or height should take up all
344of the space given to it by the Panel.
345When the width and/or height is not stretched to fill the given space,
346the <a>GraphObject.alignment</a> property controls where the object is placed if it is smaller than available space.
347One may also stretch the width while aligning vertically, just as one may also
348stretch vertically while aligning along the X axis.
349</p>
350<p>
351The alignment value for a GraphObject, if not given by the value of <a>GraphObject.alignment</a>, may be inherited.
352If the object is in a Table Panel, the value may inherit from the RowColumnDefinitions of
353the row and of the column that the object is in.
354Finally the value may be inherited from the <a>Panel.defaultAlignment</a> property.
355</p>
356<p>
357If you specify a fill stretch (horizontal or vertical or both) and an alignment, the alignment will be ignored.
358Basically if an object is exactly the size that is available to it, there is only one position for it, so all alignments are the same.
359</p>
360
361<h3 id="AlignmentOfShapes">Alignment of Shapes</h3>
362
363<pre class="lang-js" id="shapeAlignment"><code>
364 diagram.add(
365 $(go.Part,
366 $(go.Panel, "Table",
367 { defaultAlignment: go.Spot.Left },
368 $(go.RowColumnDefinition, { column: 0, width: 200 }),
369 $(go.RowColumnDefinition, { column: 1, width: 15 }),
370 $(go.Shape, "Rectangle",
371 { row: 0, column: 0, fill: "lightblue",
372 width: 100, height: 20, alignment: go.Spot.Left }),
373 $(go.TextBlock, { row: 0, column: 2, text: "alignment: Left" }),
374 $(go.Shape, "Rectangle",
375 { row: 1, column: 0, fill: "lightblue",
376 width: 100, height: 20, alignment: go.Spot.Center }),
377 $(go.TextBlock, { row: 1, column: 2, text: "alignment: Center" }),
378 $(go.Shape, "Rectangle",
379 { row: 2, column: 0, fill: "lightblue",
380 width: 100, height: 20, alignment: go.Spot.Right }),
381 $(go.TextBlock, { row: 2, column: 2, text: "alignment: Right" }),
382 $(go.Shape, "Rectangle",
383 { row: 3, column: 0, fill: "yellow",
384 height: 20, stretch: go.GraphObject.Horizontal }),
385 $(go.TextBlock, { row: 3, column: 2, text: "stretch: Horizontal" }),
386 $(go.Shape, "Rectangle",
387 { row: 4, column: 0, fill: "yellow",
388 height: 20, stretch: go.GraphObject.Horizontal, alignment: go.Spot.Right }),
389 $(go.TextBlock, { row: 4, column: 2,
390 text: "stretch: Horizontal, ignore alignment" })
391 )
392 ));
393</code></pre>
394<script>goCode("shapeAlignment", 600, 120)</script>
395
396<p>
397When the element is larger than the available space, the <a>GraphObject.alignment</a>
398property still controls where the element is positioned.
399However the element will be clipped to fit.
400</p>
401<p>
402To make things clearer in the following examples we have made the shape stroke thicker
403and added a margin to separate the shapes.
404</p>
405<pre class="lang-js" id="bigShapeAlignment"><code>
406 diagram.add(
407 $(go.Part,
408 $(go.Panel, "Table",
409 { defaultAlignment: go.Spot.Left },
410 $(go.RowColumnDefinition, { column: 0, width: 200 }),
411 $(go.RowColumnDefinition, { column: 1, width: 15 }),
412 $(go.Shape, "Rectangle",
413 { row: 0, column: 0, fill: "lightblue", strokeWidth: 2,
414 width: 300, height: 20, margin: 2, alignment: go.Spot.Left }),
415 $(go.TextBlock, { row: 0, column: 2, text: "big obj alignment: Left" }),
416 $(go.Shape, "Rectangle",
417 { row: 1, column: 0, fill: "lightblue", strokeWidth: 2,
418 width: 300, height: 20, margin: 2, alignment: go.Spot.Center }),
419 $(go.TextBlock, { row: 1, column: 2, text: "big obj alignment: Center" }),
420 $(go.Shape, "Rectangle",
421 { row: 2, column: 0, fill: "lightblue", strokeWidth: 2,
422 width: 300, height: 20, margin: 2, alignment: go.Spot.Right }),
423 $(go.TextBlock, { row: 2, column: 2, text: "big obj alignment: Right" })
424 )
425 ));
426</code></pre>
427<script>goCode("bigShapeAlignment", 600, 100)</script>
428
429 </div>
430 </div>
431
432 <div class="bg-nwoods-primary">
433 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
434 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
435 </section>
436 </div><footer class="bg-nwoods-primary text-white">
437 <div class="container max-w-screen-lg mx-auto px-8">
438 <div class="w-full py-6">
439
440 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
441 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
442 <li class="list-none row-span-2">
443 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
444 <ul class="list-none space-y-4 md:space-y-1 px-0">
445 <li>
446 <a href="../samples/index.html">Samples</a>
447 </li>
448 <li>
449 <a href="../learn/index.html">Learn</a>
450 </li>
451 <li>
452 <a href="../intro/index.html">Intro</a>
453 </li>
454 <li>
455 <a href="../api/index.html">API</a>
456 </li>
457 <li>
458 <a href="../changelog.html">Changelog</a>
459 </li>
460 <li>
461 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
462 </li>
463 </ul>
464 </li>
465 <li class="list-none row-span-2">
466 <h2 class="text-base font-semibold tracking-wide">Support</h2>
467 <ul class="list-none space-y-4 md:space-y-1 px-0">
468 <li>
469 <a href="https://www.nwoods.com/contact.html"
470 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
471 </li>
472 <li>
473 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
474 </li>
475 <li>
476 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
477 </li>
478 <li>
479 <a href="https://www.nwoods.com/sales/index.html"
480 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
481 </li>
482 <li>
483 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
484 </li>
485 </ul>
486 </li>
487 <li class="list-none row-span-2">
488 <h2 class="text-base font-semibold tracking-wide">Company</h2>
489 <ul class="list-none space-y-4 md:space-y-1 px-0">
490 <li>
491 <a href="https://www.nwoods.com">Northwoods</a>
492 </li>
493 <li>
494 <a href="https://www.nwoods.com/about.html">About Us</a>
495 </li>
496 <li>
497 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
498 </li>
499 <li>
500 <a href="https://twitter.com/northwoodsgo">Twitter</a>
501 </li>
502
503 </ul>
504 </li>
505 </ul>
506
507
508 <p class="text-sm text-gray-100 md:mb-6">
509 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
510 </p>
511 </div>
512 </div>
513</footer> </body>
514
515<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
516<script>
517 window.dataLayer = window.dataLayer || [];
518 function gtag(){dataLayer.push(arguments);}
519 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
520 var getOutboundLink = function(url, label) {
521 gtag('event', 'click', {
522 'event_category': 'outbound',
523 'event_label': label,
524 'transport_type': 'beacon'
525 });
526 }
527
528 // topnav
529 var topButton = document.getElementById("topnavButton");
530 var topnavList = document.getElementById("topnavList");
531 topButton.addEventListener("click", function() {
532 this.classList.toggle("active");
533 topnavList.classList.toggle("hidden");
534 document.getElementById("topnavOpen").classList.toggle("hidden");
535 document.getElementById("topnavClosed").classList.toggle("hidden");
536 });
537</script>
538 <script src="../assets/js/prism.js"></script>
539 <script src="../release/go.js"></script>
540<script src="../extensions/Figures.js"></script> <script src="../assets/js/goDoc.js"></script>
541 <script>
542 document.addEventListener("DOMContentLoaded", function() {
543 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
544 if (window.goDoc) window.goDoc();
545 var d = window.diagrams;
546 for (var i = 0; i < d.length; i++) {
547 var dargs = d[i];
548 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
549 }
550 if (window.extra) window.extra();
551 });
552 </script>
553</html>