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