-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
Diagram.html
6239 lines (6231 loc) · 406 KB
/
Diagram.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Diagram | GoJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html" target="api">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="tsd-page-header">
<div class="tsd-page-toolbar">
<div class="container-fluid plr15">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">GoJS API</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container-fluid plr15">
<div class="top-copyright">
<!--<b>GoJS</b>® Diagramming Components<br/>version <br/>version 2.1.8 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
<b>GoJS</b>® Diagramming Components<br/>version 2.1.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<div>
<h1>Class Diagram</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<span class="target">Diagram</span>
<ul class="tsd-hierarchy">
<li>
<a href="Palette.html" class="tsd-signature-type">Palette</a>
</li>
<li>
<a href="Overview.html" class="tsd-signature-type">Overview</a>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>A Diagram is associated with an HTML DIV element. Constructing a Diagram creates
an HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs.
<strong>GoJS</strong> will manage the contents of this DIV -- you should not modify the contents of the DIV,
although you may style the given DIV (background, border, etc) and position and size it as needed.</p>
<p>Minimal Diagram construction looks like this. HTML:</p>
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myDiagramDiv"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"border: solid 1px black; width:400px; height:400px"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>JavaScript:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> $ = go.GraphObject.make; <span class="hljs-comment">// for conciseness</span>
myDiagram = $(go.Diagram, <span class="hljs-string">"myDiagramDiv"</span>, <span class="hljs-comment">// create a Diagram for the DIV HTML element</span>
{
<span class="hljs-string">"undoManager.isEnabled"</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">// enable undo & redo</span>
});</code></pre>
<p>The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV.</p>
<p>Each Diagram holds a set of <a href="Layer.html">Layer</a>s each of which holds some number of <a href="Part.html">Part</a>s
such as <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s.
Each <a href="Part.html">Part</a> consists of <a href="GraphObject.html">GraphObject</a>s such as <a href="TextBlock.html">TextBlock</a>s and <a href="Shape.html">Shape</a>s
and <a href="Panel.html">Panel</a>s holding yet more GraphObjects.</p>
<p>A Diagram and its Parts provide the visual representation of a <a href="Model.html">Model</a> that holds JavaScript
data objects for the nodes and the links.
The model provides the way to recognize the relationships between the data.</p>
<p class="boxrun">
Two Diagrams can display and manipulate the same Model. (<a href="../../samples/updateDemo.html">Example</a>)
<p>A diagram will automatically create <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s corresponding to the model data.
The diagram has a number of named templates it uses to create the actual parts:
<a href="Diagram.html#nodeTemplateMap">nodeTemplateMap</a>, <a href="Diagram.html#groupTemplateMap">groupTemplateMap</a>, and <a href="Diagram.html#linkTemplateMap">linkTemplateMap</a>.
Each template may have some data <a href="Binding.html">Binding</a>s that set the part's <a href="GraphObject.html">GraphObject</a>s' properties
based on the value of properties of the data.</p>
<p>A simple Node template and Model data (both nodes and links) may look like this:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> $ = go.GraphObject.make; <span class="hljs-comment">// for conciseness</span>
<span class="hljs-comment">// define a simple Node template</span>
myDiagram.nodeTemplate =
$(go.Node, <span class="hljs-string">"Auto"</span>, <span class="hljs-comment">// the Shape will go around the TextBlock</span>
$(go.Shape, <span class="hljs-string">"RoundedRectangle"</span>,
<span class="hljs-comment">// Shape.fill is bound to Node.data.color</span>
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"fill"</span>, <span class="hljs-string">"color"</span>)),
$(go.TextBlock,
{ <span class="hljs-attr">margin</span>: <span class="hljs-number">3</span> }, <span class="hljs-comment">// some room around the text</span>
<span class="hljs-comment">// TextBlock.text is bound to Node.data.key</span>
<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"text"</span>, <span class="hljs-string">"key"</span>))
);
<span class="hljs-comment">// create the model data that will be represented by Nodes and Links</span>
myDiagram.model = <span class="hljs-keyword">new</span> go.GraphLinksModel(
[
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"lightblue"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Beta"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"orange"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Gamma"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"lightgreen"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Delta"</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"pink"</span> }
],
[
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Beta"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Gamma"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Beta"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Beta"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Gamma"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Delta"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Delta"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Alpha"</span> }
]);</code></pre>
<p class="boxrun">
The above code is used to make the <a href="../../samples/minimal.html">Minimal sample</a>, a simple example of
creating a Diagram and setting its model.
<p class="boxread">
Read about models on the <a href="../../intro/usingModels.html">Using Models</a> page in the introduction.
A diagram is responsible for scrolling (<a href="Diagram.html#position">position</a>) and zooming (<a href="Diagram.html#scale">scale</a>) all of the parts that it shows.
Each <a href="Part.html">Part</a> occupies some area given by its <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>.
<p>The union of all of the parts' bounds constitutes the <a href="Diagram.html#documentBounds">documentBounds</a>.
The document bounds determines the area that the diagram can be scrolled to.
There are several properties that you can set, such as <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a>,
that control the initial size and position of the diagram contents.</p>
<p>At any later time you can also explicitly set the <a href="Diagram.html#position">position</a> and/or <a href="Diagram.html#scale">scale</a> to
get the appearance that you want. But you may find it easier to call methods to get the desired effect.
For example, if you want to make a particular Node be centered in the viewport,
call either <a href="Diagram.html#centerRect">centerRect</a> or <a href="Diagram.html#scrollToRect">scrollToRect</a> with the Node's <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>,
depending on whether or not you want the view to be scrolled if the node is already in view.</p>
<p class="boxread">
Read in the Introduction about <a href="../../intro/viewport.html">Viewports</a>
and the <a href="../../intro/initialView.html">Initial Viewport</a>.
You can have the diagram perform automatic layouts of its nodes and links by setting
<a href="Diagram.html#layout">layout</a> to an instance of the <a href="Layout.html">Layout</a> subclass of your choice.
The default <a href="Diagram.html#layout">layout</a> is an instance of the <a href="Layout.html">Layout</a> base class that ignores links and
only positions <a href="Node.html">Node</a>s that do not have a location.
This default layout will allow you to programmatically position nodes (including by loading
from a database) and will also allow the user to manually position nodes using the <a href="DraggingTool.html">DraggingTool</a>.
<p>If you do supply a particular layout as the <a href="Diagram.html#layout">layout</a>, you can control which <a href="Part.html">Part</a>s it operates
on by setting <a href="Part.html#isLayoutPositioned">Part.isLayoutPositioned</a>.
Normally, of course, it works on all top-level nodes and links.
The layout is performed both after the model is first loaded as well as after any part is added or removed
or changes visibility or size.
You can disable the initial layout by setting <a href="Layout.html#isInitial">Layout.isInitial</a> to false.
You can disable later automatic layouts by setting <a href="Layout.html#isOngoing">Layout.isOngoing</a> to false.</p>
<p class="boxread">
See the <a href="../../intro/layouts.html">Layouts</a> page in the Introduction for a summary of layout behavior.
<p>A diagram maintains a collection of selected parts, the <a href="Diagram.html#selection">Diagram.selection</a>.
To select a Part you set its <a href="Part.html#isSelected">Part.isSelected</a> property to true.</p>
<p>There are many properties, named "allow...", that control what operations the user
may perform on the parts in the diagram. These correspond to the same named
properties on <a href="Layer.html">Layer</a> that govern the behavior for those parts in a particular layer.
Furthermore for some of these properties there are corresponding properties on
<a href="Part.html">Part</a>, named "...able", that govern the behavior for that individual part.
For example, the <a href="Diagram.html#allowCopy">allowCopy</a> property corresponds to <a href="Layer.html#allowCopy">Layer.allowCopy</a> and
to the property <a href="Part.html#copyable">Part.copyable</a>.
The <a href="Part.html#canCopy">Part.canCopy</a> predicate is false if any of these properties is false.</p>
<p class="boxread">
See the <a href="../../intro/permissions.html">Permissions</a> page for a more thorough discussion.
<p>The <a href="Diagram.html#commandHandler">commandHandler</a> implements various standard commands,
such as the <a href="CommandHandler.html#deleteSelection">CommandHandler.deleteSelection</a> method and the
<a href="CommandHandler.html#canDeleteSelection">CommandHandler.canDeleteSelection</a> predicate.</p>
<p class="boxread">
See the <a href="../../intro/commands.html">Commands</a> page for a listing of keyboard commands and
the use of commands in general.
<p>The diagram supports modular behavior for mouse events by implementing "tools".
All mouse and keyboard events are represented by <a href="InputEvent.html">InputEvent</a>s and redirected
to the <a href="Diagram.html#currentTool">currentTool</a>.
The default tool is an instance of <a href="ToolManager.html">ToolManager</a> which keeps three lists of mode-less tools:
<a href="ToolManager.html#mouseDownTools">ToolManager.mouseDownTools</a>, <a href="ToolManager.html#mouseMoveTools">ToolManager.mouseMoveTools</a>, and <a href="ToolManager.html#mouseUpTools">ToolManager.mouseUpTools</a>.
The ToolManager searches these lists when a mouse event happens to find the first tool that can run.
It then makes that tool the new <a href="Diagram.html#currentTool">currentTool</a>, where it can continue to process input events.
When the tool is done, it stops itself, causing the <a href="Diagram.html#defaultTool">defaultTool</a> to be the new <a href="Diagram.html#currentTool">currentTool</a>.</p>
<p>Mouse-down tools include:</p>
<ul>
<li><a href="ToolManager.html#actionTool">ToolManager.actionTool</a>, to support objects like "buttons"</li>
<li><a href="ToolManager.html#relinkingTool">ToolManager.relinkingTool</a>, to reconnect an existing link</li>
<li><a href="ToolManager.html#linkReshapingTool">ToolManager.linkReshapingTool</a>, to modify the route of an existing link</li>
<li><a href="ToolManager.html#rotatingTool">ToolManager.rotatingTool</a>, to change the angle of an object</li>
<li><a href="ToolManager.html#resizingTool">ToolManager.resizingTool</a>, to change the size of an object</li>
</ul>
<p>Mouse-move tools include:</p>
<ul>
<li><a href="ToolManager.html#linkingTool">ToolManager.linkingTool</a>, to draw a new link</li>
<li><a href="ToolManager.html#draggingTool">ToolManager.draggingTool</a>, to move or copy the selection</li>
<li><a href="ToolManager.html#dragSelectingTool">ToolManager.dragSelectingTool</a>, to select parts within a rectangular area</li>
<li><a href="ToolManager.html#panningTool">ToolManager.panningTool</a>, to pan the diagram</li>
</ul>
<p>Mouse-up tools include:</p>
<ul>
<li><a href="ToolManager.html#contextMenuTool">ToolManager.contextMenuTool</a>, to manage context menus</li>
<li><a href="ToolManager.html#textEditingTool">ToolManager.textEditingTool</a>, to support in-place text editing</li>
<li><a href="ToolManager.html#clickCreatingTool">ToolManager.clickCreatingTool</a>, to create new parts where the user clicks</li>
<li><a href="ToolManager.html#clickSelectingTool">ToolManager.clickSelectingTool</a>, to select parts</li>
</ul>
<p>You can also run a tool in a modal fashion by explicitly setting <a href="Diagram.html#currentTool">currentTool</a>.
That tool will keep running until some code replaces the <a href="Diagram.html#currentTool">currentTool</a>.
This normally happens when the current tool calls <a href="Tool.html#stopTool">Tool.stopTool</a>, such as on a mouse-up event.</p>
<p class="boxread">
See the <a href="../../intro/tools.html">Tools</a> page for a listing of predefined tools and how they operate.
<p>A diagram raises various <a href="DiagramEvent.html">DiagramEvent</a>s when interesting things happen that may have affected the whole diagram.
See the documentation for <a href="DiagramEvent.html">DiagramEvent</a> for a complete listing.</p>
<p>When you need to display multiple Models, but not at the same time, you can do so by using only one Diagram and setting the <a href="Diagram.html#model">model</a> to a different one.
You can also have two Diagrams share a DIV by swapping the <a href="Diagram.html#div">div</a> to <code>null</code> on one Diagram and setting it on the other.
When permanently removing a Diagram,t o clear any memory used,
set the <a href="Diagram.html#div">div</a> to <code>null</code> and remove all references to the Diagram. These scenarios are discussed more on the
<a href="../../intro/replacingDeleting.html">Replacing Diagrams and Models</a> intro page.</p>
</div>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Diagram.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowClipboard" class="tsd-kind-icon">allow<wbr>Clipboard</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowCopy" class="tsd-kind-icon">allow<wbr>Copy</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowDelete" class="tsd-kind-icon">allow<wbr>Delete</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowDragOut" class="tsd-kind-icon">allow<wbr>Drag<wbr>Out</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowDrop" class="tsd-kind-icon">allow<wbr>Drop</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowGroup" class="tsd-kind-icon">allow<wbr>Group</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowHorizontalScroll" class="tsd-kind-icon">allow<wbr>Horizontal<wbr>Scroll</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowInsert" class="tsd-kind-icon">allow<wbr>Insert</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowLink" class="tsd-kind-icon">allow<wbr>Link</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowMove" class="tsd-kind-icon">allow<wbr>Move</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowRelink" class="tsd-kind-icon">allow<wbr>Relink</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowReshape" class="tsd-kind-icon">allow<wbr>Reshape</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowResize" class="tsd-kind-icon">allow<wbr>Resize</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowRotate" class="tsd-kind-icon">allow<wbr>Rotate</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowSelect" class="tsd-kind-icon">allow<wbr>Select</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowTextEdit" class="tsd-kind-icon">allow<wbr>Text<wbr>Edit</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowUndo" class="tsd-kind-icon">allow<wbr>Undo</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowUngroup" class="tsd-kind-icon">allow<wbr>Ungroup</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowVerticalScroll" class="tsd-kind-icon">allow<wbr>Vertical<wbr>Scroll</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#allowZoom" class="tsd-kind-icon">allow<wbr>Zoom</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#animationManager" class="tsd-kind-icon">animation<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#autoScale" class="tsd-kind-icon">auto<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#autoScrollRegion" class="tsd-kind-icon">auto<wbr>Scroll<wbr>Region</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#click" class="tsd-kind-icon">click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#commandHandler" class="tsd-kind-icon">command<wbr>Handler</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#contentAlignment" class="tsd-kind-icon">content<wbr>Alignment</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#contextClick" class="tsd-kind-icon">context<wbr>Click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#contextMenu" class="tsd-kind-icon">context<wbr>Menu</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#currentCursor" class="tsd-kind-icon">current<wbr>Cursor</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#currentTool" class="tsd-kind-icon">current<wbr>Tool</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#defaultCursor" class="tsd-kind-icon">default<wbr>Cursor</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#defaultScale" class="tsd-kind-icon">default<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#defaultTool" class="tsd-kind-icon">default<wbr>Tool</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#div" class="tsd-kind-icon">div</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#documentBounds" class="tsd-kind-icon">document<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#doubleClick" class="tsd-kind-icon">double<wbr>Click</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#firstInput" class="tsd-kind-icon">first<wbr>Input</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#fixedBounds" class="tsd-kind-icon">fixed<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#grid" class="tsd-kind-icon">grid</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#groupSelectionAdornmentTemplate" class="tsd-kind-icon">group<wbr>Selection<wbr>Adornment<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#groupTemplate" class="tsd-kind-icon">group<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#groupTemplateMap" class="tsd-kind-icon">group<wbr>Template<wbr>Map</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#handlesDragDropForTopLevelParts" class="tsd-kind-icon">handles<wbr>Drag<wbr>Drop<wbr>For<wbr>Top<wbr>Level<wbr>Parts</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#hasHorizontalScrollbar" class="tsd-kind-icon">has<wbr>Horizontal<wbr>Scrollbar</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#hasVerticalScrollbar" class="tsd-kind-icon">has<wbr>Vertical<wbr>Scrollbar</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#highlighteds" class="tsd-kind-icon">highlighteds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialAutoScale" class="tsd-kind-icon">initial<wbr>Auto<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialContentAlignment" class="tsd-kind-icon">initial<wbr>Content<wbr>Alignment</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialDocumentSpot" class="tsd-kind-icon">initial<wbr>Document<wbr>Spot</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialPosition" class="tsd-kind-icon">initial<wbr>Position</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialScale" class="tsd-kind-icon">initial<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#initialViewportSpot" class="tsd-kind-icon">initial<wbr>Viewport<wbr>Spot</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isEnabled" class="tsd-kind-icon">is<wbr>Enabled</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isModelReadOnly" class="tsd-kind-icon">is<wbr>Model<wbr>Read<wbr>Only</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isModified" class="tsd-kind-icon">is<wbr>Modified</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isMouseCaptured" class="tsd-kind-icon">is<wbr>Mouse<wbr>Captured</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isReadOnly" class="tsd-kind-icon">is<wbr>Read<wbr>Only</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#isTreePathToChildren" class="tsd-kind-icon">is<wbr>Tree<wbr>Path<wbr>ToChildren</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#lastInput" class="tsd-kind-icon">last<wbr>Input</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#layers" class="tsd-kind-icon">layers</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#layout" class="tsd-kind-icon">layout</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-licenseKey" class="tsd-kind-icon">license<wbr>Key</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#linkSelectionAdornmentTemplate" class="tsd-kind-icon">link<wbr>Selection<wbr>Adornment<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#linkTemplate" class="tsd-kind-icon">link<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#linkTemplateMap" class="tsd-kind-icon">link<wbr>Template<wbr>Map</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#links" class="tsd-kind-icon">links</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#maxScale" class="tsd-kind-icon">max<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#maxSelectionCount" class="tsd-kind-icon">max<wbr>Selection<wbr>Count</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#minScale" class="tsd-kind-icon">min<wbr>Scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#model" class="tsd-kind-icon">model</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseDragOver" class="tsd-kind-icon">mouse<wbr>Drag<wbr>Over</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseDrop" class="tsd-kind-icon">mouse<wbr>Drop</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseEnter" class="tsd-kind-icon">mouse<wbr>Enter</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseHold" class="tsd-kind-icon">mouse<wbr>Hold</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseHover" class="tsd-kind-icon">mouse<wbr>Hover</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseLeave" class="tsd-kind-icon">mouse<wbr>Leave</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#mouseOver" class="tsd-kind-icon">mouse<wbr>Over</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#nodeSelectionAdornmentTemplate" class="tsd-kind-icon">node<wbr>Selection<wbr>Adornment<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#nodeTemplate" class="tsd-kind-icon">node<wbr>Template</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#nodeTemplateMap" class="tsd-kind-icon">node<wbr>Template<wbr>Map</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#nodes" class="tsd-kind-icon">nodes</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#opacity" class="tsd-kind-icon">opacity</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#padding" class="tsd-kind-icon">padding</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#parts" class="tsd-kind-icon">parts</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#position" class="tsd-kind-icon">position</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#positionComputation" class="tsd-kind-icon">position<wbr>Computation</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scale" class="tsd-kind-icon">scale</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scaleComputation" class="tsd-kind-icon">scale<wbr>Computation</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollHorizontalLineChange" class="tsd-kind-icon">scroll<wbr>Horizontal<wbr>Line<wbr>Change</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollMargin" class="tsd-kind-icon">scroll<wbr>Margin</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollMode" class="tsd-kind-icon">scroll<wbr>Mode</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollVerticalLineChange" class="tsd-kind-icon">scroll<wbr>Vertical<wbr>Line<wbr>Change</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#scrollsPageOnFocus" class="tsd-kind-icon">scrolls<wbr>Page<wbr>OnFocus</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#selection" class="tsd-kind-icon">selection</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#skipsUndoManager" class="tsd-kind-icon">skips<wbr>Undo<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#toolManager" class="tsd-kind-icon">tool<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#toolTip" class="tsd-kind-icon">tool<wbr>Tip</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#undoManager" class="tsd-kind-icon">undo<wbr>Manager</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#validCycle" class="tsd-kind-icon">valid<wbr>Cycle</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-version" class="tsd-kind-icon">version</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#viewSize" class="tsd-kind-icon">view<wbr>Size</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Diagram.html#viewportBounds" class="tsd-kind-icon">viewport<wbr>Bounds</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Diagram.html#zoomPoint" class="tsd-kind-icon">zoom<wbr>Point</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#add" class="tsd-kind-icon">add</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addChangedListener" class="tsd-kind-icon">add<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addDiagramListener" class="tsd-kind-icon">add<wbr>Diagram<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addLayer" class="tsd-kind-icon">add<wbr>Layer</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addLayerAfter" class="tsd-kind-icon">add<wbr>Layer<wbr>After</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addLayerBefore" class="tsd-kind-icon">add<wbr>Layer<wbr>Before</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#addModelChangedListener" class="tsd-kind-icon">add<wbr>Model<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#alignDocument" class="tsd-kind-icon">align<wbr>Document</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#centerRect" class="tsd-kind-icon">center<wbr>Rect</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#clear" class="tsd-kind-icon">clear</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#clearHighlighteds" class="tsd-kind-icon">clear<wbr>Highlighteds</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#clearSelection" class="tsd-kind-icon">clear<wbr>Selection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#commit" class="tsd-kind-icon">commit</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#commitTransaction" class="tsd-kind-icon">commit<wbr>Transaction</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Diagram.html#computeBounds" class="tsd-kind-icon">compute<wbr>Bounds</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#computeMove" class="tsd-kind-icon">compute<wbr>Move</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#computePartsBounds" class="tsd-kind-icon">compute<wbr>Parts<wbr>Bounds</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#copyParts" class="tsd-kind-icon">copy<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#delayInitialization" class="tsd-kind-icon">delay<wbr>Initialization</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findLayer" class="tsd-kind-icon">find<wbr>Layer</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findLinkForData" class="tsd-kind-icon">find<wbr>Link<wbr>For<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findLinkForKey" class="tsd-kind-icon">find<wbr>Link<wbr>For<wbr>Key</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findLinksByExample" class="tsd-kind-icon">find<wbr>Links<wbr>ByExample</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findNodeForData" class="tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findNodeForKey" class="tsd-kind-icon">find<wbr>Node<wbr>For<wbr>Key</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findNodesByExample" class="tsd-kind-icon">find<wbr>Nodes<wbr>ByExample</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectAt" class="tsd-kind-icon">find<wbr>Object<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectsAt" class="tsd-kind-icon">find<wbr>Objects<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectsIn" class="tsd-kind-icon">find<wbr>Objects<wbr>In</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findObjectsNear" class="tsd-kind-icon">find<wbr>Objects<wbr>Near</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findPartAt" class="tsd-kind-icon">find<wbr>Part<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findPartForData" class="tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findPartForKey" class="tsd-kind-icon">find<wbr>Part<wbr>For<wbr>Key</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findPartsAt" class="tsd-kind-icon">find<wbr>Parts<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findPartsIn" class="tsd-kind-icon">find<wbr>Parts<wbr>In</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Diagram.html#findPartsNear" class="tsd-kind-icon">find<wbr>Parts<wbr>Near</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findTopLevelGroups" class="tsd-kind-icon">find<wbr>Top<wbr>Level<wbr>Groups</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#findTreeRoots" class="tsd-kind-icon">find<wbr>Tree<wbr>Roots</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#focus" class="tsd-kind-icon">focus</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-fromDiv" class="tsd-kind-icon">from<wbr>Div</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#highlight" class="tsd-kind-icon">highlight</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#highlightCollection" class="tsd-kind-icon">highlight<wbr>Collection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-inherit" class="tsd-kind-icon">inherit</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#layoutDiagram" class="tsd-kind-icon">layout<wbr>Diagram</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#makeImage" class="tsd-kind-icon">make<wbr>Image</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#makeImageData" class="tsd-kind-icon">make<wbr>Image<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#makeSvg" class="tsd-kind-icon">make<wbr>Svg</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#moveParts" class="tsd-kind-icon">move<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#rebuildParts" class="tsd-kind-icon">rebuild<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#remove" class="tsd-kind-icon">remove</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeChangedListener" class="tsd-kind-icon">remove<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeDiagramListener" class="tsd-kind-icon">remove<wbr>Diagram<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeLayer" class="tsd-kind-icon">remove<wbr>Layer</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeModelChangedListener" class="tsd-kind-icon">remove<wbr>Model<wbr>Changed<wbr>Listener</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#removeParts" class="tsd-kind-icon">remove<wbr>Parts</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#requestUpdate" class="tsd-kind-icon">request<wbr>Update</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#rollbackTransaction" class="tsd-kind-icon">rollback<wbr>Transaction</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#scroll" class="tsd-kind-icon">scroll</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#scrollToRect" class="tsd-kind-icon">scroll<wbr>ToRect</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#select" class="tsd-kind-icon">select</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#selectCollection" class="tsd-kind-icon">select<wbr>Collection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#setProperties" class="tsd-kind-icon">set<wbr>Properties</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#startTransaction" class="tsd-kind-icon">start<wbr>Transaction</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#transformDocToView" class="tsd-kind-icon">transform<wbr>Doc<wbr>ToView</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#transformViewToDoc" class="tsd-kind-icon">transform<wbr>View<wbr>ToDoc</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#updateAllRelationshipsFromData" class="tsd-kind-icon">update<wbr>All<wbr>Relationships<wbr>From<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#updateAllTargetBindings" class="tsd-kind-icon">update<wbr>All<wbr>Target<wbr>Bindings</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#zoomToFit" class="tsd-kind-icon">zoom<wbr>ToFit</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Diagram.html#zoomToRect" class="tsd-kind-icon">zoom<wbr>ToRect</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Constants</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleAll" class="tsd-kind-icon">Cycle<wbr>All</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleDestinationTree" class="tsd-kind-icon">Cycle<wbr>Destination<wbr>Tree</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleNotDirected" class="tsd-kind-icon">Cycle<wbr>Not<wbr>Directed</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleNotUndirected" class="tsd-kind-icon">Cycle<wbr>Not<wbr>Undirected</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-CycleSourceTree" class="tsd-kind-icon">Cycle<wbr>Source<wbr>Tree</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-DocumentScroll" class="tsd-kind-icon">Document<wbr>Scroll</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-InfiniteScroll" class="tsd-kind-icon">Infinite<wbr>Scroll</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-None" class="tsd-kind-icon">None</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-Uniform" class="tsd-kind-icon">Uniform</a></li>
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Diagram.html#static-UniformToFill" class="tsd-kind-icon">Uniform<wbr>ToFill</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
<a name="constructor" class="tsd-anchor"></a>
<h3>
constructor
</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Diagram<span class="tsd-signature-symbol">(</span>div<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Construct an empty Diagram for a particular DIV HTML element.</p>
<p>You will normally initialize properties of the Diagram that control its appearance and behavior.
These properties include:</p>
<ul>
<li>templates (such as <a href="Diagram.html#nodeTemplate">nodeTemplate</a> or <a href="Diagram.html#linkSelectionAdornmentTemplate">linkSelectionAdornmentTemplate</a>),</li>
<li>an automatic layout (if desired, <a href="Diagram.html#layout">layout</a>),</li>
<li>positioning or scaling (such as <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a> or <a href="Diagram.html#initialAutoScale">initialAutoScale</a>),</li>
<li>permissions (such as <a href="Diagram.html#isReadOnly">isReadOnly</a> or <a href="Diagram.html#allowDelete">allowDelete</a>), or</li>
<li>Tool or CommandHandler customization (such as <a href="CommandHandler.html#archetypeGroupData">CommandHandler.archetypeGroupData</a> or
<a href="Tool.html#isEnabled">Tool.isEnabled</a>): <code>diagram.toolManager.dragSelectingTool.isEnabled = false;</code>.</li>
</ul>
<p>Then you will need to construct a Model (usually a <a href="GraphLinksModel.html">GraphLinksModel</a>) for the Diagram,
initialize its data by setting its <a href="Model.html#nodeDataArray">Model.nodeDataArray</a> and other properties,
and then set the diagram's <a href="Diagram.html#model">model</a>.</p>
<p>Finally, if you want to disassociate the Diagram from the HTML Div element, set <a href="Diagram.html#div">Diagram.div</a> to null.
If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to
set <a href="Diagram.html#div">div</a> to null in order for the page to recover the memory.</p>
<p>It is commonplace to use the static function <a href="GraphObject.html#static-make">GraphObject.make</a> to build a Diagram:</p>
<pre><code class="hljs js"><span class="hljs-keyword">var</span> $ = go.GraphObject.make;
<span class="hljs-keyword">var</span> diagram =
$(go.Diagram, <span class="hljs-string">"myDiagramDiv"</span>,
{
<span class="hljs-attr">allowZoom</span>: <span class="hljs-literal">false</span>,
<span class="hljs-string">"animationManager.isEnabled"</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// turn off automatic animations</span>
<span class="hljs-string">"grid.visible"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// display a background grid for the whole diagram</span>
<span class="hljs-string">"grid.gridCellSize"</span>: <span class="hljs-keyword">new</span> go.Size(<span class="hljs-number">20</span>, <span class="hljs-number">20</span>),
<span class="hljs-comment">// allow double-click in background to create a new node</span>
<span class="hljs-string">"clickCreatingTool.archetypeNodeData"</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">"Node"</span> },
<span class="hljs-comment">// allow Ctrl-G to call the groupSelection command</span>
<span class="hljs-string">"commandHandler.archetypeGroupData"</span>:
{ <span class="hljs-attr">text</span>: <span class="hljs-string">"Group"</span>, <span class="hljs-attr">isGroup</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">"blue"</span> },
<span class="hljs-string">"commandHandler.copiesTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// for the copy command</span>
<span class="hljs-string">"commandHandler.deletesTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// for the delete command</span>
<span class="hljs-string">"toolManager.hoverDelay"</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// how quickly tooltips are shown</span>
<span class="hljs-comment">// mouse wheel zooms instead of scrolls</span>
<span class="hljs-string">"toolManager.mouseWheelBehavior"</span>: go.ToolManager.WheelZoom,
<span class="hljs-string">"draggingTool.dragsTree"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// dragging for both move and copy</span>
<span class="hljs-string">"draggingTool.isGridSnapEnabled"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">layout</span>: $(go.TreeLayout,
{ <span class="hljs-attr">angle</span>: <span class="hljs-number">90</span>, <span class="hljs-attr">sorting</span>: go.TreeLayout.SortingAscending }),
<span class="hljs-string">"undoManager.isEnabled"</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// enable undo & redo</span>
<span class="hljs-comment">// a Changed listener on the Diagram.model</span>
<span class="hljs-string">"ModelChanged"</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">if</span> (e.isTransactionFinished) saveModel(); }
});</code></pre>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> div: <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>A reference to a DIV HTML element or its ID as a string.
If no DIV is supplied one will be created in memory. The Diagram's <a href="Diagram.html#div">Diagram.div</a> property
can then be set later on.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Diagram.html" class="tsd-signature-type">Diagram</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowClipboard" class="tsd-anchor"></a>
<h3>
allow<wbr>Clipboard
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may copy to or paste parts from the internal clipboard.
This allows use of <a href="CommandHandler.html#cutSelection">CommandHandler.cutSelection</a>,
<a href="CommandHandler.html#copySelection">CommandHandler.copySelection</a> and <a href="CommandHandler.html#pasteSelection">CommandHandler.pasteSelection</a>.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowCopy" class="tsd-anchor"></a>
<h3>
allow<wbr>Copy
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may copy objects.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowDelete" class="tsd-anchor"></a>
<h3>
allow<wbr>Delete
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may delete objects from the Diagram.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowDragOut" class="tsd-anchor"></a>
<h3>
allow<wbr>Drag<wbr>Out
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may start a drag-and-drop in this Diagram,
possibly dropping in a different element.
The initial value is false.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowDrop" class="tsd-anchor"></a>
<h3>
allow<wbr>Drop
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may end a drag-and-drop operation in this Diagram.
This is typically set to true when a Diagram is used with a <a href="Palette.html">Palette</a>.</p>
<p>The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowGroup" class="tsd-anchor"></a>
<h3>
allow<wbr>Group
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may group parts together.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowHorizontalScroll" class="tsd-anchor"></a>
<h3>
allow<wbr>Horizontal<wbr>Scroll
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user is allowed to use the horizontal scrollbar.
The initial value is true.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#hasHorizontalScrollbar">hasHorizontalScrollbar</a>, <a href="Diagram.html#allowVerticalScroll">allowVerticalScroll</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowInsert" class="tsd-anchor"></a>
<h3>
allow<wbr>Insert
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may add parts to the Diagram.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowLink" class="tsd-anchor"></a>
<h3>
allow<wbr>Link
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may draw new links.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowMove" class="tsd-anchor"></a>
<h3>
allow<wbr>Move
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may move objects.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowRelink" class="tsd-anchor"></a>
<h3>
allow<wbr>Relink
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may reconnect existing links.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowReshape" class="tsd-anchor"></a>
<h3>
allow<wbr>Reshape
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may reshape parts.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowResize" class="tsd-anchor"></a>
<h3>
allow<wbr>Resize
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may resize parts.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowRotate" class="tsd-anchor"></a>
<h3>
allow<wbr>Rotate
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may rotate parts.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowSelect" class="tsd-anchor"></a>
<h3>
allow<wbr>Select
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may select objects.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowTextEdit" class="tsd-anchor"></a>
<h3>
allow<wbr>Text<wbr>Edit
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may do in-place text editing.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowUndo" class="tsd-anchor"></a>
<h3>
allow<wbr>Undo
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may undo or redo any changes.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowUngroup" class="tsd-anchor"></a>
<h3>
allow<wbr>Ungroup
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may ungroup existing groups.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowVerticalScroll" class="tsd-anchor"></a>
<h3>
allow<wbr>Vertical<wbr>Scroll
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user is allowed to use the vertical scrollbar.
The initial value is true.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#hasVerticalScrollbar">hasVerticalScrollbar</a>, <a href="Diagram.html#allowHorizontalScroll">allowHorizontalScroll</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowZoom" class="tsd-anchor"></a>
<h3>
allow<wbr>Zoom
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether the user may zoom into or out of the Diagram.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="animationManager" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
animation<wbr>Manager
<span class="tsd-signature-symbol">: </span><a href="AnimationManager.html" class="tsd-signature-type">AnimationManager</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This read-only property returns the <a href="AnimationManager.html">AnimationManager</a> for this Diagram.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.4</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="autoScale" class="tsd-anchor"></a>
<h3>
auto<wbr>Scale
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the autoScale behavior of the Diagram, controlling whether or not the
Diagram's bounds automatically scale to fit the view.</p>
<p>The only accepted values are the constant properties of Diagram,
<a href="Diagram.html#static-None">Diagram.None</a>, <a href="Diagram.html#static-Uniform">Diagram.Uniform</a>, or <a href="Diagram.html#static-UniformToFill">Diagram.UniformToFill</a>.
Setting this will change the Diagram's <a href="Diagram.html#scale">Diagram.scale</a> and <a href="Diagram.html#position">Diagram.position</a>, if appropriate.</p>
<p>The default value is <a href="Diagram.html#static-None">Diagram.None</a> - the scale and position are not automatically adjusted
according to the area covered by the document.
When the value is not None, any value for <a href="Diagram.html#initialAutoScale">initialAutoScale</a> or <a href="Diagram.html#initialScale">initialScale</a> is ignored.</p>
<p class="box">
When autoScale is set to a non-<a href="Diagram.html#static-None">Diagram.None</a> value,
the user will not be able to zoom, and setting <a href="Diagram.html#scale">scale</a> will do nothing.
If you only want to scale automatically on initialization, use <a href="Diagram.html#initialAutoScale">initialAutoScale</a>.
<p>Setting this property to <a href="Diagram.html#static-Uniform">Diagram.Uniform</a> is basically the same as calling <a href="Diagram.html#zoomToFit">zoomToFit</a>
all the time, or just disabling interactive zooming.</p>
<p>Note that depending on the values of <a href="Diagram.html#maxScale">maxScale</a> and <a href="Diagram.html#minScale">minScale</a>, the actual value for <a href="Diagram.html#scale">scale</a>
might be limited.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="autoScrollRegion" class="tsd-anchor"></a>
<h3>
auto<wbr>Scroll<wbr>Region
<span class="tsd-signature-symbol">: </span><a href="../index.html#MarginLike" class="tsd-signature-type">MarginLike</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the Margin that describes the Diagram's autoScrollRegion. The default value is a Margin of 16 on all sides.
When the mouse drag point is within this region on the left or right sides,
the view will automatically scroll horizontally in that direction. When the point is within
the region on the top or bottom, the view will automatically scroll
vertically in that direction. You can specify a distance of zero to disable autoscrolling
in a direction; a value of 0,0,0,0 turns off autoscrolling altogether.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="click" class="tsd-anchor"></a>
<h3>
click
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user single-primary-clicks
on the background of the Diagram.
This typically involves a mouse-down followed by a prompt mouse-up
at approximately the same position using the left (primary) mouse button.
This property is used by the <a href="ClickSelectingTool.html">ClickSelectingTool</a>
when the user clicks on no object.
The function is called in addition to the <a href="DiagramEvent.html">DiagramEvent</a>
that is raised with the name "BackgroundSingleClicked".</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="Diagram.html#doubleClick">doubleClick</a>, <a href="Diagram.html#contextClick">contextClick</a>, <a href="GraphObject.html#click">GraphObject.click</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="commandHandler" class="tsd-anchor"></a>
<h3>
command<wbr>Handler
<span class="tsd-signature-symbol">: </span><a href="CommandHandler.html" class="tsd-signature-type">CommandHandler</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="CommandHandler.html">CommandHandler</a> for this Diagram.</p>
<p>This is set to a new instance of <a href="CommandHandler.html">CommandHandler</a> on Diagram instantiation.</p>
<p>Setting this property does not notify about any changed event.
The value cannot be null and must not be shared with other Diagrams.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="contentAlignment" class="tsd-anchor"></a>
<h3>
content<wbr>Alignment
<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type">Spot</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the content alignment <a href="Spot.html">Spot</a> of this Diagram, to be used in determining
how parts are positioned when the <a href="Diagram.html#viewportBounds">viewportBounds</a> width or height is smaller than the <a href="Diagram.html#documentBounds">documentBounds</a>.</p>
<p>For instance a spot of <a href="Spot.html#static-Center">Spot.Center</a> would ensure that the Diagram's
contents are always centered in the viewport.</p>
<p>If you want the content to be aligned only initially, use <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a> instead.</p>
<p>The default value is <a href="Spot.html#static-Default">Spot.Default</a>, which causes no automatic scrolling or positioning.
When the value is not Default, any value for <a href="Diagram.html#initialContentAlignment">initialContentAlignment</a> or <a href="Diagram.html#initialPosition">initialPosition</a> is ignored.</p>
<p>Setting this property has the same effect as implementing
a "LayoutCompleted" DiagramEvent listener that scrolls the viewport to align the content.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="contextClick" class="tsd-anchor"></a>
<h3>
context<wbr>Click
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">e</span><span class="tsd-signature-symbol">: </span><a href="InputEvent.html" class="tsd-signature-type">InputEvent</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the function to execute when the user single-secondary-clicks
on the background of the Diagram.
This typically involves a mouse-down followed by a prompt mouse-up
at approximately the same position using the right (secondary) mouse button.
This property is used by the <a href="ClickSelectingTool.html">ClickSelectingTool</a>
when the user clicks on no object.
The function is called in addition to the <a href="DiagramEvent.html">DiagramEvent</a>
that is raised with the name "BackgroundContextClicked".</p>
<p>If this property value is a function, it is called with an <a href="InputEvent.html">InputEvent</a>.
By default this property is null.</p>
<p>If you do provide a function that makes changes to the diagram or to its model,
you should do so within a transaction -- call <a href="Diagram.html#startTransaction">startTransaction</a> and <a href="Diagram.html#commitTransaction">commitTransaction</a>.</p>