maplibre-gl 3.3.1 → 3.4.0

package/src/style/style.test.ts

@@ -13,7 +13,7 @@ import {
 } from '../source/rtl_text_plugin';
 import {browser} from '../util/browser';
 import {OverscaledTileID} from '../source/tile_id';
-import {fakeXhr, fakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 
 import {EvaluationParameters} from './evaluation_parameters';
 import {LayerSpecification, GeoJSONSourceSpecification, FilterSpecification, SourceSpecification} from '@maplibre/maplibre-gl-style-spec';
@@ -78,21 +78,17 @@ function createStyle(map = getStubMap()) {
     return style;
 }
 
-let sinonFakeXMLServer;
-let sinonFakeServer;
+let server: FakeServer;
 let mockConsoleError;
 
 beforeEach(() => {
     global.fetch = null;
-    sinonFakeServer = fakeServer.create();
-    sinonFakeXMLServer = fakeXhr.useFakeXMLHttpRequest();
-
+    server = fakeServer.create();
     mockConsoleError = jest.spyOn(console, 'error').mockImplementation(() => { });
 });
 
 afterEach(() => {
-    sinonFakeXMLServer.restore();
-    sinonFakeServer.restore();
+    server.restore();
     mockConsoleError.mockRestore();
 });
 
@@ -115,12 +111,12 @@ describe('Style', () => {
 
     test('loads plugin immediately if already registered', done => {
         clearRTLTextPlugin();
-        sinonFakeServer.respondWith('/plugin.js', 'doesn\'t matter');
+        server.respondWith('/plugin.js', 'doesn\'t matter');
         setRTLTextPlugin('/plugin.js', (error) => {
             expect(error).toMatch(/Cannot set the state of the rtl-text-plugin when not in the web-worker context/);
             done();
         });
-        sinonFakeServer.respond();
+        server.respond();
         new Style(getStubMap());
     });
 
@@ -152,7 +148,7 @@ describe('Style', () => {
             jest.spyOn(style.sourceCaches['vector'], 'reload');
 
             clearRTLTextPlugin();
-            sinonFakeServer.respondWith('/plugin.js', 'doesn\'t matter');
+            server.respondWith('/plugin.js', 'doesn\'t matter');
             const _broadcast = style.dispatcher.broadcast;
             style.dispatcher.broadcast = function (type, state, callback) {
                 if (type === 'syncRTLPluginState') {
@@ -171,7 +167,7 @@ describe('Style', () => {
                     done();
                 }, 0);
             });
-            sinonFakeServer.respond();
+            server.respond();
         });
     });
 });
@@ -211,15 +207,15 @@ describe('Style#loadURL', () => {
         });
 
         style.loadURL('style.json');
-        sinonFakeServer.respondWith(JSON.stringify(createStyleJSON({version: 'invalid'})));
-        sinonFakeServer.respond();
+        server.respondWith(JSON.stringify(createStyleJSON({version: 'invalid'})));
+        server.respond();
     });
 
     test('cancels pending requests if removed', () => {
         const style = new Style(getStubMap());
         style.loadURL('style.json');
         style._remove();
-        expect(sinonFakeServer.lastRequest.aborted).toBe(true);
+        expect((server.lastRequest as any).aborted).toBe(true);
     });
 });
 
@@ -266,21 +262,8 @@ describe('Style#loadJSON', () => {
         // stub Image so we can invoke 'onload'
         // https://github.com/jsdom/jsdom/commit/58a7028d0d5b6aacc5b435daee9fd8f9eacbb14c
 
-        // fake the image request (sinon doesn't allow non-string data for
-        // server.respondWith, so we do so manually)
-        const requests = [];
-        sinonFakeXMLServer.onCreate = req => { requests.push(req); };
-        const respond = () => {
-            let req = requests.find(req => req.url === 'http://example.com/sprite.png');
-            req.setStatus(200);
-            req.response = new ArrayBuffer(8);
-            req.onload();
-
-            req = requests.find(req => req.url === 'http://example.com/sprite.json');
-            req.setStatus(200);
-            req.response = '{}';
-            req.onload();
-        };
+        server.respondWith('GET', 'http://example.com/sprite.png', new ArrayBuffer(8));
+        server.respondWith('GET', 'http://example.com/sprite.json', '{}');
 
         const style = new Style(getStubMap());
 
@@ -303,7 +286,7 @@ describe('Style#loadJSON', () => {
                 done();
             });
 
-            respond();
+            server.respond();
         });
     });
 
