fix: trigger size updates for map on resize (#3415)

* fix: trigger size updates for map on resize

* add ResizeMixin to jsdoc

packages/component-base/index.d.ts

@@ -6,6 +6,7 @@ export { ElementMixin } from './src/element-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
 export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
+export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
 export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

packages/map/src/vaadin-map.d.ts

@@ -4,7 +4,7 @@
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import OpenLayersMap from 'ol/Map.js';
-import { ElementMixin } from '@vaadin/component-base';
+import { ElementMixin, ResizeMixin } from '@vaadin/component-base';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 
 /**
@@ -44,8 +44,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes ResizeMixin
  */
-declare class Map extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Map extends ResizeMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   /**
    * The internal OpenLayers map instance used to configure the map.
    * See the OpenLayers [API](https://openlayers.org/en/latest/apidoc/) and

packages/map/src/vaadin-map.js

@@ -8,6 +8,7 @@ import Attribution from 'ol/control/Attribution';
 import Zoom from 'ol/control/Zoom';
 import OpenLayersMap from 'ol/Map.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 function isEnabled() {
@@ -51,8 +52,9 @@ function isEnabled() {
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes ResizeMixin
  */
-class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Map extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -398,6 +400,14 @@ class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
     super.ready();
     // Add map container to shadow root, trigger OL resize calculation
     this.shadowRoot.appendChild(this._mapTarget);
+  }
+
+  /**
+   * Implements resize callback from ResizeMixin to update size of OL map instance
+   * @override
+   * @protected
+   */
+  _onResize(_contentRect) {
     this._configuration.updateSize();
   }
 }

packages/map/test/map.test.js

@@ -1,4 +1,5 @@
 import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@vaadin/testing-helpers';
 import '../enable.js';
 import '../vaadin-map.js';
 import TileLayer from 'ol/layer/Tile';
@@ -39,3 +40,34 @@ describe('configuration in detached state', () => {
     expect(layers.length).to.equal(1);
   });
 });
+
+describe('resize', () => {
+  let map;
+
+  beforeEach(async () => {
+    map = fixtureSync('<vaadin-map></vaadin-map>');
+    map.style.width = '100px';
+    map.style.height = '100px';
+    // Configure map
+    map.configuration.addLayer(new TileLayer({ source: new OSM() }));
+    map.configuration.setView(new View({ center: [0, 0], zoom: 3 }));
+    await nextMapRender(map);
+  });
+
+  it('should update size of internal OL instance on resize', async () => {
+    // Verify initial size of canvas for the configured layer
+    const layerCanvas = map.shadowRoot.querySelector('.ol-layer canvas');
+    expect(layerCanvas).not.to.be.undefined;
+    const initialRect = layerCanvas.getBoundingClientRect();
+    expect(initialRect.width).to.equal(100);
+    expect(initialRect.width).to.equal(100);
+    // Update size of host element
+    map.style.width = '200px';
+    map.style.height = '200px';
+    await nextMapRender(map);
+    // Verify updated size
+    const updatedRect = layerCanvas.getBoundingClientRect();
+    expect(updatedRect.width).to.equal(200);
+    expect(updatedRect.width).to.equal(200);
+  });
+});