Mercurial > hg > Members > nobuyasu > html > graphViewer

changeset 53:f35d7cada438 draft default tip

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 Mon, 25 Mar 2013 02:11:20 +0900
parents 5653ab0091be
children
files show.html
diffstat 1 files changed, 90 insertions(+), 48 deletions(-) [+]
line wrap: on
line diff
--- a/show.html	Sun Mar 24 20:25:01 2013 +0900
+++ b/show.html	Mon Mar 25 02:11:20 2013 +0900
@@ -30,13 +30,12 @@
 	<script type="text/javascript">var _desktopid = ${desktop.id};function desktopid(){return _desktopid;}</script>
 
 
-<div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'>
+<div class="graphMainCss" style="position:relative; left:0; top:0; width:900px; height:700px;"  id='graphMain'>
     <div  style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
     </div>
 </div>
 
-
-<div id="miniDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'>
+<div id="miniDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:1; z-index:10; visibility:hidden;'>
     <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div>
     <div id="closeMiniDisplay" style='position:absolute; right:5px; top:-3px; z-index:10; color:white;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','yellow');" onmouseout="$('#closeMiniDisplay').css('color','white')" >CLOSE</div>
     <div style='position:absolute; width:90%; height:90%;'>
@@ -53,6 +52,10 @@
 
 <div class='contextMenu' id='selectMenu'>
     <ul>
+	<div class='contextMenuTitle' >Menu</div>
+	<div id='nodeInformationMenu'>
+	    <li id='nodeInformation' class='contextMenuContent'>information</li>
+	</div>
 	<div class='contextMenuTitle' >State Select</div>
 	<div id='stateSlectMenu'>
 	    <li id='stateAccept' class='contextMenuContent'>accept</li>
@@ -116,6 +119,22 @@
     graphData.edges = {};
     return graphData;
 }
