Mercurial > hg > Members > nobuyasu > html > graphViewer
view index.html @ 3:d006eeb10183 draft
modified traverse checkbox
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Wed, 20 Mar 2013 02:43:10 +0900 |
parents | e90546bb87e4 |
children | 810e406abb71 |
line wrap: on
line source
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Graph Display</title> <link rel='stylesheet' href="css/viewer_form.css"> <script type="text/javascript" src="js/lib/jquery-1.8.1-min.js"></script> <script type="text/javascript" src="js/lib/jquery-ui-1.8.23-min.js"></script> <script type="text/javascript" src="js/lib/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript" src="js/lib/jsBezier-0.4-min.js"></script> <script type="text/javascript" src="js/1.3.15/jsPlumb-util-1.3.15-RC1.js"></script> <script type="text/javascript" src="js/1.3.15/jsPlumb-dom-adapter-1.3.15-RC1.js"></script> <script type="text/javascript" src="js/1.3.15/jsPlumb-1.3.15-RC1.js"></script> <script type="text/javascript" src="js/1.3.15/jsPlumb-defaults-1.3.15-RC1.js"></script> <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-svg-1.3.15-RC1.js"></script> <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-canvas-1.3.15-RC1.js"></script> <script type="text/javascript" src="js/1.3.15/jsPlumb-renderers-vml-1.3.15-RC1.js"></script> <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> <div style='position:absolute; width:90%; height:90%;'> <div style='position:absolute; left:5%; top:5%; width:100%; height:100%; background:white;'> <div id="traverseDisplayTitle" style='position:absolute; left:10px; top:5px; font-size:24px; width:100%; text-align:left;'> Traverse </div> <div style='position:absolute; top:30px; width:100%; margin-left:10px;'> Direction: <label id="direction_in" style='position:relative' ><input type='checkbox' checked value='in'/>IN</label> <label id="direction_out" style='position:relative;'><input type='checkbox' checked value='out'/>OUT</label> </div> <div id="taverseDisplayBody" style='position:absolute; left:20px; top:50px;'> </div> </div> </div> <span class='button display' style='position:absolute; width:100; left:75; bottom:5; opacity:1;'>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 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%;'> <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;'> </div> <div id="miniDisplayBody" style='position:absolute; left:20px; top:40px;'> Please click any node. </div> </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> <script type="text/javascript"> if(!Array.prototype.filter){ Array.prototype.filter=function(func){ var arr=[]; for(var i=0;i<this.length;i++)if(func(this[i]))arr.push(this[i]); return arr; } } function loadUserList() { $.ajax({ url:BASE_URL + "/users/all", success:function(o) { userList = o.sort(); showUserList([]); }, type:"GET", cache:false, error:function(o) { console.log("loadUserList error : ",o); } }); } function beginScript() { DragHandler.attach($('#miniDisplay')[0]); DragHandler.attach($('#traverseDisplay')[0]); } var DragHandler = { _oElem : null, attach : function(oElem) { oElem.onmousedown = DragHandler._dragBegin; return oElem; }, _dragBegin : function(e) { var oElem = DragHandler._oElem = this; if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; } if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; } var x = parseInt(oElem.style.left); var y = parseInt(oElem.style.top); e = e ? e : window.event; oElem.mouseX = e.clientX; oElem.mouseY = e.clientY; document.onmousemove = DragHandler._drag; document.onmouseup = DragHandler._dragEnd; return false; }, _drag : function(e) { var oElem = DragHandler._oElem; 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'; oElem.mouseX = e.clientX; oElem.mouseY = e.clientY; return false; }, _dragEnd : function() { var oElem = DragHandler._oElem; var x = parseInt(oElem.style.left); var y = parseInt(oElem.style.top); document.onmousemove = null; document.onmouseup = null; DragHandler._oElem = null; } }; function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { beginScript(); }); function writeMiniDisplay(title,str) { $('#miniDisplayBody')[0].innerHTML = str; if(title) { $('#miniDisplayTitle')[0].innerHTML = title; } } function writeJSONDataToMiniDisplay(jsonObj) { var str = ""; for (var key in jsonObj.property) { str = str + key + ": "+ jsonObj.property[key] + "<br>"; } writeMiniDisplay(jsonObj.property.title, str); } function createDirectionView() { } function createTraverseView() { } function writeEdgeInfotraverseDisplay(node) { var id = node.property.id; var edgeInfo = node.edgeInfo; var str = ""; var info = {}; for (var i=0; i<edgeInfo.length; i++) { var kind = edgeInfo[i].kind; var dir = edgeInfo[i].direction; var num = edgeInfo[i].num; info[kind][dir] = num; } } function createTraverseDisplayInfo(info) { } function init() { jsPlumb.importDefaults({ Connector : [ "Straight", { curviness:50 } ], PaintStyle : { strokeStyle:"gray", lineWidth:2 }, EndpointStyle : {}, Anchors: ["BottomCenter","TopCenter"], }); var rootDiv = $('#graphMain'); var rootLeft = rootDiv.offset().left; var rootTop = rootDiv.offset().top; $('#traverseDisplay').css( { left: rootLeft, top: rootTop }); var heightStr = $('#traverseDisplay').css('height').split('px')[0]; var height = parseInt(heightStr); $('#miniDisplay').css( { left: rootLeft, top: rootTop + height + 50 }); } function createLabelStr(value) { return "<label class='relation'><input class='relation_input' type='checkbox' checked value='"+value+"'>"+value+"</label>"; } function showMiniDisplay(node) { $("#miniDisplay").css("visibility", "visible"); $("#traverseDisplay").css("visibility", "visible"); writeJSONDataToMiniDisplay(node); if (node.edgeInfo) { if (!node.traverse) { writeEdgeInfotraverseDisplay(node); } showEdgeInfoTraverseDisplay(node); } } var nodeNum = 0; var OFFSET = 100; var miniD = $('#miniDisplay')[0].style; var offsetLeft = parseInt(miniD.width.split('px')[0]); var offsetTop = parseInt(miniD.height.split('px')[0]); function calcNewNodePosition() { var position = {}; position = {x: nodeNum*OFFSET + offsetLeft, y: nodeNum*OFFSET + offsetTop / 3}; nodeNum++; return position; } /* * */ function clickNodeDiv(id) { var graphData = GRAPH_DATA; var node = graphData.nodes[id]; var inputDivs = $('.relation_input'); var rels = {evidence:1, dependency:1, derived:1, version:1, agreement:1}; showRelationNodes(graphData, node, rels); } function returnCheckdRelation() { } function createNodeDiv(node) { node.view = $("<div class='graphNode'/>"); node.view.click(function(){ clickNodeDiv(node.property.id) }); if(!node.position) node.position = calcNewNodePosition(); node.view.hover(); var div = $("<div class='graphNodeContent' />")[0]; div.innerHTML = node.property.title; node.view[0].appendChild(div); return node; } function updateNodeElement(node) { var created = false; if(!node.view) { created = true; createNodeDiv(node); } var div = node.view; // div.text(node.property.title); div.click(function(){showMiniDisplay(node)}); DragHandler.attach($(node.view)[0]); var kindBackground = {agree:"#aaf", rejected:"#fff"}; var kindBorder = {agree:"#66a", rejected:"#a66"}; div.css("background", kindBackground[node.kind]||"white"); div.css("border-color", kindBorder[node.kind] ||"#58f"); div.css({ left: node.position.x, top: node.position.y }); return created; } function updateNode(node) { if(updateNodeElement(node)) { var fc = $('#graphRoot')[0].firstChild; if(fc) { $('#graphRoot')[0].insertBefore(node.view[0], fc); } else { $('#graphRoot').append(node.view); } } } var ViewParam = { offsetTop:100, offsetBottom:100, offsetLeft:100, offsetRight:100, nodeWidth:120, nodeHeight:60, intervalX:140, intervalY:120 }; function Edge(fromNode, toNode, relation) { var obj = {from:fromNode, to:toNode, rel:relation }; return obj; } var arrowConnector = { connector:"StateMachine", // paintStyle:{lineWidth:3,strokeStyle:"#056"}, paintStyle:{lineWidth:2,strokeStyle:"#aaf"}, hoverPaintStyle:{strokeStyle:"#dbe300"}, endpoint:"Blank", anchor:"Continuous", overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]] }; var arrowBothConnector = { connector:"StateMachine", paintStyle:{lineWidth:2,strokeStyle:"#aaf"}, hoverPaintStyle:{strokeStyle:"#dbe300"}, endpoint:"Blank", }; function GraphData() { var graphData = {}; graphData.nodes = {}; graphData.edges = {}; return graphData; } function parseJSONGraphData(memory ,jsonObj) { var nodes = jsonObj.nodes; for (var i=0; i<nodes.length; i++) { var node = nodes[i]; memory.nodes[node.id] = {}; memory.nodes[node.id].in = []; memory.nodes[node.id].out = []; memory.nodes[node.id].both = []; memory.nodes[node.id].property = node; } 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; } function showEdge(graphData, edge) { function connectEdge(fromNode, toNode, rel, type) { var c; if (type == 'both') { c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowBothConnector); } else { c = jsPlumb.connect({source:fromNode.view[0], target:toNode.view[0]}, arrowConnector); } // jsPlumb.select({source:fromNode.view[0]}).removeAllOverlays(); c.setLabel({label:"<span style='color:#129; font-size:1.5em;'>"+rel+"</span>",cssStyle:""}); return c; } if (edge.visible) return; var fromNode = graphData.nodes[edge.property.from]; var toNode = graphData.nodes[edge.property.to]; if (!fromNode.view && !toNode.view) return; var rel = edge.property.rel; var type = edge.property.type; connectEdge(fromNode, toNode, rel, type); edge.visible = true; } function createNodeFromEdge(graphData, edge, baseNode) { if(edge.visible) return; var fromNode = graphData.nodes[edge.property.from]; if (!fromNode.view) { updateNode(fromNode); } var toNode = graphData.nodes[edge.property.to]; if (!toNode.view) { updateNode(toNode); } showEdge(graphData, edge); } function getRelationEdgeIds(node) { var edgeIds = []; for (var i=0; i<node.in.length; i++) edgeIds.push(node.in[i]); for (var i=0; i<node.out.length; i++) edgeIds.push(node.out[i]); for (var i=0; i<node.both.length; i++) edgeIds.push(node.both[i]); return edgeIds; } function getRelationNodeIds(graphData, node) { var nodes = graphData.nodes; var edges = graphData.edges; var nodeIds = []; for (var i=0; i<node.in.length; i++) { var edgeId = node.in[i]; nodeIds.push(edges[edgeId].property.from); } for (var i=0; i<node.out.length; i++) { var edgeId = node.out[i]; nodeIds.push(edges[edgeId].property.to); } for (var i=0; i<node.both.length; i++) { var edgeId = node.both[i]; var fromId = edges[edgeId].property.from; var toId = edges[edgeId].property.to; if (fromId == node.property.id) { nodeIds.push(toId); } else { nodeIds.push(fromId); } } return nodeIds; } /* * This function output all NODE thath are related [node] */ function updateRelationNodes(graphData, node) { var id = node.property.id; var edges = graphData.edges; var edgeIds = getRelationEdgeIds(node); for (var i=0; i<edgeIds.length; i++ ) { createNodeFromEdge(graphData, edges[edgeIds[i]]); } jsPlumb.removeAllEndpoints(); jsPlumb.draggable($('.graphNode')); } /* * rels = {dependency:1, evidence:1}; * showRelationNodes(graphData, node, rels); */ function showRelationNodes(graphData, node, rels) { var id = node.property.id; var edges = graphData.edges; var edgeIds = getRelationEdgeIds(node); for (var i=0; i<edgeIds.length; i++) { var edge = edges[edgeIds[i]]; if (rels[edge.property.rel]) { createNodeFromEdge(graphData, edges[edgeIds[i]]); } } jsPlumb.removeAllEndpoints(); jsPlumb.draggable($('.graphNode')); } var BASE_THETA = -30; var BASE_ANGLE = 180; var BASE_DISTANCE = 180; function calcChildNodePosition(parent, num) { var pX = parent.position.x; var pY = parent.position.y; var deg = BASE_ANGLE - num * BASE_THETA; var theta = deg * (Math.PI / 180); var cX = pX - (BASE_DISTANCE * Math.cos(theta)); var cY = pY - (BASE_DISTANCE * Math.sin(theta)); return {x:cX, y:cY}; } function showAllEdge(graphData) { var edges = graphData.edges; for (var id in edges) { showEdge(graphData, edges[id]); } jsPlumb.removeAllEndpoints(); jsPlumb.draggable($('.graphNode')); } function recursiveShowRelationNodes(graphData, node) { if (!node.view) updateNode(node); childNodeIds = getRelationNodeIds(graphData, node); /* calcration of childNode position */ var numCalcChild = 0; for (var i=0; i<childNodeIds.length; i++) { var id = childNodeIds[i]; var childNode = graphData.nodes[id]; if (!childNode.position) { childNode.position = calcChildNodePosition(node, numCalcChild); updateNode(childNode); } numCalcChild++; } /* calcration of grandchildNode position */ for (var i=0; i<childNodeIds.length; i++) { var id = childNodeIds[i]; var childNode = graphData.nodes[id]; var ids = getRelationNodeIds(graphData, childNode); for (var j=0; j<ids.length; j++) { var n = graphData.nodes[ids[j]]; if (!n.position) { recursiveShowRelationNodes(graphData, childNode); } } } } var EDGE_LIST = { evidence:'evidence', dependency:'dependency', version:'version', derived:'derived', agreement:'agreement' }; $(function() { userName = localStorage.userName; testStart(); }) function recursiveCalcPosition(graphData, parentNode) { if (!parentNode.position) updateNode(parentNode); childNodeIds = getRelationNodeIds(graphData, parentNode); /* calcration of childNode position */ var numCalcChild = 0; var childArray = {}; for (var i=0; i<childNodeIds.length; i++) { var id = childNodeIds[i]; var childNode = graphData.nodes[id]; childArray[id] = childNode; if (!childNode.position) { childNode.position = calcChildNodePosition(parentNode, numCalcChild); numCalcChild++; } } /* calcration of grandchildNode position */ for (var id in childArray) { var childNode = childArray[id]; var grandChildIds = getRelationNodeIds(graphData, childNode); for (var i=0; i<grandChildIds.length; i++) { var gId = grandChildIds[i]; var grandChild = graphData.nodes[gId]; if (!grandChild.position) { recursiveCalcPosition(graphData, childNode); } } } } var GRAPH_DATA = new GraphData(); var rootNode = {}; function testStart() { init(); var graphData = parseJSONGraphData(GRAPH_DATA, sampleJSONData); var rootNodeId = "1"; rootNode = graphData.nodes[rootNodeId]; recursiveCalcPosition(graphData, rootNode); updateNode(rootNode); } function logProperty(d) { for(var key in d) { console.log("key: "+key+ "\nvalue: "+d[key]); } } edgeInfo1 = [ { kind:"collected", direction:"in", num:"2" }, { kind:"reject", direction:"out", num:"1" } ]; sampleData = { nodes: [ { id:"1", title:"context1", kind:"agree", createdUser:"oshiro", edgeInfo:edgeInfo1 } ] }; sampleJSONData = { nodes: [ { id:"1", title:"context1", kind:"agree", createdUser:"oshiro" }, { id:"2", title:"task2", kind:"reject", createdUser:"kinjo" }, { id:"3", title:"context3", createdUser:"tamayose" }, { id:"4", title:"task4", kind:"agree", createdUser:"oshiro" }, { id:"5", title:"conetxt5", createdUser:"oshiro" }, { id:"6", title:"context6", createdUser:"kinjo" }, { id:"7", title:"context7", createdUser:"tamayose" }, { id:"8", title:"task2", createdUser:"tamayose" } ], edges: [ { id:"11", from:"2", to:"1", rel:"dependency", type:"" }, { id:"12", from:"1", to:"3", rel:"evidence", type:"" }, { id:"13", from:"3", to:"4", rel:"evidence", type:"" }, { id:"14", from:"3", to:"5", rel:"derived", type:"" }, { id:"15", from:"1", to:"6", rel:"evidence", type:"" }, { id:"17", from:"7", to:"4", rel:"evidence", type:"" }, { id:"18", from:"7", to:"5", rel:"evidence", type:"" }, { id:"19", from:"8", to:"2", rel:"version", type:"" } ] }; </script>