/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/DuggaSys/duggor/Dugga Databassystem - ER Modellering Test/dugga.js

  • 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/DuggaSys/duggor/Dugga Databassystem - ER Modellering Test/dugga.js
 
1
 
 
2
/********************************************************************************
 
3
 
 
4
   Canvas Setup and Click Handling Code
 
5
   
 
6
   Handles both Touch and Mouse/Keyboard input at the same time and executes 
 
7
   handler callbacks.
 
8
   Also declares canvas globals
 
9
 
 
10
*********************************************************************************/
 
11
 
 
12
                function setupcanvas()
 
13
                {
 
14
                                acanvas=document.getElementById('a');
 
15
                                context=acanvas.getContext("2d");               
 
16
                                
 
17
                                setTimeout("foo();",20);
 
18
                                
 
19
                                setupClickHandling();           
 
20
                }
 
21
                
 
22
                function setupClickHandling()
 
23
                {
 
24
                                // Mouse and Keyboard Events
 
25
                                acanvas.addEventListener('mousemove', ev_mousemove, false);
 
26
                                acanvas.addEventListener('mouseup', ev_mouseup, false);
 
27
                                acanvas.addEventListener('mousedown', ev_mousedown, false);
 
28
                                
 
29
                                // Touch Events
 
30
                                acanvas.addEventListener('touchstart', ev_touchstart, false);
 
31
                                acanvas.addEventListener('touchend', ev_touchend, false);
 
32
                                acanvas.addEventListener('touchmove', ev_touchmove, false);             
 
33
                }                                               
 
34
                                
 
35
                // Keyboard/Mouse Mouse Up Handler
 
36
                function ev_mouseup(ev)
 
37
                {
 
38
                                handler_mouseup();
 
39
                }
 
40
                
 
41
                // Keyboard/Mouse Mouse Down Handler
 
42
                function ev_mousedown(ev)
 
43
                {
 
44
                                handler_mousedown();            
 
45
                }
 
46
 
 
47
                // Keyboard/Mouse Mouse Move Handler
 
48
                function ev_mousemove (ev) 
 
49
                {
 
50
                          var cx,cy=0;
 
51
                          if (ev.layerX||ev.layerX==0) { // Firefox
 
52
                                    cx=ev.layerX-acanvas.offsetLeft;
 
53
                                    cy=ev.layerY-acanvas.offsetTop;
 
54
                          } else if (ev.offsetX || ev.offsetX == 0) { // Opera
 
55
                                    cx=ev.offsetX-acanvas.offsetLeft;
 
56
                                    cy=ev.offsetY-acanvas.offsetTop;
 
57
                          }
 
58
 
 
59
                          coord=findPos(acanvas);
 
60
                                cx=cx-coord.x;
 
61
                                cy=cy-coord.y;
 
62
 
 
63
                                handler_mousemove(cx,cy);
 
64
                }               
 
65
 
 
66
                // Touch start event
 
67
                function ev_touchstart(event){  
 
68
                event.preventDefault();  
 
69
                var numtouch = event.touches.length;  
 
70
 
 
71
                                targetEvent =  event.touches.item(0);
 
72
 
 
73
                                var cx = targetEvent.pageX;
 
74
                                var cy = targetEvent.pageY;
 
75
                                
 
76
                                gridx=cx;
 
77
                                gridy=cy;
 
78
 
 
79
                                handler_mousedown();
 
80
 
 
81
                };  
 
82
 
 
83
                // Touch end event
 
84
                function ev_touchend(event){  
 
85
                event.preventDefault();  
 
86
                var numtouch = event.touches.length;  
 
87
 
 
88
                                handler_mouseup();
 
89
                };  
 
90
                
 
91
                // Touch move event
 
92
                function ev_touchmove(event){  
 
93
                event.preventDefault();  
 
94
                var numtouch = event.touches.length;  
 
95
 
 
96
                                targetEvent =  event.touches.item(0);
 
97
 
 
98
                                var cx = targetEvent.pageX;
 
99
                                var cy = targetEvent.pageY;
 
100
                                
 
101
                                handler_mousemove(cx,cy);                               
 
102
                };  
 
103
 
 
104
                // Fix scrolling on touch devices
 
