/lenasys/trunk

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

« back to all changes in this revision

Viewing changes to ErModeller/canvas_ER_demo_duggajs.html

  • Committer: gustav.hartvigsson at gmail
  • Date: 2013-04-04 06:42:25 UTC
  • mfrom: (4.7.13 GammaBear)
  • Revision ID: gustav.hartvigsson@gmail.com-20130404064225-jxssrfawo202of2s
fixed a few conflicts, removes some files to do so among other things.

Show diffs side-by-side

added added

removed removed

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