Mercurial > hg > Members > nobuyasu > Consensus
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", |