Mercurial > hg > Members > nobuyasu > html > graphViewer

--- a/show.html	Sat Mar 23 06:24:59 2013 +0900
+++ b/show.html	Sat Mar 23 06:25:50 2013 +0900
@@ -50,21 +50,26 @@
     </nobr>
 </div>

-
-<div id='edgeInfoDisplay' class='edgeInfoTable' style='left:0; top:0; z-index:20;'>
-    <div id="closeEdgeInfoDisplay" style='position:absolute; right:5px; top:-15px; z-index:10; color:white;' onclick="$('#edgeInfoDisplay').css('visibility','hidden');" onmouseover="$('#closeEdgeInfoDisplay').css('color','yellow');" onmouseout="$('#closeEdgeInfoDisplay').css('color','white')" >CLOSE</div>  <div id='edgeInfoTitle' style='position:absolute; margin-top:2px; padding-left:5px; font-size:20px; width:100%; text-align:left;'>Traverse</div>
-    <div id='edgeInfoSample' style='position:absolute; padding-left:10px; font-size:15px; padding-top:25px;'>kind : num : direction</div>
-    <div id='edgeInfoBody' style='position:absolute; padding-top:40px; '>
-	<div class='edgeInfoDiv' style='visibility:hidden'></div>
-    </div>
-</div>
-
-
 <div class="graphMainCss" style="position:absolute; left:0; bottom:0; width:100%; height:75%;" id='graphMain'>
     <div  style="position:absolute; width:0; height:0;left:0;" id='graphRoot'>
     </div>
 </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 class='menu' id='stateMenu'>
+	<div class='menuTitleCss' id='stateMenuTitle'>StateSelect</div>
+	<div class='menuTitleBodyCss' id='stateMenuBody'>
+</div>
+    </div>
+    <div class='menu' id='traverseMenu' style='top:34px;'>
+	<div class='menuTitleCss' id='traverseMenuTitle'>TraverseSelect</div>
+	<div class='menuTitleBodyCss'id='traverseMenuBody'>
+	</div>
+    </div>
+</div>
+
+

 <script type="text/javascript">
 var CURRENT_DATA = {};
