/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1

« back to all changes in this revision

Viewing changes to trunk/ErModeller/canvas_ER_demo_duggajs.html

  • Committer: Henrik G.
  • Date: 2013-03-26 23:22:55 UTC
  • Revision ID: henrik.gustavsson@his.se-20130326232255-ik6snyatlbkf3zs1
First seed of Lenasys ... Needs to be Organized Further

Show diffs side-by-side

added added

removed removed

Lines of Context:
trunk/ErModeller/canvas_ER_demo_duggajs.html
 
1
<html>
 
2
        <head>
 
3
 
 
4
                <script type="text/javascript" src="jquery.js"></script>
 
5
                        
 
6
                <script lang='Javascript'>
 
7
 
 
8
                var startx=0,starty=0;
 
9
                var deltax=0,deltay=0;  
 
10
                var gridsize=20;
 
11
                
 
12
                // Multi-select move offset
 
13
                var offsx=0;
 
14
                var offsy=0;            
 
15
                
 
16
                // Drawing Globals -- For while in transit drawing
 
17
                var drawlinesx,drawlinesy;
 
18
                var drawlinedx,drawlinedy;              
 
19
                var drawlinekind=0;
 
20
                
 
21
                // List of objects
 
22
                // List of identifiers 
 
23
                // List of selected object identifiers 
 
24
                // The context object
 
25
                
 
26
                var Objects = new Array();
 
27
                var Selected = new Array();
 
28
                var Identifiers = new Array();
 
29
                var ContextObj;
 
30
                
 
31
                // Mouse Down Result
 
32
                var downRes;
 
33
                
 
34
                // User Interface Mode Variables
 
35
                var multiselect=0;
 
36
                var dragsensitivity=12;
 
37
                var sidetol=12;
 
38
 
 
39
 
 
40
                var printstr;
 
41
                                                
 
42
                /*
 
43
                
 
44
                User interface callbacks
 
45
                
 
46
                */
 
47
 
 
48
                
 
49
                function handler_mouseup()
 
