Mercurial > hg > Members > nobuyasu > Consensus
view public/viewer/viewer_white.html @ 112:34aa9d3b81b6 draft
remove unnecessary code
author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Mon, 18 Mar 2013 02:14:42 +0900 |
parents | 5ad0ba30c785 |
children | 790f37202698 |
line wrap: on
line source
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Graph Display</title> <link rel='stylesheet' href="form.css"> <script src='form.js'></script> <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> <script type="text/javascript" src='treeArrangement.js'></script> <style> body { background-color:#ccf; background:-moz-linear-gradient(top,#fff,#ccf); background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ccf)); } div.header { position:absolute; left:0;top:0; z-index:5; height:50px; width:100%; background:#ddd; background:-moz-linear-gradient(top,#fff,#ddd); background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddd)); color:silver; font-size:40px; } span.edgeLabel { } div.graphNode { position:absolute; font-size:12px; padding:4px; background:white; z-index:20; width: 45px; height: 40px; border-radius:50px; border:2px solid silver; overflow:hidden; cursor:pointer; border-color:"blue"; } div.graphNodeContent { position:absolute; z-index:21; font-size:12px; background:white; width: 50%; height: 80%; left: 10px; top: 8px; } </style> <div class='header'> <nobr id='header_title' style='margin-left:40px;'><a href='index.html'>Home</a></nobr> </div> <div id="miniDisplay" style='position:fixed; left:0; top:70; width:250px; height:250px; border:solid 1px; border-radius:5px; opacity:0.5; z-index:10; visibility:hidden;'> <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;' onclick="$('#miniDisplay').css('visibility','hidden');" onmouseover="$('#closeMiniDisplay').css('color','blue');" onmouseout="$('#closeMiniDisplay').css('color','black')" >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;'> </div> </div> </div> </div> <div style="position:relative;left:0;top:0;" id='graphMain'> <div style="position:absolute; width:0; height:0;left:0;" id='graphRoot'> </div> </div> <script type="text/javascript"> var LOAD_INTERVAL = 5; var BASE_URL = ""; 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; } } var treeInfo; var userList = []; var root_id; function loadConsensus(id) { function onload(json) { var title = json.hogehoge ? json.hogehoge : "title"; document.title = title; $('#headertitle_main').text(title) } } 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() { userName = localStorage.userName; // start(); testStart(); }) function beginScript() { DragHandler.attach($('#miniDisplay')[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 init() { jsPlumb.importDefaults({ Connector : [ "Straight", { curviness:50 } ], PaintStyle : { strokeStyle:"gray", lineWidth:2 }, EndpointStyle : {}, Anchors: ["BottomCenter","TopCenter"], }); $("#graphRoot").css({ left: ViewParam.offsetLeft + ViewParam.nodeWidth/2 - ViewParam.intervalX, top: ViewParam.offsetTop + ViewParam.nodeHeight/2 }); $("#graphMain").css({ width: ViewParam.intervalX * 1 + ViewParam.nodeWidth+ViewParam.offsetLeft + ViewParam.offsetRight, height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom, top:50 }); } function showMiniDisplay(jsonInfo) { $("#miniDisplay").css("visibility", "visible"); writeJSONDataToMiniDisplay(jsonInfo) } 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/2}; nodeNum++; return position; } function createNodeDiv(node) { node.view = $("<div class='graphNode'/>"); 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] ||"blue"); 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); } c.setLabel({label:"<span style='color:black;'>"+rel+"</span>",cssStyle:"color:black"}); return c; } if (edge.visible) return; var fromNode = graphData.nodes[edge.property.from]; var toNode = graphData.nodes[edge.property.to]; 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; } function updateRelationNodes(graphData, node) { var id = node.property.id; var nodes = graphData.nodes; 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')); } var BASE_THETA = -60; var BASE_ANGLE = 180; var BASE_DISTANCE = 150; 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++; // recursiveShowRelationNodes(graphData, childNode); } } /* 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); } } } } function testStart() { init(); var graphData = new GraphData(); parseJSONGraphData(graphData, sampleJSONData); var rootNodeId = "1"; var rootNode = graphData.nodes[rootNodeId]; recursiveShowRelationNodes(graphData, rootNode); showAllEdge(graphData); /* updateNode(rootNode); updateRelationNodes(graphData,rootNode); updateRelationNodes(graphData,graphData.nodes["2"]); */ } function logProperty(d) { for(var key in d) { console.log("key: "+key+ "\nvalue: "+d[key]); } } sampleJSONData = { nodes: [ { id:"1", title:"task1", kind:"agree", createdUser:"osrhiro" }, { id:"2", title:"task2", kind:"reject", createdUser:"kinjo" }, { id:"3", title:"task3", kind:"agree", createdUser:"tamayose" }, { id:"4", title:"task4", kind:"agree", createdUser:"oshiro" } ], edges: [ { id:"11", from:"1", to:"2", rel:"dependency", type:"" }, { id:"12", from:"2", to:"3", rel:"dependency", type:"" }, { id:"13", from:"3", to:"1", rel:"dependency", type:"both" }, { id:"14", from:"4", to:"2", rel:"dependency", type:"" } ] }; </script>