Mercurial > hg > Members > nobuyasu > html > graphViewer
changeset 25:a51dd2e558ab draft
modified edgeInfoDisplay
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Fri, 22 Mar 2013 06:10:27 +0900 |
parents | eb324ada669a |
children | b6031eb79cc0 |
files | show.html |
diffstat | 1 files changed, 33 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/show.html Fri Mar 22 05:51:03 2013 +0900 +++ b/show.html Fri Mar 22 06:10:27 2013 +0900 @@ -29,6 +29,7 @@ </ul> <script type="text/javascript">var _desktopid = ${desktop.id};function desktopid(){return _desktopid;}</script> +<!-- <div id="traverseDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:1; z-index:10; visibility:visible;'> <div style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.7;'></div> @@ -50,6 +51,7 @@ </div> <span class='button' style='position:absolute; width:100px; left:75px; bottom:5px; opacity:1;' onclick='traverseAction();'>traverse</span> </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 style='position:absolute; left:0; top:0; width:100%; height:100%; background:black; opacity:0.5;'></div> @@ -57,6 +59,7 @@ <div style='position:absolute; width:90%; height:90%;'> <div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'> <div id="miniDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'> + Evidence Title </div> <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'> Please click any node. @@ -192,10 +195,15 @@ writeMiniDisplay(jsonObj.property.title, str); } +//remove +/* function getTraverseDivTemplate(kind, inNum, outNum) { return "<div><label id='traverseLabel'><input type='checkbox' checked value='"+kind+"'/>"+kind+"</label><br>in:"+inNum+" out:"+outNum+"</div>"; } + */ +//remove +/* function createTraverseView(info) { var viewHtml = ""; for (var kind in info) { @@ -212,7 +220,10 @@ } return viewHtml; } +*/ +//remove +/* function createEdgeInfoView(node) { var id = node.property.id; var edgeInfo = node.property.edgeInfo; @@ -229,6 +240,7 @@ edgeInfo.viewHtml = viewHTML; $('#traverseDisplayBody')[0].innerHTML = viewHTML; } +*/ /* Twice the top is the same length as the top + buttom */ @@ -268,8 +280,8 @@ } function createEdgeInfoDiv(node,edgeInfo) { - function createEdgeInfoinnerHTML(edgeInfo) { - return edgeInfo.kind + " : " + edgeInfo.num + ": " + edgeInfo.direction; + function createEdgeInfoinnerHTML(_edgeInfo) { + return _edgeInfo.kind + " : " + _edgeInfo.num + ": " + _edgeInfo.direction; } var edgeInfoDiv = $('<div class="edgeInfoDiv"/>') edgeInfoDiv[0].innerHTML = createEdgeInfoinnerHTML(edgeInfo); @@ -278,7 +290,7 @@ } function updateEdgeInfoDisplay() { - var nodeId = CURRENT_DATA.id; + var nodeId = CURRENT_DATA.nodeId; var node = GRAPH_DATA.nodes[nodeId]; showEdgeInfoDisplay(node); } @@ -288,7 +300,9 @@ var edgeInfoArray = node.property.edgeInfo; for (var i=0; i<edgeInfoArray.length; i++) { var edgeInfo = edgeInfoArray[i]; + console.log(edgeInfo); if (!edgeInfo.view) { + console.log("!edgeInfo.view"); edgeInfo.view = createEdgeInfoDiv(node,edgeInfo); } addEdgeInfoDiv(edgeInfo); @@ -306,15 +320,19 @@ var rootDiv = $('#graphMain'); var rootLeft = rootDiv.offset().left; var rootTop = rootDiv.offset().top; + +//remove +/* $('#traverseDisplay').css( { left: rootLeft + 'px', top: rootTop + 'px' }); +*/ $('#edgeInfoDisplay').css({ right: 0 + 'px', top: rootTop + 'px' }); - var heightStr = $('#traverseDisplay').css('height').split('px')[0]; + var heightStr = $('#edgeInfoDisplay').css('height').split('px')[0]; var height = parseInt(heightStr); $('#miniDisplay').css( { left: rootLeft + 'px', @@ -325,8 +343,11 @@ function showMiniDisplay(node) { $("#miniDisplay").css("visibility", "visible"); writeJSONDataToMiniDisplay(node); + CURRENT_DATA.nodeId = node.property.id; } +//remove +/* function showTraverseDisplay(node) { CURRENT_DATA.nodeId = node.property.id; if (!node.property.edgeInfo) { console.log("not found node.edgeInfo "); return; } @@ -337,7 +358,7 @@ $('#traverseDisplayBody')[0].innerHTML = node.property.edgeInfo.viewHtml; $("#traverseDisplay").css("visibility", "visible"); } - +*/ var nodeNum = 0; var OFFSET = 300; var miniD = $('#miniDisplay')[0].style; @@ -390,7 +411,7 @@ function getEvidence(id, kind, direction, edgeInfoId) { $.ajax({ url:"/aat/aaevidencesiftingmodel.userdesktops/get?desktopid="+desktopid() + "&id="+id+"&kind="+kind+"&direction="+direction+"&edgeinfoid="+edgeInfoId, - success:function(o) { parseJSONGraphData(GRAPH_DATA, o); recursiveCalcPosition(GRAPH_DATA, GRAPH_DATA.nodes[id]); showEdgesAndNodes(GRAPH_DATA, o, kind);}, + success:function(o) {console.log(this.url); parseJSONGraphData(GRAPH_DATA, o); recursiveCalcPosition(GRAPH_DATA, GRAPH_DATA.nodes[id]); showEdgesAndNodes(GRAPH_DATA, o, kind);}, type:"GET", cache:true, error:function(o) { console.log("getEvidence error : ", o); } }); @@ -425,6 +446,8 @@ postToServer("id="+node.property.id+"&coordX="+node.position.x+"&coordY="+node.position.y); } +//remove +/* function traverseAction() { var inDirChecked = $('#direction_in').is(':checked'); var outDirChecked = $('#direction_out').is(':checked'); @@ -453,6 +476,7 @@ } } +*/ function createNodeDiv(node) { node.view = $("<div class='graphNode'/>"); @@ -485,7 +509,7 @@ function(){div.css("box-shadow","");} ); node.view[0].nodeId = node.property.id; - div.click(function(){showMiniDisplay(node); showTraverseDisplay(node); showEdgeInfoDisplay(node);}); + div.click(function(){showMiniDisplay(node);/* showTraverseDisplay(node); //remove */ console.log("showEdgeInfoDisplay"); showEdgeInfoDisplay(node);}); DragHandler.attach($(node.view)[0]); var kindBorder = {agree:"#66a", rejected:"#a66"}; div.css("background", StateColor[node.property.state]||"white"); @@ -759,8 +783,9 @@ function beginScript() { DragHandler.attach($('#miniDisplay')[0]); - DragHandler.attach($('#traverseDisplay')[0]); DragHandler.attach($('#edgeInfoDisplay')[0]); +//remove +// DragHandler.attach($('#traverseDisplay')[0]); start(); }