50
                {
 
51
                                if(clickstate==1){
 
52
                                                // Either select on/off for multi or single select
 
53
                                                if(multiselect){
 
54
                                                                if(Selected[downRes.objid]){
 
55
                                                                                Selected[downRes.objid]=false;
 
56
                                                                }else{
 
57
                                                                                Selected[downRes.objid]=true;
 
58
                                                                }
 
59
                                                }else{
 
60
                                                                if(ContextObj==downRes.objid){
 
61
                                                                                ContextObj="";
 
62
                                                                }else{
 
63
                                                                                ContextObj=downRes.objid;
 
64
                                                                }
 
65
                                                }
 
66
                                }else if(clickstate==8){
 
67
                                                
 
68
                                                // Draw Attribute Line
 
69
                                                
 
70
                                                upRes=mouseover(gridx,gridy);
 
71
 
 
72
                                                if(upRes.code!="None"){
 
73
 
 
74
                                                                obj=Objects[downRes.objid];
 
75
                                                                
 
76
                                                                if(upRes.typ=="ERAttribute"||upRes.typ=="Entity"||upRes.typ=="ERRel"){
 
77
 
 
78
                                                                                obj.DrawtoID=upRes.objid;
 
79
                                                                                obj.DrawfromSide = downRes.side;
 
80
                                                                                
 
81
                                                                                if(upRes.side!="None"){
 
82
                                                                                                obj.DrawtoSide = upRes.side;
 
83
                                                                                                obj.DrawtoPerc = upRes.sideperc;
 
84
                                                                                }else{
 
85
                                                                                                upobj=Objects[downRes.objid];
 
86
                
 
87
                                                                                                var sid=1;
 
88
                                                                                                var     perco=0.5;
 
89
                
 
90
                                                                                                var x1g=Math.abs(upRes.x1-gridx);
 
91
                                                                                                var x2g=Math.abs(upRes.x2-gridx);
 
92
                                                                                                var y1g=Math.abs(upRes.y1-gridy);
 
93
                                                                                                var y2g=Math.abs(upRes.y2-gridy);
 
94
                
 
95
                                                                                                if(x1g<=x2g&&x1g<=y1g&&x1g<=y2g){
 
96
                                                                                                                sid=1;
 
97
                                                                                                                perco=makesideperc(gridy,upRes.y1,upRes.y2);
 
98
                                                                                                }else if(x2g<=x1g&&x2g<=y1g&&x2g<=y2g){
 
99
                                                                                                                sid=3;
 
100
                                                                                                                perco=makesideperc(gridy,upRes.y1,upRes.y2);
 
101
                                                                                                }else if(y1g<=x1g&&y1g<=x2g&&y1g<=y2g){
 
102
                                                                                                                sid=4;
 
103
                                                                                                                perco=makesideperc(gridx,upRes.x1,upRes.x2);
 
104
                                                                                                }else if(y2g<=x1g&&y2g<=x2g&&y2g<=y1g){
 
105
                                                                                                                sid=2;
 
106
                                                                                                                perco=makesideperc(gridx,upRes.x1,upRes.x2);
 
107
                                                                                                }
 
108
                                                                                                
 
109
                                                                                                obj.DrawtoSide = sid;
 
110
                                                                                                obj.DrawtoPerc = perco;
 
111
                                                                                                
 
112
                                                                                }
 
113
                                                                                if(upRes.typ=="ERAttribute"||upRes.typ=="ERRel") obj.DrawtoPerc=0.5;
 
114
                                                                }
 
115
                                                                
 
116
                                                }
 
117
 
 
118
                                }else if(clickstate==9){
 
119
                                        
 
120
                                                // Draw Relationship line
 
121
                                        
 
122
                                                upRes=mouseover(gridx,gridy);
 
123
                                                
 
124
                                                if(upRes.code!="None"){
 
125
 
 
126
                                                                obj=Objects[downRes.objid];
 
127
                                                                
 
128
                                                                if(upRes.side!="None"){
 
129
                                                                                if(obj.DrawtoID=="None"){
 
130
                                                                                                obj.DrawtoID=upRes.objid;
 
131
                                                                                                obj.DrawtoSide = upRes.side;
 
132
                                                                                                obj.DrawtoPerc = upRes.sideperc;
 
133
                                                                                                obj.DrawfromSide = downRes.side;
 
134
                                                                                }else{
 
135
                                                                                                obj.DrawtoIDDest=upRes.objid;
 
136
                                                                                                obj.DrawtoSideDest = upRes.side;
 
137
                                                                                                obj.DrawtoPercDest = upRes.sideperc;
 
138
                                                                                                obj.DrawfromSideDest = downRes.side;                                                                            
 
139
                                                                                }
 
140
                                                                }else{
 
141
                                                                                upobj=Objects[downRes.objid];
 
142
 
 
143
                                                                                var sid=1;
 
144
                                                                                var     perco=0.5;
 
145
 
 
146
                                                                                var x1g=Math.abs(upRes.x1-gridx);
 
147
                                                                                var x2g=Math.abs(upRes.x2-gridx);
 
148
                                                                                var y1g=Math.abs(upRes.y1-gridy);
 
149
                                                                                var y2g=Math.abs(upRes.y2-gridy);
 
150
 
 
151
                                                                                if(x1g<=x2g&&x1g<=y1g&&x1g<=y2g){
 
152
                                                                                                sid=1;
 
153
                                                                                                perco=makesideperc(gridy,upRes.y1,upRes.y2);
 
154
                                                                                }else if(x2g<=x1g&&x2g<=y1g&&x2g<=y2g){
 
155
                                                                                                sid=3;
 
156
                                                                                                perco=makesideperc(gridy,upRes.y1,upRes.y2);
 
157
                                                                                }else if(y1g<=x1g&&y1g<=x2g&&y1g<=y2g){
 
158
                                                                                                sid=4;
 
159
                                                                                                perco=makesideperc(gridx,upRes.x1,upRes.x2);
 
160
                                                                                }else if(y2g<=x1g&&y2g<=x2g&&y2g<=y1g){
 
161
                                                                                                sid=2;
 
162
                                                                                                perco=makesideperc(gridx,upRes.x1,upRes.x2);
 
163
                                                                                }                                                                       
 
164
 
 
165
                                                                                if(obj.DrawtoID=="None"){
 
166
                                                                                                obj.DrawtoID=upRes.objid;
 
167
                                                                                                obj.DrawtoSide = sid;
 
168
                                                                                                obj.DrawtoPerc = perco;
 
169
                                                                                                obj.DrawfromSide = downRes.side;                                                                                
 
170
                                                                                }else{
 
171
                                                                                                obj.DrawtoIDDest=upRes.objid;
 
172
                                                                                                obj.DrawtoSideDest = sid;
 
173
                                                                                                obj.DrawtoPercDest = perco;
 
174
                                                                                                obj.DrawfromSideDest = downRes.side;                                                                            
 
175
                                                                                }
 
176
                                                                                
 
177
                                                                }                                                               
 
178
                                                }
 
179
 
 
180
                                }
 
181
                                
 
182
                                clickstate=0;
 
183
                                cpsel=0;
 
184
                                
 
185
                                drawlinekind=0;         
 
186
                }
 
187
                
 
188
                function handler_mousedown()
 
189
                {
 
190
                                clickstate=1;
 
191
                                
 
192
                                downRes=mouseover(gridx,gridy);
 
193
                                startx=gridx;
 
194
                                starty=gridy;
 
195
                                                
 
196
                                // Mouse Down State             
 
197
                }
 
198
                
 
199
                function handler_mousemove(cx,cy)
 
