Merge pull request #261 from elemoine/zoomfactor

Change default zoom delta and animate mousewheel zoom

src/objectliterals.exports

@@ -7,7 +7,6 @@
 @exportObjectLiteralProperty ol.MapOptions.keyboardPanOffset number|undefined
 @exportObjectLiteralProperty ol.MapOptions.layers ol.Collection|undefined
 @exportObjectLiteralProperty ol.MapOptions.mouseWheelZoom boolean|undefined
-@exportObjectLiteralProperty ol.MapOptions.mouseWheelZoomDelta number|undefined
 @exportObjectLiteralProperty ol.MapOptions.renderer ol.RendererHint|undefined
 @exportObjectLiteralProperty ol.MapOptions.renderers Array.<ol.RendererHint>|undefined
 @exportObjectLiteralProperty ol.MapOptions.scaleLineControl boolean|undefined

src/ol/control/zoomcontrol.js

@@ -70,7 +70,8 @@ ol.control.Zoom.prototype.handleIn_ = function(browserEvent) {
   var map = this.getMap();
   map.requestRenderFrame();
   // FIXME works for View2D only
-  map.getView().zoom(map, this.delta_, undefined, ol.control.ZOOM_DURATION);
+  map.getView().zoomByDelta(map, this.delta_, undefined,
+      ol.control.ZOOM_DURATION);
 };
 
 
@@ -84,5 +85,6 @@ ol.control.Zoom.prototype.handleOut_ = function(browserEvent) {
   var map = this.getMap();
   map.requestRenderFrame();
   // FIXME works for View2D only
-  map.getView().zoom(map, -this.delta_, undefined, ol.control.ZOOM_DURATION);
+  map.getView().zoomByDelta(map, -this.delta_, undefined,
+      ol.control.ZOOM_DURATION);
 };

src/ol/interaction/dblclickzoominteraction.js

@@ -8,6 +8,12 @@ goog.require('ol.View2D');
 goog.require('ol.interaction.Interaction');
 
 
+/**
+ * @define {number} Animation duration.
+ */
+ol.interaction.DBLCLICKZOOM_ANIMATION_DURATION = 250;
+
+
 
 /**
  * @constructor
@@ -41,7 +47,8 @@ ol.interaction.DblClickZoom.prototype.handleMapBrowserEvent =
     // FIXME works for View2D only
     var view = map.getView();
     goog.asserts.assert(view instanceof ol.View2D);
-    view.zoom(map, delta, anchor);
+    view.zoomByDelta(map, delta, anchor,
+        ol.interaction.DBLCLICKZOOM_ANIMATION_DURATION);
     mapBrowserEvent.preventDefault();
     browserEvent.preventDefault();
   }

src/ol/interaction/dragrotateandzoominteraction.js

@@ -66,7 +66,7 @@ ol.interaction.DragRotateAndZoom.prototype.handleDrag =
   this.lastAngle_ = theta;
   if (goog.isDef(this.lastMagnitude_)) {
     var resolution = this.lastMagnitude_ * (view.getResolution() / magnitude);
-    view.zoomToResolution(map, resolution);
+    view.zoom(map, resolution);
   }
   this.lastMagnitude_ = magnitude;
 };

src/ol/interaction/dragrotateinteraction.js

@@ -1,10 +1,17 @@
 goog.provide('ol.interaction.DragRotate');
 
 goog.require('ol.View2D');
+goog.require('ol.ViewHint');
 goog.require('ol.interaction.ConditionType');
 goog.require('ol.interaction.Drag');
 
 
+/**
+ * @define {number} Animation duration.
+ */
+ol.interaction.DRAGROTATE_ANIMATION_DURATION = 250;
+
+
 
 /**
  * @constructor
@@ -46,12 +53,27 @@ ol.interaction.DragRotate.prototype.handleDrag = function(mapBrowserEvent) {
     // FIXME supports View2D only
     goog.asserts.assert(view instanceof ol.View2D);
     map.requestRenderFrame();
-    view.rotate(map, view.getRotation() - delta);
+    view.rotateWithoutConstraints(map, view.getRotation() - delta);
   }
   this.lastAngle_ = theta;
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.interaction.DragRotate.prototype.handleDragEnd = function(mapBrowserEvent) {
+  var browserEvent = mapBrowserEvent.browserEvent;
+  var map = mapBrowserEvent.map;
+  // FIXME supports View2D only
+  var view = map.getView();
+  goog.asserts.assert(view instanceof ol.View2D);
+  view.rotate(map, view.getRotation(), undefined,
+      ol.interaction.DRAGROTATE_ANIMATION_DURATION);
+  view.setHint(ol.ViewHint.INTERACTING, -1);
+};
+
+
 /**
  * @inheritDoc
  */
