From ccf45e71c54ac43938d398434d1a52e531042013 Mon Sep 17 00:00:00 2001
From: Martin Geno <geno+dev@fireorbit.de>
Date: Sat, 6 May 2017 09:54:09 +0200
Subject: [PATCH] [TASK] add zoom animation again

---
 lib/forcegraph.js | 50 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/lib/forcegraph.js b/lib/forcegraph.js
index 7c6d2d1..09bce10 100644
--- a/lib/forcegraph.js
+++ b/lib/forcegraph.js
@@ -1,5 +1,5 @@
-define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegraph/draw'],
-  function (d3Selection, d3Force, d3Zoom, d3Drag, math, 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, d3Timer, d3Ease, d3Interpolate, math, draw) {
     'use strict';
 
     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_SELECT = 15;
       var LINK_RADIUS_SELECT = 12;
+      var ZOOM_ANIMATE_DURATION = 500;
 
       var ZOOM_MIN = 1 / 8;
       var ZOOM_MAX = 3;
 
       var FORCE_ALPHA = 0.3;
 
+
       draw.setTransform(transform);
 
       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);
       }
 
-      function moveTo(x, y) {
-        transform.x = (canvas.width + sidebar()) / 2 - x * transform.k;
-        transform.y = canvas.height / 2 - y * transform.k;
+      function moveTo(x, y, k) {
+        function transformPosition(p) {
+          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() {
@@ -207,9 +236,7 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
 
       self.resetView = function resetView() {
         draw.setHighlight(null);
-        transform.k = (ZOOM_MIN + 1) / 2;
-        moveTo(0, 0);
-        redraw();
+        moveTo(0, 0, (ZOOM_MIN + 1) / 2);
       };
 
       self.gotoNode = function gotoNode(d) {
@@ -220,11 +247,9 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
               continue;
             }
             draw.setHighlight({ type: 'node', o: n.o.node });
-            transform.k = (ZOOM_MAX + 1) / 2;
-            moveTo(n.x, n.y);
+            moveTo(n.x, n.y, (ZOOM_MAX + 1) / 2);
             break;
           }
-          redraw();
         }
         if (!animate) {
           sleep(1500).then(getNode);
@@ -241,10 +266,9 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
             if (l.o !== d) {
               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;
           }
-          redraw();
         }
         if (!animate) {
           sleep(1500).then(getLink);