@@ -315,21 +298,8 @@ describe('Style#loadJSON', () => {
         // stub Image so we can invoke 'onload'
         // https://github.com/jsdom/jsdom/commit/58a7028d0d5b6aacc5b435daee9fd8f9eacbb14c
 
-        // fake the image request (sinon doesn't allow non-string data for
-        // server.respondWith, so we do so manually)
-        const requests = [];
-        sinonFakeXMLServer.onCreate = req => { requests.push(req); };
-        const respond = () => {
-            let req = requests.find(req => req.url === 'http://example.com/sprite.png');
-            req.setStatus(200);
-            req.response = new ArrayBuffer(8);
-            req.onload();
-
-            req = requests.find(req => req.url === 'http://example.com/sprite.json');
-            req.setStatus(200);
-            req.response = '{"image1": {"width": 1, "height": 1, "x": 0, "y": 0, "pixelRatio": 1.0}}';
-            req.onload();
-        };
+        server.respondWith('GET', 'http://example.com/sprite.png', new ArrayBuffer(8));
+        server.respondWith('GET', 'http://example.com/sprite.json', '{"image1": {"width": 1, "height": 1, "x": 0, "y": 0, "pixelRatio": 1.0}}');
 
         const style = new Style(getStubMap());
 
@@ -357,7 +327,7 @@ describe('Style#loadJSON', () => {
                 });
             });
 
-            respond();
+            server.respond();
         });
     });
 