@@ -65,6 +87,7 @@ ol.interaction.DragRotate.prototype.handleDragStart =
     goog.asserts.assert(view instanceof ol.View2D);
     map.requestRenderFrame();
     this.lastAngle_ = undefined;
+    view.setHint(ol.ViewHint.INTERACTING, 1);
     return true;
   } else {
     return false;

src/ol/interaction/keyboardzoominteraction.js

@@ -40,7 +40,8 @@ ol.interaction.KeyboardZoom.prototype.handleMapBrowserEvent =
       // FIXME works for View2D only
       var view = map.getView();
       goog.asserts.assert(view instanceof ol.View2D);
-      view.zoom(map, delta, undefined, ol.interaction.KEYBOARD_ZOOM_DURATION);
+      view.zoomByDelta(map, delta, undefined,
+          ol.interaction.KEYBOARD_ZOOM_DURATION);
       keyEvent.preventDefault();
       mapBrowserEvent.preventDefault();
     }

src/ol/interaction/mousewheelzoominteraction.js

@@ -4,24 +4,63 @@ goog.provide('ol.interaction.MouseWheelZoom');
 
 goog.require('goog.events.MouseWheelEvent');
 goog.require('goog.events.MouseWheelHandler.EventType');
+goog.require('goog.math');
+goog.require('ol.Coordinate');
 goog.require('ol.View2D');
 goog.require('ol.interaction.Interaction');
 
 
+/**
+ * @define {number} Animation duration.
+ */
+ol.interaction.MOUSEWHEELZOOM_ANIMATION_DURATION = 250;
+
+
+/**
+ * @define {number} Maximum delta.
+ */
+ol.interaction.MOUSEWHEELZOOM_MAXDELTA = 1;
+
+
+/**
+ * @define {number} Timeout duration.
+ */
+ol.interaction.MOUSEWHEELZOOM_TIMEOUT_DURATION = 80;
+
+
 
 /**
  * @constructor
  * @extends {ol.interaction.Interaction}
- * @param {number} delta The zoom delta applied on each mousewheel.
  */
-ol.interaction.MouseWheelZoom = function(delta) {
+ol.interaction.MouseWheelZoom = function() {
+
+  goog.base(this);
+
   /**
    * @private
    * @type {number}
    */
-  this.delta_ = delta;
+  this.delta_ = 0;
+
+  /**
+   * @private
+   * @type {?ol.Coordinate}
+   */
+  this.lastAnchor_ = null;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.startTime_ = undefined;
+
+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.timeoutId_ = undefined;
 
-  goog.base(this);
 };
 goog.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction);
 
