diff options
| -rw-r--r-- | index.html | 5 | ||||
| -rw-r--r-- | scripts/buttons.js | 13 | ||||
| -rw-r--r-- | scripts/gant.js | 65 | ||||
| -rw-r--r-- | scripts/rhizicore.js | 45 | ||||
| -rw-r--r-- | style.css | 24 |
5 files changed, 94 insertions, 58 deletions
@@ -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); } @@ -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; } |