Merge pull request #12282 from M393/dragzoom-view-padding

Fix DragZoom with view padding

examples/view-padding.js

@@ -50,8 +50,9 @@ const map = new Map({
   view: view,
 });
 
-const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
+vectorLayer.getSource().on('featuresloadend', function () {
-zoomtoswitzerland.addEventListener(
+  const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
+  zoomtoswitzerland.addEventListener(
     'click',
     function () {
       const feature = source.getFeatures()[0];
@@ -59,10 +60,10 @@ zoomtoswitzerland.addEventListener(
       view.fit(polygon);
     },
     false
-);
+  );
 
-const centerlausanne = document.getElementById('centerlausanne');
+  const centerlausanne = document.getElementById('centerlausanne');
-centerlausanne.addEventListener(
+  centerlausanne.addEventListener(
     'click',
     function () {
       const feature = source.getFeatures()[1];
@@ -70,4 +71,5 @@ centerlausanne.addEventListener(
       view.setCenter(point.getCoordinates());
     },
     false
-);
+  );
+});

src/ol/View.js

@@ -1078,7 +1078,7 @@ class View extends BaseObject {
    *     the given size.
    */
   getResolutionForExtentInternal(extent, opt_size) {
-    const size = opt_size || this.getViewportSize_();
+    const size = opt_size || this.getViewportSizeMinusPadding_();
     const xResolution = getWidth(extent) / size[0];
     const yResolution = getHeight(extent) / size[1];
     return Math.max(xResolution, yResolution);
@@ -1300,6 +1300,32 @@ class View extends BaseObject {
     this.fitInternal(geometry, opt_options);
   }
 
+  /**
+   * Calculate rotated extent
+   * @param {import("./geom/SimpleGeometry.js").default} geometry The geometry.
+   * @return {import("./extent").Extent} The rotated extent for the geometry.
+   */
+  rotatedExtentForGeometry(geometry) {
+    const rotation = this.getRotation();
+    const cosAngle = Math.cos(rotation);
+    const sinAngle = Math.sin(-rotation);
+    const coords = geometry.getFlatCoordinates();
+    const stride = geometry.getStride();
+    let minRotX = +Infinity;
+    let minRotY = +Infinity;
+    let maxRotX = -Infinity;
+    let maxRotY = -Infinity;
+    for (let i = 0, ii = coords.length; i < ii; i += stride) {
+      const rotX = coords[i] * cosAngle - coords[i + 1] * sinAngle;
+      const rotY = coords[i] * sinAngle + coords[i + 1] * cosAngle;
+      minRotX = Math.min(minRotX, rotX);
+      minRotY = Math.min(minRotY, rotY);
+      maxRotX = Math.max(maxRotX, rotX);
+      maxRotY = Math.max(maxRotY, rotY);
+    }
+    return [minRotX, minRotY, maxRotX, maxRotY];
+  }
+
   /**
    * @param {import("./geom/SimpleGeometry.js").default} geometry The geometry.
    * @param {FitOptions} [opt_options] Options.
@@ -1321,44 +1347,28 @@ class View extends BaseObject {
     } else {
       minResolution = 0;
     }
-    const coords = geometry.getFlatCoordinates();
 
-    // calculate rotated extent
+    const rotatedExtent = this.rotatedExtentForGeometry(geometry);
-    const rotation = this.getRotation();
-    const cosAngle = Math.cos(-rotation);
-    let sinAngle = Math.sin(-rotation);
-    let minRotX = +Infinity;
-    let minRotY = +Infinity;
-    let maxRotX = -Infinity;
-    let maxRotY = -Infinity;
-    const stride = geometry.getStride();
-    for (let i = 0, ii = coords.length; i < ii; i += stride) {
-      const rotX = coords[i] * cosAngle - coords[i + 1] * sinAngle;
-      const rotY = coords[i] * sinAngle + coords[i + 1] * cosAngle;
-      minRotX = Math.min(minRotX, rotX);
-      minRotY = Math.min(minRotY, rotY);
-      maxRotX = Math.max(maxRotX, rotX);
-      maxRotY = Math.max(maxRotY, rotY);
-    }
 
     // calculate resolution
-    let resolution = this.getResolutionForExtentInternal(
+    let resolution = this.getResolutionForExtentInternal(rotatedExtent, [
-      [minRotX, minRotY, maxRotX, maxRotY],
+      size[0] - padding[1] - padding[3],
-      [size[0] - padding[1] - padding[3], size[1] - padding[0] - padding[2]]
+      size[1] - padding[0] - padding[2],
-    );
+    ]);
     resolution = isNaN(resolution)
       ? minResolution
       : Math.max(resolution, minResolution);
     resolution = this.getConstrainedResolution(resolution, nearest ? 0 : 1);
 
     // calculate center
-    sinAngle = -sinAngle; // go back to original rotation
+    const rotation = this.getRotation();
-    let centerRotX = (minRotX + maxRotX) / 2;
+    const sinAngle = Math.sin(rotation);
-    let centerRotY = (minRotY + maxRotY) / 2;
+    const cosAngle = Math.cos(rotation);
-    centerRotX += ((padding[1] - padding[3]) / 2) * resolution;
+    const centerRot = getCenter(rotatedExtent);
-    centerRotY += ((padding[0] - padding[2]) / 2) * resolution;
+    centerRot[0] += ((padding[1] - padding[3]) / 2) * resolution;
-    const centerX = centerRotX * cosAngle - centerRotY * sinAngle;
+    centerRot[1] += ((padding[0] - padding[2]) / 2) * resolution;
-    const centerY = centerRotY * cosAngle + centerRotX * sinAngle;
+    const centerX = centerRot[0] * cosAngle - centerRot[1] * sinAngle;
+    const centerY = centerRot[1] * cosAngle + centerRot[0] * sinAngle;
     const center = this.getConstrainedCenter([centerX, centerY], resolution);
     const callback = options.callback ? options.callback : VOID;
 

src/ol/interaction/DragZoom.js

@@ -2,13 +2,6 @@
  * @module ol/interaction/DragZoom
  */
 import DragBox from './DragBox.js';
-import {
-  createOrUpdateFromCoordinates,
-  getBottomLeft,
-  getCenter,
-  getTopRight,
-  scaleFromCenter,
-} from '../extent.js';
 import {easeOut} from '../easing.js';
 import {shiftKeyOnly} from '../events/condition.js';
 
@@ -71,29 +64,17 @@ class DragZoom extends DragBox {
   onBoxEnd(event) {
     const map = this.getMap();
     const view = /** @type {!import("../View.js").default} */ (map.getView());
-    const size = /** @type {!import("../size.js").Size} */ (map.getSize());
+    let geometry = this.getGeometry();
-    let extent = this.getGeometry().getExtent();
 
     if (this.out_) {
-      const mapExtent = view.calculateExtentInternal(size);
+      const rotatedExtent = view.rotatedExtentForGeometry(geometry);
-      const boxPixelExtent = createOrUpdateFromCoordinates([
+      const resolution = view.getResolutionForExtentInternal(rotatedExtent);
-        map.getPixelFromCoordinateInternal(getBottomLeft(extent)),
+      const factor = view.getResolution() / resolution;
-        map.getPixelFromCoordinateInternal(getTopRight(extent)),
+      geometry = geometry.clone();
-      ]);
+      geometry.scale(factor * factor);
-      const factor = view.getResolutionForExtentInternal(boxPixelExtent, size);
-
-      scaleFromCenter(mapExtent, 1 / factor);
-      extent = mapExtent;
     }
 
-    const resolution = view.getConstrainedResolution(
+    view.fitInternal(geometry, {
-      view.getResolutionForExtentInternal(extent, size)
-    );
-    const center = view.getConstrainedCenter(getCenter(extent), resolution);
-
-    view.animateInternal({
-      resolution: resolution,
-      center: center,
       duration: this.duration_,
       easing: easeOut,
     });

test/browser/spec/ol/interaction/dragzoom.test.js

@@ -1,14 +1,21 @@
 import DragZoom from '../../../../../src/ol/interaction/DragZoom.js';
 import Map from '../../../../../src/ol/Map.js';
+import Polygon, {
+  fromExtent as polygonFromExtent,
+} from '../../../../../src/ol/geom/Polygon.js';
 import RenderBox from '../../../../../src/ol/render/Box.js';
 import VectorLayer from '../../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../../src/ol/source/Vector.js';
 import View from '../../../../../src/ol/View.js';
-import {getCenter} from '../../../../../src/ol/extent.js';
+import {getCenter, scaleFromCenter} from '../../../../../src/ol/extent.js';
-import {fromExtent as polygonFromExtent} from '../../../../../src/ol/geom/Polygon.js';
 
 describe('ol.interaction.DragZoom', function () {
-  let target, map, source;
+  /** @type {HTMLElement} */
+  let target;
+  /** @type {Map} */
+  let map;
+  /** @type {VectorSource} */
+  let source;
 
   const width = 360;
   const height = 180;
@@ -31,6 +38,7 @@ describe('ol.interaction.DragZoom', function () {
         projection: 'EPSG:4326',
         center: [0, 0],
         resolution: 1,
+        multiWorld: true,
       }),
     });
     map.once('postrender', function () {
@@ -59,9 +67,27 @@ describe('ol.interaction.DragZoom', function () {
   });
 
   describe('#onBoxEnd()', function () {
-    it('centers the view on the box geometry', function (done) {
+    it('uses the configured duration', function () {
       const interaction = new DragZoom({
-        duration: 10,
+        duration: 1,
+      });
+      map.addInteraction(interaction);
+      const view = map.getView();
+      view.fitInternal = sinon.spy();
+
+      const box = new RenderBox();
+      const extent = [-110, 40, -90, 60];
+      box.geometry_ = polygonFromExtent(extent);
+      interaction.box_ = box;
+
+      interaction.onBoxEnd();
+
+      expect(view.fitInternal.calledOnce).to.be(true);
+      expect(view.fitInternal.args[0][1].duration).to.be(1);
+    });
+    it('centers the view on the box geometry', function () {
+      const interaction = new DragZoom({
+        duration: 0,
       });
       map.addInteraction(interaction);
 
@@ -71,17 +97,63 @@ describe('ol.interaction.DragZoom', function () {
       interaction.box_ = box;
 
       interaction.onBoxEnd();
-      setTimeout(function () {
       const view = map.getView();
       const center = view.getCenterInternal();
       expect(center).to.eql(getCenter(extent));
-        done();
-      }, 50);
     });
 
-    it('sets new resolution while zooming out', function (done) {
+    it('centers the rotated view on the box geometry', function () {
+      const view = map.getView();
+      view.setRotation(Math.PI / 4);
+
       const interaction = new DragZoom({
-        duration: 10,
+        duration: 0,
+      });
+      map.addInteraction(interaction);
+
+      const box = new RenderBox();
+      map.renderSync();
+      box.geometry_ = new Polygon([
+        [
+          map.getCoordinateFromPixel([0, 0]),
+          map.getCoordinateFromPixel([360, 0]),
+          map.getCoordinateFromPixel([360, 180]),
+          map.getCoordinateFromPixel([0, 180]),
+          map.getCoordinateFromPixel([0, 0]),
+        ],
+      ]);
+      interaction.box_ = box;
+
+      const extentBefore = view.calculateExtentInternal();
+      interaction.onBoxEnd();
+      const newExtent = view.calculateExtentInternal();
+      expect(newExtent[0]).to.roughlyEqual(extentBefore[0], 1e-9);
+      expect(newExtent[1]).to.roughlyEqual(extentBefore[1], 1e-9);
+      expect(newExtent[2]).to.roughlyEqual(extentBefore[2], 1e-9);
+      expect(newExtent[3]).to.roughlyEqual(extentBefore[3], 1e-9);
+      expect(view.getResolution()).to.roughlyEqual(1, 1e-9);
+    });
+    it('centers the padded view on the box geometry', function () {
+      map.getView().padding = [0, 180, 0, 0];
+
+      const interaction = new DragZoom({
+        duration: 0,
+      });
+      map.addInteraction(interaction);
+
+      const box = new RenderBox();
+      const extent = [-180, -90, 0, 90];
+      box.geometry_ = polygonFromExtent(extent);
+      interaction.box_ = box;
+
+      interaction.onBoxEnd();
+      const view = map.getView();
+      expect(view.getResolution()).to.be(1);
+      expect(view.calculateExtentInternal()).to.eql(extent);
+    });
+    it('sets new resolution while zooming out', function () {
+      const interaction = new DragZoom({
+        duration: 0,
         out: true,
       });
       map.addInteraction(interaction);
@@ -92,15 +164,45 @@ describe('ol.interaction.DragZoom', function () {
       interaction.box_ = box;
 
       map.getView().setResolution(0.25);
-      setTimeout(function () {
       interaction.onBoxEnd();
-        setTimeout(function () {
       const view = map.getView();
       const resolution = view.getResolution();
       expect(resolution).to.eql(view.getConstrainedResolution(0.5));
-          done();
+    });
-        }, 50);
+    it('sets new resolution while zooming out with view padding and rotation', function () {
-      }, 50);
+      const view = map.getView();
+      view.setResolution(0.5);
+      view.setRotation(Math.PI / 4);
+      view.padding = [90, 0, 0, 0];
+
+      const interaction = new DragZoom({
+        duration: 0,
+        out: true,
+      });
+      map.addInteraction(interaction);
+
+      const box = new RenderBox();
+      map.renderSync();
+      box.geometry_ = new Polygon([
+        [
+          map.getCoordinateFromPixel([90, 117.5]),
+          map.getCoordinateFromPixel([90, 152.5]),
+          map.getCoordinateFromPixel([270, 152.5]),
+          map.getCoordinateFromPixel([270, 117.5]),
+          map.getCoordinateFromPixel([90, 117.5]),
+        ],
+      ]);
+      interaction.box_ = box;
+
+      const expected = view.calculateExtentInternal();
+      scaleFromCenter(expected, 2);
+      interaction.onBoxEnd();
+      const newExtent = view.calculateExtentInternal();
+      expect(view.getResolution()).to.roughlyEqual(1, 1e-9);
+      expect(newExtent[0]).to.roughlyEqual(expected[0], 1e-9);
+      expect(newExtent[1]).to.roughlyEqual(expected[1], 1e-9);
+      expect(newExtent[2]).to.roughlyEqual(expected[2], 1e-9);
+      expect(newExtent[3]).to.roughlyEqual(expected[3], 1e-9);
     });
   });
 });