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/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 zoom = view.getValidZoomLevel(view.getZoomForResolution(resolution));
-
-  const center = getCenter(extent);
+  const resolution = view.getValidResolution(view.getResolutionForExtent(extent, size));
+  const center = view.getValidCenter(getCenter(extent), resolution);
 
   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)
     });
   }
 }