105
                var ScrollFix = function(elem) {
 
106
                    // Variables to track inputs
 
107
                    var startY, startTopScroll;
 
108
                
 
109
                    elem = elem || document.querySelector(elem);
 
110
                
 
111
                    // If there is no element, then do nothing  
 
112
                    if(!elem)
 
113
                        return;
 
114
                
 
115
                    // Handle the start of interactions
 
116
                    elem.addEventListener('touchstart', function(event){
 
117
                        startY = event.touches[0].pageY;
 
118
                        startTopScroll = elem.scrollTop;
 
119
                
 
120
                        if(startTopScroll <= 0)
 
121
                            elem.scrollTop = 1;
 
122
                
 
123
                        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
 
124
                            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
 
125
                    }, false);
 
126
                };
 
127
 
 
128
/********************************************************************************
 
129
 
 
130
   Canvas Diagram Drawing Code
 
131
 
 
132
*********************************************************************************/
 
133
                
 
134
                // Draws 90 degree arc
 
135
                function drawellipse(x1,y1,x2,y2)
 
136
                {
 
137
 
 
138
                                        var rx=(x2-x1)/2.0;
 
139
                                        var ry=(y2-y1)/2.0;
 
140
 
 
141
                                        var x3=x1+rx;
 
142
                                        var y3=y1+ry;
 
143
 
 
144
                                        context.beginPath();                                    
 
145
 
 
146
                                        context.moveTo(x1,y1+ry);
 
147
                                        context.quadraticCurveTo(x1,y1,x1+rx,y1);
 
148
                                        context.quadraticCurveTo(x2,y1,x2,y1+ry);
 
149
                                        context.quadraticCurveTo(x2,y2,x2-rx,y2);
 
150
                                        context.quadraticCurveTo(x1,y2,x1,y1+ry);
 
151
 
 
152
                                        context.stroke();
 
153
                }       
 
154
                
 
155
                // Draw a point         
 
156
                function point(col,x,y)
 
157
                {
 
158
                                context.strokeStyle="#000";
 
159
                                context.lineWidth = 1;
 
160
                        
 
161
                                context.fillStyle=col;
 
162
                                context.fillRect(x-4,y-4,8,8);          
 
163
                                context.strokeRect(x-4,y-4,8,8);                                                
 
164
                }
 
165
                
 
166
                // Draw a box around a point to indicate highlight
 
167
                function highlight(px,py)
 
168
                {
 
169
                                context.strokeStyle="#aaa";
 
170
                                context.lineWidth = 1;
 
171
                        
 
172
                                context.strokeRect(px-8,py-8,16,16);                                            
 
173
                                
 
174
                }
 
175
                
 
176
                // Draw a line using current context
 
177
                function drawline(x1,y1,x2,y2,strokestyle,linewidth)
 
178
                {
 
179
                                                context.strokeStyle = strokestyle;
 
180
                                                context.lineWidth   = linewidth;
 
181
                                                context.beginPath();
 
182
                                                context.moveTo(x1,y1);
 
183
                                                context.lineTo(x2,y2);
 
184
                                                context.stroke();                                                       
 
185
                }
 
186
                
 
187
                function fourpoints(x1,y1,x2,y2,x3,y3,x4,y4,col)
 
188
                {
 
189
                                point(col,x1,y1);
 
190
                                point(col,x2,y2);
 
191
                                point(col,x3,y3);
 
192
                                point(col,x4,y4);                               
 
193
                }
 
194
                
 
195
                function drawdiamond(x1,y1,rx,ry,expand)
 
196
                {
 
197
                                context.beginPath();                                    
 
198
                                context.moveTo(x1-expand,y1+ry);
 
199
                                context.lineTo(x1+rx,y2+expand);
 
200
                                context.lineTo(x2+expand,y1+ry);
 
201
                                context.lineTo(x1+rx,y1-expand);
 
202
                                context.lineTo(x1-expand,y1+ry);                        
 
203
                                context.stroke();                                                                                       
 
204
                }
 
205
                
 
206
                // Recursive Pos of div in document - should work in most browsers
 
207
                function findPos(obj) {
 
208
                        var curleft = curtop = 0;
 
209
                        if (obj.offsetParent) {
 
210
                                curleft = obj.offsetLeft
 
211
                                curtop = obj.offsetTop
 
212
                                while (obj = obj.offsetParent) {
 
213
                                        curleft += obj.offsetLeft
 
214
                                        curtop += obj.offsetTop
 
215
                                }
 
216
                        }
 
217
                        return {
 
218
                                                x:curleft,
 
219
                                                y:curtop
 
220
                                }
 
221
                }
 
