Save Load done, Gantt scrolling much better

Save now asks if you wish to discard your changes Load now load everything perfectly, no bugs with dates or the gantt chart Scrolling for the gantt area new works much much better, it deactivates zooming controls and enables horizontal scrolling. Zooming and background clicking is left intact in Graph mode.
author: Owen <despito@MacBook-Pro-de-Despito.local> 2014-07-21 15:08:08 +0300
committer: Owen <despito@MacBook-Pro-de-Despito.local> 2014-07-21 15:08:08 +0300
commit: fb95c775d0339c5bf180362c01c6cd433ee3ea97 (patch)
tree: 31bc2d7eb94eaae8befb99caf1b5abfa6d29cc63
parent: 5cb71985cfdcf65ad76c5c3d416011a042cbf787 (diff)
5 files changed, 94 insertions, 58 deletions
diff --git a/index.html b/index.html
index c6d1cab7..5680f2ef 100644
--- a/index.html
+++ b/index.html
@@ -20,11 +20,8 @@
 </head>
 
 <body>
-  <div id="gantbox" style="display:none">
+  
 
-  </div>
-
-  <div id="graph"></div>
 
   <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>
diff --git a/scripts/buttons.js b/scripts/buttons.js
index e1e39a68..472b58ff 100644
--- a/scripts/buttons.js
+++ b/scripts/buttons.js
@@ -46,20 +46,23 @@ $('.save').click(function(){
 });
 
 $('.load').click(function(){ 
+  if (confirm('All unsaved changes will be deleted, are you sure?')) {
+    links=[];
+  nodes=[];
   var data = JSON.parse(JSON.parse(localStorage.getItem(key)));
   console.log(data);
     for(var i=0; i<data["nodes"].length; i++){
       var node=data.nodes[i];
-      console.log(data.nodes[i].id);
-      graph.addNodeComplete(node.id,node.type,"perm",node.start,node.end);
+      graph.addNodeComplete(node.id,node.type,"perm",new Date(node.start),new Date(node.end));
     }
 
     for(var j=0; j<data["links"].length; j++){
-      var node=data.links[j];
+      var link=data.links[j];
+      graph.addLink(link.source,link.target,link.name,"perm");
 
-      console.log(data.links[j].name);
-      graph.addLink(fetchNode(link.source),fetchNode(link.target),link.name);
+     
     }
+  }
     
 });
 
