forked from jgraph/mxgraph
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmxGraph.js
More file actions
11280 lines (10111 loc) · 276 KB
/
mxGraph.js
File metadata and controls
11280 lines (10111 loc) · 276 KB
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
/**
* $Id: mxGraph.js,v 1.22 2013/04/23 07:40:46 gaudenz Exp $
* Copyright (c) 2006-2010, JGraph Ltd
*/
/**
* Class: mxGraph
*
* Extends <mxEventSource> to implement a graph component for
* the browser. This is the main class of the package. To activate
* panning and connections use <setPanning> and <setConnectable>.
* For rubberband selection you must create a new instance of
* <mxRubberband>. The following listeners are added to
* <mouseListeners> by default:
*
* - <tooltipHandler>: <mxTooltipHandler> that displays tooltips
* - <panningHandler>: <mxPanningHandler> for panning and popup menus
* - <connectionHandler>: <mxConnectionHandler> for creating connections
* - <graphHandler>: <mxGraphHandler> for moving and cloning cells
*
* These listeners will be called in the above order if they are enabled.
*
* Background Images:
*
* To display a background image, set the image, image width and
* image height using <setBackgroundImage>. If one of the
* above values has changed then the <view>'s <mxGraphView.validate>
* should be invoked.
*
* Cell Images:
*
* To use images in cells, a shape must be specified in the default
* vertex style (or any named style). Possible shapes are
* <mxConstants.SHAPE_IMAGE> and <mxConstants.SHAPE_LABEL>.
* The code to change the shape used in the default vertex style,
* the following code is used:
*
* (code)
* var style = graph.getStylesheet().getDefaultVertexStyle();
* style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
* (end)
*
* For the default vertex style, the image to be displayed can be
* specified in a cell's style using the <mxConstants.STYLE_IMAGE>
* key and the image URL as a value, for example:
*
* (code)
* image=http://www.example.com/image.gif
* (end)
*
* For a named style, the the stylename must be the first element
* of the cell style:
*
* (code)
* stylename;image=http://www.example.com/image.gif
* (end)
*
* A cell style can have any number of key=value pairs added, divided
* by a semicolon as follows:
*
* (code)
* [stylename;|key=value;]
* (end)
*
* Labels:
*
* The cell labels are defined by <getLabel> which uses <convertValueToString>
* if <labelsVisible> is true. If a label must be rendered as HTML markup, then
* <isHtmlLabel> should return true for the respective cell. If all labels
* contain HTML markup, <htmlLabels> can be set to true. NOTE: Enabling HTML
* labels carries a possible security risk (see the section on security in
* the manual).
*
* If wrapping is needed for a label, then <isHtmlLabel> and <isWrapping> must
* return true for the cell whose label should be wrapped. See <isWrapping> for
* an example.
*
* If clipping is needed to keep the rendering of a HTML label inside the
* bounds of its vertex, then <isClipping> should return true for the
* respective cell.
*
* By default, edge labels are movable and vertex labels are fixed. This can be
* changed by setting <edgeLabelsMovable> and <vertexLabelsMovable>, or by
* overriding <isLabelMovable>.
*
* In-place Editing:
*
* In-place editing is started with a doubleclick or by typing F2.
* Programmatically, <edit> is used to check if the cell is editable
* (<isCellEditable>) and call <startEditingAtCell>, which invokes
* <mxCellEditor.startEditing>. The editor uses the value returned
* by <getEditingValue> as the editing value.
*
* After in-place editing, <labelChanged> is called, which invokes
* <mxGraphModel.setValue>, which in turn calls
* <mxGraphModel.valueForCellChanged> via <mxValueChange>.
*
* The event that triggers in-place editing is passed through to the
* <cellEditor>, which may take special actions depending on the type of the
* event or mouse location, and is also passed to <getEditingValue>. The event
* is then passed back to the event processing functions which can perform
* specific actions based on the trigger event.
*
* Tooltips:
*
* Tooltips are implemented by <getTooltip>, which calls <getTooltipForCell>
* if a cell is under the mousepointer. The default implementation checks if
* the cell has a getTooltip function and calls it if it exists. Hence, in order
* to provide custom tooltips, the cell must provide a getTooltip function, or
* one of the two above functions must be overridden.
*
* Typically, for custom cell tooltips, the latter function is overridden as
* follows:
*
* (code)
* graph.getTooltipForCell = function(cell)
* {
* var label = this.convertValueToString(cell);
* return 'Tooltip for '+label;
* }
* (end)
*
* When using a config file, the function is overridden in the mxGraph section
* using the following entry:
*
* (code)
* <add as="getTooltipForCell"><![CDATA[
* function(cell)
* {
* var label = this.convertValueToString(cell);
* return 'Tooltip for '+label;
* }
* ]]></add>
* (end)
*
* "this" refers to the graph in the implementation, so for example to check if
* a cell is an edge, you use this.getModel().isEdge(cell)
*
* For replacing the default implementation of <getTooltipForCell> (rather than
* replacing the function on a specific instance), the following code should be
* used after loading the JavaScript files, but before creating a new mxGraph
* instance using <mxGraph>:
*
* (code)
* mxGraph.prototype.getTooltipForCell = function(cell)
* {
* var label = this.convertValueToString(cell);
* return 'Tooltip for '+label;
* }
* (end)
*
* Shapes & Styles:
*
* The implementation of new shapes is demonstrated in the examples. We'll assume
* that we have implemented a custom shape with the name BoxShape which we want
* to use for drawing vertices. To use this shape, it must first be registered in
* the cell renderer as follows:
*
* (code)
* mxCellRenderer.registerShape('box', BoxShape);
* (end)
*
* The code registers the BoxShape constructor under the name box in the cell
* renderer of the graph. The shape can now be referenced using the shape-key in
* a style definition. (The cell renderer contains a set of additional shapes,
* namely one for each constant with a SHAPE-prefix in <mxConstants>.)
*
* Styles are a collection of key, value pairs and a stylesheet is a collection
* of named styles. The names are referenced by the cellstyle, which is stored
* in <mxCell.style> with the following format: [stylename;|key=value;]. The
* string is resolved to a collection of key, value pairs, where the keys are
* overridden with the values in the string.
*
* When introducing a new shape, the name under which the shape is registered
* must be used in the stylesheet. There are three ways of doing this:
*
* - By changing the default style, so that all vertices will use the new
* shape
* - By defining a new style, so that only vertices with the respective
* cellstyle will use the new shape
* - By using shape=box in the cellstyle's optional list of key, value pairs
* to be overridden
*
* In the first case, the code to fetch and modify the default style for
* vertices is as follows:
*
* (code)
* var style = graph.getStylesheet().getDefaultVertexStyle();
* style[mxConstants.STYLE_SHAPE] = 'box';
* (end)
*
* The code takes the default vertex style, which is used for all vertices that
* do not have a specific cellstyle, and modifies the value for the shape-key
* in-place to use the new BoxShape for drawing vertices. This is done by
* assigning the box value in the second line, which refers to the name of the
* BoxShape in the cell renderer.
*
* In the second case, a collection of key, value pairs is created and then
* added to the stylesheet under a new name. In order to distinguish the
* shapename and the stylename we'll use boxstyle for the stylename:
*
* (code)
* var style = new Object();
* style[mxConstants.STYLE_SHAPE] = 'box';
* style[mxConstants.STYLE_STROKECOLOR] = '#000000';
* style[mxConstants.STYLE_FONTCOLOR] = '#000000';
* graph.getStylesheet().putCellStyle('boxstyle', style);
* (end)
*
* The code adds a new style with the name boxstyle to the stylesheet. To use
* this style with a cell, it must be referenced from the cellstyle as follows:
*
* (code)
* var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 20,
* 'boxstyle');
* (end)
*
* To summarize, each new shape must be registered in the <mxCellRenderer> with
* a unique name. That name is then used as the value of the shape-key in a
* default or custom style. If there are multiple custom shapes, then there
* should be a separate style for each shape.
*
* Inheriting Styles:
*
* For fill-, stroke-, gradient- and indicatorColors special keywords can be
* used. The inherit keyword for one of these colors will inherit the color
* for the same key from the parent cell. The swimlane keyword does the same,
* but inherits from the nearest swimlane in the ancestor hierarchy. Finally,
* the indicated keyword will use the color of the indicator as the color for
* the given key.
*
* Scrollbars:
*
* The <containers> overflow CSS property defines if scrollbars are used to
* display the graph. For values of 'auto' or 'scroll', the scrollbars will
* be shown. Note that the <resizeContainer> flag is normally not used
* together with scrollbars, as it will resize the container to match the
* size of the graph after each change.
*
* Multiplicities and Validation:
*
* To control the possible connections in mxGraph, <getEdgeValidationError> is
* used. The default implementation of the function uses <multiplicities>,
* which is an array of <mxMultiplicity>. Using this class allows to establish
* simple multiplicities, which are enforced by the graph.
*
* The <mxMultiplicity> uses <mxCell.is> to determine for which terminals it
* applies. The default implementation of <mxCell.is> works with DOM nodes (XML
* nodes) and checks if the given type parameter matches the nodeName of the
* node (case insensitive). Optionally, an attributename and value can be
* specified which are also checked.
*
* <getEdgeValidationError> is called whenever the connectivity of an edge
* changes. It returns an empty string or an error message if the edge is
* invalid or null if the edge is valid. If the returned string is not empty
* then it is displayed as an error message.
*
* <mxMultiplicity> allows to specify the multiplicity between a terminal and
* its possible neighbors. For example, if any rectangle may only be connected
* to, say, a maximum of two circles you can add the following rule to
* <multiplicities>:
*
* (code)
* graph.multiplicities.push(new mxMultiplicity(
* true, 'rectangle', null, null, 0, 2, ['circle'],
* 'Only 2 targets allowed',
* 'Only shape targets allowed'));
* (end)
*
* This will display the first error message whenever a rectangle is connected
* to more than two circles and the second error message if a rectangle is
* connected to anything but a circle.
*
* For certain multiplicities, such as a minimum of 1 connection, which cannot
* be enforced at cell creation time (unless the cell is created together with
* the connection), mxGraph offers <validate> which checks all multiplicities
* for all cells and displays the respective error messages in an overlay icon
* on the cells.
*
* If a cell is collapsed and contains validation errors, a respective warning
* icon is attached to the collapsed cell.
*
* Auto-Layout:
*
* For automatic layout, the <getLayout> hook is provided in <mxLayoutManager>.
* It can be overridden to return a layout algorithm for the children of a
* given cell.
*
* Unconnected edges:
*
* The default values for all switches are designed to meet the requirements of
* general diagram drawing applications. A very typical set of settings to
* avoid edges that are not connected is the following:
*
* (code)
* graph.setAllowDanglingEdges(false);
* graph.setDisconnectOnMove(false);
* (end)
*
* Setting the <cloneInvalidEdges> switch to true is optional. This switch
* controls if edges are inserted after a copy, paste or clone-drag if they are
* invalid. For example, edges are invalid if copied or control-dragged without
* having selected the corresponding terminals and allowDanglingEdges is
* false, in which case the edges will not be cloned if the switch is false.
*
* Output:
*
* To produce an XML representation for a diagram, the following code can be
* used.
*
* (code)
* var enc = new mxCodec(mxUtils.createXmlDocument());
* var node = enc.encode(graph.getModel());
* (end)
*
* This will produce an XML node than can be handled using the DOM API or
* turned into a string representation using the following code:
*
* (code)
* var xml = mxUtils.getXml(node);
* (end)
*
* To obtain a formatted string, mxUtils.getPrettyXml can be used instead.
*
* This string can now be stored in a local persistent storage (for example
* using Google Gears) or it can be passed to a backend using mxUtils.post as
* follows. The url variable is the URL of the Java servlet, PHP page or HTTP
* handler, depending on the server.
*
* (code)
* var xmlString = encodeURIComponent(mxUtils.getXml(node));
* mxUtils.post(url, 'xml='+xmlString, function(req)
* {
* // Process server response using req of type mxXmlRequest
* });
* (end)
*
* Input:
*
* To load an XML representation of a diagram into an existing graph object
* mxUtils.load can be used as follows. The url variable is the URL of the Java
* servlet, PHP page or HTTP handler that produces the XML string.
*
* (code)
* var xmlDoc = mxUtils.load(url).getXml();
* var node = xmlDoc.documentElement;
* var dec = new mxCodec(node.ownerDocument);
* dec.decode(node, graph.getModel());
* (end)
*
* For creating a page that loads the client and a diagram using a single
* request please refer to the deployment examples in the backends.
*
* Functional dependencies:
*
* (see images/callgraph.png)
*
* Resources:
*
* resources/graph - Language resources for mxGraph
*
* Group: Events
*
* Event: mxEvent.ROOT
*
* Fires if the root in the model has changed. This event has no properties.
*
* Event: mxEvent.ALIGN_CELLS
*
* Fires between begin- and endUpdate in <alignCells>. The <code>cells</code>
* and <code>align</code> properties contain the respective arguments that were
* passed to <alignCells>.
*
* Event: mxEvent.FLIP_EDGE
*
* Fires between begin- and endUpdate in <flipEdge>. The <code>edge</code>
* property contains the edge passed to <flipEdge>.
*
* Event: mxEvent.ORDER_CELLS
*
* Fires between begin- and endUpdate in <orderCells>. The <code>cells</code>
* and <code>back</code> properties contain the respective arguments that were
* passed to <orderCells>.
*
* Event: mxEvent.CELLS_ORDERED
*
* Fires between begin- and endUpdate in <cellsOrdered>. The <code>cells</code>
* and <code>back</code> arguments contain the respective arguments that were
* passed to <cellsOrdered>.
*
* Event: mxEvent.GROUP_CELLS
*
* Fires between begin- and endUpdate in <groupCells>. The <code>group</code>,
* <code>cells</code> and <code>border</code> arguments contain the respective
* arguments that were passed to <groupCells>.
*
* Event: mxEvent.UNGROUP_CELLS
*
* Fires between begin- and endUpdate in <ungroupCells>. The <code>cells</code>
* property contains the array of cells that was passed to <ungroupCells>.
*
* Event: mxEvent.REMOVE_CELLS_FROM_PARENT
*
* Fires between begin- and endUpdate in <removeCellsFromParent>. The
* <code>cells</code> property contains the array of cells that was passed to
* <removeCellsFromParent>.
*
* Event: mxEvent.ADD_CELLS
*
* Fires between begin- and endUpdate in <addCells>. The <code>cells</code>,
* <code>parent</code>, <code>index</code>, <code>source</code> and
* <code>target</code> properties contain the respective arguments that were
* passed to <addCells>.
*
* Event: mxEvent.CELLS_ADDED
*
* Fires between begin- and endUpdate in <cellsAdded>. The <code>cells</code>,
* <code>parent</code>, <code>index</code>, <code>source</code>,
* <code>target</code> and <code>absolute</code> properties contain the
* respective arguments that were passed to <cellsAdded>.
*
* Event: mxEvent.REMOVE_CELLS
*
* Fires between begin- and endUpdate in <removeCells>. The <code>cells</code>
* and <code>includeEdges</code> arguments contain the respective arguments
* that were passed to <removeCells>.
*
* Event: mxEvent.CELLS_REMOVED
*
* Fires between begin- and endUpdate in <cellsRemoved>. The <code>cells</code>
* argument contains the array of cells that was removed.
*
* Event: mxEvent.SPLIT_EDGE
*
* Fires between begin- and endUpdate in <splitEdge>. The <code>edge</code>
* property contains the edge to be splitted, the <code>cells</code>,
* <code>newEdge</code>, <code>dx</code> and <code>dy</code> properties contain
* the respective arguments that were passed to <splitEdge>.
*
* Event: mxEvent.TOGGLE_CELLS
*
* Fires between begin- and endUpdate in <toggleCells>. The <code>show</code>,
* <code>cells</code> and <code>includeEdges</code> properties contain the
* respective arguments that were passed to <toggleCells>.
*
* Event: mxEvent.FOLD_CELLS
*
* Fires between begin- and endUpdate in <foldCells>. The
* <code>collapse</code>, <code>cells</code> and <code>recurse</code>
* properties contain the respective arguments that were passed to <foldCells>.
*
* Event: mxEvent.CELLS_FOLDED
*
* Fires between begin- and endUpdate in cellsFolded. The
* <code>collapse</code>, <code>cells</code> and <code>recurse</code>
* properties contain the respective arguments that were passed to
* <cellsFolded>.
*
* Event: mxEvent.UPDATE_CELL_SIZE
*
* Fires between begin- and endUpdate in <updateCellSize>. The
* <code>cell</code> and <code>ignoreChildren</code> properties contain the
* respective arguments that were passed to <updateCellSize>.
*
* Event: mxEvent.RESIZE_CELLS
*
* Fires between begin- and endUpdate in <resizeCells>. The <code>cells</code>
* and <code>bounds</code> properties contain the respective arguments that
* were passed to <resizeCells>.
*
* Event: mxEvent.CELLS_RESIZED
*
* Fires between begin- and endUpdate in <cellsResized>. The <code>cells</code>
* and <code>bounds</code> properties contain the respective arguments that
* were passed to <cellsResized>.
*
* Event: mxEvent.MOVE_CELLS
*
* Fires between begin- and endUpdate in <moveCells>. The <code>cells</code>,
* <code>dx</code>, <code>dy</code>, <code>clone</code>, <code>target</code>
* and <code>event</code> properties contain the respective arguments that
* were passed to <moveCells>.
*
* Event: mxEvent.CELLS_MOVED
*
* Fires between begin- and endUpdate in <cellsMoved>. The <code>cells</code>,
* <code>dx</code>, <code>dy</code> and <code>disconnect</code> properties
* contain the respective arguments that were passed to <cellsMoved>.
*
* Event: mxEvent.CONNECT_CELL
*
* Fires between begin- and endUpdate in <connectCell>. The <code>edge</code>,
* <code>terminal</code> and <code>source</code> properties contain the
* respective arguments that were passed to <connectCell>.
*
* Event: mxEvent.CELL_CONNECTED
*
* Fires between begin- and endUpdate in <cellConnected>. The
* <code>edge</code>, <code>terminal</code> and <code>source</code> properties
* contain the respective arguments that were passed to <cellConnected>.
*
* Event: mxEvent.REFRESH
*
* Fires after <refresh> was executed. This event has no properties.
*
* Event: mxEvent.CLICK
*
* Fires in <click> after a click event. The <code>event</code> property
* contains the original mouse event and <code>cell</code> property contains
* the cell under the mouse or null if the background was clicked.
*
* Event: mxEvent.DOUBLE_CLICK
*
* Fires in <dblClick> after a double click. The <code>event</code> property
* contains the original mouse event and the <code>cell</code> property
* contains the cell under the mouse or null if the background was clicked.
*
* Event: mxEvent.SIZE
*
* Fires after <sizeDidChange> was executed. The <code>bounds</code> property
* contains the new graph bounds.
*
* Event: mxEvent.START_EDITING
*
* Fires before the in-place editor starts in <startEditingAtCell>. The
* <code>cell</code> property contains the cell that is being edited and the
* <code>event</code> property contains the optional event argument that was
* passed to <startEditingAtCell>.
*
* Event: mxEvent.LABEL_CHANGED
*
* Fires between begin- and endUpdate in <cellLabelChanged>. The
* <code>cell</code> property contains the cell, the <code>value</code>
* property contains the new value for the cell and the optional
* <code>event</code> property contains the mouse event that started the edit.
*
* Event: mxEvent.ADD_OVERLAY
*
* Fires after an overlay is added in <addCellOverlay>. The <code>cell</code>
* property contains the cell and the <code>overlay</code> property contains
* the <mxCellOverlay> that was added.
*
* Event: mxEvent.REMOVE_OVERLAY
*
* Fires after an overlay is removed in <removeCellOverlay> and
* <removeCellOverlays>. The <code>cell</code> property contains the cell and
* the <code>overlay</code> property contains the <mxCellOverlay> that was
* removed.
*
* Constructor: mxGraph
*
* Constructs a new mxGraph in the specified container. Model is an optional
* mxGraphModel. If no model is provided, a new mxGraphModel instance is
* used as the model. The container must have a valid owner document prior
* to calling this function in Internet Explorer. RenderHint is a string to
* affect the display performance and rendering in IE, but not in SVG-based
* browsers. The parameter is mapped to <dialect>, which may
* be one of <mxConstants.DIALECT_SVG> for SVG-based browsers,
* <mxConstants.DIALECT_STRICTHTML> for fastest display mode,
* <mxConstants.DIALECT_PREFERHTML> for faster display mode,
* <mxConstants.DIALECT_MIXEDHTML> for fast and <mxConstants.DIALECT_VML>
* for exact display mode (slowest). The dialects are defined in mxConstants.
* The default values are DIALECT_SVG for SVG-based browsers and
* DIALECT_MIXED for IE.
*
* The possible values for the renderingHint parameter are explained below:
*
* fast - The parameter is based on the fact that the display performance is
* highly improved in IE if the VML is not contained within a VML group
* element. The lack of a group element only slightly affects the display while
* panning, but improves the performance by almost a factor of 2, while keeping
* the display sufficiently accurate. This also allows to render certain shapes as HTML
* if the display accuracy is not affected, which is implemented by
* <mxShape.isMixedModeHtml>. This is the default setting and is mapped to
* DIALECT_MIXEDHTML.
* faster - Same as fast, but more expensive shapes are avoided. This is
* controlled by <mxShape.preferModeHtml>. The default implementation will
* avoid gradients and rounded rectangles, but more significant shapes, such
* as rhombus, ellipse, actor and cylinder will be rendered accurately. This
* setting is mapped to DIALECT_PREFERHTML.
* fastest - Almost anything will be rendered in Html. This allows for
* rectangles, labels and images. This setting is mapped to
* DIALECT_STRICTHTML.
* exact - If accurate panning is required and if the diagram is small (up
* to 100 cells), then this value should be used. In this mode, a group is
* created that contains the VML. This allows for accurate panning and is
* mapped to DIALECT_VML.
*
* Example:
*
* To create a graph inside a DOM node with an id of graph:
* (code)
* var container = document.getElementById('graph');
* var graph = new mxGraph(container);
* (end)
*
* Parameters:
*
* container - Optional DOM node that acts as a container for the graph.
* If this is null then the container can be initialized later using
* <init>.
* model - Optional <mxGraphModel> that constitutes the graph data.
* renderHint - Optional string that specifies the display accuracy and
* performance. Default is mxConstants.DIALECT_MIXEDHTML (for IE).
* stylesheet - Optional <mxStylesheet> to be used in the graph.
*/
function mxGraph(container, model, renderHint, stylesheet)
{
// Initializes the variable in case the prototype has been
// modified to hold some listeners (which is possible because
// the createHandlers call is executed regardless of the
// arguments passed into the ctor).
this.mouseListeners = null;
// Converts the renderHint into a dialect
this.renderHint = renderHint;
if (mxClient.IS_SVG)
{
this.dialect = mxConstants.DIALECT_SVG;
}
else if (renderHint == mxConstants.RENDERING_HINT_EXACT && mxClient.IS_VML)
{
this.dialect = mxConstants.DIALECT_VML;
}
else if (renderHint == mxConstants.RENDERING_HINT_FASTEST)
{
this.dialect = mxConstants.DIALECT_STRICTHTML;
}
else if (renderHint == mxConstants.RENDERING_HINT_FASTER)
{
this.dialect = mxConstants.DIALECT_PREFERHTML;
}
else // default for VML
{
this.dialect = mxConstants.DIALECT_MIXEDHTML;
}
// Initializes the main members that do not require a container
this.model = (model != null) ? model : new mxGraphModel();
this.multiplicities = [];
this.imageBundles = [];
this.cellRenderer = this.createCellRenderer();
this.setSelectionModel(this.createSelectionModel());
this.setStylesheet((stylesheet != null) ? stylesheet : this.createStylesheet());
this.view = this.createGraphView();
// Adds a graph model listener to update the view
this.graphModelChangeListener = mxUtils.bind(this, function(sender, evt)
{
this.graphModelChanged(evt.getProperty('edit').changes);
});
this.model.addListener(mxEvent.CHANGE, this.graphModelChangeListener);
// Installs basic event handlers with disabled default settings.
this.createHandlers();
// Initializes the display if a container was specified
if (container != null)
{
this.init(container);
}
this.view.revalidate();
};
/**
* Installs the required language resources at class
* loading time.
*/
if (mxLoadResources)
{
mxResources.add(mxClient.basePath+'/resources/graph');
}
/**
* Extends mxEventSource.
*/
mxGraph.prototype = new mxEventSource();
mxGraph.prototype.constructor = mxGraph;
/**
* Variable: EMPTY_ARRAY
*
* Immutable empty array instance.
*/
mxGraph.prototype.EMPTY_ARRAY = [];
/**
* Group: Variables
*/
/**
* Variable: mouseListeners
*
* Holds the mouse event listeners. See <fireMouseEvent>.
*/
mxGraph.prototype.mouseListeners = null;
/**
* Variable: isMouseDown
*
* Holds the state of the mouse button.
*/
mxGraph.prototype.isMouseDown = false;
/**
* Variable: model
*
* Holds the <mxGraphModel> that contains the cells to be displayed.
*/
mxGraph.prototype.model = null;
/**
* Variable: view
*
* Holds the <mxGraphView> that caches the <mxCellStates> for the cells.
*/
mxGraph.prototype.view = null;
/**
* Variable: stylesheet
*
* Holds the <mxStylesheet> that defines the appearance of the cells.
*
*
* Example:
*
* Use the following code to read a stylesheet into an existing graph.
*
* (code)
* var req = mxUtils.load('stylesheet.xml');
* var root = req.getDocumentElement();
* var dec = new mxCodec(root.ownerDocument);
* dec.decode(root, graph.stylesheet);
* (end)
*/
mxGraph.prototype.stylesheet = null;
/**
* Variable: selectionModel
*
* Holds the <mxGraphSelectionModel> that models the current selection.
*/
mxGraph.prototype.selectionModel = null;
/**
* Variable: cellEditor
*
* Holds the <mxCellEditor> that is used as the in-place editing.
*/
mxGraph.prototype.cellEditor = null;
/**
* Variable: cellRenderer
*
* Holds the <mxCellRenderer> for rendering the cells in the graph.
*/
mxGraph.prototype.cellRenderer = null;
/**
* Variable: multiplicities
*
* An array of <mxMultiplicities> describing the allowed
* connections in a graph.
*/
mxGraph.prototype.multiplicities = null;
/**
* Variable: renderHint
*
* RenderHint as it was passed to the constructor.
*/
mxGraph.prototype.renderHint = null;
/**
* Variable: dialect
*
* Dialect to be used for drawing the graph. Possible values are all
* constants in <mxConstants> with a DIALECT-prefix.
*/
mxGraph.prototype.dialect = null;
/**
* Variable: gridSize
*
* Specifies the grid size. Default is 10.
*/
mxGraph.prototype.gridSize = 10;
/**
* Variable: gridEnabled
*
* Specifies if the grid is enabled. This is used in <snap>. Default is
* true.
*/
mxGraph.prototype.gridEnabled = true;
/**
* Variable: portsEnabled
*
* Specifies if ports are enabled. This is used in <cellConnected> to update
* the respective style. Default is true.
*/
mxGraph.prototype.portsEnabled = true;
/**
* Variable: doubleTapEnabled
*
* Specifies if double taps on touch-based devices should be handled. Default
* is true.
*/
mxGraph.prototype.doubleTapEnabled = true;
/**
* Variable: doubleTapTimeout
*
* Specifies the timeout for double taps. Default is 700 ms.
*/
mxGraph.prototype.doubleTapTimeout = 700;
/**
* Variable: doubleTapTolerance
*
* Specifies the tolerance for double taps. Default is 25 pixels.
*/
mxGraph.prototype.doubleTapTolerance = 25;
/**
* Variable: lastTouchX
*
* Holds the x-coordinate of the last touch event for double tap detection.
*/
mxGraph.prototype.lastTouchY = 0;
/**
* Variable: lastTouchX
*
* Holds the y-coordinate of the last touch event for double tap detection.
*/
mxGraph.prototype.lastTouchY = 0;
/**
* Variable: lastTouchTime
*
* Holds the time of the last touch event for double click detection.
*/
mxGraph.prototype.lastTouchTime = 0;
/**
* Variable: gestureEnabled
*
* Specifies if the handleGesture method should be invoked. Default is true. This
* is an experimental feature for touch-based devices.
*/
mxGraph.prototype.gestureEnabled = true;
/**
* Variable: tolerance
*
* Tolerance for a move to be handled as a single click.
* Default is 4 pixels.
*/
mxGraph.prototype.tolerance = 4;
/**
* Variable: defaultOverlap
*
* Value returned by <getOverlap> if <isAllowOverlapParent> returns
* true for the given cell. <getOverlap> is used in <constrainChild> if
* <isConstrainChild> returns true. The value specifies the
* portion of the child which is allowed to overlap the parent.
*/
mxGraph.prototype.defaultOverlap = 0.5;
/**
* Variable: defaultParent
*
* Specifies the default parent to be used to insert new cells.
* This is used in <getDefaultParent>. Default is null.
*/
mxGraph.prototype.defaultParent = null;
/**
* Variable: alternateEdgeStyle
*
* Specifies the alternate edge style to be used if the main control point
* on an edge is being doubleclicked. Default is null.
*/
mxGraph.prototype.alternateEdgeStyle = null;
/**
* Variable: backgroundImage
*
* Specifies the <mxImage> to be returned by <getBackgroundImage>. Default
* is null.
*
* Example:
*
* (code)
* var img = new mxImage('http://www.example.com/maps/examplemap.jpg', 1024, 768);
* graph.setBackgroundImage(img);
* graph.view.validate();
* (end)
*/
mxGraph.prototype.backgroundImage = null;
/**
* Variable: pageVisible
*
* Specifies if the background page should be visible. Default is false.
* Not yet implemented.
*/
mxGraph.prototype.pageVisible = false;
/**
* Variable: pageBreaksVisible
*
* Specifies if a dashed line should be drawn between multiple pages. Default
* is false. If you change this value while a graph is being displayed then you
* should call <sizeDidChange> to force an update of the display.
*/
mxGraph.prototype.pageBreaksVisible = false;
/**
* Variable: pageBreakColor
*
* Specifies the color for page breaks. Default is 'gray'.
*/
mxGraph.prototype.pageBreakColor = 'gray';
/**
* Variable: pageBreakDashed
*
* Specifies the page breaks should be dashed. Default is true.
*/
mxGraph.prototype.pageBreakDashed = true;
/**
* Variable: minPageBreakDist
*
* Specifies the minimum distance for page breaks to be visible. Default is
* 20 (in pixels).
*/
mxGraph.prototype.minPageBreakDist = 20;
/**
* Variable: preferPageSize
*
* Specifies if the graph size should be rounded to the next page number in
* <sizeDidChange>. This is only used if the graph container has scrollbars.
* Default is false.
*/
mxGraph.prototype.preferPageSize = false;
/**
* Variable: pageFormat
*
* Specifies the page format for the background page. Default is
* <mxConstants.PAGE_FORMAT_A4_PORTRAIT>. This is used as the default in
* <mxPrintPreview> and for painting the background page if <pageVisible> is
* true and the pagebreaks if <pageBreaksVisible> is true.
*/
mxGraph.prototype.pageFormat = mxConstants.PAGE_FORMAT_A4_PORTRAIT;
/**
* Variable: pageScale
*
* Specifies the scale of the background page. Default is 1.5.
* Not yet implemented.
*/
mxGraph.prototype.pageScale = 1.5;
/**
* Variable: enabled
*
* Specifies the return value for <isEnabled>. Default is true.
*/
mxGraph.prototype.enabled = true;
/**
* Variable: escapeEnabled
*
* Specifies if <mxKeyHandler> should invoke <escape> when the escape key
* is pressed. Default is true.
*/
mxGraph.prototype.escapeEnabled = true;
/**
* Variable: invokesStopCellEditing
*
* If true, when editing is to be stopped by way of selection changing,
* data in diagram changing or other means stopCellEditing is invoked, and
* changes are saved. This is implemented in a focus handler in
* <mxCellEditor>. Default is true.
*/
mxGraph.prototype.invokesStopCellEditing = true;
/**
* Variable: enterStopsCellEditing