maplibre-gl 2.0.4 → 2.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -9,9 +9,6 @@
     "type": "git",
     "url": "git://github.com/maplibre/maplibre-gl-js.git"
   },
-  "engines": {
-    "node": ">=16.0.0"
-  },
   "types": "dist/maplibre-gl.d.ts",
   "type": "module",
   "dependencies": {
@@ -45,17 +42,18 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mvt-fixtures": "^3.6.0",
     "@octokit/rest": "^18.10.0",
-    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
     "@rollup/plugin-strip": "^2.1.0",
     "@rollup/plugin-typescript": "^8.3.0",
     "@types/babel__core": "^7.1.12",
     "@types/babelify": "^7.3.6",
     "@types/benchmark": "^2.1.0",
     "@types/browserify": "^12.0.36",
-    "@types/cssnano": "^4.0.0",
+    "@types/cssnano": "^5.0.0",
     "@types/d3": "^4.13.12",
     "@types/diff": "^4.0.2",
     "@types/earcut": "^2.1.1",
@@ -99,7 +97,7 @@
     "cssnano": "^5.0.8",
     "d3": "^4.12.0",
     "diff": "^4.0.1",
-    "documentation": "~12.1.1",
+    "documentation": "^12.3.0",
     "dts-bundle-generator": "^6.0.0",
     "ejs": "^3.1.6",
     "eslint": "^7.32.0",
@@ -146,10 +144,6 @@
     "replace-in-file": "^6.2.0",
     "request": "^2.88.0",
     "rollup": "^2.56.3",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-unassert": "^0.3.0",
@@ -169,7 +163,7 @@
     "tape-filter": "^1.0.4",
     "testem": "^3.5.0",
     "ts-jest": "^27.0.5",
-    "ts-node": "^10.2.1",
+    "ts-node": "^10.4.0",
     "typescript": "^4.5.4"
   },
   "browser": {

package/src/source/image_source.test.ts

@@ -0,0 +1,153 @@
+import ImageSource from './image_source';
+import {Evented} from '../util/evented';
+import Transform from '../geo/transform';
+import {extend} from '../util/util';
+import {useFakeXMLHttpRequest} from 'sinon';
+import {RequestManager} from '../util/request_manager';
+import Dispatcher from '../util/dispatcher';
+import {stubAjaxGetImage} from '../util/test/util';
+
+function createSource(options) {
+    options = extend({
+        coordinates: [[0, 0], [1, 0], [1, 1], [0, 1]]
+    }, options);
+
+    const source = new ImageSource('id', options, {send() {}} as any as Dispatcher, options.eventedParent);
+    return source;
+}
+
+class StubMap extends Evented {
+    transform: Transform;
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this.transform = new Transform();
+        this._requestManager = {
+            transformRequest: (url) => {
+                return {url};
+            }
+        } as any as RequestManager;
+    }
+}
+
+describe('ImageSource', () => {
+    const requests = [];
+    useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+    stubAjaxGetImage(undefined);
+    beforeEach(() => {
+        global.fetch = null;
+    });
+
+    const respond = () => {
+        const req = requests.shift();
+        req.setStatus(200);
+        req.response = new ArrayBuffer(1);
+        req.onload();
+    };
+
+    test('constructor', () => {
+        const source = createSource({url : '/image.png'});
+
+        expect(source.minzoom).toBe(0);
+        expect(source.maxzoom).toBe(22);
+        expect(source.tileSize).toBe(512);
+    });
+
+    test('fires dataloading event', () => {
+        const source = createSource({url : '/image.png'});
+        source.on('dataloading', (e) => {
+            expect(e.dataType).toBe('source');
+        });
+        source.onAdd(new StubMap() as any);
+        respond();
+        expect(source.image).toBeTruthy();
+    });
+
+    test('transforms url request', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        const spy = jest.spyOn(map._requestManager, 'transformRequest');
+        source.onAdd(map);
+        respond();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy.mock.calls[0][0]).toBe('/image.png');
+        expect(spy.mock.calls[0][1]).toBe('Image');
+    });
+
+    test('updates url from updateImage', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        const spy = jest.spyOn(map._requestManager, 'transformRequest');
+        source.onAdd(map);
+        respond();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy.mock.calls[0][0]).toBe('/image.png');
+        expect(spy.mock.calls[0][1]).toBe('Image');
+        source.updateImage({url: '/image2.png'});
+        respond();
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy.mock.calls[1][0]).toBe('/image2.png');
+        expect(spy.mock.calls[1][1]).toBe('Image');
+    });
+
+    test('sets coordinates', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        source.onAdd(map);
+        respond();
+        const beforeSerialized = source.serialize();
+        expect(beforeSerialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
+        source.setCoordinates([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
+        const afterSerialized = source.serialize();
+        expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
+    });
+
+    test('sets coordinates via updateImage', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        source.onAdd(map);
+        respond();
+        const beforeSerialized = source.serialize();
+        expect(beforeSerialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
+        source.updateImage({
+            url: '/image2.png',
+            coordinates: [[0, 0], [-1, 0], [-1, -1], [0, -1]]
+        });
+        respond();
+        const afterSerialized = source.serialize();
+        expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
+    });
+
+    test('fires data event when content is loaded', done => {
+        const source = createSource({url : '/image.png'});
+        source.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'content') {
+                expect(typeof source.tileID == 'object').toBeTruthy();
+                done();
+            }
+        });
+        source.onAdd(new StubMap() as any);
+        respond();
+    });
+
+    test('fires data event when metadata is loaded', done => {
+        const source = createSource({url : '/image.png'});
+        source.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
+                done();
+            }
+        });
+        source.onAdd(new StubMap() as any);
+        respond();
+    });
+
+    test('serialize url and coordinates', () => {
+        const source = createSource({url: '/image.png'});
+
+        const serialized = source.serialize();
+        expect(serialized.type).toBe('image');
+        expect(serialized.url).toBe('/image.png');
+        expect(serialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
+    });
+});

