Mercurial > hg > Members > nobuyasu > Consensus

changeset 121:ee7ad3b84ae4 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge 117
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Thu, 18 Apr 2013 06:21:44 +0900
parents 5ee0a70ab968 (current diff) 35ee98a5cd0c (diff)
children 9cfb52e94bd0
files logs/application.log
diffstat 1 files changed, 191 insertions(+), 144 deletions(-) [+]
line wrap: on
line diff
--- a/public/viewer/viewer_white.html	Thu Apr 18 06:20:51 2013 +0900
+++ b/public/viewer/viewer_white.html	Thu Apr 18 06:21:44 2013 +0900
@@ -1,7 +1,6 @@
 <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>
+<link rel='stylesheet' href="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>
@@ -15,58 +14,19 @@
 <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 class='footer' id='footer_div'>
+    <div class='footer up'>
+	Traverse
+    </div>
+</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>
@@ -119,12 +79,6 @@
     });
 }
 
-$(function() {
-    userName = localStorage.userName;
-//    start();
-    testStart();
-})
-
 function beginScript() {
     DragHandler.attach($('#miniDisplay')[0]);
 }
@@ -139,8 +93,6 @@
 	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;
@@ -153,8 +105,14 @@
 	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';
+	if (oElem.position) {
+	    oElem.position.x = nextX;
+	    oElem.position.y = nextY;
+	}
 	oElem.mouseX = e.clientX;
 	oElem.mouseY = e.clientY;
 	return false;
@@ -220,7 +178,16 @@
 	height: ViewParam.intervalY * 1 + ViewParam.nodeHeight + ViewParam.offsetTop + ViewParam.offsetBottom,
 	top:50
     });
+    var footer = $('.footer')[0];
+    var str = "";
+    for (var relation in EDGE_LIST) {
+	str = str + createLabelStr(EDGE_LIST[relation]);
+    }
+    footer.innerHTML = footer.innerHTML + str;
+}
 
+function createLabelStr(value) {
+    return "<label class='relation'><input class='relation_input' type='checkbox' checked value='"+value+"'>"+value+"</label>";
 }
 
 function showMiniDisplay(jsonInfo) {
@@ -240,11 +207,36 @@
     return position;
 }
 
+/*
+ *
+ */
+function clickNodeDiv(id) {
+    var graphData = GRAPH_DATA;
+    var node = graphData.nodes[id];
+    var inputDivs = $('.relation_input');
+    var rels = {};
+    for (var i=0; i<inputDivs.length; i++) {
+	var div = inputDivs[i];
+	if (div.checked) {
+	    rels[div.value] = 1;
+	}
+    }
+    showRelationNodes(graphData, node, rels);    
+}
+
+function returnCheckdRelation() {
+
+}
+
 function createNodeDiv(node) {
     node.view = $("<div class='graphNode'/>");
-    if(!node.position) node.position = calcNewNodePosition();
+    node.view.click(function(){ clickNodeDiv(node.property.id) });
+    if(!node.position) { 
+	node.position = calcNewNodePosition();
+	node.view[0].position = node.position;
+    }
     node.view.hover();
-    var div = $("<div class='graphNodeContent'/>")[0];
+    var div = $("<div class='graphNodeContent' />")[0];
     div.innerHTML = node.property.title;
     node.view[0].appendChild(div);
     return node;
@@ -263,7 +255,7 @@
     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("border-color", kindBorder[node.kind] ||"#58f");
     div.css({
 	left: node.position.x,
 	top: node.position.y
@@ -278,7 +270,7 @@
 	if(fc) {
 	    $('#graphRoot')[0].insertBefore(node.view[0], fc);
 	} else {
-	    $('#graphRoot').append(node.view);
+	    $('#graphRoot').append(node.view[0]);
 	}
     }
 }
@@ -295,7 +287,6 @@
 };
 
 
-var edgeArray = new Array();
 function Edge(fromNode, toNode, relation) {
     var obj = {from:fromNode, to:toNode, rel:relation };
     return obj;
@@ -318,27 +309,6 @@
     endpoint:"Blank",
 };
 
-function paintEdge() {
-    var array = edgeArray;
-    for (var i=0; i<array.length; i++) {
-	connectGraph(array[i]);
-    }
-    jsPlumb.removeAllEndpoints();
-    jsPlumb.draggable($('.graphNode'));
-    /*
-    jsPlumb.repaintEverything();
-    */
-}
-
-function connectGraph(graphObj) {
-    var fromNode = graphObj.from;
-    var toNode = graphObj.to;
-    var rel = graphObj.rel;
-    var 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;
-}
-
 function GraphData() {
     var graphData = {};
     graphData.nodes = {};
@@ -373,41 +343,22 @@
     return memory;
 }
 
