forcegraph: show vpn links

lib/forcegraph.js

@@ -200,16 +200,20 @@ define(["d3"], function (d3) {
     }
 
     function drawLabel(d) {
-      var sum = d.neighbours.reduce(function (a, b) {
-        return [a[0] + b.x, a[1] + b.y]
+      var neighbours = d.neighbours.filter(function (d) {
+        return !d.link.o.vpn
+      })
+
+      var sum = neighbours.reduce(function (a, b) {
+        return [a[0] + b.node.x, a[1] + b.node.y]
       }, [0, 0])
 
-      var sumCos = sum[0] - d.x * d.neighbours.length
-      var sumSin = sum[1] - d.y * d.neighbours.length
+      var sumCos = sum[0] - d.x * neighbours.length
+      var sumSin = sum[1] - d.y * neighbours.length
 
       var angle = Math.PI / 2
 
-      if (d.neighbours.length > 0)
+      if (neighbours.length > 0)
         angle = Math.PI + Math.atan2(sumSin, sumCos)
 
       var cos = Math.cos(angle)
@@ -315,16 +319,20 @@ define(["d3"], function (d3) {
         ctx.restore()
       }
 
-      ctx.lineWidth = 2.5
+      ctx.save()
 
       links.forEach(function (d) {
         ctx.beginPath()
         ctx.moveTo(d.source.x, d.source.y)
         ctx.lineTo(d.target.x, d.target.y)
         ctx.strokeStyle = d.color
+        ctx.globalAlpha = d.o.vpn ? 0.1 : 1
+        ctx.lineWidth = d.o.vpn ? 1.5 : 2.5
         ctx.stroke()
       })
 
+      ctx.restore()
+
       if (scale > 0.9)
         intNodes.filter(visibleNodes).forEach(drawLabel, scale)
 
@@ -337,6 +345,7 @@ define(["d3"], function (d3) {
 
       ctx.strokeStyle = "#d00000"
       ctx.fillStyle = "#ffffff"
+      ctx.lineWidth = 2.5
 
       ctx.fill()
       ctx.stroke()
@@ -470,12 +479,19 @@ define(["d3"], function (d3) {
     ctx = canvas.getContext("2d")
 
     force = d3.layout.force()
-              .charge(-80)
-              .gravity(0.01)
-              .chargeDistance(8 * LINK_DISTANCE)
-              .linkDistance(LINK_DISTANCE)
+              .charge(-250)
+              .gravity(0.1)
+              .linkDistance(function (d) {
+                if (d.o.vpn)
+                  return 0
+                else
+                  return LINK_DISTANCE
+              })
               .linkStrength(function (d) {
-                return Math.max(0.5, 1 / d.o.tq)
+                if (d.o.vpn)
+                  return 0
+                else
+                  return Math.max(0.5, 1 / d.o.tq)
               })
               .on("tick", tickEvent)
               .on("end", savePositions)
@@ -515,9 +531,7 @@ define(["d3"], function (d3) {
         oldLinks[d.o.id] = d
       })
 
-      intLinks = data.graph.links.filter( function (d) {
-        return !d.vpn
-      }).map( function (d) {
+      intLinks = data.graph.links.map( function (d) {
         var e
         if (d.id in oldLinks)
           e = oldLinks[d.id]
@@ -572,8 +586,8 @@ define(["d3"], function (d3) {
       })
 
       intLinks.forEach(function (d) {
-        d.source.neighbours[d.target.o.id] = d.target
-        d.target.neighbours[d.source.o.id] = d.source
+        d.source.neighbours[d.target.o.id] = {node: d.target, link: d}
+        d.target.neighbours[d.source.o.id] = {node: d.source, link: d}
 
         if (d.o.source.node && d.o.target.node)
           linksDict[d.o.id] = d