Mercurial > hg > Members > nobuyasu > html > graphViewer
changeset 10:3fa1be92ab48 draft
modified update node.position
| author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
|---|---|
| date | Wed, 20 Mar 2013 07:38:29 +0900 |
| parents | 35ee0b1d8719 |
| children | 8c4171f77fcc |
| files | index.html |
| diffstat | 1 files changed, 34 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/index.html Wed Mar 20 06:23:29 2013 +0900 +++ b/index.html Wed Mar 20 07:38:29 2013 +0900 @@ -15,6 +15,7 @@ <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-RC1.js"></script> <script type="text/javascript" src="js/1.3.15/jquery.jsPlumb-1.3.15-all-min.js"></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> <div id="closeTraverseDisplay" style='position:absolute; right:5; top:-3; z-index:10; color:white;' onclick="$('#traverseDisplay').css('visibility','hidden');" onmouseover="$('#closeTraverseDisplay').css('color','yellow');" onmouseout="$('#closeTraverseDisplay').css('color','white')" >CLOSE</div> @@ -35,7 +36,7 @@ <span class='button display' style='position:absolute; width:100; left:75; bottom:5; opacity:1;' onclick='traverseAction();'>traverse</span> </div> -<div id="miniDisplay" style='position:fixed; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; 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:visible;'> <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:5; top:-3; 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%;'> @@ -90,10 +91,17 @@ var DragHandler = { _oElem : null, + _id : null, attach : function(oElem) { oElem.onmousedown = DragHandler._dragBegin; return oElem; }, + /* TODO: refoctoring */ + attach : function(oElem, id) { + oElem.onmousedown = DragHandler._dragBegin; + _id = id; + return oElem; + }, _dragBegin : function(e) { var oElem = DragHandler._oElem = this; if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; } @@ -112,10 +120,17 @@ var x = parseInt(oElem.style.left); var y = parseInt(oElem.style.top); e = e ? e : window.event; - oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px'; - oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px'; + var nextX = x + (e.clientX - oElem.mouseX); + var nextY = y + (e.clientY - oElem.mouseY); + oElem.style.left = nextX + 'px'; + oElem.style.top = nextY + 'px'; oElem.mouseX = e.clientX; oElem.mouseY = e.clientY; + if (_id) { + var node = GRAPH_DATA.nodes[_id]; + node.position.x = nextX; + node.position.x = nextY; + } return false; }, _dragEnd : function() { @@ -300,10 +315,6 @@ } -function returnCheckdRelation() { - -} - function createNodeDiv(node) { node.view = $("<div class='graphNode'/>"); node.view.click(function(){ clickNodeDiv(node.property.id) }); @@ -324,7 +335,7 @@ var div = node.view; // div.text(node.property.title); div.click(function(){showMiniDisplay(node); showTraverseDisplay(node);}); - DragHandler.attach($(node.view)[0]); + DragHandler.attach($(node.view)[0], node.property.id); var kindBackground = {agree:"#aaf", rejected:"#fff"}; var kindBorder = {agree:"#66a", rejected:"#a66"}; div.css("background", kindBackground[node.kind]||"white"); @@ -392,6 +403,21 @@ memory.nodes[node.id].both = []; memory.nodes[node.id].property = node; } + if (!jsonObj.edges) return memory; + var edges = jsonObj.edges; + for (var i=0; i<edges.length; i++) { + var edge = edges[i]; + var edgeId = edge.id; + memory.edges[edgeId] = {}; + memory.edges[edgeId].property = edge; + if (edge.kind == "both") { + memory.nodes[edge.from].both.push(edgeId); + memory.nodes[edge.to].both.push(edgeId); + } else { + memory.nodes[edge.from].out.push(edgeId); + memory.nodes[edge.to].in.push(edgeId); + } + } return memory; }