Mercurial > hg > Members > nobuyasu > html > graphViewer

changeset 37:4b3fd472120b 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 Sat, 23 Mar 2013 09:00:46 +0900
parents 9d31b5239170
children 217a7b059553
files show.html
diffstat 1 files changed, 35 insertions(+), 64 deletions(-) [+]
line wrap: on
line diff
--- a/show.html	Sat Mar 23 07:00:13 2013 +0900
+++ b/show.html	Sat Mar 23 09:00:46 2013 +0900
@@ -51,24 +51,27 @@
 </div>
 
 <div id='menuDisplay' class='menuDisplayCss' style='left:0; top:20; z-index:20;'>
-    <div id="closeMenuDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="$('#menuDisplay').css('visibility','hidden');" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeMenuDisplay').css('color','white')" >CLOSE</div>  
+    <div id="closeMenuDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="closeSelectMenu();" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeMenuDisplay').css('color','white')" >CLOSE</div>  
     <div class='menu' id='stateMenu'>
 	<div class='menuTitleCss' id='stateMenuTitle'>StateSelect</div>
 	<div class='menuTitleBodyCss' id='stateMenuBody'>
-</div>
+	</div>
     </div>
-    <div class='menu' id='traverseMenu' style='top:34px;'>
+    <div class='menu' id='traverseMenu' style=''>
 	<div class='menuTitleCss' id='traverseMenuTitle'>TraverseSelect</div>
 	<div class='menuTitleBodyCss'id='traverseMenuBody'>
 	</div>
     </div>
+    <div class='menu' id='' style=''>
+	<div class='menuTitleCss' id='accesDocument'>AccesDocument</div>
+  </div>
 </div>
 
 
 
 <script type="text/javascript">
 var CURRENT_DATA = {};
- 
+
 if(!Array.prototype.filter){
     Array.prototype.filter=function(func){
 	var arr=[];
@@ -174,44 +177,6 @@
     writeMiniDisplay(jsonObj.property.title, str);
 }
 
-/* Twice the top is the same length as the top + buttom */
-/*
-var EDGEINFO_MARGIN = parseInt($('.edgeInfoDiv').css('margin-top').split('px')[0])*2 + 
-	parseInt($('#edgeInfoSample').css('padding-top').split('px')[0])*2 +
-	parseInt($('#edgeInfoSample').css('font-size').split('px')[0]);
-var BASE_EDGEINFO_HEIGHT = parseInt($('#edgeInfoDisplay').height());
-*/
-function calcEdgeInfoTableHeight() {
-    var edgeInfoDivs = $('.edgeInfoDiv');
-    if (edgeInfoDivs.length <= 0) return 0;
-    var childrenHeight = 0;
-    for (var i=0; i<edgeInfoDivs.length; i++) {
-	childrenHeight = childrenHeight + edgeInfoDivs[i].offsetHeight;
-    }
-    return (childrenHeight + EDGEINFO_MARGIN);
-}
-
-function updateEdgeInfoBodyHeight() {
-    var table =  $('#edgeInfoDisplay');
-    var height = calcEdgeInfoTableHeight();
-    var borderSize = parseInt(table.css('border-left-width').split('px')[0]);
-    if (height+borderSize < BASE_EDGEINFO_HEIGHT) height = BASE_EDGEINFO_HEIGHT;
-    table.css('height', height + 'px');
-}
-
-function edgeInfoBodyClear() {
-    $('#edgeInfoBody').children().remove();
-}
-
-function addEdgeInfoDiv(edgeInfoDiv) {
-    var fc =  $('#edgeInfoBody')[0].firstChild;
-    if (fc) {
-	$('#edgeInfoBody').append(edgeInfoDiv.view[0], fc)
-    } else {
-	$('#edgeInfobody').append(edgeInfoDiv.view);
-    }
-}
-
 function setEdgeInfoClickFunction(nodeId, edgeInfo, edgeInfoDiv) {
     edgeInfoDiv.click(function(){ getEvidence(nodeId, edgeInfo); }); 
     edgeInfoDiv.hover(
@@ -224,7 +189,6 @@
     function createEdgeInfoinnerHTML(_edgeInfo) {
 	return _edgeInfo.kind + " : " + _edgeInfo.num + ": " + _edgeInfo.direction;
     }
-//remove    var edgeInfoDiv = $('<div class="edgeInfoDiv"/>')
     var edgeInfoDiv = $('<div class="menuContent"/>')
     edgeInfoDiv[0].innerHTML = createEdgeInfoinnerHTML(edgeInfo);
     setEdgeInfoClickFunction(nodeId, edgeInfo, edgeInfoDiv);
@@ -238,7 +202,6 @@
 }
 
 function showEdgeInfoDisplay(node) {
-//remove    edgeInfoBodyClear();
     removeTraverseMenuBody();
     var tMenuBody = $('#traverseMenuBody');
     var edgeInfoArray = node.property.edgeInfo;
@@ -249,17 +212,12 @@
 	} else {
 	    setEdgeInfoClickFunction(node.property.id, edgeInfo, edgeInfo.view);
 	}
+	console.log("appendmenuBody");
 	appendMenuBody(tMenuBody, edgeInfo.view);
-//remove	addEdgeInfoDiv(edgeInfo);
     }
     updateMenuDisplayHeight();
-//    updateEdgeInfoBodyHeight();
-//remove    $('#edgeInfoDisplay').css('visibility','visible');
 }
 
