forcegraph: more visible highlight

lib/forcegraph.js

@@ -193,7 +193,6 @@ define(["d3"], function (d3) {
 
           if (l) {
             highlightedLinks = [l]
-            highlightedNodes = [l.source, l.target]
 
             if (!nopanzoom) {
               var x = d3.extent([l.source, l.target], function (d) { return d.x })
@@ -313,36 +312,28 @@ define(["d3"], function (d3) {
       })
 
       var clientColor = "#E6324B"
-      var hilightColor = "#FA940F"
       var unknownColor = "#D10E2A"
       var nodeColor = "#F2E3C6"
+      var highlightColor = "rgba(252, 227, 198, 0.15)"
+      var nodeRadius = 6
 
       ctx.fillStyle = clientColor
       ctx.fill()
 
-      if (highlightedLinks.length) {
-        ctx.save()
-        ctx.lineWidth = 10
-        ctx.strokeStyle = hilightColor
-
-        highlightedLinks.forEach(function (d) {
-          ctx.beginPath()
-          ctx.moveTo(d.source.x, d.source.y)
-          ctx.lineTo(d.target.x, d.target.y)
-          ctx.stroke()
-        })
-
-        ctx.restore()
-      }
-
       ctx.save()
 
       links.forEach(function (d) {
+        var dx = d.target.x - d.source.x
+        var dy = d.target.y - d.source.y
+        var a = Math.sqrt(dx * dx + dy * dy)
+        dx /= a
+        dy /= a
+
         ctx.beginPath()
-        ctx.moveTo(d.source.x, d.source.y)
+        ctx.moveTo(d.source.x + dx * nodeRadius, d.source.y + dy * nodeRadius)
-        ctx.lineTo(d.target.x, d.target.y)
+        ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius)
         ctx.strokeStyle = d.color
-        ctx.globalAlpha = d.o.vpn ? 0.1 : 1
+        ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
         ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
         ctx.stroke()
       })
@@ -355,35 +346,61 @@ define(["d3"], function (d3) {
       ctx.beginPath()
 
       unknownNodes.filter(visibleNodes).forEach(function (d) {
-        ctx.moveTo(d.x + 8, d.y)
+        ctx.moveTo(d.x + nodeRadius, d.y)
-        ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
+        ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
       })
 
-      ctx.fillStyle = unknownColor
+      ctx.strokeStyle = unknownColor
+      ctx.lineWidth = nodeRadius
 
-      ctx.fill()
+      ctx.stroke()
 
       ctx.beginPath()
       nodes.filter(visibleNodes).forEach(function (d) {
-        ctx.moveTo(d.x + 8, d.y)
+        ctx.moveTo(d.x + nodeRadius, d.y)
-        ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
+        ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
       })
 
-      ctx.fillStyle = nodeColor
+      ctx.strokeStyle = nodeColor
+      ctx.lineWidth = nodeRadius
 
-      ctx.fill()
+      ctx.stroke()
 
       if (highlightedNodes.length) {
         ctx.save()
-        ctx.strokeStyle = hilightColor
+        ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
-        ctx.fillStyle = nodeColor
+        ctx.shadowBlur = 10 * nodeRadius
-        ctx.lineWidth = 6
+        ctx.shadowOffsetX = 0
+        ctx.shadowOffsetY = 0
+        ctx.globalCompositeOperation = "lighten"
+        ctx.fillStyle = highlightColor
 
         highlightedNodes.forEach(function (d) {
           ctx.beginPath()
-          ctx.moveTo(d.x + 8, d.y)
+          ctx.moveTo(d.x + 5 * nodeRadius, d.y)
-          ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI)
+          ctx.arc(d.x, d.y, 5 * nodeRadius, 0, 2 * Math.PI)
           ctx.fill()
+          ctx.restore()
+        })
+
+        ctx.restore()
+      }
+
+      if (highlightedLinks.length) {
+        ctx.save()
+        ctx.lineWidth = 2 * 5 * nodeRadius
+        ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
+        ctx.shadowBlur = 10 * nodeRadius
+        ctx.shadowOffsetX = 0
+        ctx.shadowOffsetY = 0
+        ctx.globalCompositeOperation = "lighten"
+        ctx.strokeStyle = highlightColor
+        ctx.lineCap = "round"
+
+        highlightedLinks.forEach(function (d) {
+          ctx.beginPath()
+          ctx.moveTo(d.source.x, d.source.y)
+          ctx.lineTo(d.target.x, d.target.y)
           ctx.stroke()
         })