kamil/fix-ease-to-padding-transition-on-globe-projection (#5134)

* chore: add interpolation of padding for globe easeTo

* chore: add tests, update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Fix regression in render world copies ([#5101](https://github.com/maplibre/maplibre-gl-js/pull/5101))
 - Fix unwanted roll when motion is interrupted ([#5083](https://github.com/maplibre/maplibre-gl-js/pull/5083))
 - Fix `geometry-type` filter expression results ([#5132](https://github.com/maplibre/maplibre-gl-js/pull/5132))
+- Fix easeTo not applying padding in globe projection ([#5134](https://github.com/maplibre/maplibre-gl-js/pull/5134))
 - _...Add new stuff here..._
 
 ## 5.0.0-pre.8

src/geo/projection/globe_camera_helper.ts

@@ -262,6 +262,7 @@ export class GlobeCameraHelper implements ICameraHelper {
 
         const startZoom = tr.zoom;
         const startCenter = tr.center;
+        const startPadding = tr.padding;
         const startEulerAngles = {roll: tr.roll, pitch: tr.pitch, bearing: tr.bearing};
         const endRoll = options.roll === undefined ? tr.roll : options.roll;
         const endPitch = options.pitch === undefined ? tr.pitch : options.pitch;
@@ -288,9 +289,7 @@ export class GlobeCameraHelper implements ICameraHelper {
 
         const clonedTr = tr.clone();
         clonedTr.setCenter(constrainedCenter);
-        if (doPadding) {
-            clonedTr.setPadding(options.padding);
-        }
+
         clonedTr.setZoom(optionsZoom ?
             +options.zoom :
             startZoom + getZoomAdjustment(startCenter.lat, preConstrainCenter.lat));
@@ -326,6 +325,10 @@ export class GlobeCameraHelper implements ICameraHelper {
                     useSlerp: startEulerAngles.roll != endEulerAngles.roll} as UpdateRotationArgs);
             }
 
+            if (doPadding) {
+                tr.interpolatePadding(startPadding, options.padding,k);
+            }
+
             if (options.around) {
                 warnOnce('Easing around a point is not supported under globe projection.');
                 tr.setLocationAtPoint(options.around, options.aroundPoint);

src/ui/camera.test.ts

@@ -2801,6 +2801,53 @@ describe('#easeTo globe projection', () => {
             expect(camera.getBearing()).toBe(90);
         });
 
+        test('immediately sets padding with duration = 0', () => {
+            const camera = createCameraGlobe();
+            camera.easeTo({center: [100, 0], duration: 0, padding: {left: 100}});
+            expect(camera.getPadding()).toEqual({
+                bottom: 0,
+                left: 100,
+                right: 0,
+                top: 0,
+            });
+
+            expect(camera.getCenter()).toEqual({lng: 100, lat: 0});
+        });
+
+        test('smoothly sets given padding with duration > 0', async () => {
+            const camera = createCameraGlobe();
+            const stub = vi.spyOn(browser, 'now');
+            const promise = camera.once('moveend');
+
+            stub.mockImplementation(() => 0);
+
+            camera.easeTo({center: [100, 0], duration: 100, padding: {left: 100}});
+
+            stub.mockImplementation(() => 50);
+            camera.simulateFrame();
+
+            const padding = camera.getPadding();
+
+            expect(padding.bottom).toBe(0);
+            expect(padding.left).toBeCloseTo(80.2403, 4);
+            expect(padding.right).toBe(0);
+            expect(padding.top).toBe(0);
+
+            stub.mockImplementation(() => 100);
+            camera.simulateFrame();
+
+            await promise;
+
+            expect(camera.getPadding()).toEqual({
+                bottom: 0,
+                left: 100,
+                right: 0,
+                top: 0,
+            });
+
+            expect(camera.getCenter()).toEqual({lng: 100, lat: 0});
+        });
+
         test('zooms and rotates', () => {
             const camera = createCameraGlobe();
             camera.easeTo({zoom: 3.2, bearing: 90, duration: 0});