@@ -175,10 +180,12 @@
 }

 /* 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;
@@ -222,7 +229,8 @@
     function createEdgeInfoinnerHTML(_edgeInfo) {
 	return _edgeInfo.kind + " : " + _edgeInfo.num + ": " + _edgeInfo.direction;
     }
-    var edgeInfoDiv = $('<div class="edgeInfoDiv"/>')
+//remove    var edgeInfoDiv = $('<div class="edgeInfoDiv"/>')
+    var edgeInfoDiv = $('<div class="menuContent"/>')
     edgeInfoDiv[0].innerHTML = createEdgeInfoinnerHTML(edgeInfo);
     setEdgeInfoClickFunction(nodeId, edgeInfo, edgeInfoDiv);
     return edgeInfoDiv;
@@ -235,7 +243,9 @@
 }

 function showEdgeInfoDisplay(node) {
-    edgeInfoBodyClear();
+//remove    edgeInfoBodyClear();
+    removeTraverseMenuBody();
+    var tMenuBody = $('#traverseMenuBody');
     var edgeInfoArray = node.property.edgeInfo;
     for (var i=0; i<edgeInfoArray.length; i++) {
 	var edgeInfo = edgeInfoArray[i];
@@ -244,10 +254,115 @@
 	} else {
 	    setEdgeInfoClickFunction(node.property.id, edgeInfo, edgeInfo.view);
 	}
-	addEdgeInfoDiv(edgeInfo);
+	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++) {
+	height = height + childArray[i].offsetHeight + BASE_MARGIN;
     }
-    updateEdgeInfoBodyHeight();
-    $('#edgeInfoDisplay').css('visibility','visible');
+    return height;
+}
+
+function appendMenuBody(menuBodyDiv, menuContentDiv) {
+    menuBodyDiv.append(menuContentDiv);
+}
+
+function removeTraverseMenuBody() {
+    $('#traverseMenuBody').children().remove();
+}
+
+function removeStateMenuBody() {
+    $('#stateMenuBody').children().remove();
+}
+
+function showMenuBody(menu) {
+    var body = $(menu.children()[1]);
+    var childArray = body.children();
+    $(childArray).css('visibility','visible');
+    body.viewFlag = true;
+    var height = calcChildrenHeight(childArray);
+    menu.css('height', height+'px');
+}
+
+function showStateMenuBody() {
+    showMenuBody($('#stateMenu'));
+}
+
+function showTraverseMenuBody() {
+    showMenuBody($('#traverseMenu'));
+}
+
+function hiddenMenuBody(menu, height) {
+    var body = $(menu.children()[1]);
+    var childArray = body.children();
+    $(childArray).css('visibility','hidden');
+    body.viewFlag = false;
+    menu.css('height', height+'px');
+}
+
+function hiddenStateMenuBody() {
+    var height = DefaultSelectMenuInfo.stateMenuHeight;
+    hiddenMenuBody($('#stateMenu'), height);
+}
+
+function hiddenTraverseMenuBody() {
+    var height = DefaultSelectMenuInfo.traverseMenuHeight;
+    hiddenMenuBody($('#traverseMenu'), height);
+}
+
+var MENU_BORDER_MARGIN = 2*parseInt($('.menu').css('border-top-width').split('px')[0]);
+var DefaultSelectMenuInfo = {
+    stateMenuHeight : $('#stateMenu')[0].offsetHeight - MENU_BORDER_MARGIN,
+    traverseMenuHeight : $('#traverseMenu')[0].offsetHeight - MENU_BORDER_MARGIN
+};
+
+function createStateSelectMenu() {
+    removeStateMenuBody();
+    var stateMenu = $('#stateMenu');
+    var accepted = $('<div class="menuContent" >accept</div>');
+    var rejected = $('<div class="menuContent" >reject</div>');
+    var retract = $('<div class="menuContent" >retract</div>');
+    var body = $('#stateMenuBody');
+    body.viewFlag = true;
+    body.append(accepted);
+    body.append(rejected);
+    body.append(retract);
+}
+
+var BASE_MARGIN = parseInt($('.menu').css('margin-top').split('px')[0])*2 +
+    parseInt($('.menuDisplayCss').css('border-top-width').split('px')[0])*2;
+function updateMenuDisplayHeight() {
+    function calcMenuDisplayHeight(menuD, childArray) {
+	var menuArray = $('.menu');
+	var height = 0;
+	for (var i=0; i<menuArray.length; i++) {
+	    height = height + menuArray[i].offsetHeight
+	}
+	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;
+	}
+    }
+    var menuD =  $('#menuDisplay');
+    var childArray = $('.menu');
+    updateMenuTop(childArray);
+    var height = calcMenuDisplayHeight(menuD, childArray) + BASE_MARGIN;
+    menuD.css('height', height + 'px');
 }

 function init() {
@@ -260,15 +375,16 @@
     var rootDiv = $('#graphMain');
     var rootLeft = rootDiv.offset().left;
     var rootTop = rootDiv.offset().top;
-    $('#edgeInfoDisplay').css({
-	right: 0 + 'px',
+    $('#miniDisplay').css( {
+	left: rootLeft + 'px',
 	top: rootTop + 'px'
     });
-    var heightStr = $('#edgeInfoDisplay').css('height').split('px')[0];
+    var heightStr = $('#miniDisplay').css('height').split('px')[0];
+    console.log(heightStr);
     var height = parseInt(heightStr);
-    $('#miniDisplay').css( {
+    $('#menuDisplay').css({
 	left: rootLeft + 'px',
-	top: rootTop + height + 50 + 'px'
+	top: rootTop + height + 50 +'px'
     });
 }

@@ -431,17 +547,6 @@
     nodePositionPost(node);
 }

-var ViewParam = {
-    offsetTop:100,
-    offsetBottom:100,
-    offsetLeft:100,
-    offsetRight:100,
-    nodeWidth:120,
-    nodeHeight:60,
-    intervalX:140,
-    intervalY:120
-};
-
 function parseJSONGraphData(memory ,jsonObj) {
     var nodes = jsonObj.nodes;
     for (var i=0; i<nodes.length; i++) {
@@ -670,7 +775,8 @@

 function beginScript() {
     DragHandler.attach($('#miniDisplay')[0]);
-    DragHandler.attach($('#edgeInfoDisplay')[0]);
+//    DragHandler.attach($('#edgeInfoDisplay')[0]);
+    DragHandler.attach($('#menuDisplay')[0]);
     start();
 }