Mercurial > hg > Members > nobuyasu > Consensus
comparison public/viewer/viewer_white.html @ 107:42799d9c3753 draft
create parseJSONDate function
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Sun, 17 Mar 2013 19:53:59 +0900 |
parents | 60a0ff0b3096 |
children | bf0b1f71ac81 |
comparison
equal
deleted
inserted
replaced
106:60a0ff0b3096 | 107:42799d9c3753 |
---|---|
209 Connector : [ "Straight", { curviness:50 } ], | 209 Connector : [ "Straight", { curviness:50 } ], |
210 PaintStyle : { strokeStyle:"gray", lineWidth:2 }, | 210 PaintStyle : { strokeStyle:"gray", lineWidth:2 }, |
211 EndpointStyle : {}, | 211 EndpointStyle : {}, |
212 Anchors: ["BottomCenter","TopCenter"], | 212 Anchors: ["BottomCenter","TopCenter"], |
213 }); | 213 }); |
214 $("#graphRoot").css({ | |
215 left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX, | |
216 top: ViewParam.offsetTop + ViewParam.nodeHeight/2 | |
217 }); | |
218 $("#graphMain").css({ | |
219 width: ViewParam.intervalX * 1 + ViewParam.nodeWidth+ViewParam.offsetLeft + ViewParam.offsetRight, | |
220 height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom, | |
221 top:50 | |
222 }); | |
223 | |
214 } | 224 } |
215 | 225 |
216 function showMiniDisplay(jsonInfo) { | 226 function showMiniDisplay(jsonInfo) { |
217 $("#miniDisplay").css("visibility", "visible"); | 227 $("#miniDisplay").css("visibility", "visible"); |
218 writeJSONDataToMiniDisplay(jsonInfo) | 228 writeJSONDataToMiniDisplay(jsonInfo) |
282 init(); | 292 init(); |
283 var rootNode = new Object(); | 293 var rootNode = new Object(); |
284 rootNode.property = sampleJSON1; | 294 rootNode.property = sampleJSON1; |
285 showMiniDisplay(rootNode); | 295 showMiniDisplay(rootNode); |
286 updateNode(rootNode); | 296 updateNode(rootNode); |
287 $("#graphRoot").css({ | |
288 left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX, | |
289 top: ViewParam.offsetTop + ViewParam.nodeHeight/2 | |
290 }); | |
291 $("#graphMain").css({ | |
292 width: ViewParam.intervalX * 1 + ViewParam.nodeWidth+ViewParam.offsetLeft + ViewParam.offsetRight, | |
293 height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom, | |
294 top:50 | |
295 }); | |
296 | |
297 /* test code */ | 297 /* test code */ |
298 var n1 = {property:{title:"task2"}}; | 298 var n1 = {property:{title:"task2"}}; |
299 var n2 = {property:{title:"task3"}}; | 299 var n2 = {property:{title:"task3"}}; |
300 updateNode(n1); | 300 updateNode(n1); |
301 updateNode(n2); | 301 updateNode(n2); |
320 hoverPaintStyle:{strokeStyle:"#dbe300"}, | 320 hoverPaintStyle:{strokeStyle:"#dbe300"}, |
321 endpoint:"Blank", | 321 endpoint:"Blank", |
322 anchor:"Continuous", | 322 anchor:"Continuous", |
323 overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]] | 323 overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]] |
324 }; | 324 }; |
325 | |
325 function paintEdge() { | 326 function paintEdge() { |
326 | |
327 var array = edgeArray; | 327 var array = edgeArray; |
328 for (var i=0; i<array.length; i++) { | 328 for (var i=0; i<array.length; i++) { |
329 var fromNode = array[i].from; | 329 connectGraph(array[i]); |
330 var toNode = array[i].to; | |
331 var rel = array[i].rel; | |
332 var c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, stateMachineConnector); | |
333 c.setLabel({label:"<span style='color:black;'>"+rel+"</span>",cssStyle:"color:black"}); | |
334 } | 330 } |
335 jsPlumb.removeAllEndpoints(); | 331 jsPlumb.removeAllEndpoints(); |
336 jsPlumb.draggable($('.graphNode')); | 332 jsPlumb.draggable($('.graphNode')); |
337 /* | 333 /* |
338 jsPlumb.repaintEverything(); | 334 jsPlumb.repaintEverything(); |
339 */ | 335 */ |
336 } | |
337 | |
338 function connectGraph(graphObj) { | |
339 var fromNode = graphObj.from; | |
340 var toNode = graphObj.to; | |
341 var rel = graphObj.rel; | |
342 var c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, stateMachineConnector); | |
343 c.setLabel({label:"<span style='color:black;'>"+rel+"</span>",cssStyle:"color:black"}); | |
344 return c; | |
345 } | |
346 | |
347 function GraphData() { | |
348 /* | |
349 function graph() { | |
350 var g = {}; | |
351 g.property = {}; | |
352 g.in = {}; | |
353 g.out = {}; | |
354 g.both = {}; | |
355 return g; | |
356 } | |
357 function edge() { | |
358 var e = {}; | |
359 e.property = {}; | |
360 return e; | |
361 } | |
362 */ | |
363 var graphData = {}; | |
364 graphData.graphs = {}; | |
365 graphData.edges = {}; | |
366 return graphData; | |
367 } | |
368 | |
369 | |
370 function parseJSONGraphData(memory ,jsonObj) { | |
371 var graphs = jsonObj.graphs; | |
372 for (var i=0; i<graphs.length; i++) { | |
373 var graph = graphs[i]; | |
374 memory.graphs[graph.id].property = graph; | |
375 } | |
376 var edges = jsonObj.edges; | |
377 for (var i=0; i<edges.length; i++) { | |
378 var edge = edges[i]; | |
379 var edgeId = edge.id; | |
380 memory.edges[edgeId].property = edge; | |
381 if (edge.kind == "both") { | |
382 memory.graphs[edge.from].both.append(edgeId); | |
383 memory.graphs[edge.to].both.append(edgeId); | |
384 } else { | |
385 memory.graphs[edge.from].out.append(edgeId); | |
386 memory.graphs[edge.to].in.append(edgeId); | |
387 } | |
388 } | |
340 } | 389 } |
341 | 390 |
342 /* sample data */ | 391 /* sample data */ |
343 sampleJSON1 = { | 392 sampleJSON1 = { |
344 id:"5", | 393 id:"5", |
346 kind:"agreed", | 395 kind:"agreed", |
347 createdUser:"oshiro", | 396 createdUser:"oshiro", |
348 createdDate: new Date() | 397 createdDate: new Date() |
349 }; | 398 }; |
350 | 399 |
400 sampleJSONData = { | |
401 graphs: [ | |
402 { | |
403 id:"1", | |
404 kind:"agree", | |
405 createdUser:"osrhiro" | |
406 }, | |
407 { | |
408 id:"2", | |
409 kind:"reject", | |
410 createdUser:"kinjo" | |
411 }, | |
412 { | |
413 id:"3", | |
414 kind:"agree", | |
415 createdUser:"tamayose" | |
416 } | |
417 ], | |
418 edges: [ | |
419 { | |
420 id:"11", | |
421 from:"1", | |
422 to:"2", | |
423 rel:"dependency", | |
424 type:"" | |
425 }, | |
426 { | |
427 id:"12", | |
428 from:"2", | |
429 to:"3", | |
430 rel:"dependency", | |
431 type:"" | |
432 }, | |
433 { | |
434 id:"13", | |
435 from:"3", | |
436 to:"1", | |
437 rel:"dependency", | |
438 type:"both" | |
439 } | |
440 ] | |
441 }; | |
442 | |
351 </script> | 443 </script> |
352 | 444 |