Merge pull request #460 from systemed/fast-zoom

Fast zooming based on transforms.

css/app.css

@@ -768,9 +768,14 @@ img.tile {
     -o-transform-origin:0 0;
 }
 
-#tile-g {
+#surface, #tile-g {
     position:absolute;
     top:0;
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
 }
 
 /* About Section
@@ -978,6 +983,7 @@ div.typeahead a:first-child {
     height:38px;
     padding:10px 20px;
     background:#fff;
+    color:#000;
     font-weight: normal;
     line-height: 21px;
     border-radius:5px;

js/id/renderer/map.js

@@ -2,7 +2,6 @@ iD.Map = function() {
     var connection, history,
         dimensions = [],
         dispatch = d3.dispatch('move', 'drawn'),
-        translateStart,
         keybinding = d3.keybinding(),
         projection = d3.geo.mercator().scale(1024),
         roundedProjection = iD.svg.RoundProjection(projection),
@@ -32,19 +31,15 @@ iD.Map = function() {
 
         var supersurface = selection.append('div')
             .style('position', 'absolute')
-            .on('mousedown.drag', function() {
-                translateStart = projection.translate();
-            })
             .call(zoom);
 
         surface = supersurface.append('svg')
-            .on('mouseup.reset-transform', resetTransform)
-            .on('touchend.reset-transform', resetTransform)
             .on('mousedown.zoom', function() {
                 if (d3.event.button == 2) {
                     d3.event.stopPropagation();
                 }
             }, true)
+            .attr('id', 'surface')
             .call(iD.svg.Surface());
 
 
@@ -136,32 +131,35 @@ iD.Map = function() {
                 .text('Cannot zoom out further in current mode.');
             return map.zoom(16);
         }
-        var fast = (d3.event.scale === projection.scale() && fastEnabled);
+
         projection
             .translate(d3.event.translate)
             .scale(d3.event.scale);
-        if (fast && translateStart) {
-            var a = d3.event.translate,
-                b = translateStart,
-                translate = 'translate(' + ~~(a[0] - b[0]) + 'px,' +
-                    ~~(a[1] - b[1]) + 'px)';
-            tilegroup.style(transformProp, translate);
-            surface.style(transformProp, translate);
-        } else {
-            redraw();
-            translateStart = null;
-        }
+
+        var ascale = d3.event.scale;
+        var bscale = transformStart[0];
+        var scale = (ascale / bscale);
+
+        var tX = Math.round((d3.event.translate[0] / scale) - (transformStart[1][0]));
+        var tY = Math.round((d3.event.translate[1] / scale) - (transformStart[1][1]));
+
+        var transform =
+            'scale(' + scale + ')' +
+            'translate(' + tX + 'px,' + tY + 'px) ';
+
+        tilegroup.style(transformProp, transform);
+        surface.style(transformProp, transform);
+        redraw();
     }
 
     function resetTransform() {
         if (!surface.style(transformProp)) return;
-        translateStart = null;
         surface.style(transformProp, '');
         tilegroup.style(transformProp, '');
-        redraw();
     }
 
-    var redraw = _.throttle(function(difference) {
+    var redraw = _.debounce(function(difference) {
+        resetTransform();
         dispatch.move(map);
         surface.attr('data-zoom', ~~map.zoom());
         tilegroup.call(background);
@@ -171,8 +169,11 @@ iD.Map = function() {
         } else {
             editOff();
         }
+        transformStart = [
+            projection.scale(),
+            projection.translate().slice()];
         return map;
-    }, 10);
+    }, 200);
 
     function pointLocation(p) {
         var translate = projection.translate(),