diff --git a/scripts/gant.js b/scripts/gant.js
index 90bf7fdf..4fe1d856 100644
--- a/scripts/gant.js
+++ b/scripts/gant.js
@@ -4,9 +4,9 @@ function checkSwitch(checkswitch) {
 
 
     if (checkswitch.checked) {
-
-        $('#gantbox').fadeOut(300);
+    	vis.selectAll(".gantt").remove();
         $('.missingdates').fadeOut(300);
+        $('body').scrollLeft(0);
         graphstate = "GRAPH";
         var fake_e = {};
     	fake_e.alpha = 0.1;
@@ -15,8 +15,8 @@ function checkSwitch(checkswitch) {
         //boxedin=false;
 
     } else {
-        $('#gantbox').fadeIn(300);
         $('.missingdates').fadeIn(300);
+
         graphstate = "GANTT";
         var fake_e = {};
     	fake_e.alpha = 0.1;
@@ -25,35 +25,44 @@ function checkSwitch(checkswitch) {
 
         initAxis();
 
-        $('#gantbox').scrollLeft(scrollValue);
         //boxedin=true;
     }
 
-    
-
-
-
-
 }
 
+///For some reason JQuery's $('body').scroll never worked, so I found something else.
+$('body').bind('DOMMouseScroll', function(e){
+     if(graphstate==="GANTT"){
+        if(e.originalEvent.detail !== 0) {
+         $('.overlay').hide();
+     }else{
+        $('.overlay').show();
+        var left = $('body').offset().left;
+        $('.overlay').scrollLeft(left);
+     }
+    }else{
+        return false;
+    }
+ });
 
-$('#gantbox').scroll(function () {
-	scrollValue=$('#gantbox').scrollLeft();
-	$('.debug').html(scrollValue);
-    var fake_e = {};
-    fake_e.alpha = 0.0;
-    tick(fake_e);
-});
+ //IE, Opera, Safari
+ $('body').bind('mousewheel', function(e){
+     if(graphstate==="GANTT"){
+        if(e.originalEvent.wheelDelta !== 0) {
+           $('.overlay').hide();
+     }else{
+        $('.overlay').show();
+     }
+    }else{
+        return false;
+    }
+ });
 
 
 
 
 function initAxis() {
 
-    $('#gantbox').html("");
-
-
-    var w,h = $("#gantbox").innerHeight() - 80;
 
     var bar_height = 20;
     var row_height = bar_height + 10;
@@ -81,10 +90,9 @@ function initAxis() {
     graphinterval = w / diffDays;
 
 
-    var svg = d3.select("#gantbox")
-        .append("svg")
-        .attr("width", w)
-        .attr("height", h);
+
+    var svg=vis;
+    vis.attr("width",w);
 
     var paddingLeft = 150;
     var paddingTop = 120;
@@ -106,6 +114,7 @@ function initAxis() {
         .attr("x2", xScale)
         .attr("y1", paddingTop + 30)
         .attr("y2", h - 50)
+        .attr("class", "gantt")
         .style("stroke", "#ccc");
 
     var y = function (i) {
@@ -127,7 +136,7 @@ function initAxis() {
         .attr("x", -1000)
         .attr("width", 100)
         .attr("height", bar_height)
-        .attr("class", "company-bar")
+        .attr("class", "company-bar gantt")
         .on("mouseover", function (d) {
             d3.select(this).style("fill", "#F5AF00");
             getCompanyData(String(d.uid))
@@ -144,7 +153,7 @@ function initAxis() {
         });;
 
     label.enter().append("text")
-        .attr("class", "bar-label")
+        .attr("class", "bar-label gantt")
         // .attr("text-anchor","end")
         .attr("x", paddingLeft - 10)
         .attr("y", function (d, i) {
@@ -159,13 +168,13 @@ function initAxis() {
     // Bottom Axis
     var btmAxis = svg.append("g")
         .attr("transform", "translate(0," + (h - 25) + ")")
-        .attr("class", "axis")
+        .attr("class", "axis gantt")
         .call(xAxis);
 
     // Top Axis
     var topAxis = svg.append("g")
         .attr("transform", "translate(0," + paddingTop + ")")
-        .attr("class", "axis")
+        .attr("class", "axis gantt")
         .call(xAxis);
 
 }
 \ No newline at end of file
diff --git a/scripts/rhizicore.js b/scripts/rhizicore.js
index 26197eb0..a9e87b94 100644
--- a/scripts/rhizicore.js
+++ b/scripts/rhizicore.js
@@ -1,6 +1,8 @@
 //CORE VARIABLES
 var addednodes = [];
 
+var vis;
+
 var graphstate = "GRAPH";
 var graphinterval = 0;
 
@@ -229,16 +231,20 @@ function myGraph(el) {
 
     var color = d3.scale.category20();
 
-    var vis = this.vis = d3.select(el).append("svg:svg")
-        .attr("width", w)
+    vis = this.vis = d3.select(el).append("svg:svg")
+        .attr("width", w*5)
         .attr("height", h)
+        .attr("pointer-events", "all")
         .append("g")
         .call(d3.behavior.zoom().center([w / 2, h / 2]).scaleExtent([0.5, 10]).on("zoom", zoom))
         .append("g");
 
+        vis.on("mousedown.zoom", null);
+        vis.on("mousemove.zoom", null);
+
     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)");
+      if(graphstate==="GANTT")vis.attr("transform", "translate(0,0)scale(1)");
     }
 
    
@@ -257,17 +263,15 @@ function myGraph(el) {
 
     var update = function () {
 
-        vis.selectAll("*").remove();
+        vis.selectAll(".graph").remove();
         link = vis.selectAll(".link")
             .data(links);
 
-         vis.append("rect")
+        vis.append("rect")
         .attr("class", "overlay")
         .attr("width", w)
-        .attr("height", h)
-        .on("click", function() {
-        mousedown();
-        });
+        .attr("height", h);
+        $('.overlay').click(mousedown);
 
         vis.append("svg:defs").selectAll("marker")
             .data(["end"]) // Different link/path types can be defined here
@@ -279,6 +283,7 @@ function myGraph(el) {
             .attr("markerWidth", 2.5)
             .attr("markerHeight", 2.5)
             .attr("orient", "auto")
+            .attr("class","graph")
             .style("fill", "#aaa")
             .append("svg:path")
             .attr("d", "M0,-5L10,0L0,5");
@@ -287,9 +292,9 @@ function myGraph(el) {
             .attr("d", "M0,-5L10,0L0,5")
             .attr("class", function(d){
               
-                  if(d.state === "enter"){return "enterlink";}
-                  else if(d.state === "exit"){return "exitlink";}
-                  else return "link";
+                  if(d.state === "enter"){return "enterlink graph";}
+                  else if(d.state === "exit"){return "exitlink graph";}
+                  else return "link graph";
               
             })
             .attr("marker-end", "url(#end)")
@@ -301,7 +306,7 @@ function myGraph(el) {
         linktext = vis.selectAll(".linklabel").data(links);
         linktext.enter()
             .append("text")
-            .attr("class", "linklabel")
+            .attr("class", "linklabel graph")
             .attr("text-anchor", "middle")
             .text(function (d) {
                 if(d.target.state==="temp" || d.source.state==="chosen" || d.target.state==="chosen"){
@@ -331,7 +336,7 @@ function myGraph(el) {
             .append("g").call(force.drag);
 
         nodetext = nodeEnter.insert("text")
-            .attr("class", "nodetext")
+            .attr("class", "nodetext graph")
             .attr("dx", 20)
             .attr("dy", ".35em")
             .text(function (d) {
@@ -349,7 +354,7 @@ function myGraph(el) {
             });
 
         circle = nodeEnter.insert("circle")
-            .attr("class", "circle")
+            .attr("class", "circle graph")
             .attr("r", function (d) {
                 if (d.state === "temp" && d.type !== "empty") return '16px';
                 else return customSize(d.type);
@@ -474,7 +479,7 @@ function tick(e) {
                 //var min= 150+graphinterval*Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)) - $('.gantbox').scrollLeft();
                 //var max= 150+graphinterval*Math.ceil(Math.abs(d.end.getTime() - d.start.getTime()) / (1000 * 3600 * 24)) - $('.gantbox').scrollLeft();
                 //d.x = min+Math.sin(today.getTime()/1000*Math.PI*2/10)*max;
-                d.x = 150 + graphinterval * Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24)) - $('#gantbox').scrollLeft();
+                d.x = 150 + graphinterval * Math.ceil(Math.abs(d.start.getTime() - today.getTime()) / (1000 * 3600 * 24));
                 d.y = 150 + d.start.getHours() * 17;
             }
             if(d.state==="chosen"){
@@ -530,6 +535,9 @@ function tick(e) {
             dr = Math.sqrt(dx * dx + dy * dy)*5;
             return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
             }else{
+              var dx = d.target.x - d.source.x,
+            dy = d.target.y - d.source.y,
+            dr = Math.sqrt(dx * dx + dy * dy)*5;
 
             return "M" + 0 + "," + 0 + "A" + dr + "," + dr + " 0 0,1 " + 0 + "," + 0;
             }
@@ -550,13 +558,13 @@ function tick(e) {
 
 
 function deliverableTest() {
-    for (var i = 0; i < 140; i++) {
+    for (var i = 0; i < 60; i++) {
         var end = randomDate(new Date(), new Date("01-01-2018"));
         var start = randomDate(new Date(), end);
         graph.addNodeComplete("Task " + i, "deliverable", "perm", start, end);
     }
 
-    for (var i = 0; i < 140; i++) {
+    for (var i = 0; i < 60; i++) {
         var endindex = Math.floor(Math.random() * i);
         var startindex = Math.floor(Math.random() * i);
         if(nodes[endindex].start>nodes[startindex].start){
@@ -629,7 +637,6 @@ function mousedown() {
     $('.editinfo').css('left', 0);
     $('.editlinkinfo').css('top', -100);
     $('.editlinkinfo').css('left', 0);
-    d3.event.stopPropagation();
     graph.removeHighlight();
     $('.info').fadeOut(300);
 }
diff --git a/style.css b/style.css
index 740a338f..0ca60d12 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,8 @@ html{
 }
 
 body {
-	overflow: hidden;
+	overflow-y: hidden;
+  overflow-x:auto;
 	margin: 0;
 	min-width: 980px;
 	padding: 0;
@@ -52,6 +53,23 @@ font-size:14px;
   -o-transition: all 0.04s ease-in-out;
 }
 
+a{
+  text-decoration: none;
+  font-style: italic;
+}
+a:link {
+    color: #FFF;
+}
+a:visited {
+    color: #FFF;
+}
+a:hover {
+    color: #EDE275;
+}
+a:active {
+    color: #FFF;
+}
+
 #textanalyser{
   width:900px;
   height:30px;
@@ -242,6 +260,7 @@ input:focus {
 .overlay {
   fill:none;
   pointer-events: all;
+  z-index:0;
 
 }
 
@@ -327,6 +346,7 @@ input:focus {
 
 .axis{
   stroke: #ccc;
+  fill: #ccc;
 }
 
 #editlinkname{
@@ -348,7 +368,7 @@ input:focus {
 
 .axis path,.axis line {
   fill: none;
-  stroke: #000;
+  stroke: #ccc;
   shape-rendering: crispEdges;
 }
author	Owen <despito@MacBook-Pro-de-Despito.local>	2014-07-21 15:08:08 +0300
committer	Owen <despito@MacBook-Pro-de-Despito.local>	2014-07-21 15:08:08 +0300
commit	fb95c775d0339c5bf180362c01c6cd433ee3ea97 (patch)
tree	31bc2d7eb94eaae8befb99caf1b5abfa6d29cc63
parent	5cb71985cfdcf65ad76c5c3d416011a042cbf787 (diff)