+
+var NODE_SIZE = -50;
+var WIDTH = $('#graphMain')[0].offsetWidth + NODE_SIZE;
+var HEIGHT = $('#graphMain')[0].offsetHeight + NODE_SIZE;
+function checkPositionX(x) {
+    var nextX = x;
+    if (x < 0) nextX = 0;
+    if (WIDTH < x) nextX = WIDTH;
+    return nextX;
+}
+function checkPositionY(y) {
+    var nextY = y;
+    if (y < 0) nextY = 0;
+    if (HEIGHT < y) nextY = HEIGHT;
+    return nextY;
+}
 var DragHandler = {
     _oElem : null,
     attach : function(oElem) {
@@ -142,8 +161,8 @@
 	e = e ? e : window.event;
 	var nextX =  x + (e.clientX - oElem.mouseX);
 	var nextY =  y + (e.clientY - oElem.mouseY);
-	if (nextX < 0) nextX = 0;
-	if (nextY < 0) nextY = 0;
+	nextX = checkPositionX(nextX);
+	nextY = checkPositionY(nextY);
 	oElem.style.left = nextX + 'px';
 	oElem.style.top = nextY  + 'px';
 	oElem.mouseX = e.clientX;
@@ -165,8 +184,8 @@
 	    var x = parseInt(oElem.style.left);
 	    var y = parseInt(oElem.style.top);
 	    var node = GRAPH_DATA.nodes[oElem.nodeId];
-	    if (x < 0) x = 0;
-	    if (y < 0) y = 0;
+	    x = checkPositionX(x);
+	    y = checkPositionY(y);
 	    node.position.x = x;
 	    node.position.y = y;
 	    nodePositionPost(node);
@@ -188,13 +207,24 @@
     coordY : 1,
     metrics : 1
 };
+
+function addFigure(str) {
+    var num = new String(str).replace(/,/g, "");
+    while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
+    return num;
+}
+
 function getMetricsStr(metricsArray) {
-    var str = "";
-    str = "Metrics :<br>";
+    var str = "<br>Metrics :<br>";
     for (var i=0; i<metricsArray.length; i++) {
 	var metrics = metricsArray[i];
 	for (var key in metrics) {
-	    str = str + key + " : " + metrics[key] +"<br>";
+	    var value = metrics[key];
+	    if (isFinite(value)) {
+		str = str + "&nbsp;&nbsp;&nbsp;"+ key + " : " + addFigure(value) +"<br>";
+	    } else {
+		str = str + key + " : " + value +"<br>";		
+	    }
 	}
     }
     return str;
@@ -204,7 +234,7 @@
     var str = "";
     for (var key in jsonObj.property) {
 	if (!NotDisplayProperty[key]) {
-	    str = str + key + ": "+ jsonObj.property[key] + "<br>";	    
+	    str = str +key + ": "+ jsonObj.property[key] + "<br>";	    
 	}
     }
     if (jsonObj.property['metrics']) {
@@ -224,7 +254,7 @@
 
 function createEdgeInfoDiv(nodeId, edgeInfo) {
     function createEdgeInfoinnerHTML(_edgeInfo) {
-	return _edgeInfo.kind + " : " + _edgeInfo.num + ": " + _edgeInfo.direction;
+	return _edgeInfo.kind + " : " + _edgeInfo.direction + ": " +  _edgeInfo.num;
     }
     var edgeInfoDiv = $('<div class="menuContent"/>')
     edgeInfoDiv[0].innerHTML = createEdgeInfoinnerHTML(edgeInfo);
@@ -232,29 +262,6 @@
     return edgeInfoDiv;
 }
 
-function updateEdgeInfoDisplay() {
-    var nodeId = CURRENT_DATA.nodeId;
-    var node = GRAPH_DATA.nodes[nodeId];
-    showEdgeInfoDisplay(node);
-}
-
-function showEdgeInfoDisplay(node) {
-    removeTraverseMenuBody();
-    var tMenuBody = $('#traverseMenuBody');
-    var edgeInfoArray = node.property.edgeInfo;
-    for (var i=0; i<edgeInfoArray.length; i++) {
-	var edgeInfo = edgeInfoArray[i];
-	if (!edgeInfo.view) {
-	    edgeInfo.view = createEdgeInfoDiv(node.property.id, edgeInfo);
-	} else {
-	    setEdgeInfoClickFunction(node.property.id, edgeInfo, edgeInfo.view);
-	}
-	appendElement(tMenuBody, edgeInfo.view);
-    }
-    updateMenuDisplayHeight();
-    $('#accesDocument').click(function(){  });
-}
-
 function appendElement(menuBodyDiv, menuContentDiv) {
     menuBodyDiv.append(menuContentDiv);
 }
@@ -268,20 +275,31 @@
 	appendElement(body, div);
 }
 
-function showMiniDisplay(node) {
+function hiddenMiniDisplay() {
+    $('#miniDisplay').css('visibility', "hidden");
+}
+
+function visibleMiniDisplay() {
+    $('#miniDisplay').css('visibility', "visible");
+}
+
+function writeInfoToMiniDisplay(node) {
     CURRENT_DATA.nodeId = node.property.id;
-    $("#miniDisplay").css("visibility", "visible");
     writeJSONDataToMiniDisplay(node);
 }
 
 var nodeNum = 0;
-var OFFSET = 300;
+var OFFSET = 200;
 var miniD = $('#miniDisplay')[0].style;
 var offsetLeft = parseInt(miniD.width);
 var offsetTop = parseInt(miniD.height);
 function calcNewNodePosition() {
     var position = {};
-    position = {x: offsetLeft+OFFSET, y: nodeNum*OFFSET + offsetTop / 3};
+    var x = offsetLeft+OFFSET;
+    var y = nodeNum*OFFSET + offsetTop / 3;
+    x = checkPositionX(x);
+    y = checkPosition(y);
+    position = {x: x, y: y};
     nodeNum++;
     return position;
 }
@@ -351,7 +369,7 @@
     var node = GRAPH_DATA.nodes[id];
     node.property.state = state;
     postToServer("id="+id+"&state="+state);
-    showMiniDisplay(node);
+    writeInfoToMiniDisplay(node);
     updateNodeElement(node);
 }
 
@@ -417,7 +435,7 @@
     bindObj.bindings = {};
     for (var i=0; i<edgeInfoArray.length; i++) {
 	var edgeInfo = edgeInfoArray[i];
-	var str = edgeInfo.kind +" : " + edgeInfo.num + " : " + edgeInfo.direction;
+	var str = edgeInfo.kind +" : "+ edgeInfo.direction + " : " + edgeInfo.num;
 	var idName = TRAVERSE_LI_ID_NAME + i;
 	var divStr = "<li id='"+idName+"' class='contextMenuContent'>"+str+"</li>";
 	var div = $(divStr);
@@ -447,6 +465,25 @@
     return bindObj;
 }
 
+function returnNodeInfoMenuFunction(node) {
+    return function(f) { writeInfoToMiniDisplay(node); visibleMiniDisplay(); };
+}
+
+var NODE_INFO_ID_NAME = 'nodeInformation';
+function createNodeInfoMenu(node) {
+    var bindObj = {};
+    bindObj.bindings = {};
+    var menu = $('#nodeInformationMenu');
+    menu.children().remove();
+    var idName = NODE_INFO_ID_NAME;
+    var str = "information";
+    var divStr = "<li id='"+idName+"' class='contextMenuContent'>"+str+"</li>";
+    var div = $(divStr);
+    appendElement(menu, div);
+    bindObj.bindings[idName] = returnNodeInfoMenuFunction(node);
+    return bindObj;
+}
+
 function plusBindingsObject(obj1, obj2) {
     var newObj = {};
     newObj.bindings = {};
@@ -464,12 +501,17 @@
 }
 
 function setInitContextMenu(node,elem) {
-    var bindObj = createContextMenuObj(node);
-    var tObj = createTraverseMenuAndObj(node.property.id, node.property.edgeInfo);
-    var inspectObj = createInspectMenuAndObj(node);
-    var o = plusBindingsObject(bindObj, tObj);
-    var newObj = plusBindingsObject(o, inspectObj);
-    elem.bindObj = newObj;
+    var objArray = [];
+    objArray.push(createContextMenuObj(node));
+    objArray.push(createInspectMenuAndObj(node));
+    objArray.push(createTraverseMenuAndObj(node.property.id, node.property.edgeInfo));
+    objArray.push(createNodeInfoMenu(node));
+    var bindObj = {};
+    bindObj.bindings = {};
+    for (var i=0; i<objArray.length; i++) {
+	bindObj = plusBindingsObject(bindObj, objArray[i]);
+    }
+    elem.bindObj = bindObj;
     elem.menuHTML = $('#selectMenu').clone()[0].innerHTML;
 }
 
@@ -500,7 +542,7 @@
 	function(){div.css("box-shadow","");}
     );
     node.view[0].nodeId = node.property.id;
-    div.click(function(){ showMiniDisplay(node); });
+    div.click(function(){ writeInfoToMiniDisplay(node); });
     DragHandler.attach($(node.view)[0]);
     div.css('border-style',borderStyle[node.property.kind]);
     div.css("background", StateColor[node.property.state]||"white");