View / add getValidCenter method to improve interactions

The DragPan, KeyboardPan and DragZoom interactions now make sure to
animate to a valid center/resolution target to avoid
a chained "resolve" animation which looks weird.

The `View.fit` method was also fixed to use this.

src/ol/View.js

@@ -1069,7 +1069,7 @@ class View extends BaseObject {
     if (options.duration !== undefined) {
       this.animate({
         resolution: resolution,
-        center: center,
+        center: this.getValidCenter(center, resolution),
         duration: options.duration,
         easing: options.easing
       }, callback);
@@ -1312,6 +1312,19 @@ class View extends BaseObject {
     this.resolveConstraints_(opt_duration, opt_resolutionDirection);
   }
 
+  /**
+   * Get a valid position for the view center according to the current constraints.
+   * @param {import("./coordinate.js").Coordinate|undefined} targetCenter Target center position.
+   * @param {number=} opt_targetResolution Target resolution. If not supplied, the current one will be used.
+   * This is useful to guess a valid center position at a different zoom level.
+   * @return {import("./coordinate.js").Coordinate|undefined} Valid center position.
+   * @api
+   */
+  getValidCenter(targetCenter, opt_targetResolution) {
+    const size = this.getSizeFromViewport_(this.getRotation());
+    return this.constraints_.center(targetCenter, opt_targetResolution || this.getResolution(), size);
+  }
+
   /**
    * Get a valid zoom level according to the current view constraints.
    * @param {number|undefined} targetZoom Target zoom.

src/ol/interaction/DragPan.js

@@ -116,7 +116,7 @@ class DragPan extends PointerInteraction {
           centerpx[1] - distance * Math.sin(angle)
         ]);
         view.animate({
-          center: dest,
+          center: view.getValidCenter(dest),
           duration: 500,
           easing: easeOut
         });

src/ol/interaction/DragZoom.js

@@ -80,13 +80,11 @@ function onBoxEnd() {
     extent = mapExtent;
   }
 
-  const resolution = view.getResolutionForExtent(extent, size);
+  const resolution = view.getValidResolution(view.getResolutionForExtent(extent, size));
-  const zoom = view.getValidZoomLevel(view.getZoomForResolution(resolution));
+  const center = view.getValidCenter(getCenter(extent), resolution);
-
-  const center = getCenter(extent);
 
   view.animate({
-    zoom: zoom,
+    resolution: resolution,
     center: center,
     duration: this.duration_,
     easing: easeOut

src/ol/interaction/Interaction.js

@@ -114,7 +114,7 @@ export function pan(view, delta, opt_duration) {
     view.animate({
       duration: opt_duration !== undefined ? opt_duration : 250,
       easing: linear,
-      center: center
+      center: view.getValidCenter(center)
     });
   }
 }