200
                {
 
201
                                
 
202
//                              gridx=Math.round((cx-(gridsize/2.0))/gridsize)*gridsize;
 
203
//                              gridy=Math.round((cy-(gridsize/2.0))/gridsize)*gridsize;                                
 
204
 
 
205
                                gridx=cx;
 
206
                                gridy=cy;
 
207
 
 
208
                                deltax=startx-gridx;
 
209
                                deltay=starty-gridy;
 
210
                                                                
 
211
                                // We start drag mode
 
212
                                if((distance(gridx,gridy,startx,starty)>dragsensitivity)&&clickstate==1){
 
213
                                                clickstate=2;
 
214
                                }
 
215
 
 
216
                                // We are in drag mode                          
 
217
                                if(clickstate==2){
 
218
                                                                                                                                                                                                                                
 
219
                                                // Single Object Move - If Not Selected, Or if Selected and Center Area Is Dragged
 
220
                                                if((downRes.typ=="Entity"||downRes.typ=="ERAttribute"||downRes.typ=="ERRel")&&(downRes.code=="NonSel"||(downRes.code=="Cont"&&downRes.side=="None")||(downRes.code=="ContDraw"&&downRes.side=="None"))){
 
221
                                                                clickstate=3;
 
222
                                                }               
 
223
                                                
 
224
                                                if((downRes.typ=="Entity"||downRes.typ=="ERAttribute")&&(downRes.code=="Cont"&&downRes.side=="1")) clickstate=4;                                // Single Object Scale Left
 
225
                                                if((downRes.typ=="Entity"||downRes.typ=="ERAttribute")&&(downRes.code=="Cont"&&downRes.side=="2")) clickstate=5;                                // Single Object Scale Bottom
 
226
                                                if((downRes.typ=="Entity"||downRes.typ=="ERAttribute")&&(downRes.code=="Cont"&&downRes.side=="3")) clickstate=6;                                // Single Object Scale Right
 
227
                                                if((downRes.typ=="Entity"||downRes.typ=="ERAttribute")&&(downRes.code=="Cont"&&downRes.side=="4")) clickstate=7;                                // Single Object Scale Top
 
228
 
 
229
                                                if(downRes.typ=="ERAttribute"&&downRes.code=="ContDraw"&&downRes.side!="None"){
 
230
                                                                                                                                
 
231
                                                                clickstate=8;                                                                                                                   // Attribute Connection Draw
 
232
                                                                drawlinekind=1;                                                                                                         // Tell drawing engine to draw attribute line symbol
 
233
 
 
234
                                                                if(downRes.side=="1"){
 
235
                                                                                drawlinesx=downRes.x1;                                                                                                                                  // Initiate start parameters for line drawing left side
 
236
                                                                                drawlinesy=downRes.y1+((downRes.y2-downRes.y1)*0.5);                                                                    
 
237
                                                                }else if(downRes.side=="2"){
 
238
                                                                                drawlinesx=downRes.x1+((downRes.x2-downRes.x1)*0.5);            // Initiate start parameters for line drawing bottom side
 
239
                                                                                drawlinesy=downRes.y2;
 
240
                                                                }else if(downRes.side=="3"){
 
241
                                                                                drawlinesx=downRes.x2;                                                                                                                                  // Initiate start parameters for line drawing left side
 
242
                                                                                drawlinesy=downRes.y1+((downRes.y2-downRes.y1)*0.5);                                                                    
 
243
                                                                }else if(downRes.side=="4"){
 
244
                                                                                drawlinesx=downRes.x1+((downRes.x2-downRes.x1)*0.5);            // Initiate start parameters for line drawing bottom side
 
245
                                                                                drawlinesy=downRes.y1;
 
246
                                                                }
 
247
 
 
248
                                                                drawlinedx=drawlinesx;
 
249
                                                                drawlinedy=drawlinesy;  
 
250
 
 
251
                                                }
 
252
 
 
253
                                                if(downRes.typ=="ERRel"&&downRes.code=="ContDraw"&&downRes.side!="None"){
 
254
                                                                
 
255
                                                                var obj=Objects[downRes.objid];
 
256
                                                                                                                                
 
257
                                                                if(downRes.side!=obj.DrawfromSide&&downRes.side!=obj.DrawfromSideDest){
 
258
 
 
259
                                                                                clickstate=9;                                                                                                                   // Attribute Connection Draw
 
260
                                                                                drawlinekind=1;                                                                                                         // Tell drawing engine to draw relation line symbol 
 
261
                
 
262
                                                                                if(downRes.side=="1"){
 
263
                                                                                                drawlinesx=downRes.x1;                                                                                                                                  // Initiate start parameters for line drawing left side
 
264
                                                                                                drawlinesy=downRes.y1+((downRes.y2-downRes.y1)*0.5);                                                                    
 
265
                                                                                }else if(downRes.side=="2"){
 
266
                                                                                                drawlinesx=downRes.x1+((downRes.x2-downRes.x1)*0.5);            // Initiate start parameters for line drawing bottom side
 
267
                                                                                                drawlinesy=downRes.y2;
 
268
                                                                                }else if(downRes.side=="3"){
 
269
                                                                                                drawlinesx=downRes.x2;                                                                                                                                  // Initiate start parameters for line drawing left side
 
270
                                                                                                drawlinesy=downRes.y1+((downRes.y2-downRes.y1)*0.5);                                                                    
 
271
                                                                                }else if(downRes.side=="4"){
 
272
                                                                                                drawlinesx=downRes.x1+((downRes.x2-downRes.x1)*0.5);            // Initiate start parameters for line drawing bottom side
 
273
                                                                                                drawlinesy=downRes.y1;
 
274
                                                                                }
 
275
                
 
276
                                                                                drawlinedx=drawlinesx;
 
277
                                                                                drawlinedy=drawlinesy;  
 
278
                                                                
 
279
                                                                }
 
280
                                                                                                                                                                                                
 
281
                                                }                                               
 
282
                                                
 
283
                                                
 
284
                                }
 
285
 
 
286
                                if(clickstate>2){
 
287
                                                var obj=Objects[downRes.objid];
 
288
                                }
 
289
                
 
290
                                if(clickstate==3){                                                                                                                                                                                                              // We are in single rectangular object move 
 
291
                                                obj.x1=downRes.x1-deltax;
 
292
                                                obj.y1=downRes.y1-deltay;
 
293
                                                obj.x2=downRes.x2-deltax;
 
294
                                                obj.y2=downRes.y2-deltay;
 
295
                                }else if(clickstate==4){                                                                                                                                                                                        // We are in single rectangular object scale left 
 
296
                                                if((obj.x2-downRes.x1+deltax)>60) obj.x1=downRes.x1-deltax;
 
297
                                }else if(clickstate==5){                                                                                                                                                                                        // We are in single rectangular object scale bottom
 
298
                                                if((downRes.y2-obj.y1-deltay)>40) obj.y2=downRes.y2-deltay;
 
299
                                }else if(clickstate==6){                                                                                                                                                                                        // We are in single rectangular object scale right
 
300
                                                if((downRes.x2-obj.x1-deltax)>60) obj.x2=downRes.x2-deltax;
 
301
                                }else if(clickstate==7){                                                                                                                                                                                        // We are in single rectangular object scale top
 
302
                                                if((obj.y2-downRes.y1+deltay)>40) obj.y1=downRes.y1-deltay;
 
303
                                }else if(clickstate==8||clickstate==9){                                                                                                                         // We are in straight connective line drawing mode 
 
304
                                                                drawlinedx=gridx;
 
305
                                                                drawlinedy=gridy;
 
306
                                }
 
307
                
 
308
                }
 
