Mercurial > hg > Members > nobuyasu > html > graphViewer

changeset 16:1af36503e849 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
modified show.html
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Thu, 21 Mar 2013 03:14:25 +0900
parents ed6b969b2fc8
children 02b5c7fe5d08
files show.html
diffstat 1 files changed, 89 insertions(+), 62 deletions(-) [+]
line wrap: on
line diff
--- a/show.html	Wed Mar 20 22:44:39 2013 +0900
+++ b/show.html	Thu Mar 21 03:14:25 2013 +0900
@@ -79,6 +79,23 @@
     }
 }
 
+var arrowConnector = {
+    connector:"StateMachine",
+    //    paintStyle:{lineWidth:3,strokeStyle:"#056"},
+    paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
+    hoverPaintStyle:{strokeStyle:"#dbe300"},
+    endpoint:"Blank",
+    anchor:"Continuous",
+    overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
+};
+
+var arrowBothConnector = {
+    connector:"StateMachine",
+    paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
+    hoverPaintStyle:{strokeStyle:"#dbe300"},
+    endpoint:"Blank",
+};
+
 function GraphData() {
     var graphData = {};
     graphData.nodes = {};
@@ -91,11 +108,6 @@
     return obj;
 }
 
-function beginScript() {
-    DragHandler.attach($('#miniDisplay')[0]);
-    DragHandler.attach($('#traverseDisplay')[0]);
-}
-
 var DragHandler = {
     _oElem : null,
     _id : null,
@@ -146,24 +158,6 @@
 
 };
 
-function addLoadEvent(func) {
-    var oldonload = window.onload;
-    if (typeof window.onload != 'function') {
-	window.onload = func;
-    } else {
-	window.onload = function() {
-	    if (oldonload) {
-		oldonload();
-	    }
-	    func();
-	}
-    }
-}
-
-addLoadEvent(function() {
-    beginScript();
-});
-
 function writeMiniDisplay(title,str) {
     $('#miniDisplayBody')[0].innerHTML = str;
     if(title) {
@@ -236,8 +230,8 @@
     var heightStr = $('#traverseDisplay').css('height').split('px')[0];
     var height = parseInt(heightStr);
     $('#miniDisplay').css( {
-	left: rootLeft,
-	top: rootTop + height + 50
+	left: rootLeft + 'px',
+	top: rootTop + height + 50 + 'px'
     });
 }
 
@@ -257,13 +251,13 @@
 }
 
 var nodeNum = 0;
-var OFFSET = 200;
+var OFFSET = 300;
 var miniD = $('#miniDisplay')[0].style;
 var offsetLeft = parseInt(miniD.width.split('px')[0]);
 var offsetTop = parseInt(miniD.height.split('px')[0]);
 function calcNewNodePosition() {
     var position = {};
-    position = {x: offsetLeft, y: nodeNum*OFFSET + offsetTop / 3};
+    position = {x: offsetLeft+OFFSET, y: nodeNum*OFFSET + offsetTop / 3};
     nodeNum++;
     return position;
 }
@@ -392,23 +386,6 @@
     intervalY:120
 };
 
