3
<script type="text/javascript" src="jquery.js"></script>
4
<script lang='Javascript'>
10
// Multi-select move offset
13
// Drawing Globals -- For while in transit drawing
20
// List of identifiers
21
// List of selected object identifiers
23
var Objects = new Array();
24
var Selected = new Array();
25
var Identifiers = new Array();
29
// User Interface Mode Variables
31
var dragsensitivity = 12;
36
User interface callbacks
38
function handler_mouseup()
41
// Either select on/off for multi or single select
43
if(Selected[downRes.objid]) {
44
Selected[downRes.objid] = false;
46
Selected[downRes.objid] = true;
49
if(ContextObj == downRes.objid) {
52
ContextObj = downRes.objid;
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;
67
upobj = Objects[downRes.objid];
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){
76
perco = makesideperc(gridy, upRes.y1, upRes.y2);
77
} else if(x2g <= x1g && x2g <= y1g && x2g <= y2g){
79
perco = makesideperc(gridy, upRes.y1, upRes.y2);
80
} else if(y1g <= x1g && y1g <= x2g && y1g <= y2g){
82
perco = makesideperc(gridx, upRes.x1, upRes.x2);
83
} else if(y2g <= x1g && y2g <= x2g && y2g <= y1g){
85
perco = makesideperc(gridx, upRes.x1, upRes.x2);
88
obj.DrawtoPerc = perco;
90
if(upRes.typ == "ERAttribute" || upRes.typ == "ERRel") obj.DrawtoPerc = 0.5;
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;
105
obj.DrawtoIDDest = upRes.objid;
106
obj.DrawtoSideDest = upRes.side;
107
obj.DrawtoPercDest = upRes.sideperc;
108
obj.DrawfromSideDest = downRes.side;
111
upobj = Objects[downRes.objid];
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) {
120
perco = makesideperc(gridy, upRes.y1, upRes.y2);
121
} else if(x2g <= x1g && x2g <= y1g && x2g <= y2g) {
123
perco = makesideperc(gridy, upRes.y1, upRes.y2);
124
} else if(y1g <= x1g && y1g <= x2g && y1g <= y2g) {
126
perco = makesideperc(gridx, upRes.x1, upRes.x2);
127
} else if(y2g <= x1g && y2g <= x2g && y2g <= y1g){
129
perco = makesideperc(gridx, upRes.x1, upRes.x2);
131
if(obj.DrawtoID == "None") {
132
obj.DrawtoID = upRes.objid;
133
obj.DrawtoSide = sid;
134
obj.DrawtoPerc = perco;
135
obj.DrawfromSide = downRes.side;
137
obj.DrawtoIDDest = upRes.objid;
138
obj.DrawtoSideDest = sid;
139
obj.DrawtoPercDest = perco;
140
obj.DrawfromSideDest = downRes.side;
152
function handler_mousedown() {
154
downRes = mouseover(gridx, gridy);
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;
167
deltax = startx - gridx;
168
deltay = starty - gridy;
169
// We start drag mode
170
if((distance(gridx, gridy, startx, starty) > dragsensitivity) && clickstate == 1) {
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"))) {
179
// Single Object Scale Left
180
if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "1")) {
183
// Single Object Scale Bottom
184
if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "2")) {
187
// Single Object Scale Right
188
if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "3")) {
191
// Single Object Scale Top
192
if((downRes.typ == "Entity" || downRes.typ == "ERAttribute") && (downRes.code == "Cont" && downRes.side == "4")) {
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;
211
drawlinedx = drawlinesx;
212
drawlinedy = drawlinesy;
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;
232
drawlinedx = drawlinesx;
233
drawlinedy = drawlinesy;
238
var obj = Objects[downRes.objid];
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
260
* Call-forward for mouse-over event
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";
267
var obj_sidentifier =" None";
268
var obj_sideperc = 0;
269
var obj_centerdist = 0;
270
var obj_type = "None";
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) {
287
// Compute coordinates including offset
288
if(obj.type == "Entity" || obj.type == "ERAttribute" || obj.type == "ERRel") {
293
rx = (x2 - x1) * 0.5;
294
ry = (y2 - y1) * 0.5;
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)) {
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;
314
} else if(obj.type=="ERAttribute") {
315
if(x > (x1 - sidetol) && y > (y1 - sidetol) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
321
if(obj.DrawtoID == "None") {
322
obj_code = "ContDraw";
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;
333
} else if(obj.type == "ERRel") {
334
if(x > (x1 - sidetol) && y > (y1 - sidetol) && x < (x2 + sidetol) && y < (y2 + sidetol)) {
336
// Colision detection against diamond
339
if(y > (y1 + ry - xk - sidetol) && y < (y1 + ry + xk + sidetol)) {
343
if(y > (y1 - rx + xk - sidetol) && y < ( y2 + rx - xk + sidetol)) {
348
if((x > (x1 - sidetol)) && (x < (x1 + sidetol)) && (y > (y1 + ry - sidetol)) && (y < (y1 + ry + sidetol))) {
351
if((x > (x1 + rx - sidetol)) && (x < (x1 + rx + sidetol)) && (y > (y2 - sidetol)) && (y < (y2 + sidetol))) {
354
if((x > (x2 - sidetol)) && (x < (x2 + sidetol)) && (y > (y1 + ry - sidetol)) && (y < (y1 + ry + sidetol))) {
357
if((x > (x1 + rx - sidetol)) && (x < (x1 + rx + sidetol)) && (y > (y1 - sidetol)) && (y < (y1 + sidetol))) {
365
if(obj.DrawtoID == "None"){
366
obj_code = "ContDraw";
367
} else if(obj.DrawtoIDDest == "None") {
368
obj_code = "ContDraw";
379
// Save coordinates at time of click
386
printstr=obj_id + " " + obj_sidentifier + " " + obj_sideperc;
392
side:obj_sidentifier,
393
sideperc:obj_sideperc,
394
centerdist:obj_centerdist,
406
function importdata() {
407
for(i = 0; i < 7; i++) {
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":""}');
412
obj = jQuery.parseJSON('{"type":"Entity","id":"ENT2","kind":"Weak","name":"Carsmashoepppoloo","x1":100,"y1":160,"x2":220,"y2":220}');
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":""}');
418
obj = jQuery.parseJSON('{"type":"Entity","id":"ENT4","kind":"Strong","name":"Trailerfpdddpeoooooe","x1":320,"y1":260,"x2":420,"y2":320}');
421
obj = jQuery.parseJSON('{"type":"Entity","id":"ENT5","kind":"Strong","name":"Grail","x1":120,"y1":440,"x2":220,"y2":480}');
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":""}');
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":""}');
430
Objects[objid] = obj;
431
Identifiers.push(objid);
437
* Prepares all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
438
* Ofss in prepare are not finished.
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];
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;
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;
469
* Draws all kinds of objects, with local movement-offset (scrolling offset is handled with transforms??)
471
function drawobj(obji) {
472
var obj = Objects[obji];
473
var Sel = Selected[obji];
474
if(ContextObj == obji) {
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") {
487
rx = (x2 - x1) * 0.5;
488
ry = (y2 - y1) * 0.5;
490
if(obj.type == "Entity") {
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);
498
cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 1, 0);
500
// Draw Select Marker
502
fourpoints(x1, y1 + ry, x2, y1 + ry, x1 + rx, y1, x1 + rx, y2, "#5f8");
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);
509
cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 2, 0);
511
if(obj.DrawtoID != "None") {
512
drawline(obj.DrawX1, obj.DrawY1, obj.DrawX2, obj.DrawY2, "#000", 2.0);
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");
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":""}');
529
if(obj.DrawtoIDDest != "None") {
530
drawline(obj.DrawX3, obj.DrawY3, obj.DrawX4, obj.DrawY4, "#000", 2.0);
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);
537
drawdiamond(x1, y1, x2, y2, 0);
538
cliptext(x1, y1, x2, y2, obj.name, "20px Calibri", "center", 8, 6, "#000", 3, 0);
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");
544
if(obj.DrawfromSide != 1 && obj.DrawfromSideDest != 1) {
545
point(x1, y1 + ry, "#fa2");
547
if(obj.DrawfromSide != 2 && obj.DrawfromSideDest != 2) {
548
point(x1 + rx, y2, "#fa2");
550
if(obj.DrawfromSide != 3 && obj.DrawfromSideDest != 3) {
551
point(x2, y1 + ry, "#fa2");
553
if(obj.DrawfromSide != 4 && obj.DrawfromSideDest != 4) {
554
point(x1 + rx, y1, "#fa2");
565
context.clearRect(0, 0, 600, 600);
566
// overline(gridx,gridy,150,550,550,300,8.0);
568
context.strokeStyle = '#ddd';
569
context.lineWidth = 0.5;
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);
579
if(drawlinekind == 1) {
580
drawline(drawlinesx, drawlinesy, drawlinedx, drawlinedy, "#000", 1.0);
582
// Prepare model objects
583
for(i = 0; i < Identifiers.length; i++){
584
var objid = Identifiers[i];
587
// Draw model objects
588
for(i = 0; i < Identifiers.length; i++){
589
var objid = Identifiers[i];
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);
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);
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>
611
9
<body onload="setupcanvas();">
615
<canvas id='a' width='600' height='600' style='border:2px solid black;'>
13
<canvas id='a' width='600' height='600'>
619
<div style="border:2px solid black;background-color:#fed;width:300;height:450;">
620
<div id="infobox" style="padding:4px;">
621
19
Change values to update diagram.<br>