309
        
 
310
                
 
311
                // Call-forward for mouse-over event
 
312
                
 
313
                function mouseover(x,y)
 
314
                {
 
315
                
 
316
                        // Code of touch, and if available object id and id of side of object that was touched
 
317
                        // Tolerances included as constant
 
318
                                
 
319
                        var obj_code="None";
 
320
                        var obj_id="None";
 
321
                        var obj_sidentifier="None";
 
322
                        var obj_sideperc=0;
 
323
                        var obj_centerdist=0;
 
324
                        var obj_type="None";
 
325
                        var obj_x1=0; var obj_y1=0; var obj_x2=0; var obj_y2=0;
 
326
                        
 
327
                        var Cont;
 
328
                        
 
329
                        var found=0;
 
330
                        var side;
 
331
                        
 
332
                        for(j=0;j<Identifiers.length;j++){
 
333
        
 
334
                                        var objid=Identifiers[j];
 
335
                                        var obj=Objects[objid];                         
 
336
                                        var Sel=Selected[objid];
 
337
                                        if(ContextObj==objid) Cont=1
 
338
                                        else Cont=0;
 
339
                                        
 
340
                                        // Compute coordinates including offset
 
341
                                        if(obj.type=="Entity"||obj.type=="ERAttribute"||obj.type=="ERRel"){
 
342
                                                                                                
 
343
                                                        x1=obj.x1+offsx;
 
344
                                                        y1=obj.y1+offsy;
 
345
                                                        x2=obj.x2+offsx;
 
346
                                                        y2=obj.y2+offsy;
 
347
                                                        
 
348
                                                        rx=(x2-x1)*0.5;
 
349
                                                        ry=(y2-y1)*0.5;
 
350
 
 
351
                                        }
 
352
                                        
 
353
                                        found=0;
 
354
 
 
355
                                        // For each kind of clickable object, check if we are inside object and if so assign variables
 
356
                                        // Any general properties for all object types are set when "found" is true
 
357
                                                
 
358
                                        if(obj.type=="Entity"){                         
 
359
                                                        if(x>(x1-sidetol)&&y>(y1-sidetol)&&x<(x2+sidetol)&&y<(y2+sidetol)){
 
360
 
 
361
                                                                        obj_code="NonSel";
 
362
                                                                        if(Sel) obj_code="Sel";
 
363
                                                                        if(Cont) obj_code="Cont";
 
364
 
 
365
                                                                        side=computeside(x,y,x1,y1,x2,y2,sidetol);
 
366
                                                                        obj_sidentifier=side.side;
 
367
                                                                        obj_sideperc=side.perc;
 
368
                                                                        obj_centerdist=side.dist;
 
369
                                                                                                                                                
 
370
                                                                        found=1;                                                                                                                                        
 
371
                                                        }
 
372
                                        }else if(obj.type=="ERAttribute"){
 
373
                                                        if(x>(x1-sidetol)&&y>(y1-sidetol)&&x<(x2+sidetol)&&y<(y2+sidetol)){
 
374
                                                                        obj_code="NonSel";
 
375
                                                                        if(Sel) obj_code="Sel";
 
376
                                                                        
 
377
                                                                        if(Cont){
 
378
                                                                                        if(obj.DrawtoID=="None"){
 
379
                                                                                                        obj_code="ContDraw";                                                                                    
 
380
                                                                                        }else{
 
381
                                                                                                        obj_code="Cont";
 
382
                                                                                        }
 
383
                                                                        } 
 
384
                                                                        
 
385
                                                                        side=computeside(x,y,x1,y1,x2,y2,sidetol);
 
386
                                                                        obj_sidentifier=side.side;
 
387
                                                                        obj_sideperc=side.perc;
 
388
                                                                        obj_centerdist=side.dist;
 
389
                                                                        
 
390
                                                                        found=1;
 
391
 
 
392
                                                        }
 
393
                                        }else if(obj.type=="ERRel"){
 
394
                                                        if(x>(x1-sidetol)&&y>(y1-sidetol)&&x<(x2+sidetol)&&y<(y2+sidetol)){
 
395
 
 
396
                                                                        xk=x-x1;
 
397
 
 
398
                                                                        // Colision detection against diamond
 
399
                                                                        var inside=0;                                                                                                                                           
 
400
                                                                        if(xk<=rx){
 
401
                                                                                        if(y>(y1+ry-xk-sidetol)&&y<(y1+ry+xk+sidetol)) inside=1;
 
402
                                                                        }else{
 
403
                                                                                        if(y>(y1-rx+xk-sidetol)&&y<(y2+rx-xk+sidetol)) inside=1;
 
404
                                                                        }
 
405
 
 
406
                                                                        if(inside){
 
407
                                                                                
 
408
                                                                                        if((x>(x1-sidetol))&&(x<(x1+sidetol))&&(y>(y1+ry-sidetol))&&(y<(y1+ry+sidetol))) obj_sidentifier=1;
 
409
                                                                                        if((x>(x1+rx-sidetol))&&(x<(x1+rx+sidetol))&&(y>(y2-sidetol))&&(y<(y2+sidetol))) obj_sidentifier=2;
 
410
                                                                                        if((x>(x2-sidetol))&&(x<(x2+sidetol))&&(y>(y1+ry-sidetol))&&(y<(y1+ry+sidetol))) obj_sidentifier=3;
 
411
                                                                                        if((x>(x1+rx-sidetol))&&(x<(x1+rx+sidetol))&&(y>(y1-sidetol))&&(y<(y1+sidetol))) obj_sidentifier=4;
 
412
 
 
413
 
 
414
                                                                                        obj_code="NonSel";
 
415
                                                                                        if(Sel) obj_code="Sel";
 
416
                
 
417
                                                                                        if(Cont){
 
418
                                                                                                        if(obj.DrawtoID=="None"){
 
419
                                                                                                                        obj_code="ContDraw";                                                                                    
 
420
                                                                                                        }else if(obj.DrawtoIDDest=="None"){
 
421
                                                                                                                        obj_code="ContDraw";                                                                                    
 
422
                                                                                                        }else{
 
423
                                                                                                                        obj_code="Cont";
 
424
                                                                                                        }
 
425
                                                                                        } 
 
426
                                                                                        
 
427
                                                                                        obj_sideperc=0.5;
 
428
                                                                        
 
429
                                                                                        found=1;
 
430
                                                                        }
 
431
                                                                                                
 
432
                                                        }
 
433
                                                                                
 
434
                                        }
 
435
                                        
 
436
                                        if(found==1){
 
437
 
 
438
                                                        // Save coordinates at time of click                                                                    
 
439
                                                        obj_x1=x1;
 
440
                                                        obj_y1=y1;
 
441
                                                        obj_x2=x2;
 
442
                                                        obj_y2=y2;                                              
 
443
 
 
444
                                                        obj_id=objid;
 
445
                                                        obj_type=obj.type;
 
446
                                                        
 
447
                                                        printstr=obj_id+" "+obj_sidentifier+" "+obj_sideperc;
 
448
 
 
449
                                        }
 
450
                                                                                
 
451
 
 
452
                        }
 
453
                                                
 
454
                        return {
 
455
                                                objid:obj_id,
 
456
                                                code:obj_code,
 
457
                                                side:obj_sidentifier,
 
458
                                                sideperc:obj_sideperc,
 
459
                                                centerdist:obj_centerdist,
 
460
                                                typ:obj_type,
 
461
                                                x1:obj_x1,
 
462
                                                y1:obj_y1,
 
463
                                                x2:obj_x2,
 
464
                                                y2:obj_y2
 
465
                                }
 
466
 
 
467
                }
 