-var arrowConnector = {
-    connector:"StateMachine",
-    //    paintStyle:{lineWidth:3,strokeStyle:"#056"},
-    paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
-    hoverPaintStyle:{strokeStyle:"#dbe300"},
-    endpoint:"Blank",
-    anchor:"Continuous",
-    overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
-};
-
-var arrowBothConnector = {
-    connector:"StateMachine",
-    paintStyle:{lineWidth:2,strokeStyle:"#aaf"},
-    hoverPaintStyle:{strokeStyle:"#dbe300"},
-    endpoint:"Blank",
-};
-
 function parseJSONGraphData(memory ,jsonObj) {
     var nodes = jsonObj.nodes;
     for (var i=0; i<nodes.length; i++) {
@@ -429,25 +406,16 @@
 	memory.edges[edgeId] = {};
 	memory.edges[edgeId].property = edge;
 	memory.edges[edgeId].visible = false;
-	if (edge.kind == "both") {
-	    memory.nodes[edge.from].both.push(edgeId);
-	    memory.nodes[edge.to].both.push(edgeId);
-	} else {
-	    memory.nodes[edge.from].out.push(edgeId);
-	    memory.nodes[edge.to].in.push(edgeId);
-	}
+	memory.nodes[edge.from].out.push(edgeId);
+	memory.nodes[edge.to].in.push(edgeId);
     }
     return memory;
 }
 
 function showEdge(graphData, edge) {
-    function connectEdge(fromNode, toNode, kind, type) {
+    function connectEdge(fromNode, toNode, kind) {
 	var c;
-	if (type == 'both') {
-	    c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowBothConnector);
-	} else {
-	    c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowConnector);
-	}
+	c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowConnector);
 	//	jsPlumb.select({source:fromNode.view[0]}).removeAllOverlays();
 	c.setLabel({label:"<span style='color:#129; font-size:1.5em;'>"+kind+"</span>",cssStyle:""});
 	return c;
@@ -457,8 +425,7 @@
     var toNode = graphData.nodes[edge.property.to];
     if (!fromNode.view && !toNode.view) return;
     var kind = edge.property.kind;
-    var type = edge.property.type;
-    connectEdge(fromNode, toNode, kind, type);
+    connectEdge(fromNode, toNode, kind);
     edge.visible = true;
 }
 
@@ -576,6 +543,13 @@
     /* calcration of childNode position */
     var numCalcChild = 0;
     var childArray = {};
+    for (var i=0; i<childNodeIds.length; i++) { 
+	var id = childNodeIds[i];
+	var childNode = graphData.nodes[id];
+	if (childNode.position) {
+	    numCalcChild++;
+	}
+    }
     for (var i=0; i<childNodeIds.length; i++) {
 	var id = childNodeIds[i];
 	var childNode = graphData.nodes[id];
@@ -599,6 +573,40 @@
     }
 }
 
+function createNodeElement(node) {
+    var created = false;
+    if(!node.view) {
+	created = true;
+	createNodeDiv(node);
+    }
+    var div = node.view;
+    node.view[0].nodeId = node.property.id;
+    //    div.text(node.property.title);
+    div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);});
+    DragHandler.attach($(node.view)[0]);
+    var kindBackground = {agree:"#aaf", rejected:"#fff"};
+    var kindBorder = {agree:"#66a", rejected:"#a66"};
+    div.css("background", kindBackground[node.kind]||"white");
+    div.css("border-color", kindBorder[node.kind] ||"#58f");
+    div.css({
+	left: node.position.x,
+	top: node.position.y
+    }); 
+    return created;    
+}
+
+
+function showNode(node) {
+    if(createNodeElement(node)) {
+	var fc = $('#graphRoot')[0].firstChild;
+	if(fc) {
+	    $('#graphRoot')[0].insertBefore(node.view[0], fc);
+	} else {
+	    $('#graphRoot').append(node.view);
+	}
+    }
+}
+
 var GRAPH_DATA = new GraphData();
 function startUserDesktopUI() {
     function showFirstEvidenceList(graphData) {
@@ -621,10 +629,29 @@
     });
 }
 
-$(function() {
+function addLoadEvent(func) {
+    var oldonload = window.onload;
+    if (typeof window.onload != 'function') {
+	window.onload = func;
+    } else {
+	window.onload = function() {
+	    if (oldonload) {
+		oldonload();
+	    }
+	    func();
+	}
+    }
+}
+
+addLoadEvent(function() {
+    beginScript();
+});
+
+function beginScript() {
+    DragHandler.attach($('#miniDisplay')[0]);
+    DragHandler.attach($('#traverseDisplay')[0]);
     start();
-})
-
+}
 
 </script>