Do not change center when the padding changes

src/ol/View.js

@@ -399,15 +399,10 @@ class View extends BaseObject {
     this.resolutions_ = options.resolutions;
 
     /**
-     * Padding (in css pixels).
-     * If the map viewport is partially covered with other content (overlays) along
-     * its edges, this setting allows to shift the center of the viewport away from that
-     * content. The order of the values in the array is top, right, bottom, left.
-     * The default is no padding, which is equivalent to `[0, 0, 0, 0]`.
      * @type {Array<number>|undefined}
-     * @api
+     * @private
      */
-    this.padding = options.padding;
+    this.padding_ = options.padding;
 
     /**
      * @private
@@ -448,6 +443,36 @@ class View extends BaseObject {
     this.options_ = options;
   }
 
+  /**
+   * Padding (in css pixels).
+   * If the map viewport is partially covered with other content (overlays) along
+   * its edges, this setting allows to shift the center of the viewport away from that
+   * content. The order of the values in the array is top, right, bottom, left.
+   * The default is no padding, which is equivalent to `[0, 0, 0, 0]`.
+   * @type {Array<number>|undefined}
+   * @api
+   */
+  get padding() {
+    return this.padding_;
+  }
+  set padding(padding) {
+    let oldPadding = this.padding_;
+    this.padding_ = padding;
+    const center = this.getCenter();
+    if (center) {
+      const newPadding = padding || [0, 0, 0, 0];
+      oldPadding = oldPadding || [0, 0, 0, 0];
+      const resolution = this.getResolution();
+      const offsetX =
+        (resolution / 2) *
+        (newPadding[3] - oldPadding[3] + oldPadding[1] - newPadding[1]);
+      const offsetY =
+        (resolution / 2) *
+        (newPadding[0] - oldPadding[0] + oldPadding[2] - newPadding[2]);
+      this.setCenterInternal([center[0] + offsetX, center[1] - offsetY]);
+    }
+  }
+
   /**
    * Get an updated version of the view options used to construct the view.  The
    * current resolution (or zoom), center, and rotation are applied to any stored
@@ -1121,7 +1146,7 @@ class View extends BaseObject {
    */
   getViewportSizeMinusPadding_(opt_rotation) {
     let size = this.getViewportSize_(opt_rotation);
-    const padding = this.padding;
+    const padding = this.padding_;
     if (padding) {
       size = [
         size[0] - padding[1] - padding[3],
@@ -1139,7 +1164,7 @@ class View extends BaseObject {
     const resolution = /** @type {number} */ (this.getResolution());
     const rotation = this.getRotation();
     let center = /** @type {import("./coordinate.js").Coordinate} */ (this.getCenterInternal());
-    const padding = this.padding;
+    const padding = this.padding_;
     if (padding) {
       const reducedSize = this.getViewportSizeMinusPadding_();
       center = calculateCenterOn(
@@ -1395,7 +1420,7 @@ class View extends BaseObject {
    */
   calculateCenterShift(center, resolution, rotation, size) {
     let centerShift;
-    const padding = this.padding;
+    const padding = this.padding_;
     if (padding && center) {
       const reducedSize = this.getViewportSizeMinusPadding_(-rotation);
       const shiftedCenter = calculateCenterOn(

test/spec/ol/view.test.js

@@ -1633,9 +1633,8 @@ describe('ol.View', function () {
       let extent = view.calculateExtent();
       expect(extent).to.eql([-20, -30, 20, 30]);
       view.padding = [0, 0, 0, 0];
-      view.setCenter([0, 0]);
       extent = view.calculateExtent();
-      expect(extent).to.eql([-50, -50, 50, 50]);
+      expect(extent).to.eql([-60, -60, 40, 40]);
     });
   });
 
@@ -2207,7 +2206,7 @@ describe('ol.View', function () {
     });
   });
 
-  describe('#getState', function () {
+  describe('#getCenter', function () {
     let view;
     beforeEach(function () {
       view = new View({
@@ -2219,8 +2218,7 @@ describe('ol.View', function () {
     });
     it('Correctly shifts the viewport center when a padding is set', function () {
       view.padding = [50, 0, 0, 50];
-      const state = view.getState();
+      expect(view.getCenter()).to.eql([25, -25]);
-      expect(state.center).to.eql([-25, 25]);
     });
   });
 });