package/src/ui/camera.ts

@@ -14,6 +14,14 @@ import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
 import type {TaskID} from '../util/task_queue';
 import type {PaddingOptions} from '../geo/edge_insets';
 
+/**
+ * A [Point](https://github.com/mapbox/point-geometry) or an array of two numbers representing `x` and `y` screen coordinates in pixels.
+ *
+ * @typedef {(Point | [number, number])} PointLike
+ * @example
+ * var p1 = new Point(-77, 38); // a PointLike which is a Point
+ * var p2 = [-77, 38]; // a PointLike which is an array of two numbers
+ */
 export type PointLike = Point | [number, number];
 
 export type RequireAtLeastOne<T> = { [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>; }[keyof T];

package/src/ui/map.ts

@@ -828,11 +828,11 @@ class Map extends Camera {
     }
 
     /**
-     * Returns a {@link Point} representing pixel coordinates, relative to the map's `container`,
+     * Returns a [Point](https://github.com/mapbox/point-geometry) representing pixel coordinates, relative to the map's `container`,
      * that correspond to the specified geographical location.
      *
      * @param {LngLatLike} lnglat The geographical location to project.
-     * @returns {Point} The {@link Point} corresponding to `lnglat`, relative to the map's `container`.
+     * @returns {Point} The [Point](https://github.com/mapbox/point-geometry) corresponding to `lnglat`, relative to the map's `container`.
      * @example
      * var coordinate = [-122.420679, 37.772537];
      * var point = map.project(coordinate);

package/src/util/ajax.test.ts

@@ -0,0 +1,206 @@
+import {
+    getArrayBuffer,
+    getJSON,
+    postData,
+    getImage,
+    resetImageRequestQueue
+} from './ajax';
+import config from './config';
+import webpSupported from './webp_supported';
+import {fakeServer, SinonFakeServer} from 'sinon';
+import {stubAjaxGetImage} from './test/util';
+
+describe('ajax', () => {
+    let server: SinonFakeServer;
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+    });
+    afterEach(() => {
+        server.restore();
+    });
+
+    test('getArrayBuffer, 404', done => {
+        server.respondWith(request => {
+            request.respond(404, undefined, undefined);
+        });
+        getArrayBuffer({url:''}, (error) => {
+            expect((error as any).status).toBe(404);
+            done();
+        });
+        server.respond();
+    });
+
+    test('getJSON', done => {
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/json'}, '{"foo": "bar"}');
+        });
+        getJSON({url:''}, (error, body) => {
+            expect(error).toBeFalsy();
+            expect(body).toEqual({foo: 'bar'});
+            done();
+        });
+        server.respond();
+    });
+
+    test('getJSON, invalid syntax', done => {
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/json'}, 'how do i even');
+        });
+        getJSON({url:''}, (error) => {
+            expect(error).toBeTruthy();
+            done();
+        });
+        server.respond();
+    });
+
+    test('getJSON, 404', done => {
+        server.respondWith(request => {
+            request.respond(404, undefined, undefined);
+        });
+        getJSON({url:''}, (error) => {
+            expect((error as any).status).toBe(404);
+            done();
+        });
+        server.respond();
+    });
+
+    test('getJSON, 401: non-Mapbox domain', done => {
+        server.respondWith(request => {
+            request.respond(401, undefined, undefined);
+        });
+        getJSON({url:''}, (error) => {
+            expect((error as any).status).toBe(401);
+            expect(error.message).toBe('Unauthorized');
+            done();
+        });
+        server.respond();
+    });
+
+    test('postData, 204(no content): no error', done => {
+        server.respondWith(request => {
+            request.respond(204, undefined, undefined);
+        });
+        postData({url:'api.mapbox.com'}, (error) => {
+            expect(error).toBeNull();
+            done();
+        });
+        server.respond();
+    });
+
+    test('getImage respects maxParallelImageRequests', done => {
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        function callback(err) {
+            if (err) return;
+            // last request is only added after we got a response from one of the previous ones
+            expect(server.requests).toHaveLength(maxRequests + 1);
+            done();
+        }
+
+        for (let i = 0; i < maxRequests + 1; i++) {
+            getImage({url: ''}, callback);
+        }
+        expect(server.requests).toHaveLength(maxRequests);
+
+        server.requests[0].respond(undefined, undefined, undefined);
+    });
+
+    test('getImage cancelling frees up request for maxParallelImageRequests', done => {
+        resetImageRequestQueue();
+
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        for (let i = 0; i < maxRequests + 1; i++) {
+            getImage({url: ''}, () => done('test failed: getImage callback was called')).cancel();
+        }
+        expect(server.requests).toHaveLength(maxRequests + 1);
+        done();
+    });
+
+    test('getImage requests that were once queued are still abortable', done => {
+        resetImageRequestQueue();
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        const requests = [];
+        for (let i = 0; i < maxRequests; i++) {
+            requests.push(getImage({url: ''}, () => {}));
+        }
+
+        // the limit of allowed requests is reached
+        expect(server.requests).toHaveLength(maxRequests);
+
+        const queuedURL = 'this-is-the-queued-request';
+        const queued = getImage({url: queuedURL}, () => done('test failed: getImage callback was called'));
+
+        // the new requests is queued because the limit is reached
+        expect(server.requests).toHaveLength(maxRequests);
+
+        // cancel the first request to let the queued request start
+        requests[0].cancel();
+        expect(server.requests).toHaveLength(maxRequests + 1);
+
+        // abort the previously queued request and confirm that it is aborted
+        const queuedRequest = server.requests[server.requests.length - 1];
+        expect(queuedRequest.url).toBe(queuedURL);
+        expect((queuedRequest as any).aborted).toBeUndefined();
+        queued.cancel();
+        expect((queuedRequest as any).aborted).toBe(true);
+
+        done();
+    });
+
+    test('getImage sends accept/webp when supported', done => {
+        resetImageRequestQueue();
+
+        server.respondWith((request) => {
+            expect(request.requestHeaders.accept.includes('image/webp')).toBeTruthy();
+            request.respond(200, {'Content-Type': 'image/webp'}, '');
+        });
+
+        // mock webp support
+        webpSupported.supported = true;
+
+        getImage({url: ''}, () => { done(); });
+
+        server.respond();
+    });
+
+    test('getImage uses ImageBitmap when supported', done => {
+        resetImageRequestQueue();
+
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        stubAjaxGetImage(() => Promise.resolve(new ImageBitmap()));
+
+        getImage({url: ''}, (err, img) => {
+            if (err) done(err);
+            expect(img).toBeInstanceOf(ImageBitmap);
+            done();
+        });
+
+        server.respond();
+    });
+
+    test('getImage uses HTMLImageElement when ImageBitmap is not supported', done => {
+        resetImageRequestQueue();
+
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        stubAjaxGetImage(undefined);
+
+        getImage({url: ''}, (err, img) => {
+            if (err) done(`get image failed with error ${err.message}`);
+            expect(img).toBeInstanceOf(HTMLImageElement);
+            done();
+        });
+
+        server.respond();
+    });
+
+});

package/src/util/test/util.ts

@@ -99,3 +99,17 @@ export function getMockDispatcher() {
 
     return mockDispatcher;
 }
+
+export function stubAjaxGetImage(createImageBitmap) {
+    global.createImageBitmap = createImageBitmap;
+
+    global.URL.revokeObjectURL = () => {};
+    global.URL.createObjectURL = (_) => { return null; };
+
+    // eslint-disable-next-line accessor-pairs
+    Object.defineProperty(global.Image.prototype, 'src', {
+        set(_) {
+            this.onload();
+        }
+    });
+}