diff --git a/CHANGELOG.md b/CHANGELOG.md index 46789b722e..ec1f651805 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - _...Add new stuff here..._ ### 🐞 Bug fixes +- Fixes issue with ResizeObserver firing an initial 'resize' event (since 3.0.0-pre.5) ([#2551](https://github.com/maplibre/maplibre-gl-js/issues/2551)) - _...Add new stuff here..._ ## 3.0.0-pre.8 diff --git a/src/ui/map.test.ts b/src/ui/map.test.ts index 61adbcaf19..3e8d4355f3 100755 --- a/src/ui/map.test.ts +++ b/src/ui/map.test.ts @@ -803,7 +803,7 @@ describe('Map', () => { expect(spyC).not.toHaveBeenCalled(); }); - test('do resize if trackResize is true (default)', () => { + test('do resize if trackResize is true (default)', async () => { let observerCallback: Function = null; global.ResizeObserver = jest.fn().mockImplementation((c) => ({ observe: () => { observerCallback = c; } @@ -814,8 +814,16 @@ describe('Map', () => { const spyA = jest.spyOn(map, '_update'); const spyB = jest.spyOn(map, 'resize'); + // The initial "observe" event fired by ResizeObserver should be captured/muted + // in the map constructor + observerCallback(); + expect(spyA).not.toHaveBeenCalled(); + expect(spyB).not.toHaveBeenCalled(); + // Following "observe" events should fire a resize / _update + + observerCallback(); expect(spyA).toHaveBeenCalled(); expect(spyB).toHaveBeenCalled(); }); diff --git a/src/ui/map.ts b/src/ui/map.ts index ab7c9f1e49..ed5c773715 100644 --- a/src/ui/map.ts +++ b/src/ui/map.ts @@ -493,7 +493,13 @@ class Map extends Camera { if (typeof window !== 'undefined') { addEventListener('online', this._onWindowOnline, false); + let initialResizeEventCaptured = false; this._resizeObserver = new ResizeObserver((entries) => { + if (!initialResizeEventCaptured) { + initialResizeEventCaptured = true; + return; + } + if (this._trackResize) { this.resize(entries)._update(); } diff --git a/test/integration/browser/browser.test.ts b/test/integration/browser/browser.test.ts index d0dcf82f47..ae83ad3d24 100644 --- a/test/integration/browser/browser.test.ts +++ b/test/integration/browser/browser.test.ts @@ -48,6 +48,23 @@ describe('Browser tests', () => { }); }, 40000); + test('Load should fire before resize and moveend', async () => { + const firstFiredEvent = await page.evaluate(() => { + const map2 = new maplibregl.Map({ + container: 'map', + style: 'https://demotiles.maplibre.org/style.json', + center: [10, 10], + zoom: 10 + }); + return new Promise((resolve, _reject) => { + map2.once('resize', () => resolve('resize')); + map2.once('moveend', () => resolve('moveend')); + map2.once('load', () => resolve('load')); + }); + }); + expect(firstFiredEvent).toBe('load'); + }, 20000); + test('Drag to the left', async () => { const canvas = await page.$('.maplibregl-canvas');