From 5cb71985cfdcf65ad76c5c3d416011a042cbf787 Mon Sep 17 00:00:00 2001
From: Owen <despito@MacBook-Pro-de-Despito.local>
Date: Tue, 15 Jul 2014 19:52:12 +0300
Subject: Added basic zoom feature

---
 index.html              |  2 +-
 scripts/gant.js         | 14 ------------
 scripts/rhizicore.js    | 60 +++++++++++++++++++++++++++++++++----------------
 scripts/textanalysis.js |  6 -----
 style.css               | 13 +++++------
 5 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/index.html b/index.html
index 9b46c5cc..c6d1cab7 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
 
   <div class="UI">
     <div class="help">Connect between <span style="color:#FCB924">people</span> and the  <span style="color:#009DDC">projects</span> they are working on by describing their main contribution:</div>
-    <div class="info">Node info :<br/>
+    <div class="info" style="display:none">Node info :<br/>
         <div class="subtitle">Click on a node to display info</div>
         <form id="editbox">
           <label>name:</label><input id="editboxname"/>
diff --git a/scripts/gant.js b/scripts/gant.js
index ae5b63aa..90bf7fdf 100644
--- a/scripts/gant.js
+++ b/scripts/gant.js
@@ -36,20 +36,6 @@ function checkSwitch(checkswitch) {
 
 }
 