222
                
 
223
                // Make side coordinates for drawing Model
 
224
 
 
225
                function makeside(side,x1,y1,x2,y2,perc){
 
226
        
 
227
                                var xk=0;
 
228
                                var yk=0;
 
229
        
 
230
                                if(side==1){
 
231
                                                xk=x1;
 
232
                                                yk=y1+((y2-y1)*perc);
 
233
                                }else if(side==2){
 
234
                                                xk=x1+((x2-x1)*perc);
 
235
                                                yk=y2;
 
236
                                }else if(side==3){
 
237
                                                xk=x2;
 
238
                                                yk=y1+((y2-y1)*perc);                                           
 
239
                                }else if(side==4){
 
240
                                                xk=x1+((x2-x1)*perc)
 
241
                                                yk=y1;
 
242
                                }
 
243
                                
 
244
                                return {
 
245
                                                        x:xk,
 
246
                                                        y:yk
 
247
                                        }
 
248
                
 
249
                }               
 
250
                
 
251
                // Computes side identifier for a mouse coordinate and object coordinates
 
252
                
 
253
                function computeside(x,y,x1,y1,x2,y2,sidetol){
 
254
        
 
255
                                var obj_sidentifier="None";
 
256
                                var obj_sideperc=0;
 
257
                                var obj_centerdist=0;
 
258
        
 
259
                                // Left Side
 
260
                                if(x>x1-sidetol&&x<x1+sidetol&&y>y1-sidetol&&y<y2+sidetol){
 
261
                                                obj_sidentifier=1;
 
262
                                                obj_sideperc=makesideperc(y,y1,y2);
 
263
                                                obj_centerdist=centerdist(y,y1,y2);
 
264
                                }
 
265
 
 
266
                                // Bottom Not Including Left Side or Right Side
 
267
                                if(x>x1+sidetol&&x<x2-sidetol&&y>y2-sidetol&&y<y2+sidetol){
 
268
                                                obj_sidentifier=2;
 
269
                                                obj_sideperc=makesideperc(x,x1,x2);
 
270
                                                obj_centerdist=centerdist(x,x1,x2);
 
271
                                }
 
272
 
 
273
                                // Right Side
 
274
                                if(x>x2-sidetol&&x<x2+sidetol&&y>y1-sidetol&&y<y2+sidetol){
 
275
                                                obj_sidentifier=3;
 
276
                                                obj_sideperc=makesideperc(y,y1,y2);
 
277
                                                obj_centerdist=centerdist(y,y1,y2);
 
278
                                }
 
279
                                
 
280
                                // Top Not Including Left Side or Right Side
 
281
                                if(x>x1+sidetol&&x<x2-sidetol&&y>y1-sidetol&&y<y1+sidetol){
 
282
                                                obj_sidentifier=4;
 
283
                                                obj_sideperc=makesideperc(x,x1,x2);
 
284
                                                obj_centerdist=centerdist(x,x1,x2);
 
285
                                }
 
286
                                
 
287
                                return {
 
288
                                                        side:obj_sidentifier,
 
289
                                                        perc:obj_sideperc,
 
290
                                                        dist:obj_centerdist
 
291
                                        }
 
292
                
 
293
                }               
 
294
 
 
295
 
 
296
                                                
 
297
                // Make side perc for ER model
 
298
                
 
299
                function makesideperc(x,x1,x2){
 
300
                                r=x2-x1;
 
301
                                perc=(x-x1)/r;
 
302
 
 
303
                                if(perc>1.0) perc=1.0;
 
304
                                if(perc<0.0) perc=0.0;
 
305
 
 
306
                                return perc;
 
307
                }
 
308
                
 
309
                function centerdist(x,x1,x2){
 
310
                                r=x1+((x2-x1)*0.5);
 
311
                                
 
312
                                return (x-r);
 
313
                }
 
314
                
 
315
                // Euclidian distance - Yo!
 
316
                
 
317
                function distance(x1,y1,x2,y2){
 
318
                                
 
319
                                var dist=Math.sqrt(((y2-y1)*(y2-y1))+((x2-x1)*(x2-x1)));
 
320
                                
 
321
                                return dist;
 
322
                }
 
323
 
 
324
                // Dashed Line in Segments of given size
 
325
                
 
326
                function dashedline(sx,sy,ex,ey,dashlen,linewidth,col)
 