468
 
 
469
                function importdata()
 
470
                {                               
 
471
                                for(i=0;i<7;i++){
 
472
 
 
473
                                                if(i==0) obj = jQuery.parseJSON('{"type":"ERAttribute","id":"ATT1","kind":"Multiple","name":"Addressfosoppooo","x1":220,"y1":100,"x2":300,"y2":140, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"None", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":""}');
 
474
                                                if(i==1) obj = jQuery.parseJSON('{"type":"Entity","id":"ENT2","kind":"Weak","name":"Carsmashoepppoloo","x1":100,"y1":160,"x2":220,"y2":220}');
 
475
                                                if(i==2) obj = jQuery.parseJSON('{"type":"ERAttribute","id":"ATT3","kind":"Key","name":"SSNFooomesPoo","x1":160,"y1":260,"x2":260,"y2":300, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"None", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":""}');
 
476
                                                if(i==3) obj = jQuery.parseJSON('{"type":"Entity","id":"ENT4","kind":"Strong","name":"Trailerfpdddpeoooooe","x1":320,"y1":260,"x2":420,"y2":320}');
 
477
                                                if(i==4) obj = jQuery.parseJSON('{"type":"Entity","id":"ENT5","kind":"Strong","name":"Grail","x1":120,"y1":440,"x2":220,"y2":480}');
 
478
                                                if(i==5) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL6","kind":"Strong","name":"FGFool","x1":460,"y1":160,"x2":520,"y2":220, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Fumo", "DrawtoXoffs":"20", "DrawtoYoffs":"50", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Luma", "DrawtoDestXoffs":"0", "DrawtoDestYoffs":"-50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
 
479
                                                if(i==6) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL7","kind":"Weak","name":"PODrool","x1":360,"y1":360,"x2":420,"y2":420, "DrawtoID":"None",  "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Kumo", "DrawtoXoffs":"60", "DrawtoYoffs":"70", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Zuuma", "DrawtoDestXoffs":"40", "DrawtoDestYoffs":"50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
 
480
 
 
481
                                                objid=obj.id;
 
482
                                                Objects[objid]=obj;
 
483
                                                Identifiers.push(objid);
 
484
                                
 
485
                                }
 
486
                }
 
