To get this branch, use:
bzr branch
http://gegoxaren.bato24.eu/bzr/lenasys/trunk
« back to all changes in this revision
Viewing changes to js/dugga.js
- browse files at revision 11.4.3
- compare with another revision
- download diff
- download tarball
- view history from revision 11.4.3
- Committer: mattman-03
- Date: 2013-04-05 06:38:20 UTC
- mto: (19.4.1 lenasys)
- mto: This revision was merged to the branch mainline in revision 21.
- Revision ID: mattman-03-20130405063820-ocsj1amhbqaaekaz
Codestandard fixed
- files modified:
- js/dugga.js
added
removed
js/dugga.js
7
7
*********************************************************************************/
8
8
9
9
// Mouse coordinate globals
10
var gridx, gridy;
11
var clickstate = 0;
10
var gridx,gridy;
11
var clickstate=0;
12
12
13
var acanvas;
13
14
var context;
14
15
21
22
Also declares canvas globals
22
23
23
24
*********************************************************************************/
24
function setupCanvas() {
25
acanvas = document.getElementById( 'a' );
26
context = acanvas.getContext( "2d" );
27
setTimeout( "foo();", 50 );
28
setupClickHandling();
29
}
30
31
function setupClickHandling() {
32
// Mouse and Keyboard Events
33
acanvas.addEventListener( 'mousemove', ev_mousemove, false );
34
acanvas.addEventListener( 'mouseup', ev_mouseup, false );
35
acanvas.addEventListener( 'mousedown', ev_mousedown, false );
36
// Touch Events
37
acanvas.addEventListener( 'touchstart', ev_touchstart, false);
38
acanvas.addEventListener( 'touchend', ev_touchend, false);
39
acanvas.addEventListener( 'touchmove', ev_touchmove, false);
40
}
41
25
26
function setupcanvas()
27
{
28
acanvas=document.getElementById('a');
29
context=acanvas.getContext("2d");
30
31
setTimeout("foo();",50);
32
33
setupClickHandling();
34
}
35
36
function setupClickHandling()
37
{
38
// Mouse and Keyboard Events
39
acanvas.addEventListener('mousemove', ev_mousemove, false);
40
acanvas.addEventListener('mouseup', ev_mouseup, false);
41
acanvas.addEventListener('mousedown', ev_mousedown, false);
42
43
// Touch Events
44
acanvas.addEventListener('touchstart', ev_touchstart, false);
45
acanvas.addEventListener('touchend', ev_touchend, false);
46
acanvas.addEventListener('touchmove', ev_touchmove, false);
47
}
48
42
49
// Keyboard/Mouse Mouse Up Handler
43
function evMouseup(ev) {
44
handlerMouseup();
50
function ev_mouseup(ev)
51
{
52
handler_mouseup();
45
53
}
46
54
47
55
// Keyboard/Mouse Mouse Down Handler
48
function evMousedown(ev) {
49
handlerMousedown(ev);
56
function ev_mousedown(ev)
57
{
58
handler_mousedown(ev);
50
59
}
51
60
52
61
// Keyboard/Mouse Mouse Move Handler
53
function evMouseMove(ev) {
54
var cx, cy = 0;
55
// Firefox
56
if( ev.layerX || ev.layerX == 0 ) {
57
cx = ev.layerX - acanvas.offsetLeft;
58
cy = ev.layerY - acanvas.offsetTop;
59
// Opera
60
} else if( ev.offsetX || ev.offsetX == 0 ) {
61
cx = ev.offsetX - acanvas.offsetLeft;
62
cy = ev.offsetY - acanvas.offsetTop;
63
}
64
coord = findPos(acanvas);
65
cx = cx - coord.x;
66
cy = cy - coord.y;
67
handler_mousemove( cx, cy );
62
function ev_mousemove (ev)
63
{
64
var cx,cy=0;
65
if (ev.layerX||ev.layerX==0) { // Firefox
66
cx=ev.layerX-acanvas.offsetLeft;
67
cy=ev.layerY-acanvas.offsetTop;
68
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
69
cx=ev.offsetX-acanvas.offsetLeft;
70
cy=ev.offsetY-acanvas.offsetTop;
71
}
72
73
coord=findPos(acanvas);
74
cx=cx-coord.x;
75
cy=cy-coord.y;
76
77
handler_mousemove(cx,cy);
68
78
}
69
79
70
80
// Touch start event
71
function evTouchStart( event ) {
81
function ev_touchstart(event){
72
82
event.preventDefault();
73
83
var numtouch = event.touches.length;
74
targetEvent = event.touches.item( 0 );
75
var cx = targetEvent.pageX;
76
var cy = targetEvent.pageY;
77
gridx = cx;
78
gridy = cy;
79
handlerMouseDown();
80
}
84
85
targetEvent = event.touches.item(0);
86
87
var cx = targetEvent.pageX;
88
var cy = targetEvent.pageY;
89
90
gridx=cx;
91
gridy=cy;
92
93
handler_mousedown();
94
95
};
81
96
82
97
// Touch end event
83
function evTouchEnd( event ) {
98
function ev_touchend(event){
84
99
event.preventDefault();
85
var numtouch = event.touches.length;
86
handlerMouseUp();
87
}
100
var numtouch = event.touches.length;
101
102
handler_mouseup();
103
};
88
104
89
105
// Touch move event
90
function evTouchMove( event ) {
91
event.preventDefault();
106
function ev_touchmove(event){
107
event.preventDefault();
92
108
var numtouch = event.touches.length;
93
targetEvent = event.touches.item( 0 );
94
var cx = targetEvent.pageX;
95
var cy = targetEvent.pageY;
96
handlerMouseMove( cx, cy );
97
}
109
110
targetEvent = event.touches.item(0);
111
112
var cx = targetEvent.pageX;
113
var cy = targetEvent.pageY;
114
115
handler_mousemove(cx,cy);
116
};
98
117
99
118
// Fix scrolling on touch devices
100
var scrollFix = function(elem) {
119
var ScrollFix = function(elem) {
101
120
// Variables to track inputs
102
121
var startY, startTopScroll;
103
elem = elem || document.querySelector( elem );
122
123
elem = elem || document.querySelector(elem);
124
104
125
// If there is no element, then do nothing
105
if( !elem ){
126
if(!elem)
106
127
return;
107
}
128
108
129
// Handle the start of interactions
109
elem.addEventListener( 'touchstart', function( event ) {
110
startY = event.touches[ 0 ].pageY;
130
elem.addEventListener('touchstart', function(event){
131
startY = event.touches[0].pageY;
111
132
startTopScroll = elem.scrollTop;
112
if( startTopScroll <= 0 ) {
133
134
if(startTopScroll <= 0)
113
135
elem.scrollTop = 1;
114
}
115
if( startTopScroll + elem.offsetHeight >= elem.scrollHeight ) {
136
137
if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
116
138
elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
117
}
118
}, false );
139
}, false);
119
140
};
120
141
121
142
/********************************************************************************
125
146
*********************************************************************************/
126
147
127
148
// Draws a stroked rectangle of certain thicknes and color
128
function drawrect( x1, y1, x2, y2, color ) {
129
context.lineWidth = 1.5;
130
context.strokeStyle = color;
131
context.strokeRect( x1, y1, x2 - x1, y2 - y1 );
149
150
function drawrect(x1,y1,x2,y2,color)
151
{
152
context.lineWidth = 1.5;
153
context.strokeStyle = color;
154
context.strokeRect(x1,y1,x2-x1,y2-y1);
132
155
}
156
133
157
158
134
159
// Draws a perfect round circle
135
function drawcircle( radius, color ) {
136
context.lineWidth = 1.5;
137
context.strokeStyle = color;
138
context.arc( 0, 0, radius, 0 , 2 * Math.PI, false );
160
161
function drawcircle(radius,color)
162
{
163
context.lineWidth = 1.5;
164
context.strokeStyle = color;
165
context.arc(0, 0, radius, 0 , 2 * Math.PI, false);
139
166
}
140
167
141
168
// Draws 90 degree arc
142
function drawellipse( x1, y1, x2, y2 ) {
143
var rx = ( x2 - x1 ) * 0.5;
144
var ry = ( y2 - y1 ) * 0.5;
145
context.beginPath();
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
context.stroke();
169
170
function drawellipse(x1,y1,x2,y2)
171
{
172
173
var rx=(x2-x1)*0.5;
174
var ry=(y2-y1)*0.5;
175
176
context.beginPath();
177
178
context.moveTo(x1,y1+ry);
179
context.quadraticCurveTo(x1,y1,x1+rx,y1);
180
context.quadraticCurveTo(x2,y1,x2,y1+ry);
181
context.quadraticCurveTo(x2,y2,x2-rx,y2);
182
context.quadraticCurveTo(x1,y2,x1,y1+ry);
183
184
context.stroke();
152
185
}
153
186
154
187
// Draw a point
155
function point( x, y, col ) {
156
context.strokeStyle = "#000";
157
context.lineWidth = 1;
158
context.fillStyle = col;
159
context.fillRect( x - 4, y - 4, 8, 8 );
160
context.strokeRect( x - 4, y - 4, 8, 8 );
188
189
function point(x,y,col)
190
{
191
context.strokeStyle="#000";
192
context.lineWidth = 1;
193
194
context.fillStyle=col;
195
context.fillRect(x-4,y-4,8,8);
196
context.strokeRect(x-4,y-4,8,8);
161
197
}
162
198
163
199
// Draw a box around a point to indicate highlight
164
function highlight( px, py ) {
165
context.strokeStyle = "#aaa";
166
context.lineWidth = 1;
167
context.strokeRect( px - 8, py - 8, 16, 16 );
200
201
function highlight(px,py)
202
{
203
context.strokeStyle="#aaa";
204
context.lineWidth = 1;
205
206
context.strokeRect(px-8,py-8,16,16);
207
168
208
}
169
209
170
210
// Draw a line using current context
171
function drawline( x1, y1, x2, y2, strokestyle, linewidth ) {
172
context.strokeStyle = strokestyle;
173
context.lineWidth = linewidth;
174
context.beginPath();
175
context.moveTo( x1, y1 );
176
context.lineTo( x2, y2 );
177
context.stroke();
178
}
179
180
function fourpoints( x1, y1, x2, y2, x3, y3, x4, y4, col ) {
181
point( x1, y1, col );
182
point( x2, y2, col );
183
point( x3, y3, col );
184
point( x4, y4, col );
185
}
186
187
function drawdiamond( x1, y1, x2, y2 ) {
188
var rx = ( x2 - x1 ) * 0.5;
189
var ry = ( y2 - y1 ) * 0.5;
190
context.beginPath();
191
context.moveTo( x1, y1 + ry);
192
context.lineTo( x1 + rx, y2);
193
context.lineTo( x2, y1 + ry);
194
context.lineTo( x1 + rx, y1);
195
context.lineTo( x1, y1 + ry);
196
context.stroke();
211
212
function drawline(x1,y1,x2,y2,strokestyle,linewidth)
213
{
214
context.strokeStyle = strokestyle;
215
context.lineWidth = linewidth;
216
context.beginPath();
217
context.moveTo(x1,y1);
218
context.lineTo(x2,y2);
219
context.stroke();
220
}
221
222
function fourpoints(x1,y1,x2,y2,x3,y3,x4,y4,col)
223
{
224
point(x1,y1,col);
225
point(x2,y2,col);
226
point(x3,y3,col);
227
point(x4,y4,col);
228
}
229
230
function drawdiamond(x1,y1,x2,y2)
231
{
232
var rx=(x2-x1)*0.5;
233
var ry=(y2-y1)*0.5;
234
235
context.beginPath();
236
context.moveTo(x1,y1+ry);
237
context.lineTo(x1+rx,y2);
238
context.lineTo(x2,y1+ry);
239
context.lineTo(x1+rx,y1);
240
context.lineTo(x1,y1+ry);
241
context.stroke();
197
242
}
198
243
199
244
// Dashed Line in Segments of given size
200
function dashedline( sx, sy, ex, ey, dashlen, linewidth, col ) {
201
var dx = ex - sx;
202
var dy = ey - sy;
203
len = Math.sqrt(( dx * dx ) + ( dy * dy ));
204
notimes = Math.round( len / dashlen );
205
dx = dx / notimes;
206
dy = dy / notimes;
245
246
function dashedline(sx,sy,ex,ey,dashlen,linewidth,col)
247
{
248
249
var dx=ex-sx;
250
var dy=ey-sy;
251
252
len=Math.sqrt((dx*dx)+(dy*dy));
253
notimes=Math.round(len/dashlen);
254
255
dx=dx/notimes;
256
dy=dy/notimes;
257
207
258
context.lineWidth = linewidth;
208
context.strokeStyle = col;
259
context.strokeStyle=col;
260
209
261
context.beginPath();
210
var xk, yk;
211
xk = sx;
212
yk = sy;
213
xh = dx / 2.0;
214
yh = dy / 2.0;
215
for( var i = 0; i < notimes; i++ ) {
216
context.moveTo( xk, yk );
217
context.lineTo( xk + xh, yk + yh );
218
xk += dx;
219
yk += dy;
262
263
var xk,yk;
264
xk=sx;
265
yk=sy;
266
xh=dx/2.0;
267
yh=dy/2.0;
268
for(var i=0;i<notimes;i++){
269
270
context.moveTo(xk,yk);
271
context.lineTo(xk+xh,yk+yh);
272
273
xk+=dx;
274
yk+=dy;
220
275
}
221
context.stroke();
276
277
context.stroke();
278
222
279
}
280
281
// Arcto only works if both x1 and y2 are on circle border
223
282
224
// Arcto only works if both x1 and y2 are on circle border
225
function arcTo( x0, y0, x1, y1, x2, y2 ) {
226
var r = Math.sqrt(( x1 - x0 ) * ( x1 - x0 ) + ( y1 - y0 ) * ( y1 - y0 ));
227
var x = x0 - r;
228
var y = y0 - r;
229
var startAngle = ( 180 / Math.PI * Math.atan2( y1 - y0, x1 - x0 ));
230
var endAngle = ( 180 / Math.PI * Math.atan2( y2 - y0, x2 - x0 ));
231
context.arc( x0, y0, r, 0, Math.PI * 2.0, 1.0);
283
function arcto(x0,y0,x1,y1,x2,y2)
284
{
285
286
var r = Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0));
287
var x = x0-r;
288
var y = y0-r;
289
var startAngle = (180/Math.PI*Math.atan2(y1-y0, x1-x0));
290
var endAngle = (180/Math.PI*Math.atan2(y2-y0, x2-x0));
291
292
context.arc(x0, y0, r, 0, Math.PI*2.0, 1.0);
293
232
294
}
233
295
234
296
// Draws 90 degree arc
235
function arcDeg( x1, y1, x2, y2, x3, y3) {
236
// First quadrant positive positive
237
dashedline( x1, y1, x2, y2, 8, 1.0, "#999" );
238
dashedline( x3, y3, x2, y2, 8, 1.0, "#999" );
239
point( x1, y1, "#ff5");
240
point( x2, y2, "#f55");
241
point( x3, y3, "#f55");
242
k = ( y3 - y1 ) / ( x3 - x1);
243
yk = y1 + (( x2 - x1 ) * k );
244
rx = x3 - x1;
245
ry = y3 - y1;
246
point( x2, yk, "#f5f" );
247
context.strokeStyle = '#49f';
248
context.lineWidth = 1.0;
249
context.beginPath();
250
context.moveTo( x1, y1 );
251
for( i = 0; i < 48; i++ ) {
252
if( y3 >= y1 ) {
253
if( yk >= y2 ) {
254
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 ));
255
} else {
256
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));
297
298
function arcdeg(x1,y1,x2,y2,x3,y3)
299
{
300
301
302
// First quadrant positive positive
303
dashedline(x1,y1,x2,y2,8,1.0,"#999");
304
dashedline(x3,y3,x2,y2,8,1.0,"#999");
305
306
point(x1,y1,"#ff5");
307
point(x2,y2,"#f55");
308
point(x3,y3,"#f55");
309
310
k=(y3-y1)/(x3-x1);
311
312
yk=y1+((x2-x1)*k);
313
314
rx=x3-x1;
315
ry=y3-y1;
316
317
point(x2,yk,"#f5f");
318
319
context.strokeStyle = '#49f';
320
context.lineWidth = 1.0;
321
context.beginPath();
322
context.moveTo(x1,y1);
323
for(i=0;i<48;i++){
324
if(y3>=y1){
325
if(yk>=y2){
326
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));
327
}else{
328
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));
329
}
330
}else{
331
if(yk<=y2){
332
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));
333
}else{
334
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));
335
}
336
}
257
337
}
258
} else {
259
if( yk <= y2 ) {
260
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 ));
261
} else {
262
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 ));
263
}
264
}
265
}
266
context.stroke();
267
}
268
338
context.stroke();
339
340
}
341
269
342
// function that draws one part of the sun
270
function sunDial( radius, angle, scale ) {
271
cosv = Math.cos(angle);
272
sinv = Math.sin(angle);
273
yaddx = scale * cosv;
274
yaddy = scale * sinv;
275
xaddx = -scale * sinv;
276
xaddy = scale * cosv;
277
xk = cosv * radius;
278
yk = sinv * radius;
279
context.bezierCurveTo(( -1.5 * xaddx ) + ( yaddx * 1.5 ) + xk, ( -1.5 * xaddy ) + ( yaddy * 1.5 ) + yk, xaddx + ( yaddx * 2.0 ) + xk, xaddy + ( yaddy * 2.0 ) + yk, xaddx + ( yaddx * 3.0 ) + xk, xaddy + ( yaddy * 3.0 ) + yk );
280
context.bezierCurveTo( xaddx + yaddx + xk, xaddy + yaddy + yk, ( 1.5 * xaddx ) + yaddx + xk, ( 1.5 * xaddy ) + yaddy + yk, ( 3.0 * xaddx ) + xk, ( 3.0 * xaddy ) + yk );
281
}
282
283
// function that draws the sun
284
function drawSun() {
285
context.fillStyle = "#fe9";
286
context.strokeStyle = "#d82";
287
context.lineWidth = 1.5;
288
context.beginPath();
289
context.moveTo( 30, 0 );
290
for( i = 0.0; i < 360.0; i += 22.5 ) {
291
angle = ( i / 360.0 ) * 2 * Math.PI;
292
sundial( 30, angle, 3 );
293
}
294
context.stroke();
295
context.fill();
296
}
297
343
344
function sundial(radius,angle,scale)
345
{
346
347
cosv=Math.cos(angle);
348
sinv=Math.sin(angle);
349
350
yaddx=scale*cosv;
351
yaddy=scale*sinv;
352
353
xaddx=-scale*sinv;
354
xaddy=scale*cosv;
355
356
xk=cosv*radius;
357
yk=sinv*radius;
358
359
context.bezierCurveTo((-1.5*xaddx)+(yaddx*1.5)+xk,(-1.5*xaddy)+(yaddy*1.5)+yk,xaddx+(yaddx*2.0)+xk,xaddy+(yaddy*2.0)+yk,xaddx+(yaddx*3.0)+xk,xaddy+(yaddy*3.0)+yk);
360
context.bezierCurveTo(xaddx+yaddx+xk,xaddy+yaddy+yk,(1.5*xaddx)+yaddx+xk,(1.5*xaddy)+yaddy+yk,(3.0*xaddx)+xk,(3.0*xaddy)+yk);
361
}
362
363
// function that daws the sun
364
365
function drawsun()
366
{
367
context.fillStyle = "#fe9";
368
context.strokeStyle = "#d82";
369
context.lineWidth = 1.5;
370
371
context.beginPath();
372
context.moveTo(30,0);
373
for(i=0.0;i<360.0;i+=22.5){
374
angle=(i/360.0)*2*Math.PI;
375
sundial(30,angle,3);
376
}
377
context.stroke();
378
context.fill();
379
}
380
298
381
// Draws the ball (used in various examples)
299
function drawball( cx, cy, radie, innerradie, ballradie, col1, inangle, inangleadd ) {
300
angleadd = ( inangleadd / 360.0 ) * 2 * Math.PI;
301
context.fillStyle = col1;
302
for( i = 0; i < 360; i += inangle ) {
303
angle = ( i / 360.0 ) * 2 * Math.PI;
304
angle2 = angle + angleadd;
305
angle3 = angle + ( angleadd * 2.0 );
306
angle4 = angle - angleadd;
307
cosv = Math.cos( angle );
308
sinv = Math.sin( angle );
309
cosv2 = Math.cos( angle2 );
310
sinv2 = Math.sin( angle2 );
311
cosv4 = Math.cos( angle4 );
312
sinv4 = Math.sin( angle4 );
313
context.beginPath();
314
context.moveTo( cx, cy );
315
context.quadraticCurveTo( cx + ( cosv * innerradie ), cy + ( sinv * innerradie ), cx + ( cosv2 * radie ), cy + ( sinv2 * radie ));
316
context.arc( cx, cy, radie, angle2, angle, 1.0 );
317
context.quadraticCurveTo( cx + ( cosv4 * innerradie ), cy + ( sinv4 * innerradie ), cx, cy );
318
context.fill();
319
}
320
context.beginPath();
321
context.arc( cx, cy, radie, 0, Math.PI * 2.0, 1.0 );
322
context.stroke();
382
383
function drawball(cx,cy,radie,innerradie,ballradie,col1,inangle,inangleadd)
384
{
385
386
angleadd=(inangleadd/360.0)*2*Math.PI;
387
388
context.fillStyle = col1;
389
390
for(i=0;i<360;i+=inangle){
391
392
angle=(i/360.0)*2*Math.PI;
393
angle2=angle+angleadd;
394
angle3=angle+(angleadd*2.0);
395
angle4=angle-angleadd;
396
397
cosv=Math.cos(angle);
398
sinv=Math.sin(angle);
399
400
cosv2=Math.cos(angle2);
401
sinv2=Math.sin(angle2);
402
403
cosv4=Math.cos(angle4);
404
sinv4=Math.sin(angle4);
405
406
context.beginPath();
407
408
context.moveTo(cx,cy);
409
context.quadraticCurveTo(cx+(cosv*innerradie),cy+(sinv*innerradie),cx+(cosv2*radie),cy+(sinv2*radie));
410
context.arc(cx,cy,radie,angle2,angle,1.0);
411
context.quadraticCurveTo(cx+(cosv4*innerradie),cy+(sinv4*innerradie),cx,cy);
412
413
context.fill();
414
415
}
416
417
context.beginPath();
418
context.arc(cx,cy,radie,0,Math.PI*2.0,1.0);
419
context.stroke();
420
323
421
}
324
422
325
423
// Draws underlined/dashed underlined text clipped inside a rectangle, a quadratic curve ellipsis or a diamond
326
function cliptext(x1,y1,x2,y2,tex,font,align,edgeoffs,baseline,color,clipkind,underlinekind) {
327
var rx = ( x2 - x1 ) * 0.5;
328
var ry = ( y2 - y1 ) * 0.5;
329
var tx = x1;
330
if( clipkind != 0 ) {
331
context.save();
332
context.beginPath();
333
}
334
// Make Rectangle / Ellipse / Diamond Clipping Paths
335
if( clipkind == 1 ) {
336
context.moveTo( x1, y1 );
337
context.lineTo( x1, y2 );
338
context.lineTo( x2 - edgeoffs, y2 );
339
context.lineTo( x2 - edgeoffs, y1 );
340
context.lineTo( x1, y1 );
341
} else if( clipkind == 2 ) {
342
context.moveTo( x1, y1 + ry );
343
context.quadraticCurveTo( x1 + edgeoffs, y1 + edgeoffs, x1 + edgeoffs + rx, y1 + edgeoffs);
344
context.quadraticCurveTo( x2 - edgeoffs, y1 + edgeoffs, x2 - edgeoffs, y1 + ry + edgeoffs);
345
context.quadraticCurveTo( x2 - edgeoffs, y2 - edgeoffs, x2 - rx - edgeoffs, y2 - edgeoffs);
346
context.quadraticCurveTo( x1 + edgeoffs, y2 - edgeoffs, x1 + edgeoffs, y1 + ry + edgeoffs);
347
} else if( clipkind == 3 ) {
348
context.moveTo( x1, y1 + ry );
349
context.lineTo( x1 + rx, y2 );
350
context.lineTo( x2, y1 + ry );
351
context.lineTo( x1 + rx, y1 );
352
context.lineTo( x1, y1 + ry );
353
}
354
if( clipkind != 0 ) {
355
context.clip();
356
}
357
context.font = font;
358
context.textAlign = "left";
359
context.fillStyle = color;
360
var metrics = context.measureText( tex );
361
var hwidth = metrics.width * 0.5;
362
// Compute left-justified centered coordinate
363
if(( rx - hwidth - edgeoffs ) < 0 ) {
364
tx = x1 + edgeoffs;
365
} else {
366
tx = x1 + rx - hwidth;
367
}
368
context.fillText( tex, tx, y2 - ry + baseline );
369
// Draw underlining - can handle dashed underline!
370
if( underlinekind == 1 ) {
371
drawline( tx, y2 - ry + baseline + 5.0, tx + ( hwidth * 2 ), y2 - ry + baseline + 5.0, "#000", 2.0 );
372
}
373
if(clipkind != 0 ) {
374
context.restore();
375
}
424
425
function cliptext(x1,y1,x2,y2,tex,font,align,edgeoffs,baseline,color,clipkind,underlinekind)
426
{
427
428
var rx=(x2-x1)*0.5;
429
var ry=(y2-y1)*0.5;
430
431
var tx=x1;
432
433
if(clipkind!=0){
434
context.save();
435
context.beginPath();
436
}
437
438
// Make Rectangle / Ellipse / Diamond Clipping Paths
439
if(clipkind==1){
440
context.moveTo(x1,y1);
441
context.lineTo(x1,y2);
442
context.lineTo(x2-edgeoffs,y2);
443
context.lineTo(x2-edgeoffs,y1);
444
context.lineTo(x1,y1);
445
}else if(clipkind==2){
446
context.moveTo(x1,y1+ry);
447
context.quadraticCurveTo(x1+edgeoffs,y1+edgeoffs,x1+edgeoffs+rx,y1+edgeoffs);
448
context.quadraticCurveTo(x2-edgeoffs,y1+edgeoffs,x2-edgeoffs,y1+ry+edgeoffs);
449
context.quadraticCurveTo(x2-edgeoffs,y2-edgeoffs,x2-rx-edgeoffs,y2-edgeoffs);
450
context.quadraticCurveTo(x1+edgeoffs,y2-edgeoffs,x1+edgeoffs,y1+ry+edgeoffs);
451
}else if(clipkind==3){
452
context.moveTo(x1,y1+ry);
453
context.lineTo(x1+rx,y2);
454
context.lineTo(x2,y1+ry);
455
context.lineTo(x1+rx,y1);
456
context.lineTo(x1,y1+ry);
457
}
458
459
if(clipkind!=0){
460
context.clip();
461
}
462
463
context.font = font;
464
context.textAlign = "left";
465
context.fillStyle = color;
466
467
var metrics = context.measureText(tex);
468
var hwidth = metrics.width*0.5;
469
470
// Compute left-justified centered coordinate
471
if((rx-hwidth-edgeoffs)<0){
472
tx=x1+edgeoffs;
473
}else{
474
tx=x1+rx-hwidth;
475
}
476
477
context.fillText(tex, tx, y2-ry+baseline);
478
479
// Draw underlining - can handle dashed underline!
480
if(underlinekind==1){
481
drawline(tx,y2-ry+baseline+5.0,tx+(hwidth*2),y2-ry+baseline+5.0,"#000",2.0);
482
}
483
484
if(clipkind!=0) context.restore();
485
376
486
}
377
487
378
488
// Draws cardinality at a certain offset from a coordinate
379
function drawcardinality( x, y, side, tex, xoffs, yoffs, font, baseline, sign, color ) {
380
// Xoffs is along line
381
xoffs = 0;
382
// Yoffs is distance from line
383
yoffs = 10;
384
var metrics = context.measureText( tex );
385
var twidth = metrics.width;
386
var theight = 12;
387
point( x, y, "#f8f" );
388
context.font = font;
389
context.textAlign = "left";
390
context.fillStyle = color;
391
if( side == 1 && sign == 1 ) {
392
context.fillText( tex, x - twidth - xoffs, y - yoffs );
393
drawrect( x - twidth - xoffs, y - yoffs, x - xoffs, y - yoffs - theight);
394
} else if( side == 2 && sign == 1 ) {
395
context.fillText( tex, x + yoffs, y + xoffs + theight );
396
drawrect( x + yoffs, y + xoffs + theight, x + yoffs + twidth, y + xoffs);
397
} else if( side == 3 && sign == 1 ) {
398
context.fillText( tex, x + xoffs, y - yoffs );
399
} else if( side == 4 && sign == 1 ) {
400
context.fillText( tex, x + yoffs, y - xoffs );
401
} else if( side == 1 && sign == 2 ) {
402
context.fillText( tex, x - twidth - xoffs, y + theight + yoffs );
403
drawrect( x - twidth - xoffs, y + yoffs, x - xoffs, y + theight + yoffs);
404
} else if( side == 2 && sign == 2 ) {
405
context.fillText( tex, x - yoffs - twidth, y + xoffs + theight );
406
drawrect( x - yoffs - twidth, y + xoffs, x - yoffs, y + xoffs + theight );
407
} else if( side == 3 && sign == 2 ) {
408
context.fillText( tex, x + xoffs, y + theight + yoffs);
409
} else if( side == 4 && sign == 2 ) {
410
context.fillText( tex, x - yoffs - twidth, y - xoffs);
411
}
489
function drawcardinality(x,y,side,tex,xoffs,yoffs,font,baseline,sign,color)
490
{
491
// Xoffs is along line
492
xoffs=0;
493
// Yoffs is distance from line
494
yoffs=10;
495
496
var metrics = context.measureText(tex);
497
var twidth = metrics.width;
498
var theight = 12;
499
500
point(x,y,"#f8f");
501
502
context.font = font;
503
context.textAlign = "left";
504
context.fillStyle = color;
505
506
if(side==1&&sign==1){
507
context.fillText(tex, x-twidth-xoffs, y-yoffs);
508
drawrect(x-twidth-xoffs, y-yoffs,x-xoffs, y-yoffs-theight);
509
}else if(side==2&&sign==1){
510
context.fillText(tex, x+yoffs, y+xoffs+theight);
511
drawrect(x+yoffs, y+xoffs+theight,x+yoffs+twidth, y+xoffs);
512
}else if(side==3&&sign==1){
513
context.fillText(tex, x+xoffs, y-yoffs);
514
}else if(side==4&&sign==1){
515
context.fillText(tex, x+yoffs, y-xoffs);
516
}else if(side==1&&sign==2){
517
context.fillText(tex, x-twidth-xoffs, y+theight+yoffs);
518
drawrect(x-twidth-xoffs, y+yoffs,x-xoffs, y+theight+yoffs);
519
}else if(side==2&&sign==2){
520
context.fillText(tex, x-yoffs-twidth, y+xoffs+theight);
521
drawrect(x-yoffs-twidth, y+xoffs,x-yoffs, y+xoffs+theight);
522
}else if(side==3&&sign==2){
523
context.fillText(tex, x+xoffs, y+theight+yoffs);
524
}else if(side==4&&sign==2){
525
context.fillText(tex, x-yoffs-twidth, y-xoffs);
526
}
527
412
528
}
413
529
414
530
422
538
423
539
424
540
// Recursive Pos of div in document - should work in most browsers
425
function findPos( obj ){
541
542
function findPos(obj) {
426
543
var curleft = curtop = 0;
427
if( obj.offsetParent ) {
428
curleft = obj.offsetLeft;
429
curtop = obj.offsetTop;
430
while( obj = obj.offsetParent ) {
431
curleft += obj.offsetLeft;
432
curtop += obj.offsetTop;
433
}
434
}
435
return{
436
x:curleft, y:curtop;
437
}
544
if (obj.offsetParent) {
545
curleft = obj.offsetLeft
546
curtop = obj.offsetTop
547
while (obj = obj.offsetParent) {
548
curleft += obj.offsetLeft
549
curtop += obj.offsetTop
550
}
551
}
552
return {
553
x:curleft,
554
y:curtop
555
}
438
556
}
439
557
440
558
// Make side coordinates for drawing Model
559
441
560
function makeside(side,x1,y1,x2,y2,perc){
442
var xk = 0;
443
var yk = 0;
444
if( side == 1 ) {
445
xk = x1;
446
yk = y1 + (( y2-y1 ) * perc );
447
}else if( side == 2 ) {
448
xk = x1 + (( x2 - x1 ) * perc );
449
yk = y2;
450
}else if( side == 3 ) {
451
xk = x2;
452
yk = y1 + (( y2 - y1 ) * perc );
453
}else if( side == 4 ) {
454
xk = x1 + (( x2 - x1 ) * perc );
455
yk = y1;
456
}
457
return{
458
x:xk, y:yk;
459
}
460
}
461
561
562
var xk=0;
563
var yk=0;
564
565
if(side==1){
566
xk=x1;
567
yk=y1+((y2-y1)*perc);
568
}else if(side==2){
569
xk=x1+((x2-x1)*perc);
570
yk=y2;
571
}else if(side==3){
572
xk=x2;
573
yk=y1+((y2-y1)*perc);
574
}else if(side==4){
575
xk=x1+((x2-x1)*perc)
576
yk=y1;
577
}
578
579
return {
580
x:xk,
581
y:yk
582
}
583
584
}
585
462
586
// Computes side identifier for a mouse coordinate and object coordinates
463
function computeside( x, y, x1, y1, x2, y2, sidetol ) {
464
var obj_sidentifier = "None";
465
var obj_sideperc = 0;
466
var obj_centerdist = 0;
467
// Left Side
468
if( x > x1 - sidetol && x < x1 + sidetol && y > y1 - sidetol && y < y2 + sidetol ) {
469
obj_sidentifier = 1;
470
obj_sideperc = makesideperc( y, y1, y2 );
471
obj_centerdist = centerdist( y, y1, y2 );
472
}
473
// Bottom Not Including Left Side or Right Side
474
if( x > x1 + sidetol && x < x2 - sidetol && y > y2 - sidetol && y < y2 + sidetol ) {
475
obj_sidentifier = 2;
476
obj_sideperc = makesideperc( x, x1, x2 );
477
obj_centerdist = centerdist( x, x1, x2 );
478
}
479
// Right Side
480
if( x > x2 - sidetol && x < x2 + sidetol && y > y1 - sidetol && y < y2 + sidetol ) {
481
obj_sidentifier = 3;
482
obj_sideperc = makesideperc( y, y1, y2 );
483
obj_centerdist = centerdist( y, y1, y2 );
484
}
485
// Top Not Including Left Side or Right Side
486
if( x > x1 + sidetol && x < x2 - sidetol && y > y1 - sidetol && y < y1 + sidetol ) {
487
obj_sidentifier = 4;
488
obj_sideperc = makesideperc( x, x1, x2 );
489
obj_centerdist = centerdist( x, x1, x2 );
490
}
491
return {
492
side:obj_sidentifier, perc:obj_sideperc, dist:obj_centerdist;
493
}
587
588
function computeside(x,y,x1,y1,x2,y2,sidetol){
589
590
var obj_sidentifier="None";
591
var obj_sideperc=0;
592
var obj_centerdist=0;
593
594
// Left Side
595
if(x>x1-sidetol&&x<x1+sidetol&&y>y1-sidetol&&y<y2+sidetol){
596
obj_sidentifier=1;
597
obj_sideperc=makesideperc(y,y1,y2);
598
obj_centerdist=centerdist(y,y1,y2);
599
}
600
601
// Bottom Not Including Left Side or Right Side
602
if(x>x1+sidetol&&x<x2-sidetol&&y>y2-sidetol&&y<y2+sidetol){
603
obj_sidentifier=2;
604
obj_sideperc=makesideperc(x,x1,x2);
605
obj_centerdist=centerdist(x,x1,x2);
606
}
607
608
// Right Side
609
if(x>x2-sidetol&&x<x2+sidetol&&y>y1-sidetol&&y<y2+sidetol){
610
obj_sidentifier=3;
611
obj_sideperc=makesideperc(y,y1,y2);
612
obj_centerdist=centerdist(y,y1,y2);
613
}
614
615
// Top Not Including Left Side or Right Side
616
if(x>x1+sidetol&&x<x2-sidetol&&y>y1-sidetol&&y<y1+sidetol){
617
obj_sidentifier=4;
618
obj_sideperc=makesideperc(x,x1,x2);
619
obj_centerdist=centerdist(x,x1,x2);
620
}
621
622
return {
623
side:obj_sidentifier,
624
perc:obj_sideperc,
625
dist:obj_centerdist
626
}
627
494
628
}
495
629
496
630
// Make side perc for ER model
497
function makeSidePerc( x, x1, x2 ) {
498
r = x2 - x1;
499
perc = ( x - x1 ) / r;
500
if( perc > 1.0 ) {
501
perc = 1.0;
502
}
503
if( perc < 0.0 ) {
504
perc = 0.0;
505
}
506
return perc;
631
632
function makesideperc(x,x1,x2){
633
r=x2-x1;
634
perc=(x-x1)/r;
635
636
if(perc>1.0) perc=1.0;
637
if(perc<0.0) perc=0.0;
638
639
return perc;
507
640
}
508
641
509
function centerDist( x, x1, x2 ) {
510
r = x1 + (( x2 - x1 ) * 0.5 );
511
return( x - r );
642
function centerdist(x,x1,x2){
643
r=x1+((x2-x1)*0.5);
644
645
return (x-r);
512
646
}
513
647
514
648
// Euclidian distance - Yo!
515
function distance( x1, y1, x2, y2 ) {
516
var dist = Math.sqrt((( y2 - y1 ) * ( y2 - y1 )) + (( x2 - x1 ) * ( x2 - x1 )));
517
return dist;
649
650
function distance(x1,y1,x2,y2){
651
652
var dist=Math.sqrt(((y2-y1)*(y2-y1))+((x2-x1)*(x2-x1)));
653
654
return dist;
518
655
}
519
656
520
657
// Are we over a line or not.
521
function overline( x, y, x1, y1, x2, y2, tolerance ) {
522
var distance = 10000;
523
dx = x2 - x1;
524
dy = y2 - y1;
525
straighttolerance = 2.0;
526
var box1, boy1, box2, boy2;
527
if( x1 > x2 ) {
528
box1 = x2;
529
box2 = x1;
530
} else {
531
box1 = x1;
532
box2 = x2;
533
}
534
if( y1 > y2 ) {
535
boy1 = y2;
536
boy2 = y1;
537
} else {
538
boy1 = y1;
539
boy2 = y2;
540
}
541
//drawrect(box1-tolerance,boy1-tolerance,box2+tolerance,boy2+tolerance,"#aaa");
542
if(( x > ( box1 - tolerance )) && ( x < ( box2 + tolerance )) && ( y > ( boy1 - tolerance )) && ( y < ( boy2 + tolerance ))) {
543
// Straight X, Straight Y or Positive or Negative Incline
544
if( Math.abs( dx ) < straighttolerance ) {
545
if( y1 < y2 ) {
546
if( y > y1 - tolerance && y < y2 + tolerance ) {
547
distance = Math.abs( x1 - x );
548
}
549
} else {
550
if( y > y2 - tolerance && y < y1 + tolerance ) {
551
distance = Math.abs( x1 - x );
552
}
553
}
554
} else if( Math.abs( dy ) < straighttolerance ) {
555
if( x1 < x2 ) {
556
if( x > x1 - tolerance && x < x2 + tolerance ) {
557
distance = Math.abs( y1 - y );
558
}
559
} else {
560
if( x > x2 - tolerance && x < x1 + tolerance ) {
561
distance = Math.abs( y1 - y );
562
}
563
}
564
} else if( Math.abs( dx ) >= Math.abs( dy )) {
565
k = dy / dx;
566
yk = y1 + (( x - x1 ) * k );
567
distance = Math.abs( yk - y );
568
} else {
569
k = dx / dy;
570
xk = x1 + (( y - y1 ) * k );
571
distance = Math.abs( xk - x );
572
}
573
}
574
return distance;
575
}
b'\\ No newline at end of file'
658
659
function overline(x,y,x1,y1,x2,y2,tolerance)
660
{
661
var distance=10000;
662
663
664
dx=x2-x1;
665
dy=y2-y1;
666
667
straighttolerance=2.0;
668
669
var box1,boy1,box2,boy2;
670
671
if(x1>x2){
672
box1=x2;
673
box2=x1;
674
}else{
675
box1=x1;
676
box2=x2;
677
}
678
679
if(y1>y2){
680
boy1=y2;
681
boy2=y1;
682
}else{
683
boy1=y1;
684
boy2=y2;
685
}
686
687
// drawrect(box1-tolerance,boy1-tolerance,box2+tolerance,boy2+tolerance,"#aaa");
688
689
if((x>(box1-tolerance))&&(x<(box2+tolerance))&&(y>(boy1-tolerance))&&(y<(boy2+tolerance))){
690
// Straight X, Straight Y or Positive or Negative Incline
691
if(Math.abs(dx)<straighttolerance){
692
if(y1<y2){
693
if(y>y1-tolerance&&y<y2+tolerance){
694
distance=Math.abs(x1-x);
695
}
696
}else{
697
if(y>y2-tolerance&&y<y1+tolerance){
698
distance=Math.abs(x1-x);
699
}
700
}
701
}else if(Math.abs(dy)<straighttolerance){
702
if(x1<x2){
703
if(x>x1-tolerance&&x<x2+tolerance){
704
distance=Math.abs(y1-y);
705
}
706
}else{
707
if(x>x2-tolerance&&x<x1+tolerance){
708
distance=Math.abs(y1-y);
709
}
710
}
711
}else if(Math.abs(dx)>=Math.abs(dy)){
712
k=dy/dx;
713
yk=y1+((x-x1)*k);
714
distance=Math.abs(yk-y);
715
}else{
716
k=dx/dy;
717
xk=x1+((y-y1)*k);
718
distance=Math.abs(xk-x);
719
}
720
}
721
722
return distance;
723
724
}
b'\\ No newline at end of file'
Loggerhead is a web-based interface for Breezy
Version: 2.0.2.dev0