-
-
-
 function calcChildrenHeight(childArray) {
     var height = 0;
     for (var i=0; i<childArray.length; i++) {
@@ -293,8 +251,9 @@
     showMenuBody($('#stateMenu'));
 }
 
-function showTraverseMenuBody() {
-    showMenuBody($('#traverseMenu'));
+function showTraverseMenuBody(node) {
+    $('#traverseMenu').css('visibility','visible');;
+    showEdgeInfoDisplay(node);
 }
 
 function hiddenMenuBody(menu, height) {
@@ -311,8 +270,8 @@
 }
 
 function hiddenTraverseMenuBody() {
-    var height = DefaultSelectMenuInfo.traverseMenuHeight;
-    hiddenMenuBody($('#traverseMenu'), height);
+    var menu = $('#traverseMenu');
+    menu.css('visibility','hidden');
 }
 
 var MENU_BORDER_MARGIN = 2*parseInt($('.menu').css('border-top-width').split('px')[0]);
@@ -322,7 +281,7 @@
 };
 
 function appendStateSelectDiv(body, div, state) {
-	div.click(function(){ stateTraversePost(state) });
+	div.click(function(){if (!CURRENT_DATA.nodeId) { alert("please click any node.");return; } stateTraversePost(state); });
 	div.hover(
 	    function(){div.css("box-shadow","black 0 0 50px");  },
 	    function(){div.css("box-shadow","");}
@@ -357,8 +316,10 @@
     }
 }
 
-var BASE_MARGIN = parseInt($('.menu').css('margin-top').split('px')[0])*2 + 
+var MARGIN = parseInt($('.menu').css('margin-top').split('px')[0]);
+var BASE_MARGIN = 2*MARGIN + 
     parseInt($('.menuDisplayCss').css('border-top-width').split('px')[0])*2;
+
 function updateMenuDisplayHeight() {
     function calcMenuDisplayHeight(menuD, childArray) {
 	var menuArray = $('.menu');
@@ -369,20 +330,31 @@
 	return height;
     }
     function updateMenuTop(childArray) {
-	var MARGIN = 5;
 	var height = 0;
 	for (var i=0; i<childArray.length; i++) {
 	    childArray[i].style.top = height + 'px';
-	    height = height + childArray[i].offsetHeight + MARGIN;
+	    height = height + childArray[i].offsetHeight; + MARGIN;
 	}
     }
     var menuD =  $('#menuDisplay');
-    var childArray = $('.menu');
-    updateMenuTop(childArray);
-    var height = calcMenuDisplayHeight(menuD, childArray) + BASE_MARGIN;
+    var menuArray = $('.menu');
+    updateMenuTop(menuArray);
+    var height = calcMenuDisplayHeight(menuD, menuArray) + BASE_MARGIN;
     menuD.css('height', height + 'px');
 }
 
+function closeSelectMenu() {
+    hiddenStateMenuBody(); 
+    hiddenTraverseMenuBody(); 
+    $('#menuDisplay').css('visibility','hidden'); 
+}
+
+function showSelectMenu(node) {
+    $('#menuDisplay').css('visibility','visible'); 
+    showStateMenuBody();
+    showTraverseMenuBody(node);
+}
+ 
 function init() {
     jsPlumb.importDefaults({
 	Connector : [ "Straight", { curviness:50 } ],
@@ -513,7 +485,7 @@
 
 function createNodeDiv(node) {
     node.view = $("<div class='graphNode'/>");
-    node.view.click(function(){ clickNodeDiv(node.property.id) });
+    node.view.click(function(){ clickNodeDiv(node.property.id); });
     if(!node.position) {
 	node.position = calcNewNodePosition();
     }
@@ -548,7 +520,7 @@
 	function(){div.css("box-shadow","");}
     );
     node.view[0].nodeId = node.property.id;
-    div.click(function(){showMiniDisplay(node); showEdgeInfoDisplay(node);});
+    div.click(function(){ showMiniDisplay(node); showSelectMenu(node);});
     DragHandler.attach($(node.view)[0]);
     div.css('border-style',borderStyle[node.property.kind]);
     div.css("background", StateColor[node.property.state]||"white");
@@ -805,7 +777,6 @@
 
 function beginScript() {
     DragHandler.attach($('#miniDisplay')[0]);
-//    DragHandler.attach($('#edgeInfoDisplay')[0]);
     DragHandler.attach($('#menuDisplay')[0]);
     start();
 }