487
 
 
488
                // prepareobj
 
489
                // Prepares all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
 
490
                // Ofss in prepare are not finished.
 
491
 
 
492
                function prepareobj(obji)
 
493
                {
 
494
                                var fromobj=Objects[obji];
 
495
                                
 
496
                                // Attributes are prepared by re-pointing the DrawX1, DrawY1, DrawX2 and DrawY2 variables and Relationships are prepared by re-pointing DrawX1-DrawX4 and DrawY1-DrawY4
 
497
 
 
498
                                if((fromobj.type=="ERAttribute"||fromobj.type=="ERRel")&&fromobj.DrawtoID!="None"){
 
499
                                                                                        
 
500
                                                var toid=fromobj.DrawtoID;
 
501
                                                var toobj=Objects[toid];
 
502
                                                
 
503
                                                var sidek;
 
504
                                                                                                
 
505
                                                if(fromobj.DrawtoIDDest!="None"&&fromobj.DrawtoIDDest!=undefined){
 
506
                                                                var toiddest=fromobj.DrawtoIDDest;
 
507
                                                                var toobjdest=Objects[toiddest];                                                
 
508
 
 
509
                                                                sidek=makeside(fromobj.DrawfromSideDest,fromobj.x1,fromobj.y1,fromobj.x2,fromobj.y2,0.5);
 
510
                                                                fromobj.DrawX3=sidek.x; 
 
511
                                                                fromobj.DrawY3=sidek.y;
 
512
                
 
513
                                                                sidek=makeside(fromobj.DrawtoSideDest,toobjdest.x1,toobjdest.y1,toobjdest.x2,toobjdest.y2,fromobj.DrawtoPercDest);
 
514
                                                                fromobj.DrawX4=sidek.x; 
 
515
                                                                fromobj.DrawY4=sidek.y;
 
516
                                                
 
517
                                                }
 
518
                                                
 
519
                                                //printstr=fromobj.DrawfromSide+" "+fromobj.x1+" "+fromobj.y1+" "+fromobj.x2+" "+fromobj.y2+" :: "+fromobj.DrawtoSide+" "+toobj.x1+" "+toobj.y1+" "+toobj.x2+" "+toobj.y2+" "+fromobj.DrawtoPerc;
 
520
                                                                                
 
521
                                                sidek=makeside(fromobj.DrawfromSide,fromobj.x1,fromobj.y1,fromobj.x2,fromobj.y2,0.5);
 
522
                                                fromobj.DrawX1=sidek.x;
 
523
                                                fromobj.DrawY1=sidek.y;
 
524
                                                
 
525
                                                
 
526
                                                sidek=makeside(fromobj.DrawtoSide,toobj.x1,toobj.y1,toobj.x2,toobj.y2,fromobj.DrawtoPerc);
 
527
                                                fromobj.DrawX2=sidek.x; 
 
528
                                                fromobj.DrawY2=sidek.y;                                         
 
529
                                                
 
530
                                }
 
531
                                                                
 
532
                }
 
533
 
 
534
                // Drawobj
 
535
                // Draws all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
 
536
                
 
537
                function drawobj(obji)
 
