diff --git a/README.md b/README.md
index 4d780300d94d8ce0c0d9adce574266e7702ee54c..893722017eced4ab8b33a834480c353cfabc0d66 100644
--- a/README.md
+++ b/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
diff --git a/app.js b/app.js
index 915f6767056306ae5bcabcbcfc02118b51f9ac8a..3ac0f9165345bb326753da257833b654b75b6470 100644
--- a/app.js
+++ b/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'
}
diff --git a/lib/forcegraph.js b/lib/forcegraph.js
index 3d0ccc894f45a0eb89fc6c6b8411fae1aec6ddae..e5aadeea172568e9191edbf51e0c51aede17c3ac 100644
--- a/lib/forcegraph.js
+++ b/lib/forcegraph.js
@@ -1,762 +1,247 @@
-define(['d3', 'helper'], function (d3, helper) {
- 'use strict';
-
- var margin = 200;
- var NODE_RADIUS = 15;
- var LINE_RADIUS = 12;
-
- return function (config, linkScale, sidebar, router) {
- var self = this;
- var canvas;
- var ctx;
- var screenRect;
- var nodesDict;
- var linksDict;
- var zoomBehavior;
- var force;
- var el;
- var font;
- var doAnimation = false;
- var intNodes = [];
- var intLinks = [];
- var highlight;
- var highlightedNodes = [];
- var highlightedLinks = [];
- var nodes = [];
- var uplinkNodes = [];
- var nonUplinkNodes = [];
- var unseenNodes = [];
- var unknownNodes = [];
- var savedPanZoom;
-
- var draggedNode;
-
- var LINK_DISTANCE = 70;
-
- function graphDiameter(n) {
- return Math.sqrt(n.length / Math.PI) * LINK_DISTANCE * 1.41;
- }
-
- function savePositions() {
- 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;
- }
+define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegraph/draw'],
+ function (d3Selection, d3Force, d3Zoom, d3Drag, math, draw) {
+ 'use strict';
- function dragstart() {
- var e = translateXY(d3.mouse(el));
+ return function (config, linkScale, sidebar, router) {
+ var self = this;
+ var el;
+ var canvas;
+ var ctx;
+ var force;
+ var forceLink;
- var n = intNodes.filter(function (d) {
- return distancePoint(e, d) < NODE_RADIUS;
- });
+ var transform = d3Zoom.zoomIdentity;
+ var intNodes = [];
+ var dictNodes = {};
+ var intLinks = [];
- if (n.length === 0) {
- return;
- }
+ var NODE_RADIUS_DRAG = 10;
+ var NODE_RADIUS_SELECT = 15;
+ var LINK_RADIUS_SELECT = 12;
- draggedNode = n[0];
- d3.event.sourceEvent.stopPropagation();
- d3.event.sourceEvent.preventDefault();
- draggedNode.fixed |= 2;
+ var ZOOM_MIN = 1 / 8;
+ var ZOOM_MAX = 3;
- draggedNode.px = draggedNode.x;
- draggedNode.py = draggedNode.y;
- }
+ var FORCE_ALPHA = 0.3;
- function dragmove() {
- if (draggedNode) {
- var e = translateXY(d3.mouse(el));
+ draw.setTransform(transform);
- draggedNode.px = e.x;
- draggedNode.py = e.y;
- force.resume();
+ function resizeCanvas() {
+ canvas.width = el.offsetWidth;
+ canvas.height = el.offsetHeight;
+ draw.setMaxArea(canvas.width, canvas.height);
}
- }
-
- 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 moveTo(x, y) {
+ transform.x = (canvas.width + sidebar()) / 2 - x * transform.k;
+ transform.y = canvas.height / 2 - y * transform.k;
}
- }
-
- 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];
+ function onClick() {
+ if (d3Selection.event.defaultPrevented) {
+ return;
+ }
- animatePanzoom(translate, scale);
- }
+ var e = transform.invert([d3Selection.event.clientX, d3Selection.event.clientY]);
+ var n = force.find(e[0], e[1], NODE_RADIUS_SELECT);
- function updateHighlight(nopanzoom) {
- highlightedNodes = [];
- highlightedLinks = [];
+ if (n !== undefined) {
+ router.node(n.o.node)();
+ return;
+ }
- if (highlight !== undefined) {
- if (highlight.type === 'node') {
- var n = nodesDict[highlight.o.nodeinfo.node_id];
+ e = { x: e[0], y: e[1] };
- if (n) {
- highlightedNodes = [n];
- if (!nopanzoom) {
- panzoomTo([n.x, n.y], [n.x, n.y]);
+ 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;
}
- }
+ });
- 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 (closedLink !== undefined) {
+ router.link(closedLink.o)();
}
}
- 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;
+ function redraw() {
+ ctx.save();
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.translate(transform.x, transform.y);
+ ctx.scale(transform.k, transform.k);
- var angle = Math.PI / 2;
+ intLinks.forEach(draw.drawLink);
+ intNodes.forEach(draw.drawNode);
- if (neighbours.length > 0) {
- angle = Math.PI + Math.atan2(sumSin, sumCos);
+ ctx.restore();
}
- 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();
+ el = document.createElement('div');
+ el.classList.add('graph');
- // -- 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);
+ forceLink = d3Force.forceLink()
+ .distance(function (d) {
+ if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
+ return 0;
+ }
+ return 75;
+ })
+ .strength(function (d) {
+ if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
+ return 0.02;
+ }
+ return Math.max(0.5, 1 / d.o.tq);
});
- }
- 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);
+ var zoom = d3Zoom.zoom()
+ .scaleExtent([ZOOM_MIN, ZOOM_MAX])
+ .on('zoom', function () {
+ transform = d3Selection.event.transform;
+ draw.setTransform(transform);
+ redraw();
});
- 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);
+ 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;
});
- 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 * r;
- canvas.height = el.offsetHeight * r;
- 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) {
- return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
- }
-
- 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);
- }
+ 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 dictNodes) {
+ e = dictNodes[d.id];
+ } else {
+ e = {};
+ dictNodes[d.id] = e;
+ }
- var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
+ e.o = d;
- if (t < 0) {
- return distance(p, a);
- }
+ return e;
+ });
- if (t > 1) {
- return distance(p, b);
- }
+ intLinks = data.graph.links.map(function (d) {
+ var e = {};
+ e.o = d;
+ e.source = dictNodes[d.source.id];
+ e.target = dictNodes[d.target.id];
+ e.color = linkScale(d.tq).hex();
- return Math.sqrt(distance(p, {
- x: a.x + t * (b.x - a.x),
- y: a.y + t * (b.y - a.y)
- }));
- }
+ return e;
+ });
- function translateXY(d) {
- var translate = zoomBehavior.translate();
- var scale = zoomBehavior.scale();
+ force.nodes(intNodes);
+ forceLink.links(intLinks);
- return {
- x: (d[0] - translate[0]) / scale,
- y: (d[1] - translate[1]) / scale
+ force.alpha(1).restart();
+ resizeCanvas();
};
- }
-
- function onClick() {
- if (d3.event.defaultPrevented) {
- return;
- }
-
- var e = translateXY(d3.mouse(el));
-
- var n = intNodes.filter(function (d) {
- return distancePoint(e, d) < NODE_RADIUS;
- });
-
- if (n.length > 0) {
- router.node(n[0].o.node)();
- 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) {
- var size = getSize();
- var newSize = [size[0] / scale, size[1] / scale];
-
- var sidebarWidth = sidebar();
- var delta = [size[0] - newSize[0], size[1] - newSize[1]];
- 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);
- }
-
- 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);
- }
+ self.resetView = function resetView() {
+ draw.setHighlight(null);
+ transform.k = (ZOOM_MIN + 1) / 2;
+ moveTo(0, 0);
+ redraw();
};
- }
-
- el = document.createElement('div');
- el.classList.add('graph');
-
- font = window.getComputedStyle(el).fontSize + ' ' + window.getComputedStyle(el).fontFamily;
-
- 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;
- })
- .linkStrength(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;
- });
+ self.gotoNode = function gotoNode(d) {
+ draw.setHighlight({ type: 'node', o: d });
- intNodes = data.graph.nodes.map(function (d) {
- var e;
- if (d.id in oldNodes) {
- e = oldNodes[d.id];
- } else {
- e = {};
+ 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();
+ };
- e.o = d;
-
- 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;
- if (d.id in oldLinks) {
- e = oldLinks[d.id];
- } else {
- e = {};
+ self.gotoLink = function gotoLink(d) {
+ draw.setHighlight({ type: 'link', o: d });
+ for (var i = 0; i < intLinks.length; i++) {
+ 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();
+ };
- e.o = d;
- e.source = newNodesDict[d.source.id];
- e.target = newNodesDict[d.target.id];
- e.color = linkScale(d.tq).hex();
-
- return e;
- });
-
- linksDict = {};
- nodesDict = {};
-
- intNodes.forEach(function (d) {
- d.neighbours = {};
+ self.destroy = function destroy() {
+ force.stop();
+ canvas.remove();
+ force = null;
- if (d.o.node) {
- nodesDict[d.o.node.nodeinfo.node_id] = d;
+ if (el.parentNode) {
+ el.parentNode.removeChild(el);
}
+ };
- 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;
- updateHighlight();
- doAnimation = true;
- };
-
- self.gotoNode = function gotoNode(d) {
- highlight = { type: 'node', o: d };
- updateHighlight();
- doAnimation = true;
- };
-
- self.gotoLink = function gotoLink(d) {
- highlight = { type: 'link', o: d };
- updateHighlight();
- doAnimation = true;
- };
-
- self.destroy = function destroy() {
- force.stop();
- canvas.remove();
- force = null;
-
- if (el.parentNode) {
- el.parentNode.removeChild(el);
- }
- };
+ self.render = function render(d) {
+ d.appendChild(el);
+ resizeCanvas();
+ };
- self.render = function render(d) {
- d.appendChild(el);
- resizeCanvas();
- updateHighlight();
+ return self;
};
-
- return self;
- };
-});
+ });
diff --git a/lib/forcegraph/draw.js b/lib/forcegraph/draw.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6252e7aaeafc816207cb65f5526cfdfa1f98ace
--- /dev/null
+++ b/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;
+});
diff --git a/lib/utils/math.js b/lib/utils/math.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea12c9ee268c22344092e9ba8d50a46606f06321
--- /dev/null
+++ b/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)
+ });
+ }
+ };
+});
diff --git a/package.json b/package.json
index 6558ceaca782ee5feef290d76b6cb198e49f1e18..cdc169c239aa62ab0364cf3e3f516723cc593f36 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index a8bc6456a5d0de902f1df25b3c48abd24631c330..48cf2c3d250224423d2f9a6558eecee501fc7f11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -683,9 +683,76 @@ currently-unhandled@^0.4.1:
dependencies:
array-find-index "^1.0.1"
-d3@3.5:
- version "3.5.17"
- resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
+d3-collection@1:
+ version "1.0.2"
+ 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"