327
                {
 
328
                                                
 
329
                        var dx=ex-sx;
 
330
                        var dy=ey-sy;
 
331
                                                        
 
332
                        len=Math.sqrt((dx*dx)+(dy*dy));
 
333
                        notimes=Math.round(len/dashlen);
 
334
                        
 
335
                        dx=dx/notimes;
 
336
                        dy=dy/notimes;
 
337
                        
 
338
                        context.lineWidth = linewidth;
 
339
                        context.strokeStyle=col;
 
340
 
 
341
                        context.beginPath();
 
342
 
 
343
                        var xk,yk;
 
344
                        xk=sx;
 
345
                        yk=sy;
 
346
                        xh=dx/2.0;
 
347
                        yh=dy/2.0;
 
348
                        for(var i=0;i<notimes;i++){
 
349
 
 
350
                                        context.moveTo(xk,yk);                          
 
351
                                        context.lineTo(xk+xh,yk+yh);
 
352
                                
 
353
                                        xk+=dx;
 
354
                                        yk+=dy;
 
355
                        }
 
356
                                                        
 
357
                        context.stroke();
 
358
                                
 
359
                }
 
360
                                                                
 
361
                // Arcto only works if both x1 and y2 are on circle border
 
362
                function arcto(x0,y0,x1,y1,x2,y2)
 
363
                {
 
364
 
 
365
                                var r = Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0));
 
366
                                var x = x0-r;
 
367
                                var y = y0-r;
 
368
                                var startAngle = (180/Math.PI*Math.atan2(y1-y0, x1-x0));
 
369
                                var endAngle = (180/Math.PI*Math.atan2(y2-y0, x2-x0));
 
370
                                
 
371
                                context.arc(x0, y0, r, 0, Math.PI*2.0, 1.0);
 
372
 
 
373
                }
 
374
 
 
375
                // Draws 90 degree arc
 
376
                function arcdeg(x1,y1,x2,y2,x3,y3)
 
377
                {
 
378
                                        
 
379
 
 
380
                                        // First quadrant positive positive                     
 
381
                                        dashedline(x1,y1,x2,y2,8,1.0,"#999");
 
382
                                        dashedline(x3,y3,x2,y2,8,1.0,"#999");                                   
 
383
 
 
384
                                        point("#ff5",x1,y1);
 
385
                                        point("#f55",x2,y2);
 
386
                                        point("#f55",x3,y3);
 
387
                                                                                                
 
388
                                        k=(y3-y1)/(x3-x1);                                      
 
389
                                                                                
 
390
                                        yk=y1+((x2-x1)*k);
 
391
                                        
 
392
                                        rx=x3-x1;
 
393
                                        ry=y3-y1;
 
394
 
 
395
                                        point("#f5f",x2,yk);
 
396
 
 
397
                                        context.strokeStyle = '#49f';
 
398
                                        context.lineWidth   = 1.0;                                      
 
399
                                        context.beginPath();                                    
 
400
                                        context.moveTo(x1,y1);
 
401
                                        for(i=0;i<48;i++){
 
402
                                                        if(y3>=y1){
 
403
                                                                        if(yk>=y2){
 
404
                                                                                        context.lineTo(x1+(Math.sin(((Math.PI/96.0)*-i)+(Math.PI*1.0))*rx),y3+(Math.cos(((Math.PI/96.0)*-i)+(Math.PI*1.0))*ry));
 
405
                                                                        }else{
 
406
                                                                                        context.lineTo(x3+(Math.sin(((Math.PI/96.0)*i)+(Math.PI*1.5))*rx),y1+(Math.cos(((Math.PI/96.0)*i)+(Math.PI*1.5))*ry));
 
407
                                                                        }
 
408
                                                        }else{
 
409
                                                                        if(yk<=y2){
 
410
                                                                                        context.lineTo(x1+(Math.sin(((Math.PI/96.0)*-i)+(Math.PI*1.0))*rx),y3+(Math.cos(((Math.PI/96.0)*-i)+(Math.PI*1.0))*ry));
 
411
                                                                        }else{
 
412
                                                                                        context.lineTo(x3+(Math.sin(((Math.PI/96.0)*i)+(Math.PI*1.5))*rx),y1+(Math.cos(((Math.PI/96.0)*i)+(Math.PI*1.5))*ry));
 
413
                                                                        }                                                       
 
414
                                                        }
 
415
                                        }
 
416
                                        context.stroke();
 
417
 
 
418
                }
 
 
b'\\ No newline at end of file'