Merge pull request #6264 from ahocevar/view-fit

Remove the requirement to provide a size to ol.View#fit()

changelog/upgrade-notes.md

@@ -1,5 +1,28 @@
 ## Upgrade notes
 
+### Next release
+
+#### Simplified `ol.View#fit()` API
+
+In most cases, it is no longer necessary to provide an `ol.Size` (previously the 2nd argument) to `ol.View#fit()`. By default, the size of the first map that uses the view will be used. If you want to specify a different size, it goes in the options now (previously the 3rd argument, now the 2nd).
+
+Most common use case - old API:
+```js
+map.getView().fit(extent, map.getSize());
+```
+Most common use case - new API:
+```js
+map.getView().fit(extent);
+```
+Advanced use - old API:
+```js
+map.getView().fit(extent, [200, 100], {padding: 10});
+```
+Advanced use - new API:
+```js
+map.getView().fit(extent, {size: [200, 100], padding 10});
+```
+
 ### v3.20.0
 
 #### Use `view.animate()` instead of `map.beforeRender()` and `ol.animation` functions

examples/center.js

@@ -62,34 +62,30 @@ var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
 zoomtoswitzerlandbest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
-  var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(polygon, size, {padding: [170, 50, 30, 150], constrainResolution: false});
+  view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
 }, false);
 
 var zoomtoswitzerlandconstrained =
     document.getElementById('zoomtoswitzerlandconstrained');
 zoomtoswitzerlandconstrained.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
-  var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(polygon, size, {padding: [170, 50, 30, 150]});
+  view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
 var zoomtoswitzerlandnearest =
     document.getElementById('zoomtoswitzerlandnearest');
 zoomtoswitzerlandnearest.addEventListener('click', function() {
   var feature = source.getFeatures()[0];
   var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
-  var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(polygon, size, {padding: [170, 50, 30, 150], nearest: true});
+  view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
 }, false);
 
 var zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
   var feature = source.getFeatures()[1];
   var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
-  var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(point, size, {padding: [170, 50, 30, 150], minResolution: 50});
+  view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 var centerlausanne = document.getElementById('centerlausanne');

examples/drag-and-drop-image-vector.js

@@ -121,8 +121,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
       style: styleFunction
     })
   }));
-  map.getView().fit(
-      vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
+  map.getView().fit(vectorSource.getExtent());
 });
 
 var displayFeatureInfo = function(pixel) {

examples/drag-and-drop.js

@@ -118,8 +118,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
     source: vectorSource,
     style: styleFunction
   }));
-  map.getView().fit(
-      vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
+  map.getView().fit(vectorSource.getExtent());
 });
 
 var displayFeatureInfo = function(pixel) {

examples/export-pdf.js

@@ -89,7 +89,7 @@ exportButton.addEventListener('click', function() {
         source.un('tileloadend', tileLoadEnd, canvas);
         source.un('tileloaderror', tileLoadEnd, canvas);
         map.setSize(size);
-        map.getView().fit(extent, size);
+        map.getView().fit(extent);
         map.renderSync();
         exportButton.disabled = false;
         document.body.style.cursor = 'auto';
@@ -104,7 +104,7 @@ exportButton.addEventListener('click', function() {
   });
 
   map.setSize([width, height]);
-  map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
+  map.getView().fit(extent);
   map.renderSync();
 
 }, false);

examples/reprojection-by-code.js

@@ -53,11 +53,7 @@ function setProjection(code, name, proj4def, bbox) {
     projection: newProj
   });
   map.setView(newView);
-
-  var size = map.getSize();
-  if (size) {
-    newView.fit(extent, size);
-  }
+  newView.fit(extent);
 }
 
 

examples/vector-wfs-getfeature.js

@@ -61,5 +61,5 @@ fetch('https://ahocevar.com/geoserver/wfs', {
 }).then(function(json) {
   var features = new ol.format.GeoJSON().readFeatures(json);
   vectorSource.addFeatures(features);
-  map.getView().fit(vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
+  map.getView().fit(vectorSource.getExtent());
 });

examples/zoomify.js

@@ -28,4 +28,4 @@ var map = new ol.Map({
     extent: extent
   })
 });
