Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] add zoom animation again

Browse Source
This commit is contained in:
Martin Geno 2017-05-06 09:54:09 +02:00
parent ed1bffd055
commit ccf45e71c5
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
1 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
lib/forcegraph.js
View File

@ -1,5 +1,5 @@
define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegraph/draw'], define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'd3-timer', 'd3-ease', 'd3-interpolate', 'utils/math', 'forcegraph/draw'],
function (d3Selection, d3Force, d3Zoom, d3Drag, math, draw) { function (d3Selection, d3Force, d3Zoom, d3Drag, d3Timer, d3Ease, d3Interpolate, math, draw) {
'use strict'; 'use strict';
return function (config, linkScale, sidebar, router) { return function (config, linkScale, sidebar, router) {
@ -19,12 +19,14 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
var NODE_RADIUS_DRAG = 10; var NODE_RADIUS_DRAG = 10;
var NODE_RADIUS_SELECT = 15; var NODE_RADIUS_SELECT = 15;
var LINK_RADIUS_SELECT = 12; var LINK_RADIUS_SELECT = 12;
var ZOOM_ANIMATE_DURATION = 500;
var ZOOM_MIN = 1 / 8; var ZOOM_MIN = 1 / 8;
var ZOOM_MAX = 3; var ZOOM_MAX = 3;
var FORCE_ALPHA = 0.3; var FORCE_ALPHA = 0.3;
draw.setTransform(transform); draw.setTransform(transform);
function sleep(time) { function sleep(time) {
@ -39,9 +41,36 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
draw.setMaxArea(canvas.width, canvas.height); draw.setMaxArea(canvas.width, canvas.height);
} }
function moveTo(x, y) { function moveTo(x, y, k) {
transform.x = (canvas.width + sidebar()) / 2 - x * transform.k; function transformPosition(p) {
transform.y = canvas.height / 2 - y * transform.k; transform.x = p.x;
transform.y = p.y;
transform.k = p.k;
}
var end = {k: k};
end.x = (canvas.width + sidebar()) / 2 - x * k;
end.y = canvas.height / 2 - y * k;
if (!animate) {
transformPosition(end);
redraw();
} else {
var start = { x: transform.x, y: transform.y, k: transform.k };
var interpolate = d3Interpolate.interpolateObject(start, end);
var timer = d3Timer.timer(function (t) {
if (t >= ZOOM_ANIMATE_DURATION) {
timer.stop();
return;
}
var v = interpolate(d3Ease.easeQuadInOut(t / ZOOM_ANIMATE_DURATION));
transformPosition(v);
window.requestAnimationFrame(redraw);
});
}
} }
function onClick() { function onClick() {
@ -207,9 +236,7 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
self.resetView = function resetView() { self.resetView = function resetView() {
draw.setHighlight(null); draw.setHighlight(null);
transform.k = (ZOOM_MIN + 1) / 2; moveTo(0, 0, (ZOOM_MIN + 1) / 2);
moveTo(0, 0);
redraw();
}; };
self.gotoNode = function gotoNode(d) { self.gotoNode = function gotoNode(d) {
@ -220,11 +247,9 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
continue; continue;
} }
draw.setHighlight({ type: 'node', o: n.o.node }); draw.setHighlight({ type: 'node', o: n.o.node });
transform.k = (ZOOM_MAX + 1) / 2; moveTo(n.x, n.y, (ZOOM_MAX + 1) / 2);
moveTo(n.x, n.y);
break; break;
} }
redraw();
} }
if (!animate) { if (!animate) {
sleep(1500).then(getNode); sleep(1500).then(getNode);
@ -241,10 +266,9 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
if (l.o !== d) { if (l.o !== d) {
continue; continue;
} }
moveTo((l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2); moveTo((l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2, transform.k);
break; break;
} }
redraw();
} }
if (!animate) { if (!animate) {
sleep(1500).then(getLink); sleep(1500).then(getLink);