Fix missing lngRange when cloning Transform instances (#4625)

* Fix missing lngRange when cloning Transform instances

* Add changelog entry

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## main
 
+- Fix a bug where cloning a Transform instance didn't include the `lngRange`. This caused a bug where
+using `transformCameraUpdate` caused the `maxBounds` to stop working just for east/west bounds.
+
 ### ✨ Features and improvements
 - Support multiple layers in `map.on`, `map.once` and `map.off` methods ([#4279](https://github.com/maplibre/maplibre-gl-js/pull/4401))
 - Ensure GeoJSON cluster sources emit a console warning if `maxzoom` is less than or equal to `clusterMaxZoom` since in this case you may see unexpected results. ([#4604](https://github.com/maplibre/maplibre-gl-js/pull/4604))

src/geo/transform.test.ts

@@ -118,6 +118,28 @@ describe('transform', () => {
         expect(transform.center).toEqual(new LngLat(-4.828338623046875, -4.828969771321582));
     });
 
+    test('lngRange & latRange constrain zoom and center after cloning', () => {
+        const old = new Transform(0, 22, 0, 60, true);
+        old.center = new LngLat(0, 0);
+        old.zoom = 10;
+        old.resize(500, 500);
+
+        old.lngRange = [-5, 5];
+        old.latRange = [-5, 5];
+
+        const transform = old.clone();
+
+        transform.zoom = 0;
+        expect(transform.zoom).toBe(5.1357092861044045);
+
+        transform.center = new LngLat(-50, -30);
+        expect(transform.center).toEqual(new LngLat(0, -0.0063583052861417855));
+
+        transform.zoom = 10;
+        transform.center = new LngLat(-50, -30);
+        expect(transform.center).toEqual(new LngLat(-4.828338623046875, -4.828969771321582));
+    });
+
     test('lngRange can constrain zoom and center across meridian', () => {
         const transform = new Transform(0, 22, 0, 60, true);
         transform.center = new LngLat(180, 0);

src/geo/transform.ts

@@ -111,6 +111,7 @@ export class Transform {
     apply(that: Transform) {
         this.tileSize = that.tileSize;
         this.latRange = that.latRange;
+        this.lngRange = that.lngRange;
         this.width = that.width;
         this.height = that.height;
         this._center = that._center;