rz_core: move styling to css for easy skinning

So now you can change for instance:

$('.perm').each(function(i,x) { x.style.opacity=0.1; })

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);
+            }
         });
     //}