lib/pairing_matrix/server/public/matrix.js in pairing_matrix-0.1.1 vs lib/pairing_matrix/server/public/matrix.js in pairing_matrix-0.1.2

@@ -1,6 +1,8 @@
 var playground;
+
+
 function PlayGround(selector) {
     this.el = null;
     this.centerX = 400;
     this.centerY = 350;
     this.radius = 300;
@@ -43,10 +45,11 @@
                 var toIndex = (d[1] == "") ? fromIndex : _.indexOf(playground.playersData, d[1]),
                     toCoordinates = playground.getPlayerCoordinates(toIndex);
                 return "M " + fromCoordinates.x + " " + fromCoordinates.y + " Q 400 350 " +
                     toCoordinates.x + " " + toCoordinates.y;
             })
+            .attr("id", function(d) {return d.join('_')})
             .attr("fill", "none")
             .attr("stroke", "#DD1031")
             .attr("stroke-width", function (d) {
                 return playground.connectionScale(d[2])
             })
@@ -91,11 +94,12 @@
             .attr("z-index", 10)
             .attr("class", "player")
             .attr("id", function (d) {
                 return d
             })
-            .call(this.dragger());
+            .on('mouseover', this.mouseOver)
+            .on('mouseout', this.mouseOut)
         players.append("text")
             .attr("class", "player_names")
             .text(function (d) {
                 return d
             })
@@ -106,24 +110,61 @@
                 return playground.getPlayerCoordinates(i).y + 3
             })
             .attr("fill", "#000000");
     };
 
-    this.dragger = function () {
-        return d3.drag().on("drag", function (d) {
-                var player = d3.select(this);
-                var playerName = $(player[0]).siblings(".player_names");
-                var newPoint = playground.closestPointOnCircumference();
-                player.attr("cx", newPoint[0]);
-                player.attr("cy", newPoint[1]);
-                playerName.attr("x", function () {
-                    return newPoint[0] + 2
-                });
-                playerName.attr("y", function () {
-                    return newPoint[1] + 3
-                });
-                playground.updateConnectorsPath(player.attr("id"), newPoint);
-            })
+    this.getAllPairsContaining = function(name) {
+        return _.filter(this.validPairsData, function(pair) {
+            return pair.indexOf(name) >= 0
+        });
+    };
+
+    this.mouseOut = function(id) {
+        var connectedPairs = playground.getAllPairsContaining(id);
+        connectedPairs.forEach(function(pair) {
+            var firstPerson = pair[0];
+            var secondPerson = pair[1];
+            d3.selectAll($("#" + firstPerson))
+                .style("fill", function(d) {return d.color})
+                .style("stroke", "#EE1031")
+            d3.selectAll($("#" + secondPerson))
+                .style("fill", function(d) {return d.color})
+                .style("stroke", "#EE1031")
+            var pairId = pair.join('_');
+            d3.selectAll($("#" + pairId))
+            .style("fill", "none")
+            .style("stroke", "red")
+            .style("stroke-width", function(d) {return d.color})
+        })
+        d3.selectAll($("#" + id))
+        .style("fill", function(d) {return d.color})
+        .style("stroke", "#EE1031")
+        .attr("stroke-opacity", 0.75)
+        .attr("stroke-width", function (d) {
+            return playground.connectionScale(playground.getSoloContribution(d))
+        });
+    }
+
+    this.mouseOver = function (id) {
+        var connectedPairs = playground.getAllPairsContaining(id);
+        connectedPairs.forEach(function(pair) {
+            var firstPerson = pair[0];
+            var secondPerson = pair[1];
+            d3.selectAll($("#" + firstPerson))
+                .style("fill", "red")
+                .style("stroke", "blue");
+            d3.selectAll($("#" + secondPerson))
+                .style("fill", "red")
+                .style("stroke", "blue");
+            var pairId = pair.join('_');
+            d3.selectAll($("#" + pairId))
+            .style("fill", "none")
+            .style("stroke", "black")
+            .style("stroke-width", "2px")
+        })
+        d3.selectAll($("#" + id))
+        .style("fill", "red")
+        .style("stroke", "blue");
     };
 
     this.updateConnectorsPath = function (playerId, newPoint) {
         playground.el
             .selectAll(".connect[data-from='" + playerId + "']")