Mercurial > hg > Members > nobuyasu > html > graphViewer
changeset 37:4b3fd472120b draft
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(); }