[TASK] Rewrite forcegraph with d3 v4

README.md

@@ -8,6 +8,7 @@ A web-app to visualize nodes and links on a map for Freifunk open mesh network.
 #### Main differences to https://github.com/ffnord/meshviewer
 _Some similar features might have been implemented/merged_
 
+- Forcegraph rewrite with d3.js v4
 - Map layer modes (Allow to set a default layer based on time combined with a stylesheet)
 - Automatic updates for selected node or list (incl. image stats cache-breaker)
 - Node filter

app.js

@@ -14,7 +14,23 @@ require.config({
     'leaflet.label': '../node_modules/leaflet-label/dist/leaflet.label',
     'chroma-js': '../node_modules/chroma-js/chroma.min',
     'moment': '../node_modules/moment/moment',
-    'd3': '../node_modules/d3/d3.min',
+    // d3 modules indirect dependencies
+    // by d3-zoom: d3-drag
+    'd3-ease': '../node_modules/d3-ease/build/d3-ease',
+    'd3-transition': '../node_modules/d3-transition/build/d3-transition',
+    'd3-color': '../node_modules/d3-color/build/d3-color',
+    'd3-interpolate': '../node_modules/d3-interpolate/build/d3-interpolate',
+    // by d3-force
+    'd3-collection': '../node_modules/d3-collection/build/d3-collection',
+    'd3-dispatch': '../node_modules/d3-dispatch/build/d3-dispatch',
+    'd3-quadtree': '../node_modules/d3-quadtree/build/d3-quadtree',
+    'd3-timer': '../node_modules/d3-timer/build/d3-timer',
+    // by d3-drag: d3-selection
+    // d3 modules dependencies
+    'd3-selection': '../node_modules/d3-selection/build/d3-selection',
+    'd3-force': '../node_modules/d3-force/build/d3-force',
+    'd3-zoom': '../node_modules/d3-zoom/build/d3-zoom',
+    'd3-drag': '../node_modules/d3-drag/build/d3-drag',
     'virtual-dom': '../node_modules/virtual-dom/dist/virtual-dom',
     'rbush': '../node_modules/rbush/rbush',
     'helper': 'utils/helper',
@@ -22,6 +38,9 @@ require.config({
   },
   shim: {
     'leaflet.label': ['leaflet'],
+    'd3-drag': ['d3-selection'],
+    'd3-force': ['d3-collection', 'd3-dispatch', 'd3-quadtree', 'd3-timer'],
+    'd3-zoom': ['d3-drag', 'd3-ease', 'd3-transition', 'd3-color', 'd3-interpolate'],
     'tablesort': {
       exports: 'Tablesort'
     }

lib/forcegraph.js

@@ -1,607 +1,173 @@
-define(['d3', 'helper'], function (d3, helper) {
+define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegraph/draw'],
+  function (d3Selection, d3Force, d3Zoom, d3Drag, math, draw) {
     'use strict';
 
-  var margin = 200;
-  var NODE_RADIUS = 15;
-  var LINE_RADIUS = 12;
-
     return function (config, linkScale, sidebar, router) {
       var self = this;
+      var el;
       var canvas;
       var ctx;
-    var screenRect;
-    var nodesDict;
-    var linksDict;
-    var zoomBehavior;
       var force;
-    var el;
+      var forceLink;
-    var font;
+
-    var doAnimation = false;
+      var transform = d3Zoom.zoomIdentity;
       var intNodes = [];
+      var dictNodes = {};
       var intLinks = [];
-    var highlight;
-    var highlightedNodes = [];
-    var highlightedLinks = [];
-    var nodes = [];
-    var uplinkNodes = [];
-    var nonUplinkNodes = [];
-    var unseenNodes = [];
-    var unknownNodes = [];
-    var savedPanZoom;
 
-    var draggedNode;
+      var NODE_RADIUS_DRAG = 10;
+      var NODE_RADIUS_SELECT = 15;
+      var LINK_RADIUS_SELECT = 12;
 
-    var LINK_DISTANCE = 70;
+      var ZOOM_MIN = 1 / 8;
+      var ZOOM_MAX = 3;
 
-    function graphDiameter(n) {
+      var FORCE_ALPHA = 0.3;
-      return Math.sqrt(n.length / Math.PI) * LINK_DISTANCE * 1.41;
-    }
 
-    function savePositions() {
+      draw.setTransform(transform);
-      var save = intNodes.map(function (d) {
-        return { id: d.o.id, x: d.x, y: d.y };
-      });
-
-      localStorage.setItem('graph/nodeposition', JSON.stringify(save));
-    }
-
-    function nodeName(d) {
-      if (d.o.node && d.o.node.nodeinfo) {
-        return d.o.node.nodeinfo.hostname;
-      }
-      return d.o.id;
-    }
-
-    function dragstart() {
-      var e = translateXY(d3.mouse(el));
-
-      var n = intNodes.filter(function (d) {
-        return distancePoint(e, d) < NODE_RADIUS;
-      });
-
-      if (n.length === 0) {
-        return;
-      }
-
-      draggedNode = n[0];
-      d3.event.sourceEvent.stopPropagation();
-      d3.event.sourceEvent.preventDefault();
-      draggedNode.fixed |= 2;
-
-      draggedNode.px = draggedNode.x;
-      draggedNode.py = draggedNode.y;
-    }
-
-    function dragmove() {
-      if (draggedNode) {
-        var e = translateXY(d3.mouse(el));
-
-        draggedNode.px = e.x;
-        draggedNode.py = e.y;
-        force.resume();
-      }
-    }
-
-    function dragend() {
-      if (draggedNode) {
-        d3.event.sourceEvent.stopPropagation();
-        d3.event.sourceEvent.preventDefault();
-        draggedNode.fixed &= ~2;
-        draggedNode = undefined;
-      }
-    }
-
-    var draggableNode = d3.behavior.drag()
-      .on('dragstart', dragstart)
-      .on('drag', dragmove)
-      .on('dragend', dragend);
-
-    function animatePanzoom(translate, scale) {
-      var translateP = zoomBehavior.translate();
-      var scaleP = zoomBehavior.scale();
-
-      if (!doAnimation) {
-        zoomBehavior.translate(translate);
-        zoomBehavior.scale(scale);
-        panzoom();
-      } else {
-        var start = { x: translateP[0], y: translateP[1], scale: scaleP };
-        var end = { x: translate[0], y: translate[1], scale: scale };
-
-        var interpolate = d3.interpolateObject(start, end);
-        var duration = 500;
-
-        var ease = d3.ease('cubic-in-out');
-
-        d3.timer(function (t) {
-          if (t >= duration) {
-            return true;
-          }
-
-          var v = interpolate(ease(t / duration));
-          zoomBehavior.translate([v.x, v.y]);
-          zoomBehavior.scale(v.scale);
-          panzoom();
-
-          return false;
-        });
-      }
-    }
-
-    function onPanZoom() {
-      savedPanZoom = {
-        translate: zoomBehavior.translate(),
-        scale: zoomBehavior.scale()
-      };
-      panzoom();
-    }
-
-    function panzoom() {
-      var translate = zoomBehavior.translate();
-      var scale = zoomBehavior.scale();
-
-      panzoomReal(translate, scale);
-    }
-
-    function panzoomReal(translate, scale) {
-      screenRect = {
-        left: -translate[0] / scale, top: -translate[1] / scale,
-        right: (canvas.width - translate[0]) / scale,
-        bottom: (canvas.height - translate[1]) / scale
-      };
-
-      requestAnimationFrame(redraw);
-    }
-
-    function getSize() {
-      var sidebarWidth = sidebar();
-      var width = el.offsetWidth - sidebarWidth;
-      var height = el.offsetHeight;
-
-      return [width, height];
-    }
-
-    function panzoomTo(a, b) {
-      var sidebarWidth = sidebar();
-      var size = getSize();
-
-      var targetWidth = Math.max(1, b[0] - a[0]);
-      var targetHeight = Math.max(1, b[1] - a[1]);
-
-      var scaleX = size[0] / targetWidth;
-      var scaleY = size[1] / targetHeight;
-      var scaleMax = zoomBehavior.scaleExtent()[1];
-      var scale = 0.5 * Math.min(scaleMax, Math.min(scaleX, scaleY));
-
-      var centroid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
-      var x = -centroid[0] * scale + size[0] / 2;
-      var y = -centroid[1] * scale + size[1] / 2;
-      var translate = [x + sidebarWidth, y];
-
-      animatePanzoom(translate, scale);
-    }
-
-    function updateHighlight(nopanzoom) {
-      highlightedNodes = [];
-      highlightedLinks = [];
-
-      if (highlight !== undefined) {
-        if (highlight.type === 'node') {
-          var n = nodesDict[highlight.o.nodeinfo.node_id];
-
-          if (n) {
-            highlightedNodes = [n];
-
-            if (!nopanzoom) {
-              panzoomTo([n.x, n.y], [n.x, n.y]);
-            }
-          }
-
-          return;
-        } else if (highlight.type === 'link') {
-          var l = linksDict[highlight.o.id];
-
-          if (l) {
-            highlightedLinks = [l];
-
-            if (!nopanzoom) {
-              var x = d3.extent([l.source, l.target], function (d) {
-                return d.x;
-              });
-              var y = d3.extent([l.source, l.target], function (d) {
-                return d.y;
-              });
-              panzoomTo([x[0], y[0]], [x[1], y[1]]);
-            }
-          }
-
-          return;
-        }
-      }
-
-      if (!nopanzoom) {
-        if (!savedPanZoom) {
-          panzoomTo([0, 0], force.size());
-        } else {
-          animatePanzoom(savedPanZoom.translate, savedPanZoom.scale);
-        }
-      }
-    }
-
-    function drawLabel(d) {
-      var neighbours = d.neighbours.filter(function (n) {
-        return n.link.o.type !== 'fastd' && n.link.o.type !== 'L2TP';
-      });
-
-      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 * neighbours.length;
-      var sumSin = sum[1] - d.y * neighbours.length;
-
-      var angle = Math.PI / 2;
-
-      if (neighbours.length > 0) {
-        angle = Math.PI + Math.atan2(sumSin, sumCos);
-      }
-
-      var cos = Math.cos(angle);
-      var sin = Math.sin(angle);
-
-      var width = d.labelWidth;
-      var height = d.labelHeight;
-
-      var x = d.x + d.labelA * Math.pow(Math.abs(cos), 2 / 5) * Math.sign(cos) - width / 2;
-      var y = d.y + d.labelB * Math.pow(Math.abs(sin), 2 / 5) * Math.sign(sin) - height / 2;
-
-      ctx.drawImage(d.label, x, y, width, height);
-    }
-
-    function visibleLinks(d) {
-      return (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);
-    }
-
-    function visibleNodes(d) {
-      return d.x + margin > screenRect.left && d.x - margin < screenRect.right &&
-        d.y + margin > screenRect.top && d.y - margin < screenRect.bottom;
-    }
-
-    function drawNode(color, radius, scale, r) {
-      var node = document.createElement('canvas');
-      node.height = node.width = scale * radius * 8 * r;
-
-      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.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();
-      var scale = zoomBehavior.scale();
-      var links = intLinks.filter(visibleLinks);
-
-      ctx.save();
-      ctx.setTransform(1, 0, 0, 1, 0, 0);
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.restore();
-
-      ctx.save();
-      ctx.translate(translate[0], translate[1]);
-      ctx.scale(scale, scale);
-
-      var clientColor = 'rgba(230, 50, 75, 1.0)';
-      var unknownColor = '#D10E2A';
-      var nonUplinkColor = '#F2E3C6';
-      var uplinkColor = '#5BAAEB';
-      var unseenColor = '#FFA726';
-      var highlightColor = 'rgba(252, 227, 198, 0.15)';
-      var nodeRadius = 6;
-      var cableColor = '#50B0F0';
-
-      // -- 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.o.type === 'Kabel' ? cableColor : d.color;
-        ctx.globalAlpha = d.o.type === 'fastd' || d.o.type === 'L2TP' ? 0.2 : 0.8;
-        ctx.lineWidth = d.o.type === 'fastd' || d.o.type === 'L2TP' ? 1.5 : 2.5;
-        ctx.stroke();
-      });
-
-      ctx.restore();
-
-      // -- 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.save();
-      ctx.scale(1 / scale / r, 1 / scale / r);
-
-      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);
-      });
-
-      var unseenNode = drawNode(unseenColor, nodeRadius, scale, r);
-      unseenNodes.filter(visibleNodes).forEach(function (d) {
-        ctx.drawImage(unseenNode, scale * r * d.x - unseenNode.width / 2, scale * r * d.y - unseenNode.height / 2);
-      });
-
-      ctx.restore();
-
-      // -- draw clients --
-      ctx.save();
-      ctx.beginPath();
-      if (scale > 0.9) {
-        var startDistance = 16;
-        nodes.filter(visibleNodes).forEach(function (d) {
-          helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, startDistance);
-        });
-      }
-      ctx.fillStyle = clientColor;
-      ctx.fill();
-      ctx.restore();
-
-      // -- draw node highlights --
-      if (highlightedNodes.length) {
-        ctx.save();
-        ctx.globalCompositeOperation = 'lighten';
-        ctx.fillStyle = highlightColor;
-
-        ctx.beginPath();
-        highlightedNodes.forEach(function (d) {
-          ctx.moveTo(d.x + 5 * nodeRadius, d.y);
-          ctx.arc(d.x, d.y, 5 * nodeRadius, 0, 2 * Math.PI);
-        });
-        ctx.fill();
-
-        ctx.restore();
-      }
-
-      // -- draw link highlights --
-      if (highlightedLinks.length) {
-        ctx.save();
-        ctx.lineWidth = 2 * 5 * nodeRadius;
-        ctx.globalCompositeOperation = 'lighten';
-        ctx.strokeStyle = highlightColor;
-        ctx.lineCap = 'round';
-
-        ctx.beginPath();
-        highlightedLinks.forEach(function (d) {
-          ctx.moveTo(d.source.x, d.source.y);
-          ctx.lineTo(d.target.x, d.target.y);
-        });
-        ctx.stroke();
-
-        ctx.restore();
-      }
-
-      // -- draw labels --
-      if (scale > 0.9) {
-        intNodes.filter(visibleNodes).forEach(drawLabel, scale);
-      }
-
-      ctx.restore();
-    }
-
-    function tickEvent() {
-      redraw();
-    }
 
       function resizeCanvas() {
-      var r = window.devicePixelRatio;
+        canvas.width = el.offsetWidth;
-      canvas.width = el.offsetWidth * r;
+        canvas.height = el.offsetHeight;
-      canvas.height = el.offsetHeight * r;
+        draw.setMaxArea(canvas.width, canvas.height);
-      canvas.style.width = el.offsetWidth + 'px';
-      canvas.style.height = el.offsetHeight + 'px';
-      ctx.setTransform(1, 0, 0, 1, 0, 0);
-      ctx.scale(r, r);
-      requestAnimationFrame(redraw);
       }
 
-    function distance(a, b) {
+      function moveTo(x, y) {
-      return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
+        transform.x = (canvas.width + sidebar()) / 2 - x * transform.k;
-    }
+        transform.y = canvas.height / 2 - y * transform.k;
-
-    function distancePoint(a, b) {
-      return Math.sqrt(distance(a, b));
-    }
-
-    function distanceLink(p, a, b) {
-      /* http://stackoverflow.com/questions/849211 */
-
-      var l2 = distance(a, b);
-
-      if (l2 === 0) {
-        return distance(p, a);
-      }
-
-      var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
-
-      if (t < 0) {
-        return distance(p, a);
-      }
-
-      if (t > 1) {
-        return distance(p, b);
-      }
-
-      return Math.sqrt(distance(p, {
-        x: a.x + t * (b.x - a.x),
-        y: a.y + t * (b.y - a.y)
-      }));
-    }
-
-    function translateXY(d) {
-      var translate = zoomBehavior.translate();
-      var scale = zoomBehavior.scale();
-
-      return {
-        x: (d[0] - translate[0]) / scale,
-        y: (d[1] - translate[1]) / scale
-      };
       }
 
       function onClick() {
-      if (d3.event.defaultPrevented) {
+        if (d3Selection.event.defaultPrevented) {
           return;
         }
 
-      var e = translateXY(d3.mouse(el));
+        var e = transform.invert([d3Selection.event.clientX, d3Selection.event.clientY]);
+        var n = force.find(e[0], e[1], NODE_RADIUS_SELECT);
 
-      var n = intNodes.filter(function (d) {
+        if (n !== undefined) {
-        return distancePoint(e, d) < NODE_RADIUS;
+          router.node(n.o.node)();
+          return;
+        }
+
+        e = { x: e[0], y: e[1] };
+
+
+        var closedLink;
+        var radius = LINK_RADIUS_SELECT;
+        intLinks
+          .forEach(function (d) {
+            var distance = math.distanceLink(e, d.source, d.target);
+            if (distance < radius) {
+              closedLink = d;
+              radius = distance;
+            }
           });
 
-      if (n.length > 0) {
+        if (closedLink !== undefined) {
-        router.node(n[0].o.node)();
+          router.link(closedLink.o)();
-        return;
-      }
-
-      var links = intLinks.filter(function (d) {
-        return d.o.type !== 'fastd' && d.o.type !== 'L2TP';
-      }).filter(function (d) {
-        return distanceLink(e, d.source, d.target) < LINE_RADIUS;
-      });
-
-      if (links.length > 0) {
-        router.link(links[0].o)();
         }
       }
 
-    function zoom(z, scale) {
+      function redraw() {
-      var size = getSize();
+        ctx.save();
-      var newSize = [size[0] / scale, size[1] / scale];
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.translate(transform.x, transform.y);
+        ctx.scale(transform.k, transform.k);
 
-      var sidebarWidth = sidebar();
+        intLinks.forEach(draw.drawLink);
-      var delta = [size[0] - newSize[0], size[1] - newSize[1]];
+        intNodes.forEach(draw.drawNode);
-      var translate = z.translate();
-      var translateNew = [sidebarWidth + (translate[0] - sidebarWidth - delta[0] / 2) * scale, (translate[1] - delta[1] / 2) * scale];
 
-      animatePanzoom(translateNew, z.scale() * scale);
+        ctx.restore();
-    }
-
-    function keyboardZoom(z) {
-      return function () {
-        var e = d3.event;
-
-        if (e.altKey || e.ctrlKey || e.metaKey) {
-          return;
-        }
-
-        if (e.keyCode === 43) {
-          zoom(z, 1.41);
-        }
-
-        if (e.keyCode === 45) {
-          zoom(z, 1 / 1.41);
-        }
-      };
       }
 
       el = document.createElement('div');
       el.classList.add('graph');
 
-    font = window.getComputedStyle(el).fontSize + ' ' + window.getComputedStyle(el).fontFamily;
+      forceLink = d3Force.forceLink()
-
+        .distance(function (d) {
-    zoomBehavior = d3.behavior.zoom()
-      .scaleExtent([1 / 3, 3])
-      .on('zoom', onPanZoom)
-      .translate([sidebar(), 0]);
-
-    canvas = d3.select(el)
-      .attr('tabindex', 1)
-      .on('keypress', keyboardZoom(zoomBehavior))
-      .call(zoomBehavior)
-      .append('canvas')
-      .on('click', onClick)
-      .call(draggableNode)
-      .node();
-
-    ctx = canvas.getContext('2d');
-
-    force = d3.layout.force()
-      .charge(-250)
-      .gravity(0.1)
-      .linkDistance(function (d) {
           if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
             return 0;
           }
-        return LINK_DISTANCE;
+          return 75;
         })
-      .linkStrength(function (d) {
+        .strength(function (d) {
           if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
             return 0.02;
           }
           return Math.max(0.5, 1 / d.o.tq);
-      })
-      .on('tick', tickEvent)
-      .on('end', savePositions);
-
-    window.addEventListener('resize', resizeCanvas);
-
-    panzoom();
-
-    self.setData = function setData(data) {
-      var oldNodes = {};
-
-      intNodes.forEach(function (d) {
-        oldNodes[d.o.id] = d;
         });
 
+      var zoom = d3Zoom.zoom()
+        .scaleExtent([ZOOM_MIN, ZOOM_MAX])
+        .on('zoom', function () {
+          transform = d3Selection.event.transform;
+          draw.setTransform(transform);
+          redraw();
+        });
+
+      force = d3Force.forceSimulation()
+        .force('link', forceLink)
+        .force('charge', d3Force.forceManyBody())
+        .force('x', d3Force.forceX().strength(0.02))
+        .force('y', d3Force.forceY().strength(0.02))
+        .force('collide', d3Force.forceCollide())
+        .on('tick', redraw);
+
+      var drag = d3Drag.drag()
+        .subject(function () {
+          var e = transform.invert([d3Selection.event.x, d3Selection.event.y]);
+          var n = force.find(e[0], e[1], NODE_RADIUS_DRAG);
+
+          if (n !== undefined) {
+            n.x = d3Selection.event.x;
+            n.y = d3Selection.event.y;
+            return n;
+          }
+          return undefined;
+        })
+        .on('start', function () {
+          if (!d3Selection.event.active) {
+            force.alphaTarget(FORCE_ALPHA).restart();
+          }
+          d3Selection.event.subject.fx = transform.invertX(d3Selection.event.subject.x);
+          d3Selection.event.subject.fy = transform.invertY(d3Selection.event.subject.y);
+        })
+        .on('drag', function () {
+          d3Selection.event.subject.fx = transform.invertX(d3Selection.event.x);
+          d3Selection.event.subject.fy = transform.invertY(d3Selection.event.y);
+        })
+        .on('end', function () {
+          if (!d3Selection.event.active) {
+            force.alphaTarget(0);
+          }
+          d3Selection.event.subject.fx = null;
+          d3Selection.event.subject.fy = null;
+        });
+
+      canvas = d3Selection.select(el)
+        .append('canvas')
+        .on('click', onClick)
+        .call(drag)
+        .call(zoom)
+        .node();
+
+      ctx = canvas.getContext('2d');
+      draw.setCTX(ctx);
+
+      window.addEventListener('resize', function () {
+        resizeCanvas();
+        redraw();
+      });
+
+      self.setData = function setData(data) {
         intNodes = data.graph.nodes.map(function (d) {
           var e;
-        if (d.id in oldNodes) {
+          if (d.id in dictNodes) {
-          e = oldNodes[d.id];
+            e = dictNodes[d.id];
           } else {
             e = {};
+            dictNodes[d.id] = e;
           }
 
           e.o = d;
@@ -609,136 +175,56 @@ define(['d3', 'helper'], function (d3, helper) {
           return e;
         });
 
-      var newNodesDict = {};
-
-      intNodes.forEach(function (d) {
-        newNodesDict[d.o.id] = d;
-      });
-
-      var oldLinks = {};
-
-      intLinks.forEach(function (d) {
-        oldLinks[d.o.id] = d;
-      });
-
         intLinks = data.graph.links.map(function (d) {
-        var e;
+          var e = {};
-        if (d.id in oldLinks) {
-          e = oldLinks[d.id];
-        } else {
-          e = {};
-        }
-
           e.o = d;
-        e.source = newNodesDict[d.source.id];
+          e.source = dictNodes[d.source.id];
-        e.target = newNodesDict[d.target.id];
+          e.target = dictNodes[d.target.id];
           e.color = linkScale(d.tq).hex();
 
           return e;
         });
 
-      linksDict = {};
+        force.nodes(intNodes);
-      nodesDict = {};
+        forceLink.links(intLinks);
 
-      intNodes.forEach(function (d) {
+        force.alpha(1).restart();
-        d.neighbours = {};
-
-        if (d.o.node) {
-          nodesDict[d.o.node.nodeinfo.node_id] = d;
-        }
-
-        var name = nodeName(d);
-
-        var offset = 5;
-        var lineWidth = 3;
-        var buffer = document.createElement('canvas');
-        var r = window.devicePixelRatio;
-        var bctx = buffer.getContext('2d');
-        bctx.font = font;
-        var width = bctx.measureText(name).width;
-        var scale = zoomBehavior.scaleExtent()[1] * r;
-        buffer.width = (width + 2 * lineWidth) * scale;
-        buffer.height = (16 + 2 * lineWidth) * scale;
-        bctx.font = font;
-        bctx.scale(scale, scale);
-        bctx.textBaseline = 'middle';
-        bctx.textAlign = 'center';
-        bctx.fillStyle = 'rgba(242, 227, 198, 1.0)';
-        bctx.fillText(name, buffer.width / (2 * scale), buffer.height / (2 * scale));
-
-        d.label = buffer;
-        d.labelWidth = buffer.width / scale;
-        d.labelHeight = buffer.height / scale;
-        d.labelA = offset + buffer.width / (2 * scale);
-        d.labelB = offset + buffer.height / (2 * scale);
-      });
-
-      intNodes.forEach(function (d) {
-        d.neighbours = Object.keys(d.neighbours).map(function (k) {
-          return d.neighbours[k];
-        });
-      });
-
-      nodes = intNodes.filter(function (d) {
-        return !d.o.unseen && 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;
-      });
-      unseenNodes = intNodes.filter(function (d) {
-        return d.o.unseen && d.o.node;
-      });
-      unknownNodes = intNodes.filter(function (d) {
-        return !d.o.node;
-      });
-
-      var save = JSON.parse(localStorage.getItem('graph/nodeposition'));
-
-      if (save) {
-        var nodePositions = {};
-        save.forEach(function (d) {
-          nodePositions[d.id] = d;
-        });
-
-        intNodes.forEach(function (d) {
-          if (nodePositions[d.o.id] && (d.x === undefined || d.y === undefined)) {
-            d.x = nodePositions[d.o.id].x;
-            d.y = nodePositions[d.o.id].y;
-          }
-        });
-      }
-
-      var diameter = graphDiameter(intNodes);
-
-      force.nodes(intNodes)
-        .links(intLinks)
-        .size([diameter, diameter]);
-
-      updateHighlight(true);
-
-      force.start();
         resizeCanvas();
       };
 
       self.resetView = function resetView() {
-      highlight = undefined;
+        draw.setHighlight(null);
-      updateHighlight();
+        transform.k = (ZOOM_MIN + 1) / 2;
-      doAnimation = true;
+        moveTo(0, 0);
+        redraw();
       };
 
       self.gotoNode = function gotoNode(d) {
-      highlight = { type: 'node', o: d };
+        draw.setHighlight({ type: 'node', o: d });
-      updateHighlight();
+
-      doAnimation = true;
+        for (var i = 0; i < intNodes.length; i++) {
+          var n = intNodes[i];
+          if (n.o.node !== d) {
+            continue;
+          }
+          transform.k = (ZOOM_MAX + 1) / 2;
+          moveTo(n.x, n.y);
+          break;
+        }
+        redraw();
       };
 
       self.gotoLink = function gotoLink(d) {
-      highlight = { type: 'link', o: d };
+        draw.setHighlight({ type: 'link', o: d });
-      updateHighlight();
+        for (var i = 0; i < intLinks.length; i++) {
-      doAnimation = true;
+          var l = intLinks[i];
+          if (l.o !== d) {
+            continue;
+          }
+          moveTo((l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2);
+          break;
+        }
+        redraw();
       };
 
       self.destroy = function destroy() {
@@ -754,7 +240,6 @@ define(['d3', 'helper'], function (d3, helper) {
       self.render = function render(d) {
         d.appendChild(el);
         resizeCanvas();
-      updateHighlight();
       };
 
       return self;

lib/forcegraph/draw.js

@@ -0,0 +1,120 @@
+define(['helper'], function (helper) {
+  var self = {};
+
+  var ctx;
+  var width;
+  var height;
+
+  var transform;
+
+  var highlight;
+
+  var nodeColor = '#fff';
+  var clientColor = '#e6324b';
+
+  var cableColor = '#50b0f0';
+  var highlightColor = 'rgba(255, 255, 255, 0.2)';
+
+  var labelColor = '#fff';
+
+  var NODE_RADIUS = 15;
+  var LINE_RADIUS = 12;
+
+  function drawDetailNode(d) {
+    if (transform.k > 1) {
+      ctx.beginPath();
+      helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
+      ctx.fillStyle = clientColor;
+      ctx.fill();
+      ctx.beginPath();
+      var name = d.o.node_id;
+      if (d.o.node && d.o.node.nodeinfo) {
+        name = d.o.node.nodeinfo.hostname;
+      }
+      ctx.textAlign = 'center';
+      ctx.fillStyle = labelColor;
+      ctx.fillText(name, d.x, d.y + 20);
+    }
+  }
+
+  function drawHighlightNode(d) {
+    if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
+      ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
+      ctx.fillStyle = highlightColor;
+      ctx.fill();
+      ctx.beginPath();
+    }
+  }
+
+  function drawHighlightLink(d, to) {
+    if (highlight && highlight.type === 'link' && d.o === highlight.o) {
+      ctx.lineTo(to[0], to[1]);
+      ctx.strokeStyle = highlightColor;
+      ctx.lineWidth = LINE_RADIUS * 2;
+      ctx.lineCap = 'round';
+      ctx.stroke();
+      to = [d.source.x, d.source.y];
+    }
+    return to;
+  }
+
+  self.drawNode = function drawNode(d) {
+    if (d.x < transform.invertX(0) || d.y < transform.invertY(0) || transform.invertX(width) < d.x || transform.invertY(height) < d.y) {
+      return;
+    }
+    ctx.beginPath();
+
+    drawHighlightNode(d);
+
+    ctx.moveTo(d.x + 3, d.y);
+    ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
+    ctx.fillStyle = nodeColor;
+    ctx.fill();
+
+    drawDetailNode(d);
+  };
+
+  self.drawLink = function drawLink(d) {
+    var zero = transform.invert([0, 0]);
+    var area = transform.invert([width, height]);
+    if (d.source.x < zero[0] && d.target.x < zero[0] || d.source.y < zero[1] && d.target.y < zero[1] ||
+        d.source.x > area[0] && d.target.x > area[0] || d.source.y > area[1] && d.target.y > area[1]) {
+      return;
+    }
+    ctx.beginPath();
+    ctx.moveTo(d.source.x, d.source.y);
+    var to = [d.target.x, d.target.y];
+
+    to = drawHighlightLink(d, to);
+
+    ctx.lineTo(to[0], to[1]);
+    ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
+    if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
+      ctx.globalAlpha = 0.2;
+      ctx.lineWidth = 1.5;
+    } else {
+      ctx.globalAlpha = 0.8;
+      ctx.lineWidth = 2.5;
+    }
+    ctx.stroke();
+  };
+
+  self.setCTX = function setCTX(newValue) {
+    ctx = newValue;
+  };
+
+  self.setHighlight = function setHighlight(newValue) {
+    highlight = newValue;
+  };
+
+  self.setTransform = function setTransform(newValue) {
+    transform = newValue;
+  };
+
+  self.setMaxArea = function setMaxArea(newWidth, newHeight) {
+    width = newWidth;
+    height = newHeight;
+  };
+
+  return self;
+});

lib/utils/math.js

@@ -0,0 +1,29 @@
+define(function () {
+  return {
+    distance: function distance(a, b) {
+      return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
+    },
+
+    distancePoint: function distancePoint(a, b) {
+      return Math.sqrt(distance(a, b));
+    },
+
+    distanceLink: function distanceLink(p, a, b) {
+      /* http://stackoverflow.com/questions/849211 */
+      var l2 = distance(a, b);
+      if (l2 === 0) {
+        return distance(p, a);
+      }
+      var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
+      if (t < 0) {
+        return distance(p, a);
+      } else if (t > 1) {
+        return distance(p, b);
+      }
+      return distancePoint(p, {
+        x: a.x + t * (b.x - a.x),
+        y: a.y + t * (b.y - a.y)
+      });
+    }
+  };
+});

package.json

@@ -44,7 +44,10 @@
   "dependencies": {
     "almond": "^0.3.3",
     "chroma-js": "^1.2.1",
-    "d3": "3.5",
+    "d3-drag": "^1.0.3",
+    "d3-force": "^1.0.5",
+    "d3-selection": "^1.0.4",
+    "d3-zoom": "^1.1.2",
     "leaflet": "https://github.com/davojta/Leaflet.git#stable_0_7_7_1_release",
     "leaflet-label": "^0.2.1-0",
     "moment": "^2.17.1",

yarn.lock

@@ -683,9 +683,76 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
-d3@3.5:
+d3-collection@1:
-  version "3.5.17"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.2.tgz#df5acb5400443e9eabe9c1379896c67e52426b39"
+
+d3-color@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.2.tgz#83cb4b3a9474e40795f009d97e97a15649830bbc"
+
+d3-dispatch@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.2.tgz#5b511e79a46a1f89492841c0a8f656687d5daa0a"
+
+d3-drag@1, d3-drag@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.0.3.tgz#a016d21c696d130ba758babf1cd9e5f049169d0b"
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-ease@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.2.tgz#b486f8f3ca308ca7be38197d65622b6e30983377"
+
+d3-force@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.0.5.tgz#be8f65ac70688b8d26a9d9bc1e4699c1525f46b1"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-interpolate@1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.3.tgz#e119c91b6be4941e581675ca3e1279bb92bd2c9b"
+  dependencies:
+    d3-color "1"
+
+d3-quadtree@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.2.tgz#e7e873af06aaa427eaa4af094cc4cbfb350b9e38"
+
+d3-selection@1, d3-selection@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.0.4.tgz#b862c7ae22436efe8459b7659ccdae84f09b43a3"
+
+d3-timer@1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.4.tgz#adaf7f60c7b54c99b2ffabd28c15a0c108a75321"
+
+d3-transition@1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.0.3.tgz#91dc986bddb30973639320a85db72ce4ab1a27bb"
+  dependencies:
+    d3-color "1"
+    d3-dispatch "1"
+    d3-ease "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-timer "1"
+
+d3-zoom@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.1.2.tgz#a8944947e92a12bc5d5a3fb4dccf1a40e7de5fb3"
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
 
 d@^0.1.1, d@~0.1.1:
   version "0.1.1"