-map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
+map.getView().fit(extent);

externs/olx.js

@@ -7627,6 +7627,7 @@ olx.view;
 
 /**
  * @typedef {{
+ *     size: (ol.Size|undefined),
  *     padding: (!Array.<number>|undefined),
  *     constrainResolution: (boolean|undefined),
  *     nearest: (boolean|undefined),
@@ -7639,6 +7640,16 @@ olx.view;
 olx.view.FitOptions;
 
 
+/**
+ * The size in pixels of the box to fit the extent into. Default is
+ * the current size of the first map in the DOM that uses this view, or
+ * `[100, 100]` if no such map is found.
+ * @type {ol.Size|undefined}
+ * @api
+ */
+olx.view.FitOptions.prototype.size;
+
+
 /**
  * Padding (in pixels) to be cleared inside the view. Values in the array are
  * top, right, bottom and left padding. Default is `[0, 0, 0, 0]`.

src/ol/control/overviewmap.js

@@ -318,8 +318,6 @@ ol.control.OverviewMap.prototype.resetExtent_ = function() {
   var view = map.getView();
   var extent = view.calculateExtent(mapSize);
 
-  var ovmapSize = /** @type {ol.Size} */ (ovmap.getSize());
-
   var ovview = ovmap.getView();
 
   // get how many times the current map overview could hold different
@@ -329,7 +327,7 @@ ol.control.OverviewMap.prototype.resetExtent_ = function() {
       ol.OVERVIEWMAP_MAX_RATIO / ol.OVERVIEWMAP_MIN_RATIO) / Math.LN2;
   var ratio = 1 / (Math.pow(2, steps / 2) * ol.OVERVIEWMAP_MIN_RATIO);
   ol.extent.scaleFromCenter(extent, ratio);
-  ovview.fit(extent, ovmapSize);
+  ovview.fit(extent);
 };
 
 

src/ol/control/zoomtoextent.js

@@ -73,6 +73,5 @@ ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function() {
   var map = this.getMap();
   var view = map.getView();
   var extent = !this.extent_ ? view.getProjection().getExtent() : this.extent_;
-  var size = /** @type {ol.Size} */ (map.getSize());
-  view.fit(extent, size);
+  view.fit(extent);
 };

src/ol/map.js

