1
+ < html >
2
+ < head >
3
+ < title > agraph</ title >
4
+ < meta charset ="utf-8 "/>
5
+ < link rel ="stylesheet " type ="text/css "
6
+ href ="https://rawgit.com/clientIO/joint/master/dist/joint.min.css " />
7
+
8
+ </ head >
9
+ < body >
10
+
11
+ < div id ="paper "> </ div >
12
+ < script
13
+ src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js "> </ script >
14
+ < script
15
+ src ="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js "> </ script >
16
+ < script
17
+ src ="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js "> </ script >
18
+ < script
19
+ src ="https://rawgit.com/clientIO/joint/master/dist/joint.min.js "> </ script >
20
+ < script src ="http://rawgit.com/clientIO/joint/master/dist/joint.layout.DirectedGraph.js "> </ script >
21
+ < script src ="https://rawgit.com/cpettitt/graphlib/v2.1.1/dist/graphlib.min.js "> </ script >
22
+ < script src ="https://rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js "> </ script >
23
+
24
+ < script type ="text/javascript ">
25
+
26
+
27
+ var graph = new joint . dia . Graph ;
28
+
29
+ var paper = new joint . dia . Paper ( {
30
+ el : $ ( '#paper' ) ,
31
+ width : 2400 ,
32
+ height : 1350 ,
33
+ gridSize : 1 ,
34
+ model : graph
35
+ } ) ;
36
+
37
+ var instance_list = [ ] ;
38
+
39
+ LinkedClass = joint . shapes . uml . Class . extend ( {
40
+
41
+
42
+ markup : [
43
+ '<g class="rotatable">' ,
44
+ '<g class="scalable">' ,
45
+ '<rect class="uml-class-name-rect"/><rect class="uml-class-attrs-rect"/>' ,
46
+ '</g>' ,
47
+ '<text class="uml-class-name-text"/><text class="uml-class-attrs-text"/>' ,
48
+ '</g>'
49
+ ] . join ( '' ) ,
50
+
51
+ defaults : _ . defaultsDeep ( {
52
+
53
+ type : 'uml.Class' ,
54
+
55
+ attrs : {
56
+ rect : { 'width' : 200 } ,
57
+
58
+ '.uml-class-name-rect' : { 'stroke' : 'black' , 'stroke-width' : 2 , 'fill' : '#3498db' } ,
59
+ '.uml-class-attrs-rect' : { 'stroke' : 'black' , 'stroke-width' : 2 , 'fill' : '#2980b9' } ,
60
+
61
+ '.uml-class-name-text' : {
62
+ 'ref' : '.uml-class-name-rect' , 'ref-y' : .5 , 'ref-x' : .5 , 'text-anchor' : 'middle' , 'y-alignment' : 'middle' , 'font-weight' : 'bold' ,
63
+ 'fill' : 'black' , 'font-size' : 12 , 'font-family' : 'Times New Roman'
64
+ } ,
65
+ '.uml-class-attrs-text' : {
66
+ 'ref' : '.uml-class-attrs-rect' , 'ref-y' : 5 , 'ref-x' : 0.99 , 'text-anchor' : 'end' ,
67
+ 'fill' : 'black' , 'font-size' : 12 , 'font-family' : 'Times New Roman'
68
+ }
69
+ } ,
70
+
71
+ name : [ ] ,
72
+ attributes : [ ] ,
73
+
74
+ } , joint . shapes . basic . Generic . prototype . defaults ) ,
75
+
76
+ updateRectangles : function ( ) {
77
+
78
+ var attrs = this . get ( 'attrs' ) ;
79
+
80
+ var rects = [
81
+ { type : 'name' , text : this . getClassName ( ) } ,
82
+ { type : 'attrs' , text : this . get ( 'attributes' ) } ,
83
+ ] ;
84
+
85
+ var offsetY = 0 ;
86
+
87
+ _ . each ( rects , function ( rect ) {
88
+
89
+ var lines = _ . isArray ( rect . text ) ? rect . text : [ rect . text ] ;
90
+ var rectHeight = lines . length * 60 + 60 ;
91
+ var tspanLines = [ ]
92
+ for ( var i = 0 ; i < lines . length ; i ++ ) {
93
+ var line = '<tspan class="v-line" x="0" dy="1em">'
94
+ line += lines [ i ]
95
+ line += '</tspan> '
96
+ tspanLines . push ( line )
97
+ }
98
+ attrs [ '.uml-class-' + rect . type + '-text' ] . html = tspanLines . join ( '' ) ;
99
+
100
+ attrs [ '.uml-class-' + rect . type + '-rect' ] . height = rectHeight ;
101
+ attrs [ '.uml-class-' + rect . type + '-rect' ] . transform = 'translate(0,' + offsetY + ')' ;
102
+
103
+ offsetY += rectHeight ;
104
+ } ) ;
105
+ }
106
+
107
+ } ) ;
108
+
109
+
110
+
111
+
112
+ function instance ( label , attrs , bfill ) {
113
+
114
+ var cell = new LinkedClass ( {
115
+ name : label ,
116
+ attributes : attrs ,
117
+ size : { width : label . length * 2 , height : 60 } ,
118
+ attrs : {
119
+ '.uml-class-name-rect' : {
120
+ fill : bfill ,
121
+ stroke : '#fff' ,
122
+ 'stroke-width' : 0.5
123
+ } ,
124
+ '.uml-class-attrs-rect, .uml-class-methods-rect' : {
125
+ fill : bfill ,
126
+ stroke : '#fff' ,
127
+ 'stroke-width' : 0.5
128
+ } ,
129
+ '.uml-class-attrs-text' : {
130
+ 'ref-y' : 0.5 ,
131
+ 'y-alignment' : 'middle'
132
+ }
133
+ }
134
+ } ) ;
135
+ graph . addCell ( cell ) ;
136
+ instance_list . push ( cell ) ;
137
+ return cell ;
138
+ } ;
139
+
140
+ Aggregation = joint . dia . Link . extend ( {
141
+ defaults : {
142
+ type : 'uml.Aggregation' ,
143
+ attrs : { '.marker-source' : { d : 'M 40 10 L 20 20 L 0 10 L 20 0 z' , fill : 'white' } }
144
+ }
145
+ } ) ;
146
+
147
+ Composition = joint . dia . Link . extend ( {
148
+ defaults : {
149
+ type : 'uml.Composition' ,
150
+ attrs : { '.marker-source' : { d : 'M 40 10 L 20 20 L 0 10 L 20 0 z' , fill : 'black' } }
151
+ }
152
+ } ) ;
153
+
154
+ function link ( source , target , label , ed , comp ) {
155
+ if ( comp ) {
156
+ var aclass = Composition ;
157
+ } else {
158
+ var aclass = Aggregation ;
159
+ }
160
+ var cell = new aclass ( {
161
+ source : { id : source . id } ,
162
+ target : { id : target . id } ,
163
+ labels : [ { position : .5 , attrs : { text : { text : label || '' , 'font-weight' : 'bold' } } } ] ,
164
+
165
+ router : {
166
+ name : 'manhattan' ,
167
+ args : {
168
+ startDirections : [ 'right' ] ,
169
+ endDirections : [ ed || 'left' ]
170
+ }
171
+ } ,
172
+ connector : { name : 'rounded' }
173
+ } ) ;
174
+ graph . addCell ( cell ) ;
175
+ return cell ;
176
+ } ;
177
+
178
+ var root = instance ( 'root:<a xlink:href="http://binary-array-ld.net/latest/Container" xlink:show=new text-decoration="underline">bald__Container</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/contains" xlink:show=new text-decoration="underline">bald__contains</a>: |' ] , '#878800' ) ;
179
+ var alocation = instance ( 'alocation:<a xlink:href="http://binary-array-ld.net/latest/Array" xlink:show=new text-decoration="underline">bald__Array</a>, <a xlink:href="http://binary-array-ld.net/latest/Reference" xlink:show=new text-decoration="underline">bald__Reference</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/references" xlink:show=new text-decoration="underline">bald__references</a>: |' , '<a xlink:href="http://binary-array-ld.net/latest/array" xlink:show=new text-decoration="underline">bald__array</a>: |' , '<a xlink:href="http://binary-array-ld.net/latest/shape" xlink:show=new text-decoration="underline">bald__shape</a>: 11, 17' ] , '#878800' ) ;
180
+ var data = instance ( 'data:<a xlink:href="http://binary-array-ld.net/latest/Array" xlink:show=new text-decoration="underline">bald__Array</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/references" xlink:show=new text-decoration="underline">bald__references</a>: |' , '<a xlink:href="http://binary-array-ld.net/latest/shape" xlink:show=new text-decoration="underline">bald__shape</a>: 11, 17' ] , '#878800' ) ;
181
+ var discovery = instance ( 'discovery:<a xlink:href="http://binary-array-ld.net/latest/Container" xlink:show=new text-decoration="underline">bald__Container</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/contains" xlink:show=new text-decoration="underline">bald__contains</a>: |' ] , '#878800' ) ;
182
+ var anotherpair = instance ( 'anotherpair:<a xlink:href="http://binary-array-ld.net/latest/Array" xlink:show=new text-decoration="underline">bald__Array</a>, <a xlink:href="http://binary-array-ld.net/latest/Reference" xlink:show=new text-decoration="underline">bald__Reference</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/array" xlink:show=new text-decoration="underline">bald__array</a>: |' , '<a xlink:href="http://binary-array-ld.net/latest/shape" xlink:show=new text-decoration="underline">bald__shape</a>: 2' ] , '#878800' ) ;
183
+ var apair = instance ( 'apair:<a xlink:href="http://binary-array-ld.net/latest/Array" xlink:show=new text-decoration="underline">bald__Array</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/references" xlink:show=new text-decoration="underline">bald__references</a>: |' , '<a xlink:href="http://binary-array-ld.net/latest/shape" xlink:show=new text-decoration="underline">bald__shape</a>: 2' ] , '#878800' ) ;
184
+ var source = instance ( 'source:<a xlink:href="http://binary-array-ld.net/latest/Container" xlink:show=new text-decoration="underline">bald__Container</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/contains" xlink:show=new text-decoration="underline">bald__contains</a>: |' ] , '#878800' ) ;
185
+ var institution = instance ( 'institution:<a xlink:href="http://binary-array-ld.net/latest/Array" xlink:show=new text-decoration="underline">bald__Array</a>' , [ '<a xlink:href="http://www.w3.org/2004/02/skos/core#prefLabel" xlink:show=new text-decoration="underline">skos__prefLabel</a>: a quality establishment' , '<a xlink:href="http://binary-array-ld.net/latest/shape" xlink:show=new text-decoration="underline">bald__shape</a>: |' ] , '#878800' ) ;
186
+ var referencing = instance ( 'referencing:<a xlink:href="http://binary-array-ld.net/latest/Container" xlink:show=new text-decoration="underline">bald__Container</a>' , [ '<a xlink:href="http://binary-array-ld.net/latest/contains" xlink:show=new text-decoration="underline">bald__contains</a>: |' ] , '#878800' ) ;
187
+ var locref = instance ( 'locref:<a xlink:href="http://binary-array-ld.net/latest/Array" xlink:show=new text-decoration="underline">bald__Array</a>' , [ '<a xlink:href="http://www.w3.org/2004/02/skos/core#prefLabel" xlink:show=new text-decoration="underline">skos__prefLabel</a>: for locational purposes' , '<a xlink:href="http://binary-array-ld.net/latest/shape" xlink:show=new text-decoration="underline">bald__shape</a>: |' ] , '#878800' ) ;
188
+ var locref2 = instance ( 'locref2:<a xlink:href="http://binary-array-ld.net/latest/Array" xlink:show=new text-decoration="underline">bald__Array</a>' , [ '<a xlink:href="http://www.w3.org/2004/02/skos/core#prefLabel" xlink:show=new text-decoration="underline">skos__prefLabel</a>: for more locational purposes' , '<a xlink:href="http://binary-array-ld.net/latest/shape" xlink:show=new text-decoration="underline">bald__shape</a>: |' ] , '#878800' ) ;
189
+ link ( alocation , locref2 , 'bald__references' ) ;
190
+ link ( alocation , locref , 'bald__references' ) ;
191
+ link ( alocation , alocation , 'bald__array' , 'bottom' ) ;
192
+ link ( root , alocation , 'bald__contains' , 'top' , true ) ;
193
+ link ( data , alocation , 'bald__references' ) ;
194
+ link ( root , data , 'bald__contains' , 'top' , true ) ;
195
+ link ( anotherpair , anotherpair , 'bald__array' , 'bottom' ) ;
196
+ link ( discovery , anotherpair , 'bald__contains' , 'top' , true ) ;
197
+ link ( apair , anotherpair , 'bald__references' ) ;
198
+ link ( discovery , apair , 'bald__contains' , 'top' , true ) ;
199
+ link ( source , institution , 'bald__contains' , 'top' , true ) ;
200
+ link ( discovery , source , 'bald__contains' , 'top' , true ) ;
201
+ link ( root , discovery , 'bald__contains' , 'top' , true ) ;
202
+ link ( referencing , locref , 'bald__contains' , 'top' , true ) ;
203
+ link ( referencing , locref2 , 'bald__contains' , 'top' , true ) ;
204
+ link ( root , referencing , 'bald__contains' , 'top' , true ) ;
205
+ joint . layout . DirectedGraph . layout ( graph , { setLinkVertices : false ,
206
+ nodeSep : 150 , rankSep : 100 ,
207
+ marginX : 100 , marginY : 100 ,
208
+ rankDir : 'LR' } ) ;
209
+
210
+
211
+ for ( var i = 0 ; i < instance_list . length ; i ++ ) {
212
+ instance_list [ i ] . toFront ( ) ;
213
+ }
214
+
215
+
216
+ </ script >
217
+ </ body >
218
+ </ html >
0 commit comments