UNPKG

28.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 TextBlocks -- 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<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
134
135
136
137<h1>TextBlocks</h1>
138<p>
139Use the <a>TextBlock</a> class to display text.
140</p>
141<p>
142Setting the <a>TextBlock.text</a> property is the only way to show a text string.
143Because TextBlock inherits from <a>GraphObject</a>, some GraphObject properties will affect text.
144But there are additional text-only options regarding how that text is formatted and drawn.
145</p>
146<p>
147In these simplistic demonstrations, the code programmatically creates a Part and adds it to the Diagram.
148Once you learn about models and data binding you will generally not create parts (nodes or links) programmatically.
149</p>
150
151<h2 id="FontAndColors">Font and colors</h2>
152<p>
153The size and stylistic appearance of the text is specified by the <a>TextBlock.font</a>.
154The value may be any CSS font specifier string.
155</p>
156<p>
157The text is drawn using the <a>TextBlock.stroke</a> brush.
158The value may be any CSS color string or a <a>Brush</a>.
159By default the stroke is "black".
160</p>
161<p>
162You can also specify the brush to use as the background: <a>GraphObject.background</a>.
163This defaults to no brush at all, which results in a transparent background.
164The background is always rectangular.
165</p>
166<p>
167In these simplistic demonstrations, the code programmatically creates a Part and adds it to the Diagram.
168Once you learn about models and data binding you will generally not create parts (nodes or links) programmatically.
169</p>
170<pre class="lang-js" id="basicTextBlocks"><code>
171 diagram.add(
172 $(go.Part, "Vertical",
173 $(go.TextBlock, { text: "a Text Block" }),
174 $(go.TextBlock, { text: "a Text Block", stroke: "red" }),
175 $(go.TextBlock, { text: "a Text Block", background: "lightblue" }),
176 $(go.TextBlock, { text: "a Text Block", font: "bold 14pt serif" })
177 ));
178</code></pre>
179<script>goCode("basicTextBlocks", 600, 100)</script>
180
181<h3 id="IconFonts">Icon Fonts</h3>
182<p>
183 In some cases, you can show an icon that is provided by a font, instead of using a <a>Picture</a> or a <a>Shape</a>.
184 First, make sure the font is loaded in the page before creating the diagram.
185</p>
186<pre class="lang-html"><code>
187 &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
188</code></pre>
189
190<pre class="lang-js" id="awesomeFont"><code>
191 diagram.add(
192 $(go.Node, "Auto",
193 $(go.Shape, { fill: "lightgreen" }),
194 $(go.Panel, "Horizontal",
195 { margin: 8 },
196 $(go.TextBlock,
197 { text: '\uf030', font: '10pt FontAwesome' }),
198 $(go.TextBlock, "an example using FontAwesome",
199 { margin: new go.Margin(0, 0, 0, 2) })
200 )
201 ));
202</code></pre>
203<script>goCode("awesomeFont", 600, 100)</script>
204
205
206<h2 id="NaturalSizingOfTextBlocksVariesByBrowser">Natural Sizing of TextBlocks Varies by Browser</h2>
207<p>
208Because different browsers measure canvas text differently,
209TextBlocks are the only objects in <b>GoJS</b> that may have inconsistent natural sizes between browsers or different devices.
210For this reason, if you need objects to measure precisely and consistently across all browsers (such as when testing),
211TextBlocks without an explicit size (<a>GraphObject.desiredSize</a> or <a>GraphObject.width</a> and <a>GraphObject.height</a>)
212should not be used to dictate the size of any objects.
213For example, if you have a TextBlock with natural size inside an <a>Panel.Auto</a> Panel,
214set the size on that Auto Panel.
215</p>
216
217
218<h2 id="SizingAndClipping">Sizing and Clipping</h2>
219<p>
220The natural size of a <a>TextBlock</a> is just big enough to render the text string with the given font.
221However the actual size of the TextBlock can be larger or smaller in either dimension.
222Larger dimensions result in areas with no text; smaller dimensions result in clipping.
223</p>
224<p>
225To demonstrate this, the examples below start with a naturally sized TextBlock,
226followed by ones with decreasing explicit sizes.
227To better show the actual size of the TextBlocks below, we have given them lightgreen backgrounds.
228</p>
229<pre class="lang-js" id="sizingTextBlocks"><code>
230 diagram.add(
231 $(go.Part, "Vertical",
232 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2 }),
233 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
234 width: 100, height: 33 }),
235 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
236 width: 60, height: 33 }),
237 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
238 width: 50, height: 22 }),
239 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
240 width: 40, height: 9 })
241 ));
242</code></pre>
243<script>goCode("sizingTextBlocks", 600, 160)</script>
244
245
246
247<h2 id="MaxLinesAndOverflow">Max Lines and Overflow</h2>
248<p>
249You can constrain the TextBlock's available size using <a>GraphObject.desiredSize</a> (width and height),
250but you can also limit the vertical height with <a>TextBlock.maxLines</a>, which will limit the number allowed.
251When there isn't enough space to display all text, you can decide how to use the remaining space with different
252values for <a>TextBlock.overflow</a>. There are additional options in the wrapping section below.
253</p>
254<p>
255The example below starts with a naturally sized TextBlock,
256followed by ones with a max of 2 lines using the default <a>TextBlock.overflow</a> value of <code>OverflowClip</code>,
257followed by one using the <a>TextBlock.overflow</a> value of <code>OverflowEllipsis</code>.
258</p>
259<pre class="lang-js" id="sizingTextBlocks2"><code>
260 diagram.contentAlignment = go.Spot.Center,
261 diagram.add(
262 $(go.Part, "Vertical",
263 // Allow any number of lines, no clipping needed:
264 $(go.TextBlock, { text: "a Text Block that takes 4 lines",
265 font: '14pt sans-serif',
266 background: "lightblue",
267 overflow: go.TextBlock.OverflowClip /* the default value */,
268 // No max lines
269 margin: 2,
270 width: 90 }),
271 // Allow only 2 lines, OverflowClip:
272 $(go.TextBlock, { text: "a Text Block that takes 4 lines",
273 font: '14pt sans-serif',
274 background: "lightblue",
275 overflow: go.TextBlock.OverflowClip /* the default value */,
276 maxLines: 2,
277 margin: 2,
278 width: 90 }),
279 // Allow only 2 lines, OverflowEllipsis:
280 $(go.TextBlock, { text: "a Text Block that takes 4 lines",
281 font: '14pt sans-serif',
282 background: "lightblue",
283 overflow: go.TextBlock.OverflowEllipsis,
284 maxLines: 2,
285 margin: 2,
286 width: 90 })
287 ));
288</code></pre>
289<script>goCode("sizingTextBlocks2", 600, 200)</script>
290
291
292
293
294
295<h2 id="Wrapping">Wrapping</h2>
296<p>
297Text can also be automatically wrapped onto additional lines.
298In order for wrapping to happen, the <a>TextBlock.wrap</a> property must not be None,
299and there must be some constraint on the width to be narrower than it would naturally be.
300</p>
301<p>
302In the following examples, the first TextBlock gets its natural size,
303the second is limited to 50 wide but is not allowed to wrap, and the
304other examples are limited to the same width but are allowed to wrap.
305</p>
306<pre class="lang-js" id="wrappingTextBlocks"><code>
307 diagram.add(
308 $(go.Part, "Vertical",
309 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2 }),
310 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
311 width: 50, wrap: go.TextBlock.None }),
312 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
313 width: 50, wrap: go.TextBlock.WrapDesiredSize }),
314 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
315 width: 50, wrap: go.TextBlock.WrapFit })
316 ));
317</code></pre>
318<script>goCode("wrappingTextBlocks", 600, 120)</script>
319
320<h2 id="TextAlignment">Text Alignment</h2>
321<p>
322The <a>TextBlock.textAlign</a> property specifies where to draw the characters horizontally within the size of the <a>TextBlock</a>.
323The value must be a CSS string.
324</p>
325<p>
326This is different than the <a>GraphObject.alignment</a> property,
327which controls where to place the object within the area allocated by the parent <a>Panel</a>.
328</p>
329<pre class="lang-js" id="textAlignTextBlocks"><code>
330 diagram.add(
331 $(go.Part, "Horizontal",
332 $(go.Panel, "Vertical",
333 { width: 150, defaultStretch: go.GraphObject.Horizontal },
334 $(go.TextBlock, { text: "textAlign: 'left'", background: "lightgreen", margin: 2,
335 textAlign: "left" }),
336 $(go.TextBlock, { text: "textAlign: 'center'", background: "lightgreen", margin: 2,
337 textAlign: "center" }),
338 $(go.TextBlock, { text: "textAlign: 'right'", background: "lightgreen", margin: 2,
339 textAlign: "right" })
340 ),
341 $(go.Panel, "Vertical",
342 { width: 150, defaultStretch: go.GraphObject.None },
343 $(go.TextBlock, { text: "alignment: Left", background: "lightgreen", margin: 2,
344 alignment: go.Spot.Left }),
345 $(go.TextBlock, { text: "alignment: Center", background: "lightgreen", margin: 2,
346 alignment: go.Spot.Center }),
347 $(go.TextBlock, { text: "alignment: Right", background: "lightgreen", margin: 2,
348 alignment: go.Spot.Right })
349 )
350 ));
351</code></pre>
352<script> goCode("textAlignTextBlocks", 600, 100)</script>
353<p>
354 The <a>TextBlock.verticalAlignment</a> property controls the vertical alignment of the glyphs within the bounds.
355 Neither <a>TextBlock.textAlign</a> nor <a>TextBlock.verticalAlignment</a> affect the sizing of the TextBlock.
356</p>
357 <pre class="lang-js" id="verticalAlignment"><code>
358 diagram.add(
359 $(go.Part, "Horizontal",
360 $(go.TextBlock, { text: "verticalAlignment: Top", verticalAlignment: go.Spot.Top,
361 width: 170, height: 60, background: "lightgreen", margin: 10 }),
362 $(go.TextBlock, { text: "verticalAlignment: Center", verticalAlignment: go.Spot.Center,
363 width: 170, height: 60, background: "lightgreen", margin: 10 }),
364 $(go.TextBlock, { text: "verticalAlignment: Bottom", verticalAlignment: go.Spot.Bottom,
365 width: 170, height: 60, background: "lightgreen", margin: 10 })
366 ));
367</code></pre>
368<script> goCode("verticalAlignment", 600, 100)</script>
369
370<h2 id="TextAlignAndMultilineOrWrapping">TextAlign and Multiline or Wrapping</h2>
371<p>
372The <a>TextBlock.textAlign</a> property is useful even when the TextBlock has its natural size.
373This occurs when the text occupies multiple lines, whether by embedded newlines causing line breaks or by wrapping.
374You can control whether text starting with the first newline character is ignored by setting the <a>TextBlock.isMultiline</a>.
375By default both multiline and wrapping are enabled.
376</p>
377<pre class="lang-js" id="multilineTextBlocks"><code>
378 diagram.add(
379 $(go.Part, "Vertical",
380 $(go.TextBlock, { text: "a Text Block\nwith three logical lines\nof text",
381 background: "lightgreen", margin: 2,
382 isMultiline: false }),
383 $(go.TextBlock, { text: "a Text Block\nwith three logical lines\nof text",
384 background: "lightgreen", margin: 2,
385 isMultiline: true }),
386 $(go.TextBlock, { text: "a Text Block\nwith three logical lines\nof centered text",
387 background: "lightgreen", margin: 2,
388 isMultiline: true, textAlign: "center" }),
389 $(go.TextBlock, { text: "a single line of centered text that should" +
390 " wrap because we will limit the width",
391 background: "lightgreen", margin: 2, width: 80,
392 wrap: go.TextBlock.WrapFit, textAlign: "center" })
393 ));
394</code></pre>
395<script>goCode("multilineTextBlocks", 600, 300)</script>
396
397<h2 id="Indenting">Indenting</h2>
398<p>
399 Each line of text is normally trimmed of leading and trailing spaces before rendering.
400 If you wish to indent a line of text by preserving leading spaces, start the line with the
401 zero-width space character: <code>\u200B</code>.
402 <a href="https://en.wikipedia.org/wiki/Zero-width_space" target="_blank">Wikipedia: Zero-width space</a>
403</p>
404<pre class="lang-js" id="indent"><code>
405 diagram.add(
406 $(go.Part, "Vertical",
407 $(go.TextBlock, { text: "left aligned\n\u200B indent two\n\u200B indent four",
408 background: "lightgreen", margin: 2, width: 150 }),
409 $(go.TextBlock, { text: "\u200B This is an indented paragraph consisting of lots of text that wraps naturally.",
410 background: "lightgreen", margin: 2, width: 150 })
411 ));
412</code></pre>
413<script>goCode("indent", 600, 200)</script>
414<p>
415 You can also use a <code>\u200B</code> character if you want to preserve spaces at the end of a line.
416</p>
417
418<h2 id="Flipping">Flipping</h2>
419<p>
420 You can flip text horizontally and vertically with the <a>TextBlock.flip</a> property:
421</p>
422
423<pre class="lang-js" id="flipPictures"><code>
424 diagram.add(
425 $(go.Part, "Table",
426 { defaultColumnSeparatorStrokeWidth: 3, defaultColumnSeparatorStroke: "gray", defaultSeparatorPadding: 5 },
427 $(go.TextBlock, { text: "Hello", column: 0, margin: 2, font: '26px serif',
428 flip: go.GraphObject.None
429 }),
430 $(go.TextBlock, "None (default)", { row: 1, column: 0 }),
431 $(go.TextBlock, { text: "Hello", column: 1, margin: 2, font: '26px serif',
432 flip: go.GraphObject.FlipHorizontal
433 }),
434 $(go.TextBlock, "FlipHorizontal", { row: 1, column: 1 }),
435 $(go.TextBlock, { text: "Hello", column: 2, margin: 2, font: '26px serif',
436 flip: go.GraphObject.FlipVertical
437 }),
438 $(go.TextBlock, "FlipVertical", { row: 1, column: 2 }),
439 $(go.TextBlock, { text: "Hello", column: 3, margin: 2, font: '26px serif',
440 flip: go.GraphObject.FlipBoth
441 }),
442 $(go.TextBlock, "FlipBoth", { row: 1, column: 3 })
443 ));
444</code></pre>
445<script>goCode("flipPictures", 600, 160)</script>
446
447<h2 id="Editing">Editing</h2>
448<p>
449<b>GoJS</b> also supports the in-place editing of text by the user.
450You just need to set the <a>TextBlock.editable</a> property to true.
451</p>
452<p>
453If you want to provide text validation of the user's input, you can set the <a>TextBlock.textValidation</a> property to a function.
454You can also provide a more customized or sophisticated text editor by setting the <a>TextBlock.textEditor</a> property.
455There is an example of text validation on the <a href="validation.html">Validation intro page.</a>
456</p>
457<pre class="lang-js" id="editingTextBlocks"><code>
458 diagram.add(
459 $(go.Part,
460 $(go.TextBlock,
461 { text: "select and then click to edit",
462 background: "lightblue",
463 editable: true, isMultiline: false })
464 ));
465 diagram.add(
466 $(go.Part,
467 $(go.TextBlock,
468 { text: "this one allows embedded newlines",
469 background: "lightblue",
470 editable: true })
471 ));
472</code></pre>
473<script>goCode("editingTextBlocks", 600, 100)</script>
474
475 </div>
476 </div>
477
478 <div class="bg-nwoods-primary">
479 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
480 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
481 </section>
482 </div><footer class="bg-nwoods-primary text-white">
483 <div class="container max-w-screen-lg mx-auto px-8">
484 <div class="w-full py-6">
485
486 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
487 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
488 <li class="list-none row-span-2">
489 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
490 <ul class="list-none space-y-4 md:space-y-1 px-0">
491 <li>
492 <a href="../samples/index.html">Samples</a>
493 </li>
494 <li>
495 <a href="../learn/index.html">Learn</a>
496 </li>
497 <li>
498 <a href="../intro/index.html">Intro</a>
499 </li>
500 <li>
501 <a href="../api/index.html">API</a>
502 </li>
503 <li>
504 <a href="../changelog.html">Changelog</a>
505 </li>
506 <li>
507 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
508 </li>
509 </ul>
510 </li>
511 <li class="list-none row-span-2">
512 <h2 class="text-base font-semibold tracking-wide">Support</h2>
513 <ul class="list-none space-y-4 md:space-y-1 px-0">
514 <li>
515 <a href="https://www.nwoods.com/contact.html"
516 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
517 </li>
518 <li>
519 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
520 </li>
521 <li>
522 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
523 </li>
524 <li>
525 <a href="https://www.nwoods.com/sales/index.html"
526 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
527 </li>
528 <li>
529 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
530 </li>
531 </ul>
532 </li>
533 <li class="list-none row-span-2">
534 <h2 class="text-base font-semibold tracking-wide">Company</h2>
535 <ul class="list-none space-y-4 md:space-y-1 px-0">
536 <li>
537 <a href="https://www.nwoods.com">Northwoods</a>
538 </li>
539 <li>
540 <a href="https://www.nwoods.com/about.html">About Us</a>
541 </li>
542 <li>
543 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
544 </li>
545 <li>
546 <a href="https://twitter.com/northwoodsgo">Twitter</a>
547 </li>
548
549 </ul>
550 </li>
551 </ul>
552
553
554 <p class="text-sm text-gray-100 md:mb-6">
555 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
556 </p>
557 </div>
558 </div>
559</footer> </body>
560
561<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
562<script>
563 window.dataLayer = window.dataLayer || [];
564 function gtag(){dataLayer.push(arguments);}
565 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
566 var getOutboundLink = function(url, label) {
567 gtag('event', 'click', {
568 'event_category': 'outbound',
569 'event_label': label,
570 'transport_type': 'beacon'
571 });
572 }
573
574 // topnav
575 var topButton = document.getElementById("topnavButton");
576 var topnavList = document.getElementById("topnavList");
577 topButton.addEventListener("click", function() {
578 this.classList.toggle("active");
579 topnavList.classList.toggle("hidden");
580 document.getElementById("topnavOpen").classList.toggle("hidden");
581 document.getElementById("topnavClosed").classList.toggle("hidden");
582 });
583</script>
584 <script src="../assets/js/prism.js"></script>
585 <script src="../release/go.js"></script>
586 <script src="../assets/js/goDoc.js"></script>
587 <script>
588 document.addEventListener("DOMContentLoaded", function() {
589 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
590 if (window.goDoc) window.goDoc();
591 var d = window.diagrams;
592 for (var i = 0; i < d.length; i++) {
593 var dargs = d[i];
594 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
595 }
596 if (window.extra) window.extra();
597 });
598 </script>
599</html>