-window.onscroll = function (e) {
-  var horizontal_position = 0;
-  if (pageXOffset)//usual
-    horizontal_position = pageXOffset;
-  else if (document.documentElement.clientWidth)
-    horizontal_position = document.documentElement.scrollLeft;
-  else if (document.body)//ie quirks
-    horizontal_position = document.body.scrollLeft;
-
-	$('.debug').html(scrollValue);
-
-  var your_div = $('#gantbox');
-  $('#gantbox').scrollLeft((horizontal_position));
-}
 
 $('#gantbox').scroll(function () {
 	scrollValue=$('#gantbox').scrollLeft();
diff --git a/scripts/rhizicore.js b/scripts/rhizicore.js
index b8c4efe5..26197eb0 100644
--- a/scripts/rhizicore.js
+++ b/scripts/rhizicore.js
@@ -10,7 +10,7 @@ var deliverables = [];
 
 var boxedin, nodetext, linktext, link, links, node, nodes, circle;
 
-var scrollValue = 0;
+var scrollValue = 0, zoomX , zoomY;
 
 
 function myGraph(el) {
@@ -71,10 +71,12 @@ function myGraph(el) {
             j = 0;
         var n = findNode(id, state);
         var adjacentnode;
+        $(".debug").html(n.state);
 
-        this.removeHighlight();
         //highlight node
         if (n !== undefined && n.state!=="chosen" && n.state!=="temp") {
+
+        this.removeHighlight();
             n.state = "chosen";
 
             while (i < links.length) {
@@ -92,6 +94,8 @@ function myGraph(el) {
             }
             update();
 
+        }else{
+         
         }
 
     }
@@ -229,9 +233,14 @@ function myGraph(el) {
         .attr("width", w)
         .attr("height", h)
         .append("g")
-        .call(d3.behavior.zoom().center([w / 2, h / 2]).on("zoom", zoom))
+        .call(d3.behavior.zoom().center([w / 2, h / 2]).scaleExtent([0.5, 10]).on("zoom", zoom))
         .append("g");
 
+    function zoom() {
+      if(graphstate==="GRAPH")vis.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+      if(graphstate==="GANTT")vis.attr("transform", "translate([0,0])scale(1)");
+    }
+
    
 
 
@@ -267,8 +276,8 @@ function myGraph(el) {
             .attr("viewBox", "0 -5 10 10")
             .attr("refX", 23)
             .attr("refY", -1.8)
-            .attr("markerWidth", 5)
-            .attr("markerHeight", 5)
+            .attr("markerWidth", 2.5)
+            .attr("markerHeight", 2.5)
             .attr("orient", "auto")
             .style("fill", "#aaa")
             .append("svg:path")
@@ -283,7 +292,10 @@ function myGraph(el) {
                   else return "link";
               
             })
-            .attr("marker-end", "url(#end)");
+            .attr("marker-end", "url(#end)")
+            .on("click", function (d, i) {
+                $('#textanalyser').val("node("+d.source.id+") -> "+d.name+" -> node("+d.target.id+")");
+            });;
 
 
         linktext = vis.selectAll(".linklabel").data(links);
@@ -292,8 +304,14 @@ function myGraph(el) {
             .attr("class", "linklabel")
             .attr("text-anchor", "middle")
             .text(function (d) {
-                if (d.name.length < 25) return d.name;
-                else return d.name.substring(0, 14) + "...";
+                if(d.target.state==="temp" || d.source.state==="chosen" || d.target.state==="chosen"){
+                  if (d.name.length < 25){
+                    return d.name;
+                  }
+                else{ return d.name.substring(0, 14) + "...";}
+              }else{
+                return " " ;
+              }
             })
             .on("click", function (d, i) {
                 editLink(d, i);
@@ -318,7 +336,9 @@ function myGraph(el) {
             .attr("dy", ".35em")
             .text(function (d) {
                 if (d.state === "temp") return d.id + "|";
-                else {
+                else if(d.state === "chosen"){
+                  return d.id;
+                }else{
                     if (d.id.length < 14) return d.id;
                     else return d.id.substring(0, 11) + "...";
                 }
@@ -540,9 +560,9 @@ function deliverableTest() {
         var endindex = Math.floor(Math.random() * i);
         var startindex = Math.floor(Math.random() * i);
         if(nodes[endindex].start>nodes[startindex].start){
-          graph.addLink("Task " + startindex, "Task " + endindex, " ", "perm");
+          graph.addLink("Task " + startindex, "Task " + endindex, "depends on", "perm");
         }else{
-          graph.addLink("Task " + endindex, "Task " + startindex, " ", "perm");
+          graph.addLink("Task " + endindex, "Task " + startindex, "depends on", "perm");
         }
     }
 
@@ -554,19 +574,15 @@ function deliverableTest() {
 
 
 
-function zoom() {
-    //vis.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
-}
-
-
 function showInfo(d, i) {
-
+    if(d.state!=="chosen"){
     graph.highlightNode(d.id,null);
+    $('.info').fadeIn(300);
 
     if (d.type === "deliverable") {
-        $('.info').html('<form id="editbox"><label>description:</label><input id="editdescription"/><label>URL:</label><input id="editurl"/><label>Start date:</label><input id="editstartdate"/><label>End date:</label><input id="editenddate"/><button>Save</button></form><div id="deletenode"><button>Delete</button></div>');
+        $('.info').html('Name: '+d.id+'<br/><form id="editbox"><label>description:</label><input id="editdescription"/><label>URL:</label><input id="editurl"/><label>Start date:</label><input id="editstartdate"/><label>End date:</label><input id="editenddate"/><button>Save</button></form><div id="deletenode"><button>Delete</button></div>');
     } else {
-        $('.info').html('<form id="editbox"><label>description:</label><input id="editdescription"/><label>URL:</label><input id="editurl"/><button>Save</button></form><div id="deletenode"><button>Delete</button></div>');
+        $('.info').html('Name: '+d.id+'<br/><form id="editbox"><label>description:</label><input id="editdescription"/><label>URL:</label><input id="editurl"/><button>Save</button></form><div id="deletenode"><button>Delete</button></div>');
 
 
     }
@@ -601,6 +617,11 @@ function showInfo(d, i) {
             graph.removeNode(d.id, null);
         }
     });
+    }else{
+        graph.removeHighlight();
+        $('.info').fadeOut(300);
+    }
+
 }
 
 function mousedown() {
@@ -610,6 +631,7 @@ function mousedown() {
     $('.editlinkinfo').css('left', 0);
     d3.event.stopPropagation();
     graph.removeHighlight();
+    $('.info').fadeOut(300);
 }
 
 function AddedUnique(newnode) {
diff --git a/scripts/textanalysis.js b/scripts/textanalysis.js
index 1306a863..b5e671af 100644
--- a/scripts/textanalysis.js
+++ b/scripts/textanalysis.js
@@ -20,7 +20,6 @@ $('#textanalyser').autocompleteTrigger({
 });
 
 $('#textanalyser').submit(function () {
-    alert("kldffsgdklgfdmlfdkfglfgsdklgfdkfssfglk,dgf");
     if (previousorder === "EDITNODE") {
         $('#textanalyser').val(text + " ");
     }
@@ -41,11 +40,6 @@ $(document).keydown(function (e) {
     }
 
 
-
-    if (e.keyCode == 73) {
-        zoom();
-    }
-
     //DELTE
     if (e.keyCode == 46 || e.keyCode == 8) {
         if (previousorder === "CLOSENODE" || previousorder === "NEWNODE") return false;
diff --git a/style.css b/style.css
index 19eddb52..740a338f 100644
--- a/style.css
+++ b/style.css
@@ -112,31 +112,30 @@ input:focus {
 .link {
   fill: none;
   stroke: #404040;
-  stroke-width: 2px;
+  stroke-width: 4px;
   z-index:1;
-  pointer-events: none;
 }
 
 .highlightlink {
   fill: none;
   stroke: #EDE275;
-  stroke-width: 2px;
+  stroke-width: 4px;
   z-index:1;
   pointer-events: none;
 }
 
 .enterlink {
   fill: none;
-  stroke: #00BFFF;
-  stroke-width: 2px;
+  stroke: #EDE275;
+  stroke-width: 5px;
   z-index:1;
   pointer-events: none;
 }
 
 .exitlink {
   fill: none;
-  stroke: #9AFE2E;
-  stroke-width: 2px;
+  stroke: #EDE275;
+  stroke-width: 4px;
   z-index:1;
   pointer-events: none;
 }
-- 
cgit v1.3.1