538
                {
 
539
 
 
540
                                var obj=Objects[obji];
 
541
                                
 
542
                                var Sel=Selected[obji];
 
543
                                
 
544
                                if(ContextObj==obji) Cont=1
 
545
                                else Cont=0; 
 
546
 
 
547
                                context.strokeStyle = '#000';
 
548
                                context.lineWidth = 2.0;
 
549
 
 
550
                                // Compute coordinates including offset
 
551
                                if(obj.type=="Entity"||obj.type=="ERAttribute"||obj.type=="ERRel"){
 
552
                                                                                        
 
553
                                                x1=obj.x1+offsx;
 
554
                                                y1=obj.y1+offsy;
 
555
                                                x2=obj.x2+offsx;
 
556
                                                y2=obj.y2+offsy;
 
557
                                                
 
558
                                                rx=(x2-x1)*0.5;
 
559
                                                ry=(y2-y1)*0.5;
 
560
                                }
 
561
 
 
562
                                if(obj.type=="Entity"){                         
 
563
 
 
564
                                                //Draw Local Graphic
 
565
                                                drawrect(x1,y1,x2,y2,"#000");
 
566
                                                
 
567
                                                if(obj.kind=="Weak"){
 
568
                                                                drawrect(x1+5,y1+5,x2-5,y2-5,"#000");
 
569
                                                                cliptext(x1+5,y1+5,x2-5,y2-5,obj.name,"20px Calibri","center",8,6,"#000",1,0);          
 
570
 
 
571
                                                }else{
 
572
                                                                cliptext(x1,y1,x2,y2,obj.name,"20px Calibri","center",8,6,"#000",1,0);                                          
 
573
                                                }
 
574
                                                
 
575
                                                // Draw Select Marker
 
576
                                                if(Sel||Cont){
 
577
                                                                fourpoints(x1,y1+ry,x2,y1+ry,x1+rx,y1,x1+rx,y2,"#5f8");                                                         
 
578
                                                }
 
579
 
 
580
                                }else if(obj.type=="ERAttribute"){
 
581
 
 
582
                                                drawellipse(x1,y1,x2,y2);
 
583
 
 
584
                                                if(obj.kind=="Key"){
 
585
                                                                cliptext(x1,y1,x2,y2,obj.name,"20px Calibri","center",8,6,"#000",2,1);                                          
 
586
                                                }else{
 
587
                                                                cliptext(x1,y1,x2,y2,obj.name,"20px Calibri","center",8,6,"#000",2,0);                                                                                          
 
588
                                                }
 
589
                                                
 
590
                                                if(obj.DrawtoID!="None"){
 
591
                                                                drawline(obj.DrawX1,obj.DrawY1,obj.DrawX2,obj.DrawY2,"#000",2.0);
 
592
                                                }
 
593
                                
 
594
                                                // Draw Select Marker
 
595
                                                if(Cont&&obj.DrawtoID=="None"){
 
596
                                                                fourpoints(x1,y1+ry,x2,y1+ry,x1+rx,y1,x1+rx,y2,"#fa2");
 
597
                                                }else if(Sel||(Cont&&obj.DrawtoID!="None")){
 
598
                                                                fourpoints(x1,y1+ry,x2,y1+ry,x1+rx,y1,x1+rx,y2,"#5f8");
 
599
                                                }
 
600
 
 
601
                                }else if(obj.type=="ERRel"){
 
602
                                
 
603
                                                if(obj.DrawtoID!="None"){
 
604
                                                                drawline(obj.DrawX1,obj.DrawY1,obj.DrawX2,obj.DrawY2,"#000",2.0);
 
605
                                                                drawcardinality(obj.DrawX2,obj.DrawY2,obj.DrawtoSide,obj.DrawtoCard,obj.DrawtoXoffsCard,obj.DrawtoYoffsCard,"20px Calibri",20,1,"#0a0");
 
606
                                                                drawcardinality(obj.DrawX2,obj.DrawY2,obj.DrawtoSide,obj.DrawtoRole,obj.DrawtoXoffsRole,obj.DrawtoYoffsRole,"20px Calibri",20,2,"#0a0");
 
607
 
 
608
//              function drawcardinality(x,y,side,tex,xoffs,yoffs,font,baseline,sign,color)
 
609
                                                                
 
610
                                                                
 
611
//                                              if(i==5) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL6","kind":"Strong","name":"FGFool","x1":460,"y1":160,"x2":520,"y2":220, "DrawtoID":"None", "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"N", "DrawtoRole":"Fumo", "DrawtoXoffsCard":"20", "DrawtoYoffsCard":"50","DrawtoXoffsRole":"20", "DrawtoYoffsRole":"-50", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"1", "DrawtoDestRole":"Luma", "DrawtoDestXoffsCard":"0", "DrawtoDestYoffsCard":"-50","DrawtoDestXoffsRole":"0", "DrawtoDestYoffsRole":"-50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
 
612
//                                              if(i==6) obj = jQuery.parseJSON('{"type":"ERRel","id":"REL7","kind":"Weak","name":"PODrool","x1":360,"y1":360,"x2":420,"y2":420, "DrawtoID":"None",  "DrawfromSide":"None","DrawtoSide":"None", "DrawtoPerc":"0", "DrawtoCard":"1", "DrawtoRole":"Kumo", "DrawtoXoffsCard":"60", "DrawtoYoffsCard":"70", "DrawtoXoffsCard":"80", "DrawtoYoffsCard":"-70", "DrawtoIDDest":"None",  "DrawfromSideDest":"None","DrawtoSideDest":"None", "DrawtoPercDest":"0", "DrawtoDestCard":"N", "DrawtoDestRole":"Zuuma", "DrawtoDestXoffsCard":"40", "DrawtoDestYoffsCard":"50", "DrawtoDestXoffsRole":"40", "DrawtoDestYoffsRole":"50", "DrawX1":"", "DrawY1":"", "DrawX2":"","DrawY2":"","DrawX3":"", "DrawY3":"", "DrawX4":"","DrawY4":""}');
 
613
 
 
614
                                                }
 
615
                                                if(obj.DrawtoIDDest!="None"){
 
616
                                                                drawline(obj.DrawX3,obj.DrawY3,obj.DrawX4,obj.DrawY4,"#000",2.0);
 
617
                                                }
 
618
 
 
619
                                                if(obj.kind=="Weak"){
 
620
                                                                drawdiamond(x1-4,y1-4,x2+4,y2+4);
 
621
                                                                drawdiamond(x1+4,y1+4,x2-4,y2-4);
 
622
                                                                cliptext(x1+8,y1+8,x2-8,y2-8,obj.name,"20px Calibri","center",8,6,"#000",3,0);                                                                                          
 
623
                                                }else{
 
624
                                                                drawdiamond(x1,y1,x2,y2,0);
 
625
                                                                cliptext(x1,y1,x2,y2,obj.name,"20px Calibri","center",8,6,"#000",3,0);                                                                                          
 
626
                                                }
 
627
                                                                                                
 
628
                                                // Draw Select Markers
 
629
                                                if(Sel||(Cont&&obj.DrawtoID!="None"&&obj.DrawtoIDDest!="None")){
 
630
                                                                fourpoints(x1,y1+ry,x2,y1+ry,x1+rx,y1,x1+rx,y2,"#5f8");
 
631
                                                }else   if(Cont){
 
632
                                                                if(obj.DrawfromSide!=1&&obj.DrawfromSideDest!=1) point(x1,y1+ry,"#fa2");
 
633
                                                                if(obj.DrawfromSide!=2&&obj.DrawfromSideDest!=2) point(x1+rx,y2,"#fa2");                                                                
 
634
                                                                if(obj.DrawfromSide!=3&&obj.DrawfromSideDest!=3) point(x2,y1+ry,"#fa2");                                                                
 
635
                                                                if(obj.DrawfromSide!=4&&obj.DrawfromSideDest!=4) point(x1+rx,y1,"#fa2");
 
636
                                                }
 
637
                                
 
638
                                }
 
639
                }
 
