forcegraph: mark uplink nodes

lib/forcegraph.js

@@ -17,6 +17,8 @@ define(["d3"], function (d3) {
     var highlightedNodes = []
     var highlightedLinks = []
     var nodes = []
+    var uplinkNodes = []
+    var nonUplinkNodes = []
     var unknownNodes = []
     var savedPanZoom
 
@@ -251,6 +253,48 @@ define(["d3"], function (d3) {
              d.y + margin > screenRect.top && d.y - margin < screenRect.bottom
     }
 
+    function drawNode(color, radius, scale, r) {
+      var node = document.createElement("canvas")
+      node.width = scale * radius * 8 * r
+      node.height = node.width
+
+      var nctx = node.getContext("2d")
+      nctx.scale(scale * r, scale * r)
+      nctx.save()
+
+      nctx.translate(-node.width / scale, -node.height / scale)
+      nctx.lineWidth = radius
+
+      nctx.beginPath()
+      nctx.moveTo(radius, 0)
+      nctx.arc(0, 0, radius, 0, 2 * Math.PI)
+
+      nctx.strokeStyle = "rgba(255, 0, 0, 1)"
+      nctx.shadowOffsetX = node.width * 1.5 + 0
+      nctx.shadowOffsetY = node.height * 1.5 + 3
+      nctx.shadowBlur = 12
+      nctx.shadowColor = "rgba(0, 0, 0, 0.16)"
+      nctx.stroke()
+      nctx.shadowOffsetX = node.width * 1.5 + 0
+      nctx.shadowOffsetY = node.height * 1.5 + 3
+      nctx.shadowBlur = 12
+      nctx.shadowColor = "rgba(0, 0, 0, 0.23)"
+      nctx.stroke()
+
+      nctx.restore()
+      nctx.translate(node.width / 2 / scale / r, node.height / 2 / scale / r)
+
+      nctx.beginPath()
+      nctx.moveTo(radius, 0)
+      nctx.arc(0, 0, radius, 0, 2 * Math.PI)
+
+      nctx.strokeStyle = color
+      nctx.lineWidth = radius
+      nctx.stroke()
+
+      return node
+    }
+
     function redraw() {
       var r = window.devicePixelRatio
       var translate = zoomBehavior.translate()
@@ -268,7 +312,8 @@ define(["d3"], function (d3) {
 
       var clientColor = "rgba(230, 50, 75, 1.0)"
       var unknownColor = "#D10E2A"
-      var nodeColor = "#F2E3C6"
+      var nonUplinkColor = "#F2E3C6"
+      var uplinkColor = "#5BAAEB"
       var highlightColor = "rgba(252, 227, 198, 0.15)"
       var nodeRadius = 6
 
@@ -306,50 +351,19 @@ define(["d3"], function (d3) {
 
 
       // -- draw nodes --
-
-      var node = document.createElement("canvas")
-      node.width = scale * nodeRadius * 8 * r
-      node.height = node.width
-
-      var nctx = node.getContext("2d")
-      nctx.scale(scale * r, scale * r)
-      nctx.save()
-
-      nctx.translate(-node.width / scale, -node.height / scale)
-      nctx.lineWidth = nodeRadius
-
-      nctx.beginPath()
-      nctx.moveTo(nodeRadius, 0)
-      nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
-
-      nctx.strokeStyle = "rgba(255, 0, 0, 1)"
-      nctx.shadowOffsetX = node.width * 1.5 + 0
-      nctx.shadowOffsetY = node.height * 1.5 + 3
-      nctx.shadowBlur = 12
-      nctx.shadowColor = "rgba(0, 0, 0, 0.16)"
-      nctx.stroke()
-      nctx.shadowOffsetX = node.width * 1.5 + 0
-      nctx.shadowOffsetY = node.height * 1.5 + 3
-      nctx.shadowBlur = 12
-      nctx.shadowColor = "rgba(0, 0, 0, 0.23)"
-      nctx.stroke()
-
-      nctx.restore()
-      nctx.translate(node.width / 2 / scale / r, node.height / 2 / scale / r)
-
-      nctx.beginPath()
-      nctx.moveTo(nodeRadius, 0)
-      nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI)
-
-      nctx.strokeStyle = nodeColor
-      nctx.lineWidth = nodeRadius
-      nctx.stroke()
-
       ctx.save()
       ctx.scale(1 / scale / r, 1 / scale / r)
-      nodes.filter(visibleNodes).forEach(function (d) {
+
-        ctx.drawImage(node, scale * r * d.x - node.width / 2, scale * r * d.y - node.height / 2)
+      var nonUplinkNode = drawNode(nonUplinkColor, nodeRadius, scale, r)
+      nonUplinkNodes.filter(visibleNodes).forEach(function (d) {
+        ctx.drawImage(nonUplinkNode, scale * r * d.x - nonUplinkNode.width / 2, scale * r * d.y - nonUplinkNode.height / 2)
       })
+
+      var uplinkNode = drawNode(uplinkColor, nodeRadius, scale, r)
+      uplinkNodes.filter(visibleNodes).forEach(function (d) {
+        ctx.drawImage(uplinkNode, scale * r * d.x - uplinkNode.width / 2, scale * r * d.y - uplinkNode.height / 2)
+      })
+
       ctx.restore()
 
       // -- draw clients --
@@ -682,6 +696,8 @@ define(["d3"], function (d3) {
       })
 
       nodes = intNodes.filter(function (d) { return d.o.node })
+      uplinkNodes = nodes.filter(function (d) { return d.o.node.flags.uplink })
+      nonUplinkNodes = nodes.filter(function (d) { return !d.o.node.flags.uplink })
       unknownNodes = intNodes.filter(function (d) { return !d.o.node })
 
       if (localStorageTest()) {