comparison public/viewer/viewer_white.html @ 101:098e87253903 draft

modfied jsPlumb
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Sun, 17 Mar 2013 00:40:38 +0900
parents 06e419562734
children 8d8e6c2bfec2
comparison
equal deleted inserted replaced
100:06e419562734 101:098e87253903
28 background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223)); 28 background:-webkit-gradient(linear,left top,left bottom,from(#002),to(#223));
29 color:silver; 29 color:silver;
30 font-size:40px; 30 font-size:40px;
31 } 31 }
32 div.graphNode { 32 div.graphNode {
33 position:absolute;
34 font-size:12px; padding:4px; background:white;
33 z-index:20; 35 z-index:20;
34 position:absolute; width:92px; height40px; font-size:12px; padding:4px; background:white; 36 width: 50px;
37 height 50px;
38 border-radius:50px;
35 border:2px solid silver; 39 border:2px solid silver;
36 overflow:hidden; 40 overflow:hidden;
37 border-radius:5px;
38 cursor:pointer; 41 cursor:pointer;
39 border-color:"blue"; 42 border-color:"blue";
40 </style> 43 </style>
41
42
43 44
44 <div class='header'> 45 <div class='header'>
45 <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr> 46 <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr>
46 </div> 47 </div>
47 48
60 </div> 61 </div>
61 </div> 62 </div>
62 63
63 <div style="position:relative;left:0;top:0;" id='graphMain'> 64 <div style="position:relative;left:0;top:0;" id='graphMain'>
64 <div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'> 65 <div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
65 <div style="position:absolute;">
66 </div> 66 </div>
67 </div> 67 </div>
68 68
69 69
70 <script type="text/javascript"> 70 <script type="text/javascript">
246 offsetTop:100, 246 offsetTop:100,
247 offsetBottom:100, 247 offsetBottom:100,
248 offsetLeft:100, 248 offsetLeft:100,
249 offsetRight:100, 249 offsetRight:100,
250 nodeWidth:120, 250 nodeWidth:120,
251 odeHeight:60, 251 nodeHeight:60,
252 intervalX:140, 252 intervalX:140,
253 intervalY:120 253 intervalY:120
254 }; 254 };
255 255
256 function start() { 256 function start() {
272 /* test code */ 272 /* test code */
273 var n1 = {property:{title:"tokage"}}; 273 var n1 = {property:{title:"tokage"}};
274 var n2 = {property:{title:"ttt"}}; 274 var n2 = {property:{title:"ttt"}};
275 updateNode(n1); 275 updateNode(n1);
276 updateNode(n2); 276 updateNode(n2);
277
278 var e1 = new Edge(rootNode, n1, "dependency");
279 var e2 = new Edge(n1, n2, "dependency");
280 edgeArray.push(e1);
281 edgeArray.push(e2);
282 paintEdge();
283 /*
277 var c = jsPlumb.connect({source:n1.view[0], target:n2.view[0]}); 284 var c = jsPlumb.connect({source:n1.view[0], target:n2.view[0]});
278 c.setLabel({label:"<span style='color:white;'>"+"</span>",cssStyle:"color:white"}); 285 c.setLabel({label:"<span style='color:white;'>"+"</span>",cssStyle:"color:white"});
279 jsPlumb.repaintEverything(); 286 jsPlumb.repaintEverything();
280 jsPlumb.removeAllEndpoints(); 287 jsPlumb.removeAllEndpoints();
288 */
289 }
290
291 var edgeArray = new Array();
292 function Edge(fromNode, toNode, relation) {
293 var obj = {from:fromNode, to:toNode, rel:relation };
294 return obj;
295 }
296
297 function paintEdge() {
298 var array = edgeArray;
299 for (var i=0; i<array.length; i++) {
300 var fromNode = array[i].from;
301 var toNode = array[i].to;
302 var rel = array[i].rel;
303 var c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]});
304 c.setLabel({label:"<span style='color:white;'>"+"</span>",cssStyle:"color:white"});
305 }
306 jsPlumb.removeAllEndpoints();
307 jsPlumb.draggable($('.graphNode'));
308 /*
309 jsPlumb.repaintEverything();
310 */
281 } 311 }
282 312
283 /* sample data */ 313 /* sample data */
284 sampleJSON1 = { 314 sampleJSON1 = {
285 id:"5", 315 id:"5",