@@ -31,20 +70,52 @@ goog.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction);
  */
 ol.interaction.MouseWheelZoom.prototype.handleMapBrowserEvent =
     function(mapBrowserEvent) {
+
   if (mapBrowserEvent.type ==
       goog.events.MouseWheelHandler.EventType.MOUSEWHEEL) {
     var map = mapBrowserEvent.map;
     var mouseWheelEvent = /** @type {goog.events.MouseWheelEvent} */
         (mapBrowserEvent.browserEvent);
     goog.asserts.assert(mouseWheelEvent instanceof goog.events.MouseWheelEvent);
-    var anchor = mapBrowserEvent.getCoordinate();
-    var delta = mouseWheelEvent.deltaY < 0 ? this.delta_ : -this.delta_;
-    // FIXME works for View2D only
-    var view = map.getView();
-    goog.asserts.assert(view instanceof ol.View2D);
-    map.requestRenderFrame();
-    view.zoom(map, delta, anchor);
+
+    this.lastAnchor_ = mapBrowserEvent.getCoordinate();
+    this.delta_ += mouseWheelEvent.deltaY / 3;
+
+    if (!goog.isDef(this.startTime_)) {
+      this.startTime_ = goog.now();
+    }
+
+    var duration = ol.interaction.MOUSEWHEELZOOM_TIMEOUT_DURATION;
+    var timeLeft = Math.max(duration - (goog.now() - this.startTime_), 0);
+
+    goog.global.clearTimeout(this.timeoutId_);
+    this.timeoutId_ = goog.global.setTimeout(
+        goog.bind(this.doZoom_, this, map), timeLeft);
+
     mapBrowserEvent.preventDefault();
     mouseWheelEvent.preventDefault();
   }
 };
+
+
+/**
+ * @private
+ * @param {ol.Map} map Map.
+ */
+ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) {
+  var maxDelta = ol.interaction.MOUSEWHEELZOOM_MAXDELTA;
+  var delta = goog.math.clamp(this.delta_, -maxDelta, maxDelta);
+
+  // FIXME works for View2D only
+  var view = map.getView();
+  goog.asserts.assert(view instanceof ol.View2D);
+
+  map.requestRenderFrame();
+  view.zoomByDelta(map, -delta, this.lastAnchor_,
+      ol.interaction.MOUSEWHEELZOOM_ANIMATION_DURATION);
+
+  this.delta_ = 0;
+  this.lastAnchor_ = null;
+  this.startTime_ = undefined;
+  this.timeoutId_ = undefined;
+};

src/ol/interaction/touchrotateinteraction.js

@@ -8,6 +8,14 @@ goog.require('ol.ViewHint');
 goog.require('ol.interaction.Touch');
 
 
