From 2485d74d5b951ebb01381701138a0c0ef7864ced Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@7thposition.com>
Date: Mon, 9 Mar 2015 16:34:07 -0400
Subject: [PATCH] Use interpolated D3 zooming for zoomIn/zoomOut

---
 js/id/renderer/map.js     | 29 +++++++++++++++++++++++++----
 test/spec/renderer/map.js | 18 ++++++++++++------
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 88274331a..f7cf27792 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -153,11 +153,15 @@ iD.Map = function(context) {
     }
 
     function zoomPan() {
-        if (Math.log(d3.event.scale / Math.LN2 - 8) < minzoom + 1) {
+        if (Math.log(d3.event.scale) / Math.LN2 - 8 < minzoom) {
+            surface.interrupt();
             iD.ui.flash(context.container())
                 .select('.content')
                 .text(t('cannot_zoom'));
-            return setZoom(context.minEditableZoom(), true);
+            setZoom(context.minEditableZoom(), true);
+            queueRedraw();
+            dispatch.move(map);
+            return;
         }
 
         projection
@@ -253,6 +257,22 @@ iD.Map = function(context) {
         return map;
     };
 
+    function interpolateZoom(_) {
+        var k = projection.scale(),
+            t = projection.translate();
+
+        surface.node().__chart__ = {
+            x: t[0],
+            y: t[1],
+            k: k * 2 * Math.PI
+        };
+
+        setZoom(_);
+        projection.scale(k).translate(t);  // undo setZoom projection changes
+
+        zoom.event(surface.transition());
+    }
+
     function setZoom(_, force) {
         if (_ === map.zoom() && !force)
             return false;
@@ -307,8 +327,8 @@ iD.Map = function(context) {
         return redraw();
     };
 
-    map.zoomIn = function() { return map.zoom(~~map.zoom() + 1); };
-    map.zoomOut = function() { return map.zoom(~~map.zoom() - 1); };
+    map.zoomIn = function() { interpolateZoom(~~map.zoom() + 1); };
+    map.zoomOut = function() { interpolateZoom(~~map.zoom() - 1); };
 
     map.center = function(loc) {
         if (!arguments.length) {
@@ -328,6 +348,7 @@ iD.Map = function(context) {
         }
 
         if (z < minzoom) {
+            surface.interrupt();
             iD.ui.flash(context.container())
                 .select('.content')
                 .text(t('cannot_zoom'));
diff --git a/test/spec/renderer/map.js b/test/spec/renderer/map.js
index 42d10b110..36b605168 100644
--- a/test/spec/renderer/map.js
+++ b/test/spec/renderer/map.js
@@ -39,18 +39,24 @@ describe('iD.Map', function() {
     });
 
     describe('#zoomIn', function() {
-        it('increments zoom', function() {
+        it('increments zoom', function(done) {
             expect(map.zoom(4)).to.equal(map);
-            expect(map.zoomIn()).to.equal(map);
-            expect(map.zoom()).to.equal(5);
+            map.zoomIn();
+            window.setTimeout(function() {
+                expect(map.zoom()).to.equal(5);
+                done();
+            }, 500);
         });
     });
 
     describe('#zoomOut', function() {
-        it('decrements zoom', function() {
+        it('decrements zoom', function(done) {
             expect(map.zoom(4)).to.equal(map);
-            expect(map.zoomOut()).to.equal(map);
-            expect(map.zoom()).to.equal(3);
+            map.zoomOut();
+            window.setTimeout(function() {
+                expect(map.zoom()).to.equal(3);
+                done();
+            }, 500);
         });
     });