forcegraph: draw clients above everything else

lib/forcegraph.js

@@ -284,6 +284,64 @@ define(["d3"], function (d3) {
       translateP = translate
       scaleP = scale
 
+      var clientColor = "rgba(230, 50, 75, 1.0)"
+      var unknownColor = "#D10E2A"
+      var nodeColor = "#F2E3C6"
+      var highlightColor = "rgba(252, 227, 198, 0.15)"
+      var nodeRadius = 6
+
+      // -- draw links --
+      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 + dx * nodeRadius, d.source.y + dy * nodeRadius)
+        ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius)
+        ctx.strokeStyle = d.color
+        ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
+        ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
+        ctx.stroke()
+      })
+
+      ctx.restore()
+
+      // -- draw labels --
+      if (scale > 0.9)
+        intNodes.filter(visibleNodes).forEach(drawLabel, scale)
+
+
+      // -- draw unknown nodes --
+      ctx.beginPath()
+      unknownNodes.filter(visibleNodes).forEach(function (d) {
+        ctx.moveTo(d.x + nodeRadius, d.y)
+        ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
+      })
+
+      ctx.strokeStyle = unknownColor
+      ctx.lineWidth = nodeRadius
+
+      ctx.stroke()
+
+
+      // -- draw nodes --
+      ctx.beginPath()
+      nodes.filter(visibleNodes).forEach(function (d) {
+        ctx.moveTo(d.x + nodeRadius, d.y)
+        ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
+      })
+
+      ctx.strokeStyle = nodeColor
+      ctx.lineWidth = nodeRadius
+
+      ctx.stroke()
+
+      // -- draw clients --
+      ctx.save()
       ctx.beginPath()
       nodes.filter(visibleNodes).forEach(function (d) {
         var clients = d.o.node.statistics.clients
@@ -311,61 +369,12 @@ define(["d3"], function (d3) {
         }
       })
 
-      var clientColor = "#E6324B"
-      var unknownColor = "#D10E2A"
-      var nodeColor = "#F2E3C6"
-      var highlightColor = "rgba(252, 227, 198, 0.15)"
-      var nodeRadius = 6
-
       ctx.fillStyle = clientColor
+      ctx.globalCompositeOperation = "overlay"
       ctx.fill()
-
-      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 + dx * nodeRadius, d.source.y + dy * nodeRadius)
-        ctx.lineTo(d.target.x - dx * nodeRadius, d.target.y - dy * nodeRadius)
-        ctx.strokeStyle = d.color
-        ctx.globalAlpha = d.o.vpn ? 0.1 : 0.8
-        ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
-        ctx.stroke()
-      })
-
       ctx.restore()
 
-      if (scale > 0.9)
+      // -- draw node highlights --
-        intNodes.filter(visibleNodes).forEach(drawLabel, scale)
-
-      ctx.beginPath()
-
-      unknownNodes.filter(visibleNodes).forEach(function (d) {
-        ctx.moveTo(d.x + nodeRadius, d.y)
-        ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
-      })
-
-      ctx.strokeStyle = unknownColor
-      ctx.lineWidth = nodeRadius
-
-      ctx.stroke()
-
-      ctx.beginPath()
-      nodes.filter(visibleNodes).forEach(function (d) {
-        ctx.moveTo(d.x + nodeRadius, d.y)
-        ctx.arc(d.x, d.y, nodeRadius, 0, 2 * Math.PI)
-      })
-
-      ctx.strokeStyle = nodeColor
-      ctx.lineWidth = nodeRadius
-
-      ctx.stroke()
-
       if (highlightedNodes.length) {
         ctx.save()
         ctx.shadowColor = "rgba(255, 255, 255, 1.0)"
@@ -386,6 +395,7 @@ define(["d3"], function (d3) {
         ctx.restore()
       }
 
+      // -- draw link highlights --
       if (highlightedLinks.length) {
         ctx.save()
         ctx.lineWidth = 2 * 5 * nodeRadius