+/**
+ * @define {number} Animation duration.
+ */
+ol.interaction.TOUCHROTATE_ANIMATION_DURATION = 250;
+
+
+
+/**
 
 /**
  * @constructor
@@ -90,7 +98,8 @@ ol.interaction.TouchRotate.prototype.handleTouchMove =
 
   // rotate
   if (this.rotating_) {
-    view.rotate(map, view.getRotation() + rotationDelta, anchor);
+    view.rotateWithoutConstraints(map, view.getRotation() + rotationDelta,
+        anchor);
   }
 };
 
@@ -103,6 +112,10 @@ ol.interaction.TouchRotate.prototype.handleTouchEnd =
   if (this.targetTouches.length < 2) {
     var map = mapBrowserEvent.map;
     var view = map.getView();
+    if (this.rotating_) {
+      view.rotate(map, view.getRotation(), undefined,
+          ol.interaction.TOUCHROTATE_ANIMATION_DURATION);
+    }
     view.setHint(ol.ViewHint.INTERACTING, -1);
     return false;
   } else {

src/ol/interaction/touchzoominteraction.js

@@ -8,6 +8,12 @@ goog.require('ol.ViewHint');
 goog.require('ol.interaction.Touch');
 
 
+/**
+ * @define {number} Animation duration.
+ */
+ol.interaction.TOUCHZOOM_ANIMATION_DURATION = 250;
+
+
 
 /**
  * @constructor
@@ -59,7 +65,7 @@ ol.interaction.TouchZoom.prototype.handleTouchMove =
   var anchor = map.getCoordinateFromPixel(centroid);
 
   // scale, bypass the resolution constraint
-  view.zoom_(map, view.getResolution() * scaleDelta, anchor);
+  view.zoomWithoutConstraints(map, view.getResolution() * scaleDelta, anchor);
 
 };
 
@@ -73,7 +79,8 @@ ol.interaction.TouchZoom.prototype.handleTouchEnd =
     var map = mapBrowserEvent.map;
     var view = map.getView();
     // take the resolution constraint into account
-    view.zoomToResolution(map, view.getResolution());
+    view.zoom(map, view.getResolution(), undefined,
+        ol.interaction.TOUCHZOOM_ANIMATION_DURATION);
     view.setHint(ol.ViewHint.INTERACTING, -1);
     return false;
   } else {

src/ol/map.js

@@ -941,7 +941,7 @@ ol.Map.createControls_ = function(mapOptions) {
       mapOptions.zoomControl : true;
   if (zoomControl) {
     var zoomDelta = goog.isDef(mapOptions.zoomDelta) ?
-        mapOptions.zoomDelta : 4;
+        mapOptions.zoomDelta : 1;
     controls.push(new ol.control.Zoom({
       delta: zoomDelta
     }));
@@ -971,7 +971,7 @@ ol.Map.createInteractions_ = function(mapOptions) {
       mapOptions.doubleClickZoom : true;
   if (doubleClickZoom) {
     var zoomDelta = goog.isDef(mapOptions.zoomDelta) ?
-        mapOptions.zoomDelta : 4;
+        mapOptions.zoomDelta : 1;
     interactions.push(new ol.interaction.DblClickZoom(zoomDelta));
   }
 
@@ -1014,10 +1014,7 @@ ol.Map.createInteractions_ = function(mapOptions) {
   var mouseWheelZoom = goog.isDef(mapOptions.mouseWheelZoom) ?
       mapOptions.mouseWheelZoom : true;
   if (mouseWheelZoom) {
-    var mouseWheelZoomDelta =
-        goog.isDef(mapOptions.mouseWheelZoomDelta) ?
-            mapOptions.mouseWheelZoomDelta : 1;
-    interactions.push(new ol.interaction.MouseWheelZoom(mouseWheelZoomDelta));
+    interactions.push(new ol.interaction.MouseWheelZoom());
   }
 
   var shiftDragZoom = goog.isDef(mapOptions.shiftDragZoom) ?

src/ol/rotationconstraint.js

@@ -37,3 +37,23 @@ ol.RotationConstraint.createSnapToN = function(n) {
     }
   };
 };
+
+
+/**
+ * @param {number=} opt_tolerance Tolerance.
+ * @return {ol.RotationConstraintType} Rotation constraint.
+ */
+ol.RotationConstraint.createSnapToZero = function(opt_tolerance) {
+  var tolerance = opt_tolerance || 0.1;
+  return function(rotation, delta) {
+    if (goog.isDef(rotation)) {
+      if (Math.abs(rotation + delta) <= tolerance) {
+        return 0;
+      } else {
+        return rotation + delta;
+      }
+    } else {
+      return undefined;
+    }
+  };
+};

src/ol/view2d.js

@@ -4,6 +4,7 @@
 goog.provide('ol.View2D');
 goog.provide('ol.View2DProperty');
 
+goog.require('goog.fx.easing');
 goog.require('ol.Constraints');
 goog.require('ol.Coordinate');
 goog.require('ol.Extent');
