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