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