640
 
 
641
                importdata();
 
642
 
 
643
                function foo()
 
644
                {
 
645
                                context.clearRect(0,0,600,600);
 
646
                                
 
647
//                              overline(gridx,gridy,150,550,550,300,8.0);
 
648
                                
 
649
                                // Draw grid lines                              
 
650
                                context.strokeStyle = '#ddd';
 
651
                                context.lineWidth   = 0.5;
 
652
                                context.beginPath();
 
653
                                for(i=0;i<600;i+=20){
 
654
                                                context.moveTo(i,0);
 
655
                                                context.lineTo(i,600);
 
656
                                                context.moveTo(0,i);
 
657
                                                context.lineTo(600,i);
 
658
                                }
 
659
                                context.stroke();                       
 
660
 
 
661
                                // Draw drawing line                            
 
662
                                if(drawlinekind==1){
 
663
                                                drawline(drawlinesx,drawlinesy,drawlinedx,drawlinedy,"#000",1.0);
 
664
                                }
 
665
                                
 
666
                                // Prepare model objects
 
667
                                for(i=0;i<Identifiers.length;i++){
 
668
                                                        var objid=Identifiers[i];
 
669
                                                        prepareobj(objid);
 
670
                                }
 
671
 
 
672
                                // Draw model objects
 
673
                                for(i=0;i<Identifiers.length;i++){
 
674
                                                        var objid=Identifiers[i];
 
675
                                                        drawobj(objid);
 
676
                                }
 
677
                                                                                                                                
 
678
                                // Draw Crosshair
 
679
                                context.beginPath();
 
680
                                context.strokeStyle = '#444';
 
681
                                context.lineWidth   = 1.0;
 
682
                                context.moveTo(gridx-gridsize,gridy);
 
683
                                context.lineTo(gridx+gridsize,gridy);
 
684
                                context.moveTo(gridx,gridy-gridsize);
 
685
                                context.lineTo(gridx,gridy+gridsize);
 
686
                                context.stroke();                                                                                       
 
687
 
 
688
                                context.strokeStyle = '#ddd';
 
689
 
 
690
                                context.fillStyle='#000';
 
691
                                context.font = "bold 16px Arial";
 
692
        context.textAlign = "left";
 
693
                                context.fillText("currop: "+printstr, 20, 576);
 
694
 
 
695
                                setTimeout("foo();",100);
 
696
                                
 
697
          }
 
698
                                        
 
699
        </script>
 
700
        
 
701
        <script type="text/javascript" src="dugga.js"></script>
 
702
        
 
703
        </head>
 
704
        <body onload="setupcanvas();">
 
705
        
 
706
        <table>
 
707
                <tr>
 
708
                        <td>
 
709
                                <canvas id='a' width='600' height='600' style='border:2px solid black;'>
 
710
                                </canvas>
 
711
                        </td>
 
712
                        <td valign="top">
 
713
                                <div style="border:2px solid black;background-color:#fed;width:300;height:450;">
 
714
                                        <div id="infobox" style="padding:4px;">
 
715
                                        
 
716
                                               Change values to update diagram.<br>
 
717
 
 
718
                                        </div>
 
719
                                </div>
 
720
                        </td>                   
 
721
                </tr>
 
722
        </table>        
 
723
        
 
724
        </div>
 
725
 
 
726
        </body>
 
727
</html>