diff --git a/src/ol/View.js b/src/ol/View.js index 5ee7b4d4a4..5474d63603 100644 --- a/src/ol/View.js +++ b/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|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|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( diff --git a/test/spec/ol/view.test.js b/test/spec/ol/view.test.js index 6ec77ea4a5..8376e2d98a 100644 --- a/test/spec/ol/view.test.js +++ b/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(state.center).to.eql([-25, 25]); + expect(view.getCenter()).to.eql([25, -25]); }); }); });