diff options
| -rw-r--r-- | res/css/style.css | 97 | ||||
| -rw-r--r-- | src/rz_core.js | 58 |
2 files changed, 99 insertions, 56 deletions
diff --git a/res/css/style.css b/res/css/style.css index 14a33d77..5b9607b8 100644 --- a/res/css/style.css +++ b/res/css/style.css @@ -101,11 +101,11 @@ input:focus { } .circle { - stroke: #fff; stroke-width: 1.5px; z-index: 100; pointer-events:all; + box-shadow: 0 0 0px #FFFF8F; } .nodetext { @@ -139,6 +139,82 @@ input:focus { z-index:2; // higher than link, lower than node } +.circle.chosen { + stroke: #EDE275; +} +.circle.enter { + stroke: #EDE275; +} +.circle.bubble { + stroke: #101010; +} +.circle.exit { + stroke: #EDE275; +} +.circle.chainlink { + stroke: #AAA; +} + +.circle.temp { + box-shadow: 0 0 40px #FFFF8F; +} + +.circle.temp, .circle.chosen { + stroke-width: 3px; +} + +.circle.temp.empty { + stroke-width: 1.5px; +} + +/* Per node and edge type (type is a property of nodes and links) styling + * note that this should be automatically generated somehow for user settings. + */ + +.circle.person { + fill: #FCB924; +} + + +.circle.project { + fill: #009DDC; +} + +.circle.skill { + fill: #62BB47; +} + +.circle.deliverable { + fill: #202020; +} + +.circle.objective { + fill: #933E99; +} + +.circle.empty { + fill: #080808; +} + +.circle.chainlink { + fill: #fff; +} + +.circle.bubble { + fill: rgba(0,0,0,0.2); +} + + +// Selected parts of the graph, right now by clicking, later with search. + +.graph.link.selected { + fill: #EDE275; +} + +.graph.link.temp_and { + stroke-dasharray: 3,3; +} + .highlightlink { fill: none; stroke: #EDE275; @@ -147,18 +223,18 @@ input:focus { pointer-events: none; } -.enterlink { +.link.enter { fill: none; stroke: #EDE275; - stroke-width: 2px; + stroke-width: 4px; z-index:1; pointer-events: none; } -.exitlink { +.link.exit { fill: none; stroke: #EDE275; - stroke-width: 2px; + stroke-width: 4px; z-index:1; pointer-events: none; } @@ -221,16 +297,6 @@ input:focus { display:none; } -/* -.typeselection{ - position:fixed; - right:20px; - top:200px; - font-size:16px; - text-align:right; - -}*/ - .typeselection{ position:fixed; left:0; @@ -485,4 +551,3 @@ input:focus { .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } - diff --git a/src/rz_core.js b/src/rz_core.js index 7b56d41b..38f3f9a4 100644 --- a/src/rz_core.js +++ b/src/rz_core.js @@ -25,11 +25,6 @@ var drag; var force; -var state_to_link_class = { - enter:'enterlink graph', - exit:'exitlink graph', -}; - function recenterZoom() { vis.attr("transform", "translate(0,0)scale(1)"); } @@ -189,12 +184,11 @@ function update(no_relayout) { .attr("markerWidth", 4) .attr("markerHeight", 4) .attr("orient", "auto") - .attr("class", "graph") - .style("fill", function(d){ + .attr("class", function(d){ if (d.state==="enter" || d.state==="exit") { - return "EDE275"; + return "selected"; } else { - return "#aaa"; + return ""; } }) .append("svg:path") @@ -202,7 +196,7 @@ function update(no_relayout) { link_g.append("path") .attr("class", function(d) { - return state_to_link_class[d.state] || 'link graph'; + return d.state + ' link graph'; }) .attr("marker-end", "url(#end)"); @@ -227,19 +221,16 @@ function update(no_relayout) { graph.update(true); }); - link.style("stroke-dasharray", function(d,i){ + link.attr("class", function(d,i){ if(d.name && d.name.replace(/ /g,"")=="and" && d.state==="temp") - return "3,3"; + return "graph link temp_and"; else - return "0,0"; + return "graph link"; }); link.selectAll('path.link') - .attr('stroke-width', function(d) { - if (d.state === 'exit' || d.state === 'enter') { - return "4px"; - } - return "2.0px"; + .attr('class', function(d) { + return d.state + " link graph"; }); link.exit().remove(); @@ -294,6 +285,7 @@ function update(no_relayout) { } if (d.state !== "temp"){ editNode(this, d, i); + removeHighlight(); showInfo(this.node, i); } }) @@ -327,30 +319,12 @@ function update(no_relayout) { circle = nodeEnter.insert("circle"); node.select('g.node circle') - .attr("class", "circle graph") + .attr("class", function(d) { + return d.type + " " + d.state + " circle graph"; + }) .attr("r", function(d) { return view_helpers.customSize(d.type) - 2; }) - .style("fill", function(d) { - return view_helpers.customColor(d.type); - }) - .style("stroke", function(d) { - if (d.state === "chosen") return "#EDE275"; - if (d.state === "enter") return "#EDE275"; - if (d.type === "bubble") return "#101010"; - if (d.state === "exit") return "#EDE275"; - if (d.type === "chainlink") return "#AAA"; - - return "#fff"; - }) - .style("stroke-width", function(d) { - if (d.state === "temp" && d.type !== "empty" || d.state === "chosen") return "3px"; - else return "1.5px"; - }) - .style("box-shadow", function(d) { - if (d.state === "temp") return "0 0 40px #FFFF8F"; - else return "0 0 0px #FFFF8F"; - }) .on("click", function(d, i) { if (d3.event.defaultPrevented) { // drag happened, ignore click https://github.com/mbostock/d3/wiki/Drag-Behavior#on @@ -358,6 +332,7 @@ function update(no_relayout) { } d3.event.stopPropagation(); if(d.state!=="temp") { + removeHighlight(); showInfo(d, i); } else { removeHighlight(); @@ -386,7 +361,10 @@ function update(no_relayout) { } }) .on("click", function(d, i) { - if(d.state!=="temp")showInfo(d, i); + if(d.state!=="temp") { + removeHighlight(); + showInfo(d, i); + } }); //} |