From 3af0a82791b6bf3e24015d652c9fbddba0d1cfeb Mon Sep 17 00:00:00 2001
From: Alon Levy <alon@pobox.com>
Date: Tue, 11 Nov 2014 22:57:24 +0200
Subject: Fix highlight of node and edge

TODO 1:
This is a bit magic. The problem is that I'm not sure exactly if the
nodes/edges given to the click callback are updated correctly when we
just do renames. So the code is a bit protective - it compares names
instead of comparing objects. This might work or not later with multiple
edges. But I really need to fix it so we never have callbacks with stale
data.

TODO 2:
Plus I'm not using classes correctly, instead setting attributes in the
d3 update function (update). This is already done but is a bad smell,
makes it harder to change properties easily. Used for stroke-width here
and for nodes, for color.
---
 scripts/rz_core.js | 42 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

(limited to 'scripts')

diff --git a/scripts/rz_core.js b/scripts/rz_core.js
index d65707aa..e1da101c 100644
--- a/scripts/rz_core.js
+++ b/scripts/rz_core.js
@@ -165,7 +165,9 @@ function update(no_relayout) {
     link_g.append("path")
         .attr("class", "ghostlink")
         .on("click", function(d, i) {
-            var that = this;
+            var that = this,
+                source = this.link.source,
+                target = this.link.target;
 
             view.edge_info.on_delete(function () {
                 graph.removeLink(that.link);
@@ -173,6 +175,11 @@ function update(no_relayout) {
                 view.edge_info.hide();
             });
             view.edge_info.show();
+            highlight(source);
+            highlight(target);
+            source.state = 'chosen';
+            target.state = 'chosen';
+            graph.update(true);
         });
 
     link.style("stroke-dasharray", function(d,i){
@@ -182,6 +189,14 @@ function update(no_relayout) {
             return "0,0";
         });
 
+    link.selectAll('path.link')
+        .attr('stroke-width', function(d) {
+            if (d.state === 'exit' || d.state === 'enter') {
+                return "4px";
+            }
+            return "2.0px";
+        });
+
     link.exit().remove();
 
     link_group.selectAll('.ghostlink')
@@ -233,11 +248,15 @@ function update(no_relayout) {
             }
             if (d.state !== "temp"){
                 editNode(this, d, i);
-                showInfo(d, i);
+                showInfo(this.node, i);
             }
         })
         .call(drag);
 
+    node.each(function (d) {
+        this.node = d;
+    });
+
     nodetext = nodeEnter.insert("text")
         .attr("class", "nodetext graph")
         .attr("dx", 15)
@@ -529,13 +548,16 @@ function removeHighlight() {
 
 function highlight(n)
 {
-    var connected = graph.getConnectedNodesAndLinks(n, 1),
+    var n,
+        connected = graph.getConnectedNodesAndLinks(n, 1),
         i,
+        node,
+        link,
         data;
 
     n.state = 'chosen';
 
-    for (i in connected.nodes) {
+    for (i = 0 ; i < connected.nodes.length ; ++i) {
         data = connected.nodes[i];
         node = data.node;
         switch (data.type) {
@@ -547,6 +569,18 @@ function highlight(n)
             break;
         };
     }
+    for (i = 0 ; i < connected.links.length ; ++i) {
+        data = connected.links[i];
+        link = data.link;
+        switch (data.type) {
+        case 'exit':
+            link.state = 'exit';
+            break;
+        case 'enter':
+            link.state = 'enter';
+            break;
+        };
+    }
 }
 
 function showInfo(d, i) {
-- 
cgit v1.3.1