-function start() {
-    init();
-    var rootNode = new Object();
-    rootNode.property = sampleJSON1;
-    showMiniDisplay(rootNode);
-    updateNode(rootNode);
-    /* test code */
-    var n1 = {property:{title:"task2"}};
-    var n2 = {property:{title:"task3"}};
-    updateNode(n1);
-    updateNode(n2);
-    
-    var e1 = new Edge(rootNode, n1, "dependency");
-    var e2 = new Edge(n1, n2, "dependency");
-    edgeArray.push(e1);
-    edgeArray.push(e2);
-    paintEdge();
-}
-
-
 function showEdge(graphData, edge) {
     function connectEdge(fromNode, toNode, rel, type) {
 	var c;
 	if (type == 'both') {
-	    /* TODO */
 	    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: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];
+    if (!fromNode.view && !toNode.view) return;
     var rel = edge.property.rel;
     var type = edge.property.type;
     connectEdge(fromNode, toNode, rel, type);
@@ -425,7 +376,6 @@
 	updateNode(toNode);
     }
     showEdge(graphData, edge);
-
 }
 
 function getRelationEdgeIds(node) {
@@ -461,9 +411,11 @@
     return nodeIds;
 }
 
+/*
+ * This function output all NODE thath are related [node]
+*/
 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++ ) {
@@ -473,9 +425,27 @@
     jsPlumb.draggable($('.graphNode'));
 }
 
-var BASE_THETA = -60;
+/* 
+ * 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 = -40;
 var BASE_ANGLE = 180;
-var BASE_DISTANCE = 150;
+var BASE_DISTANCE = 180;
 function calcChildNodePosition(parent, num) {
     var pX = parent.position.x;
     var pY = parent.position.y;
@@ -506,9 +476,8 @@
 	if (!childNode.position) {
 	    childNode.position = calcChildNodePosition(node, numCalcChild);
 	    updateNode(childNode);
-	    numCalcChild++;
-//	    recursiveShowRelationNodes(graphData, childNode);
 	}
+	numCalcChild++;
     }
     /* calcration of grandchildNode position  */
     for (var i=0; i<childNodeIds.length; i++) {
@@ -524,45 +493,76 @@
     }
 }
 
+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 = new GraphData();
-    parseJSONGraphData(graphData, sampleJSONData);
+    var graphData = parseJSONGraphData(GRAPH_DATA, sampleJSONData);
     var rootNodeId = "1";
-    var rootNode = graphData.nodes[rootNodeId];
-    recursiveShowRelationNodes(graphData, rootNode);
-    showAllEdge(graphData);
-    
-/*
+    rootNode = graphData.nodes[rootNodeId];
+    recursiveCalcPosition(graphData, rootNode);
     updateNode(rootNode);
-    updateRelationNodes(graphData,rootNode);
-    updateRelationNodes(graphData,graphData.nodes["2"]);
-*/
+//    showRelationNodes(graphData, rootNode, {dependency:1});
+//    recursiveShowRelationNodes(graphData, rootNode);
+//    showAllEdge(graphData);
+
 }
 
-
 function logProperty(d) {
     for(var key in d) {
 	console.log("key: "+key+ "\nvalue: "+d[key]);
     }
 }
 
-/* sample data */
-sampleJSON1  = {
-    id:"5",
-    title:"task1",
-    kind:"agreed",
-    createdUser:"oshiro",
-    createdDate: new Date()
-};
-
 sampleJSONData = {
     nodes: [
         {
             id:"1",
-	    title:"task1",
+	    title:"context1",
             kind:"agree",
-	    createdUser:"osrhiro"
+	    createdUser:"oshiro"
 	},
         {
             id:"2",
@@ -572,8 +572,7 @@
         },
         {
             id:"3",
-	    title:"task3",
-	    kind:"agree",
+	    title:"context3",
 	    createdUser:"tamayose"
         },
 	{
@@ -581,35 +580,83 @@
 	    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:"1",
-            to:"2",
+            from:"2",
+            to:"1",
             rel:"dependency",
             type:""
         },
         {
             id:"12",
-            from:"2",
+            from:"1",
             to:"3",
-            rel:"dependency",
+            rel:"evidence",
             type:""
         },
         {
             id:"13",
             from:"3",
-            to:"1",
-            rel:"dependency",
-            type:"both"
+            to:"4",
+            rel:"evidence",
+            type:""
         },
 	{
 	    id:"14",
-	    from:"4",
+	    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:"dependency",
+	    rel:"version",
 	    type:""
 	}
     ]