@@ -258,49 +259,72 @@ goog.exportProperty(
  * @param {ol.Map} map Map.
  * @param {number|undefined} rotation Rotation.
  * @param {ol.Coordinate=} opt_anchor Anchor coordinate.
+ * @param {number=} opt_duration Duration.
  */
-ol.View2D.prototype.rotate = function(map, rotation, opt_anchor) {
+ol.View2D.prototype.rotate =
+    function(map, rotation, opt_anchor, opt_duration) {
   rotation = this.constraints_.rotation(rotation, 0);
-  if (goog.isDefAndNotNull(opt_anchor)) {
-    var anchor = opt_anchor;
-    var oldCenter = /** @type {!ol.Coordinate} */ (this.getCenter());
-    var center = new ol.Coordinate(
-        oldCenter.x - anchor.x,
-        oldCenter.y - anchor.y);
-    center.rotate(rotation - this.getRotation());
-    center.x += anchor.x;
-    center.y += anchor.y;
-    map.withFrozenRendering(function() {
-      this.setCenter(center);
+  this.rotateWithoutConstraints(map, rotation, opt_anchor, opt_duration);
+};
+
+
+/**
+ * @param {ol.Map} map Map.
+ * @param {number|undefined} rotation Rotation.
+ * @param {ol.Coordinate=} opt_anchor Anchor coordinate.
+ * @param {number=} opt_duration Duration.
+ */
+ol.View2D.prototype.rotateWithoutConstraints =
+    function(map, rotation, opt_anchor, opt_duration) {
+  if (goog.isDefAndNotNull(rotation)) {
+    var currentRotation = this.getRotation();
+    var currentCenter = this.getCenter();
+    if (goog.isDef(currentRotation) && goog.isDef(currentCenter) &&
+        goog.isDef(opt_duration)) {
+      map.requestRenderFrame();
+      map.addPreRenderFunction(ol.animation.rotate({
+        rotation: currentRotation,
+        duration: opt_duration,
+        easing: goog.fx.easing.easeOut
+      }));
+      if (goog.isDef(opt_anchor)) {
+        map.addPreRenderFunction(ol.animation.pan({
+          source: currentCenter,
+          duration: opt_duration,
+          easing: goog.fx.easing.easeOut
+        }));
+      }
+    }
+    if (goog.isDefAndNotNull(opt_anchor)) {
+      var anchor = opt_anchor;
+      var oldCenter = /** @type {!ol.Coordinate} */ (this.getCenter());
+      var center = new ol.Coordinate(
+          oldCenter.x - anchor.x,
+          oldCenter.y - anchor.y);
+      center.rotate(rotation - this.getRotation());
+      center.x += anchor.x;
+      center.y += anchor.y;
+      map.withFrozenRendering(function() {
+        this.setCenter(center);
+        this.setRotation(rotation);
+      }, this);
+    } else {
       this.setRotation(rotation);
-    }, this);
-  } else {
-    this.setRotation(rotation);
+    }
   }
 };
 
 
 /**
- * @private
  * @param {ol.Map} map Map.
  * @param {number|undefined} resolution Resolution to go to.
  * @param {ol.Coordinate=} opt_anchor Anchor coordinate.
+ * @param {number=} opt_duration Duration.
  */
-ol.View2D.prototype.zoom_ = function(map, resolution, opt_anchor) {
-  if (goog.isDefAndNotNull(resolution) && goog.isDefAndNotNull(opt_anchor)) {
-    var anchor = opt_anchor;
-    var oldCenter = /** @type {!ol.Coordinate} */ (this.getCenter());
-    var oldResolution = this.getResolution();
-    var x = anchor.x - resolution * (anchor.x - oldCenter.x) / oldResolution;
-    var y = anchor.y - resolution * (anchor.y - oldCenter.y) / oldResolution;
-    var center = new ol.Coordinate(x, y);
-    map.withFrozenRendering(function() {
-      this.setCenter(center);
-      this.setResolution(resolution);
-    }, this);
-  } else {
-    this.setResolution(resolution);
-  }
+ol.View2D.prototype.zoom =
+    function(map, resolution, opt_anchor, opt_duration) {
+  resolution = this.constraints_.resolution(resolution, 0);
+  this.zoomWithoutConstraints(map, resolution, opt_anchor, opt_duration);
 };
 
 
@@ -310,17 +334,11 @@ ol.View2D.prototype.zoom_ = function(map, resolution, opt_anchor) {
  * @param {ol.Coordinate=} opt_anchor Anchor coordinate.
  * @param {number=} opt_duration Duration.
  */
-ol.View2D.prototype.zoom = function(map, delta, opt_anchor, opt_duration) {
+ol.View2D.prototype.zoomByDelta =
+    function(map, delta, opt_anchor, opt_duration) {
   var currentResolution = this.getResolution();
-  if (goog.isDef(currentResolution) && goog.isDef(opt_duration)) {
-    map.requestRenderFrame();
-    map.addPreRenderFunction(ol.animation.zoom({
-      resolution: currentResolution,
-      duration: opt_duration
-    }));
-  }
   var resolution = this.constraints_.resolution(currentResolution, delta);
-  this.zoom_(map, resolution, opt_anchor);
+  this.zoomWithoutConstraints(map, resolution, opt_anchor, opt_duration);
 };
 
 
@@ -328,10 +346,44 @@ ol.View2D.prototype.zoom = function(map, delta, opt_anchor, opt_duration) {
  * @param {ol.Map} map Map.
  * @param {number|undefined} resolution Resolution to go to.
  * @param {ol.Coordinate=} opt_anchor Anchor coordinate.
+ * @param {number=} opt_duration Duration.
  */
-ol.View2D.prototype.zoomToResolution = function(map, resolution, opt_anchor) {
-  resolution = this.constraints_.resolution(resolution, 0);
-  this.zoom_(map, resolution, opt_anchor);
+ol.View2D.prototype.zoomWithoutConstraints =
+    function(map, resolution, opt_anchor, opt_duration) {
+  if (goog.isDefAndNotNull(resolution)) {
+    var currentResolution = this.getResolution();
+    var currentCenter = this.getCenter();
+    if (goog.isDef(currentResolution) && goog.isDef(currentCenter) &&
+        goog.isDef(opt_duration)) {
+      map.requestRenderFrame();
+      map.addPreRenderFunction(ol.animation.zoom({
+        resolution: currentResolution,
+        duration: opt_duration,
+        easing: goog.fx.easing.easeOut
+      }));
+      if (goog.isDef(opt_anchor)) {
+        map.addPreRenderFunction(ol.animation.pan({
+          source: currentCenter,
+          duration: opt_duration,
+          easing: goog.fx.easing.easeOut
+        }));
+      }
+    }
+    if (goog.isDefAndNotNull(opt_anchor)) {
+      var anchor = opt_anchor;
+      var oldCenter = /** @type {!ol.Coordinate} */ (this.getCenter());
+      var oldResolution = this.getResolution();
+      var x = anchor.x - resolution * (anchor.x - oldCenter.x) / oldResolution;
+      var y = anchor.y - resolution * (anchor.y - oldCenter.y) / oldResolution;
+      var center = new ol.Coordinate(x, y);
+      map.withFrozenRendering(function() {
+        this.setCenter(center);
+        this.setResolution(resolution);
+      }, this);
+    } else {
+      this.setResolution(resolution);
+    }
+  }
 };
 
 
@@ -359,15 +411,13 @@ ol.View2D.createConstraints_ = function(view2DOptions) {
       maxResolution = Math.max(
           projectionExtent.maxX - projectionExtent.minX,
           projectionExtent.maxY - projectionExtent.minY) / ol.DEFAULT_TILE_SIZE;
-      // number of steps we want between two data resolutions
-      var numSteps = 4;
-      numZoomLevels = 29 * numSteps;
-      zoomFactor = Math.exp(Math.log(2) / numSteps);
+      numZoomLevels = 29;
+      zoomFactor = 2;
     }
     resolutionConstraint = ol.ResolutionConstraint.createSnapToPower(
         zoomFactor, maxResolution, numZoomLevels - 1);
   }
   // FIXME rotation constraint is not configurable at the moment
-  var rotationConstraint = ol.RotationConstraint.none;
+  var rotationConstraint = ol.RotationConstraint.createSnapToZero();
   return new ol.Constraints(resolutionConstraint, rotationConstraint);
 };