Reset serializedLayers for lazy serialization in setPaintProperty (#3993

)

* Reset serializedLayers at setPaintProperty

* Add UT for setPaintProperty

* Remove doc comments for private methods

* Add an entry to CHANGELOG

* Use once and async/await for style.load event in UT

* Update src/ui/map.test.ts

* Revert "Remove doc comments for private methods"

This reverts commit 9c13735.

* Add @hidden tag to comments for private methods

* Update CHANGELOG

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>

CHANGELOG.md

@@ -8,7 +8,7 @@
 - Fix image sources not being marked as loaded on error
 - Fix ScaleControl options should be optional. ([#4002](https://github.com/maplibre/maplibre-gl-js/pull/4002))
 - Fix race condition in SourceCache that makes unit tests unstable. Eliminate a redundant 'visibility' event fired from Style class. ([#3992](https://github.com/maplibre/maplibre-gl-js/issues/3992))
-
+- Fix paint property not being updated by setPaintProperty ([#2651](https://github.com/maplibre/maplibre-gl-js/issues/2651))
 
 ## 4.1.2
 

src/style/style.ts

@@ -471,6 +471,7 @@ export class Style extends Evented {
     }
 
     /**
+     * @hidden
      * take an array of string IDs, and based on this._layers, generate an array of LayerSpecification
      * @param ids - an array of string IDs, for which serialized layers will be generated. If omitted, all serialized layers will be returned
      * @returns generated result
@@ -494,6 +495,7 @@ export class Style extends Evented {
     }
 
     /**
+     * @hidden
      * Lazy initialization of this._serializedLayers dictionary and return it
      * @returns this._serializedLayers dictionary
      */
@@ -1176,6 +1178,8 @@ export class Style extends Evented {
 
         this._changed = true;
         this._updatedPaintProps[layerId] = true;
+        // reset serialization field, to be populated only when needed
+        this._serializedLayers = null;
     }
 
     getPaintProperty(layer: string, name: string) {

src/ui/map.test.ts

@@ -1818,6 +1818,31 @@ describe('Map', () => {
             });
         });
 
+        test('#3373 paint property should be synchronized with an update', async () => {
+            const colors = ['red', 'blue'];
+            const map = createMap({
+                style: {
+                    'version': 8,
+                    'sources': {},
+                    'layers': [{
+                        'id': 'background',
+                        'type': 'background',
+                        'paint': {
+                            'background-color': colors[0]
+                        }
+                    }]
+                }
+            });
+
+            await map.once('style.load');
+            expect(map.getPaintProperty('background', 'background-color')).toBe(colors[0]);
+            expect(map.getStyle().layers.filter(l => l.id === 'background')[0].paint['background-color']).toBe(colors[0]);
+            // update property
+            map.setPaintProperty('background', 'background-color', colors[1]);
+            expect(map.getPaintProperty('background', 'background-color')).toBe(colors[1]);
+            expect(map.getStyle().layers.filter(l => l.id === 'background')[0].paint['background-color']).toBe(colors[1]);
+        });
+
         test('throw before loaded', () => {
             const map = createMap({
                 style: {