@@ -1092,6 +1092,7 @@ ol.Map.prototype.handleViewChanged_ = function() {
   }
   var view = this.getView();
   if (view) {
+    this.viewport_.setAttribute('data-view', ol.getUid(view));
     this.viewPropertyListenerKey_ = ol.events.listen(
         view, ol.Object.EventType.PROPERTYCHANGE,
         this.handleViewPropertyChanged_, this);

src/ol/view.js

@@ -672,12 +672,22 @@ ol.View.prototype.getZoom = function() {
  * Takes care of the map angle.
  * @param {ol.geom.SimpleGeometry|ol.Extent} geometryOrExtent The geometry or
  *     extent to fit the view to.
- * @param {ol.Size} size The size in pixels of the box to fit the extent into.
- *     Will often be `mep.getSize()`.
  * @param {olx.view.FitOptions=} opt_options Options.
- * @api
+ * @api stable
  */
-ol.View.prototype.fit = function(geometryOrExtent, size, opt_options) {
+ol.View.prototype.fit = function(geometryOrExtent, opt_options) {
+  var options = opt_options || {};
+  var size = options.size;
+  if (!size) {
+    size = [100, 100];
+    var selector = '.ol-viewport[data-view="' + ol.getUid(this) + '"]';
+    var element = document.querySelector(selector);
+    if (element) {
+      var metrics = getComputedStyle(element);
+      size[0] = parseInt(metrics.width, 10);
+      size[1] = parseInt(metrics.height, 10);
+    }
+  }
   /** @type {ol.geom.SimpleGeometry} */
   var geometry;
   if (!(geometryOrExtent instanceof ol.geom.SimpleGeometry)) {
@@ -690,8 +700,6 @@ ol.View.prototype.fit = function(geometryOrExtent, size, opt_options) {
     geometry = geometryOrExtent;
   }
 
-  var options = opt_options || {};
-
   var padding = options.padding !== undefined ? options.padding : [0, 0, 0, 0];
   var constrainResolution = options.constrainResolution !== undefined ?
       options.constrainResolution : true;

test/spec/ol/view.test.js

@@ -912,40 +912,35 @@ describe('ol.View', function() {
     it('fits correctly to the geometry', function() {
       view.fit(
           new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
-          [200, 200],
-          {padding: [100, 0, 0, 100], constrainResolution: false});
+          {size: [200, 200], padding: [100, 0, 0, 100], constrainResolution: false});
       expect(view.getResolution()).to.be(11);
       expect(view.getCenter()[0]).to.be(5950);
       expect(view.getCenter()[1]).to.be(47100);
 
       view.fit(
           new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
-          [200, 200],
-          {padding: [100, 0, 0, 100]});
+          {size: [200, 200], padding: [100, 0, 0, 100]});
       expect(view.getResolution()).to.be(20);
       expect(view.getCenter()[0]).to.be(5500);
       expect(view.getCenter()[1]).to.be(47550);
 
       view.fit(
           new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
-          [200, 200],
-          {padding: [100, 0, 0, 100], nearest: true});
+          {size: [200, 200], padding: [100, 0, 0, 100], nearest: true});
       expect(view.getResolution()).to.be(10);
       expect(view.getCenter()[0]).to.be(6000);
       expect(view.getCenter()[1]).to.be(47050);
 
       view.fit(
           new ol.geom.Point([6000, 46000]),
-          [200, 200],
-          {padding: [100, 0, 0, 100], minResolution: 2});
+          {size: [200, 200], padding: [100, 0, 0, 100], minResolution: 2});
       expect(view.getResolution()).to.be(2);
       expect(view.getCenter()[0]).to.be(5900);
       expect(view.getCenter()[1]).to.be(46100);
 
       view.fit(
           new ol.geom.Point([6000, 46000]),
-          [200, 200],
-          {padding: [100, 0, 0, 100], maxZoom: 6});
+          {size: [200, 200], padding: [100, 0, 0, 100], maxZoom: 6});
       expect(view.getResolution()).to.be(2);
       expect(view.getZoom()).to.be(6);
       expect(view.getCenter()[0]).to.be(5900);
@@ -954,14 +949,13 @@ describe('ol.View', function() {
       view.setRotation(Math.PI / 4);
       view.fit(
           new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
-          [200, 200],
-          {padding: [100, 0, 0, 100], constrainResolution: false});
+          {size: [200, 200], padding: [100, 0, 0, 100], constrainResolution: false});
       expect(view.getResolution()).to.roughlyEqual(14.849242404917458, 1e-9);
       expect(view.getCenter()[0]).to.roughlyEqual(5200, 1e-9);
       expect(view.getCenter()[1]).to.roughlyEqual(46300, 1e-9);
     });
-    it('fit correctly to the extent', function() {
-      view.fit([1000, 1000, 2000, 2000], [200, 200]);
+    it('fits correctly to the extent', function() {
+      view.fit([1000, 1000, 2000, 2000], {size: [200, 200]});
       expect(view.getResolution()).to.be(5);
       expect(view.getCenter()[0]).to.be(1500);
       expect(view.getCenter()[1]).to.be(1500);
@@ -973,14 +967,14 @@ describe('ol.View', function() {
     });
     it('throws on empty extent', function() {
       expect(function() {
-        view.fit(ol.extent.createEmpty(), [200, 200]);
+        view.fit(ol.extent.createEmpty());
       }).to.throwException();
     });
     it('animates when duration is defined', function(done) {
       view.fit(
         new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
-        [200, 200],
         {
+          size: [200, 200],
           padding: [100, 0, 0, 100],
           constrainResolution: false,
           duration: 25