Merge pull request #4095 from tschaub/drag-zoom

Zoom to the extent of the drag box.

src/ol/interaction/dragzoominteraction.js

@@ -1,10 +1,11 @@
 goog.provide('ol.interaction.DragZoom');
 
 goog.require('goog.asserts');
+goog.require('ol.animation');
+goog.require('ol.easing');
 goog.require('ol.events.condition');
 goog.require('ol.extent');
 goog.require('ol.interaction.DragBox');
-goog.require('ol.interaction.Interaction');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
@@ -58,13 +59,35 @@ goog.inherits(ol.interaction.DragZoom, ol.interaction.DragBox);
  */
 ol.interaction.DragZoom.prototype.onBoxEnd = function() {
   var map = this.getMap();
+
   var view = map.getView();
   goog.asserts.assert(!goog.isNull(view), 'view should not be null');
-  var extent = this.getGeometry().getExtent();
+
-  var center = ol.extent.getCenter(extent);
   var size = map.getSize();
   goog.asserts.assert(goog.isDef(size), 'size should be defined');
-  ol.interaction.Interaction.zoom(map, view,
+
-      view.getResolutionForExtent(extent, size),
+  var extent = this.getGeometry().getExtent();
-      center, this.duration_);
+
+  var resolution = view.constrainResolution(
+      view.getResolutionForExtent(extent, size));
+
+  var currentResolution = view.getResolution();
+  goog.asserts.assert(goog.isDef(currentResolution), 'res should be defined');
+
+  var currentCenter = view.getCenter();
+  goog.asserts.assert(goog.isDef(currentCenter), 'center should be defined');
+
+  map.beforeRender(ol.animation.zoom({
+    resolution: currentResolution,
+    duration: this.duration_,
+    easing: ol.easing.easeOut
+  }));
+  map.beforeRender(ol.animation.pan({
+    source: currentCenter,
+    duration: this.duration_,
+    easing: ol.easing.easeOut
+  }));
+
+  view.setCenter(ol.extent.getCenter(extent));
+  view.setResolution(resolution);
 };

test/spec/ol/interaction/dragzoominteraction.test.js

@@ -0,0 +1,85 @@
+goog.provide('ol.test.interaction.DragZoom');
+
+describe('ol.interaction.DragZoom', function() {
+
+  var target, map, source;
+
+  var width = 360;
+  var height = 180;
+
+  beforeEach(function(done) {
+    target = document.createElement('div');
+    var style = target.style;
+    style.position = 'absolute';
+    style.left = '-1000px';
+    style.top = '-1000px';
+    style.width = width + 'px';
+    style.height = height + 'px';
+    document.body.appendChild(target);
+    source = new ol.source.Vector();
+    var layer = new ol.layer.Vector({source: source});
+    map = new ol.Map({
+      target: target,
+      layers: [layer],
+      view: new ol.View({
+        projection: 'EPSG:4326',
+        center: [0, 0],
+        resolution: 1
+      })
+    });
+    map.on('postrender', function() {
+      done();
+    });
+  });
+
+  afterEach(function() {
+    goog.dispose(map);
+    document.body.removeChild(target);
+  });
+
+  describe('constructor', function() {
+
+    it('can be constructed without arguments', function() {
+      var instance = new ol.interaction.DragZoom();
+      expect(instance).to.be.an(ol.interaction.DragZoom);
+    });
+
+  });
+
+  describe('#onBoxEnd()', function() {
+
+    it('centers the view on the box geometry', function(done) {
+      var interaction = new ol.interaction.DragZoom({
+        duration: 10
+      });
+      map.addInteraction(interaction);
+
+      var box = new ol.render.Box();
+      var extent = [-110, 40, -90, 60];
+      box.geometry_ = ol.geom.Polygon.fromExtent(extent);
+      interaction.box_ = box;
+
+      interaction.onBoxEnd();
+      setTimeout(function() {
+        var view = map.getView();
+        var center = view.getCenter();
+        expect(center).to.eql(ol.extent.getCenter(extent));
+        done();
+      }, 50);
+
+    });
+
+  });
+
+
+});
+
+goog.require('goog.dispose');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.extent');
+goog.require('ol.geom.Polygon');
+goog.require('ol.interaction.DragZoom');
+goog.require('ol.layer.Vector');
+goog.require('ol.render.Box');
+goog.require('ol.source.Vector');