forcegraph: bidirectional links

lib/forcegraph.js

@@ -242,7 +242,8 @@ define(["d3"], function (d3) {
     }
 
     function visibleLinks(d) {
-      return (d.source.x > screenRect.left && d.source.x < screenRect.right &&
+      return (d.o.isVPN ||
+              d.source.x > screenRect.left && d.source.x < screenRect.right &&
               d.source.y > screenRect.top && d.source.y < screenRect.bottom) ||
              (d.target.x > screenRect.left && d.target.x < screenRect.right &&
               d.target.y > screenRect.top && d.target.y < screenRect.bottom)
@@ -324,13 +325,16 @@ define(["d3"], function (d3) {
       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)
+        var a = Math.sqrt(dx * dx + dy * dy) * 2
         dx /= a
         dy /= a
 
+        var distancex = d.target.x - d.source.x - (10 * dx)
+        var distancey = d.target.y - d.source.y - (10 * dy)
+
         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.lineTo(d.target.x - (distancex / 2) - dx * nodeRadius, d.target.y - (distancey / 2) - dy * nodeRadius)
         ctx.strokeStyle = d.o.type === "Kabel" ? cableColor : d.color
         ctx.globalAlpha = d.o.isVPN ? 0.1 : 0.8
         ctx.lineWidth = d.o.isVPN ? 1.5 : 2.5
@@ -470,32 +474,34 @@ define(["d3"], function (d3) {
       requestAnimationFrame(redraw)
     }
 
-    function distance(a, b) {
+    function distance(ax, ay, bx, by) {
-      return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)
+      return Math.pow(ax - bx, 2) + Math.pow(ay - by, 2)
     }
 
     function distancePoint(a, b) {
-      return Math.sqrt(distance(a, b))
+      return Math.sqrt(distance(a.x, a.y, b.x, b.y))
     }
 
     function distanceLink(p, a, b) {
       /* http://stackoverflow.com/questions/849211 */
 
-      var l2 = distance(a, b)
+      var bx = b.x - ((b.x - a.x) / 2)
+      var by = b.y - ((b.y - a.y) / 2)
+
+      var l2 = distance(a.x, a.y, bx, by)
 
       if (l2 === 0)
-        return distance(p, a)
+        return distance(p.x, p.y, a.x, a.y)
 
-      var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2
+      var t = ((p.x - a.x) * (bx - a.x) + (p.y - a.y) * (by - a.y)) / l2
 
       if (t < 0)
-        return distance(p, a)
+        return distance(p.x, p.y, a.x, a.y)
 
       if (t > 1)
-        return distance(p, b)
+        return distance(p.x, p.y, bx, by)
 
-      return Math.sqrt(distance(p, { x: a.x + t * (b.x - a.x),
+      return Math.sqrt(distance(p.x, p.y, a.x + t * (bx - a.x), a.y + t * (by - a.y) ))
-                                     y: a.y + t * (b.y - a.y) }))
     }
 
     function translateXY(d) {
@@ -696,6 +702,15 @@ define(["d3"], function (d3) {
           linksDict[d.o.id] = d
       })
 
+      intLinks.forEach(function (d) {
+        if (linksDict[d.target.o.node_id + "-" + d.source.o.node_id])
+          return
+
+        var obj = { source: d.target, target: d.source, o: { isVPN: d.o.isVPN, type: "dead", id: d.target.o.node_id + "-" + d.source.o.node_id, tq: 1 }, color: "rgba(255, 255, 255, 0.6)" }
+        intLinks.push(obj)
+        linksDict[d.target.o.node_id + "-" + d.source.o.node_id] = obj
+      })
+
       intNodes.forEach(function (d) {
         d.neighbours = Object.keys(d.neighbours).map(function (k) {
           return d.neighbours[k]