@@ -751,7 +721,7 @@ describe('Style#setState', () => {
     });
 
     test('Issue #3893: compare new source options against originally provided options rather than normalized properties', done => {
-        sinonFakeServer.respondWith('/tilejson.json', JSON.stringify({
+        server.respondWith('/tilejson.json', JSON.stringify({
             tiles: ['http://tiles.server']
         }));
         const initial = createStyleJSON();
@@ -767,7 +737,7 @@ describe('Style#setState', () => {
             style.setState(initial);
             done();
         });
-        sinonFakeServer.respond();
+        server.respond();
     });
 
     test('return true if there is a change', done => {

package/src/style/style_layer/line_style_layer.test.ts

@@ -0,0 +1,50 @@
+import {createStyleLayer} from '../create_style_layer';
+import {extend} from '../../util/util';
+import {LineStyleLayer} from './line_style_layer';
+
+describe('LineStyleLayer', () => {
+    function createLineLayer(layer?) {
+        return extend({
+            type: 'line',
+            source: 'line',
+            id: 'line',
+            paint: {
+                'line-color': 'red',
+                'line-width': 14,
+                'line-gradient': [
+                    'interpolate',
+                    ['linear'],
+                    ['line-progress'],
+                    0,
+                    'blue',
+                    1,
+                    'red'
+                ]
+            }
+        }, layer);
+    }
+
+    test('updating with valid line-gradient updates this.gradientVersion', () => {
+        const lineLayer = createStyleLayer(createLineLayer()) as LineStyleLayer;
+        const gradientVersion = lineLayer.gradientVersion;
+
+        lineLayer.setPaintProperty('line-gradient', [
+            'interpolate',
+            ['linear'],
+            ['line-progress'],
+            0,
+            'red',
+            1,
+            'blue'
+        ]);
+        expect(lineLayer.gradientVersion).toBeGreaterThan(gradientVersion);
+    });
+
+    test('updating with invalid line-gradient updates this.gradientVersion', () => {
+        const lineLayer = createStyleLayer(createLineLayer()) as LineStyleLayer;
+        const gradientVersion = lineLayer.gradientVersion;
+
+        lineLayer.setPaintProperty('line-gradient', null);
+        expect(lineLayer.gradientVersion).toBeGreaterThan(gradientVersion);
+    });
+});

package/src/style/style_layer/line_style_layer.ts

@@ -9,8 +9,8 @@ import {extend} from '../../util/util';
 import {EvaluationParameters} from '../evaluation_parameters';
 import {Transitionable, Transitioning, Layout, PossiblyEvaluated, DataDrivenProperty} from '../properties';
 
-import {Step} from '@maplibre/maplibre-gl-style-spec';
-import type {FeatureState, ZoomConstantExpression, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {isZoomExpression, Step} from '@maplibre/maplibre-gl-style-spec';
+import type {FeatureState, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {Bucket, BucketParameters} from '../../data/bucket';
 import type {LineLayoutProps, LinePaintProps} from './line_style_layer_properties.g';
 import type {Transform} from '../../geo/transform';
@@ -60,8 +60,12 @@ export class LineStyleLayer extends StyleLayer {
 
     _handleSpecialPaintPropertyUpdate(name: string) {
         if (name === 'line-gradient') {
-            const expression: ZoomConstantExpression<'source'> = (this._transitionablePaint._values['line-gradient'].value.expression as any);
-            this.stepInterpolant = expression._styleExpression.expression instanceof Step;
+            const expression = this.gradientExpression();
+            if (isZoomExpression(expression)) {
+                this.stepInterpolant = expression._styleExpression.expression instanceof Step;
+            } else {
+                this.stepInterpolant = false;
+            }
             this.gradientVersion = (this.gradientVersion + 1) % Number.MAX_SAFE_INTEGER;
         }
     }

package/src/ui/handler/scroll_zoom.ts

@@ -351,5 +351,11 @@ export class ScrollZoomHandler implements Handler {
 
     reset() {
         this._active = false;
+        this._zooming = false;
+        delete this._targetZoom;
+        if (this._finishTimeout) {
+            clearTimeout(this._finishTimeout);
+            delete this._finishTimeout;
+        }
     }
 }

package/src/ui/handler_manager.ts

@@ -17,6 +17,7 @@ import {DragPanHandler} from './handler/shim/drag_pan';
 import {DragRotateHandler} from './handler/shim/drag_rotate';
 import {TwoFingersTouchZoomRotateHandler} from './handler/shim/two_fingers_touch';
 import {extend} from '../util/util';
+import {browser} from '../util/browser';
 import Point from '@mapbox/point-geometry';
 
 export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
@@ -583,7 +584,7 @@ export class HandlerManager {
 
             const shouldSnapToNorth = bearing => bearing !== 0 && -this._bearingSnap < bearing && bearing < this._bearingSnap;
 
-            if (inertialEase) {
+            if (inertialEase && (inertialEase.essential || !browser.prefersReducedMotion)) {
                 if (shouldSnapToNorth(inertialEase.bearing || this._map.getBearing())) {
                     inertialEase.bearing = 0;
                 }

package/src/ui/map.ts

@@ -2562,6 +2562,7 @@ export class Map extends Camera {
      * @param name - The name of the paint property to set.
      * @param value - The value of the paint property to set.
      * Must be of a type appropriate for the property, as defined in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/).
+     * Pass `null` to unset the existing value.
      * @param options - Options object.
      * @returns `this`
      * @example

package/src/ui/marker.test.ts

@@ -811,4 +811,29 @@ describe('marker', () => {
 
         map.remove();
     });
+
+    test('Marker after the terrain event must listen to the render event till is fully loaded', async () => {
+        const map = createMap();
+
+        new Marker()
+            .setLngLat([1, 1])
+            .addTo(map);
+
+        expect(map._oneTimeListeners.render).toBeUndefined();
+
+        map.fire('terrain');
+        expect(map._oneTimeListeners.render).toHaveLength(1);
+
+        map.fire('render');
+        expect(map._oneTimeListeners.render).toHaveLength(1);
+
+        map.fire('render');
+        expect(map._oneTimeListeners.render).toHaveLength(1);
+
+        // await idle to be fully loaded
+        await map.once('idle');
+        map.fire('render');
+        expect(map._oneTimeListeners.render).toHaveLength(0);
+        map.remove();
+    });
 });

package/src/ui/marker.ts

@@ -297,6 +297,8 @@ export class Marker extends Evented {
         map.getCanvasContainer().appendChild(this._element);
         map.on('move', this._update);
         map.on('moveend', this._update);
+        map.on('terrain', this._update);
+
         this.setDraggable(this._draggable);
         this._update();
 
@@ -504,9 +506,14 @@ export class Marker extends Evented {
         return this;
     }
 
-    _update = (e?: { type: 'move' | 'moveend' }) => {
+    _update = (e?: { type: 'move' | 'moveend' | 'terrain' | 'render' }) => {
         if (!this._map) return;
 
+        const isFullyLoaded = this._map.loaded() && !this._map.isMoving();
+        if (e?.type === 'terrain' || (e?.type === 'render' && !isFullyLoaded)) {
+            this._map.once('render', this._update);
+        }
+
         if (this._map.transform.renderWorldCopies) {
             this._lngLat = smartWrap(this._lngLat, this._pos, this._map.transform);
         }

package/src/util/ajax.test.ts

@@ -6,7 +6,7 @@ import {
     sameOrigin
 } from './ajax';
 
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {destroyFetchMock, FetchMock, RequestMock, setupFetchMock} from './test/mock_fetch';
 
 function readAsText(blob) {

package/src/util/image_request.test.ts

@@ -1,7 +1,7 @@
 import {config} from './config';
 import {webpSupported} from './webp_supported';
 import {stubAjaxGetImage} from './test/util';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {ImageRequest, ImageRequestQueueItem} from './image_request';
 import * as ajax from './ajax';
 

package/src/util/test/util.ts

@@ -132,3 +132,15 @@ export function stubAjaxGetImage(createImageBitmap) {
         }
     });
 }
+
+/**
+ * This should be used in test that use nise since the internal buffer returned from a file is not an instance of ArrayBuffer for some reason.
+ * @param data - the data read from a file, for example by `fs.readFileSync(...)`
+ * @returns a copy of the data in the file in `ArrayBuffer` format
+ */
+export function bufferToArrayBuffer(data: Buffer): ArrayBuffer {
+    const newBuffer = new ArrayBuffer(data.buffer.byteLength);
+    const view = new Uint8Array(newBuffer);
+    data.copy(view);
+    return view.buffer;
+}