@scoova/mgl 1.0.0

package/src/style/load_glyph_range.ts

@@ -0,0 +1,32 @@
+import {getArrayBuffer} from '../util/ajax';
+import {ResourceType} from '../util/request_manager';
+
+import {parseGlyphPbf} from './parse_glyph_pbf';
+
+import type {StyleGlyph} from './style_glyph';
+import type {RequestManager} from '../util/request_manager';
+
+export async function loadGlyphRange(fontstack: string,
+    range: number,
+    urlTemplate: string,
+    requestManager: RequestManager): Promise<{[_: number]: StyleGlyph | null}> {
+    const begin = range * 256;
+    const end = begin + 255;
+
+    const request = requestManager.transformRequest(
+        urlTemplate.replace('{fontstack}', fontstack).replace('{range}', `${begin}-${end}`),
+        ResourceType.Glyphs
+    );
+
+    const response = await getArrayBuffer(request, new AbortController());
+    if (!response || !response.data) {
+        throw new Error(`Could not load glyph range. range: ${range}, ${begin}-${end}`);
+    }
+    const glyphs = {};
+
+    for (const glyph of parseGlyphPbf(response.data)) {
+        glyphs[glyph.id] = glyph;
+    }
+
+    return glyphs;
+}

package/src/style/load_sprite.test.ts

@@ -0,0 +1,227 @@
+import fs from 'fs';
+import path from 'path';
+import {RequestManager} from '../util/request_manager';
+import {loadSprite, normalizeSpriteURL} from './load_sprite';
+import {type FakeServer, fakeServer} from 'nise';
+import {bufferToArrayBuffer} from '../util/test/util';
+import {ABORT_ERROR} from '../util/abort_error';
+import * as util from '../util/util';
+
+describe('normalizeSpriteURL', () => {
+    test('concantenates path, ratio, and extension for non-mapbox:// scheme', () => {
+        expect(
+            normalizeSpriteURL('http://www.foo.com/bar', '@2x', '.png')
+        ).toBe('http://www.foo.com/bar@2x.png');
+    });
+
+    test('concantenates path, ratio, and extension for file:/// scheme', () => {
+        expect(
+            normalizeSpriteURL('file:///path/to/bar', '@2x', '.png')
+        ).toBe('file:///path/to/bar@2x.png');
+    });
+
+    test('normalizes non-mapbox:// scheme when query string exists', () => {
+        expect(
+            normalizeSpriteURL('http://www.foo.com/bar?fresh=true', '@2x', '.png')
+        ).toBe('http://www.foo.com/bar@2x.png?fresh=true');
+    });
+
+    test('test relative URL', () => {
+        expect(
+            normalizeSpriteURL('/bar?fresh=true', '@2x', '.png')
+        ).toBe('/bar@2x.png?fresh=true');
+    });
+});
+
+describe('loadSprite', () => {
+
+    let server: FakeServer;
+
+    beforeEach(() => {
+        jest.spyOn(util, 'arrayBufferToImageBitmap').mockImplementation(async (_data: ArrayBuffer) => {
+            try {
+                const img = await createImageBitmap(new ImageData(1024, 824));
+                return img;
+            } catch (e) {
+                throw new Error(`Could not load image because of ${e.message}. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.`);
+            }
+        });
+        global.fetch = null;
+        server = fakeServer.create();
+    });
+
+    test('backwards compatibility: single string is treated as a URL for the default sprite', async () => {
+        const transform = jest.fn().mockImplementation((url, type) => {
+            return {url, type};
+        });
+
+        const manager = new RequestManager(transform);
+
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
+
+        const promise = loadSprite('http://localhost:9966/test/unit/assets/sprite1', manager, 1, new AbortController());
+
+        server.respond();
+
+        const result = await promise;
+
+        expect(transform).toHaveBeenCalledTimes(2);
+        expect(transform).toHaveBeenNthCalledWith(1, 'http://localhost:9966/test/unit/assets/sprite1.json', 'SpriteJSON');
+        expect(transform).toHaveBeenNthCalledWith(2, 'http://localhost:9966/test/unit/assets/sprite1.png', 'SpriteImage');
+
+        expect(Object.keys(result)).toHaveLength(1);
+        expect(Object.keys(result)[0]).toBe('default');
+
+        Object.values(result['default']).forEach(styleImage => {
+            expect(styleImage.spriteData).toBeTruthy();
+            expect(styleImage.spriteData.context).toBeInstanceOf(CanvasRenderingContext2D);
+        });
+
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
+    });
+
+    test('transform of relative URL', async () => {
+        const transform = jest.fn().mockImplementation((url, type) => {
+            return {url: `http://localhost:9966${url}`, type};
+        });
+
+        const manager = new RequestManager(transform);
+
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
+
+        const promise = loadSprite('/test/unit/assets/sprite1', manager, 1, new AbortController());
+
+        server.respond();
+
+        const result = await promise;
+
+        expect(transform).toHaveBeenCalledTimes(2);
+        expect(transform).toHaveBeenNthCalledWith(1, '/test/unit/assets/sprite1.json', 'SpriteJSON');
+        expect(transform).toHaveBeenNthCalledWith(2, '/test/unit/assets/sprite1.png', 'SpriteImage');
+
+        expect(Object.keys(result)).toHaveLength(1);
+        expect(Object.keys(result)[0]).toBe('default');
+
+        Object.values(result['default']).forEach(styleImage => {
+            expect(styleImage.spriteData).toBeTruthy();
+            expect(styleImage.spriteData.context).toBeInstanceOf(CanvasRenderingContext2D);
+        });
+
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
+    });
+
+    test('array of objects support', async () => {
+        const transform = jest.fn().mockImplementation((url, type) => {
+            return {url, type};
+        });
+
+        const manager = new RequestManager(transform);
+
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite2.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite2.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite2.png'))));
+
+        const promise = loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}, {id: 'sprite2', url: 'http://localhost:9966/test/unit/assets/sprite2'}], manager, 1, new AbortController());
+
+        server.respond();
+
+        const result = await promise;
+        expect(transform).toHaveBeenCalledTimes(4);
+        expect(transform).toHaveBeenNthCalledWith(1, 'http://localhost:9966/test/unit/assets/sprite1.json', 'SpriteJSON');
+        expect(transform).toHaveBeenNthCalledWith(2, 'http://localhost:9966/test/unit/assets/sprite1.png', 'SpriteImage');
+        expect(transform).toHaveBeenNthCalledWith(3, 'http://localhost:9966/test/unit/assets/sprite2.json', 'SpriteJSON');
+        expect(transform).toHaveBeenNthCalledWith(4, 'http://localhost:9966/test/unit/assets/sprite2.png', 'SpriteImage');
+
+        expect(Object.keys(result)).toHaveLength(2);
+        expect(Object.keys(result)[0]).toBe('sprite1');
+        expect(Object.keys(result)[1]).toBe('sprite2');
+
+        Object.values(result['sprite1']).forEach(styleImage => {
+            expect(styleImage.spriteData).toBeTruthy();
+            expect(styleImage.spriteData.context).toBeInstanceOf(CanvasRenderingContext2D);
+        });
+
+        Object.values(result['sprite2']).forEach(styleImage => {
+            expect(styleImage.spriteData).toBeTruthy();
+            expect(styleImage.spriteData.context).toBeInstanceOf(CanvasRenderingContext2D);
+        });
+
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
+        expect(server.requests[2].url).toBe('http://localhost:9966/test/unit/assets/sprite2.json');
+        expect(server.requests[3].url).toBe('http://localhost:9966/test/unit/assets/sprite2.png');
+    });
+
+    test('server returns error', async () => {
+        const transform = jest.fn().mockImplementation((url, type) => {
+            return {url, type};
+        });
+
+        const manager = new RequestManager(transform);
+
+        server.respondWith((xhr) => xhr.respond(500));
+        const promise = loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}], manager, 1, new AbortController());
+        server.respond();
+
+        await expect(promise).rejects.toThrow(/AJAXError.*500.*/);
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+    });
+
+    test('request canceling', async () => {
+        const transform = jest.fn().mockImplementation((url, type) => {
+            return {url, type};
+        });
+
+        const manager = new RequestManager(transform);
+
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
+
+        const abortController = new AbortController();
+        const promise = loadSprite([{id: 'sprite1', url: 'http://localhost:9966/test/unit/assets/sprite1'}], manager, 1, abortController);
+        abortController.abort();
+
+        expect((server.requests[0] as any).aborted).toBeTruthy();
+        expect((server.requests[1] as any).aborted).toBeTruthy();
+
+        await expect(promise).rejects.toThrow(ABORT_ERROR);
+        server.respond();
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1.png');
+    });
+
+    test('pixelRatio is respected', async () => {
+        const transform = jest.fn().mockImplementation((url, type) => {
+            return {url, type};
+        });
+
+        const manager = new RequestManager(transform);
+
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1@2x.json', fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.json')).toString());
+        server.respondWith('GET', 'http://localhost:9966/test/unit/assets/sprite1@2x.png', bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/sprite1.png'))));
+
+        const promise = loadSprite('http://localhost:9966/test/unit/assets/sprite1', manager, 2, new AbortController());
+        server.respond();
+
+        const result = await promise;
+        expect(transform).toHaveBeenCalledTimes(2);
+        expect(transform).toHaveBeenNthCalledWith(1, 'http://localhost:9966/test/unit/assets/sprite1@2x.json', 'SpriteJSON');
+        expect(transform).toHaveBeenNthCalledWith(2, 'http://localhost:9966/test/unit/assets/sprite1@2x.png', 'SpriteImage');
+
+        expect(Object.keys(result)).toHaveLength(1);
+        expect(Object.keys(result)[0]).toBe('default');
+
+        Object.values(result['default']).forEach(styleImage => {
+            expect(styleImage.spriteData).toBeTruthy();
+            expect(styleImage.spriteData.context).toBeInstanceOf(CanvasRenderingContext2D);
+        });
+
+        expect(server.requests[0].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.json');
+        expect(server.requests[1].url).toBe('http://localhost:9966/test/unit/assets/sprite1@2x.png');
+    });
+});

package/src/style/load_sprite.ts

@@ -0,0 +1,71 @@
+import {GetResourceResponse, getJSON} from '../util/ajax';
+import {ImageRequest} from '../util/image_request';
+import {ResourceType} from '../util/request_manager';
+
+import {browser} from '../util/browser';
+import {coerceSpriteToArray} from '../util/style';
+
+import type {SpriteSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {SpriteJSON, StyleImage} from './style_image';
+import type {RequestManager} from '../util/request_manager';
+
+export type LoadSpriteResult = {
+    [spriteName: string]: {
+        [id: string]: StyleImage;
+    };
+}
+
+export function normalizeSpriteURL(url: string, format: string, extension: string): string {
+    const split = url.split('?');
+    split[0] += `${format}${extension}`;
+    return split.join('?');
+}
+
+export async function loadSprite(
+    originalSprite: SpriteSpecification,
+    requestManager: RequestManager,
+    pixelRatio: number,
+    abortController: AbortController,
+): Promise<LoadSpriteResult> {
+    const spriteArray = coerceSpriteToArray(originalSprite);
+    const format = pixelRatio > 1 ? '@2x' : '';
+
+    const jsonsMap: {[id: string]: Promise<GetResourceResponse<SpriteJSON>>} = {};
+    const imagesMap: {[id: string]: Promise<GetResourceResponse<HTMLImageElement | ImageBitmap>>} = {};
+
+    for (const {id, url} of spriteArray) {
+        const jsonRequestParameters = requestManager.transformRequest(normalizeSpriteURL(url, format, '.json'), ResourceType.SpriteJSON);
+        jsonsMap[id] = getJSON<SpriteJSON>(jsonRequestParameters, abortController);
+
+        const imageRequestParameters = requestManager.transformRequest(normalizeSpriteURL(url, format, '.png'), ResourceType.SpriteImage);
+        imagesMap[id] = ImageRequest.getImage(imageRequestParameters, abortController);
+    }
+
+    await Promise.all([...Object.values(jsonsMap), ...Object.values(imagesMap)]);
+    return doOnceCompleted(jsonsMap, imagesMap);
+}
+
+/**
+ * @param jsonsMap - JSON data map
+ * @param imagesMap - image data map
+ */
+async function doOnceCompleted(
+    jsonsMap:{[id: string]: Promise<GetResourceResponse<SpriteJSON>>},
+    imagesMap:{[id: string]: Promise<GetResourceResponse<HTMLImageElement | ImageBitmap>>}): Promise<LoadSpriteResult> {
+
+    const result = {} as {[spriteName: string]: {[id: string]: StyleImage}};
+    for (const spriteName in jsonsMap) {
+        result[spriteName] = {};
+
+        const context = browser.getImageCanvasContext((await imagesMap[spriteName]).data);
+        const json = (await jsonsMap[spriteName]).data;
+
+        for (const id in json) {
+            const {width, height, x, y, sdf, pixelRatio, stretchX, stretchY, content, textFitWidth, textFitHeight} = json[id];
+            const spriteData = {width, height, x, y, context};
+            result[spriteName][id] = {data: null, pixelRatio, sdf, stretchX, stretchY, content, textFitWidth, textFitHeight, spriteData};
+        }
+    }
+
+    return result;
+}

package/src/style/parse_glyph_pbf.ts

@@ -0,0 +1,42 @@
+import {AlphaImage} from '../util/image';
+
+import Protobuf from 'pbf';
+const border = 3;
+
+import type {StyleGlyph} from './style_glyph';
+
+function readFontstacks(tag: number, glyphs: Array<StyleGlyph>, pbf: Protobuf) {
+    if (tag === 1) {
+        pbf.readMessage(readFontstack, glyphs);
+    }
+}
+
+function readFontstack(tag: number, glyphs: Array<StyleGlyph>, pbf: Protobuf) {
+    if (tag === 3) {
+        const {id, bitmap, width, height, left, top, advance} = pbf.readMessage(readGlyph, {});
+        glyphs.push({
+            id,
+            bitmap: new AlphaImage({
+                width: width + 2 * border,
+                height: height + 2 * border
+            }, bitmap),
+            metrics: {width, height, left, top, advance}
+        });
+    }
+}
+
+function readGlyph(tag: number, glyph: any, pbf: Protobuf) {
+    if (tag === 1) glyph.id = pbf.readVarint();
+    else if (tag === 2) glyph.bitmap = pbf.readBytes();
+    else if (tag === 3) glyph.width = pbf.readVarint();
+    else if (tag === 4) glyph.height = pbf.readVarint();
+    else if (tag === 5) glyph.left = pbf.readSVarint();
+    else if (tag === 6) glyph.top = pbf.readSVarint();
+    else if (tag === 7) glyph.advance = pbf.readVarint();
+}
+
+export function parseGlyphPbf(data: ArrayBuffer | Uint8Array): Array<StyleGlyph> {
+    return new Protobuf(data).readFields(readFontstacks, []);
+}
+
+export const GLYPH_PBF_BORDER = border;

package/src/style/pauseable_placement.ts

@@ -0,0 +1,138 @@
+import {browser} from '../util/browser';
+
+import {Placement} from '../symbol/placement';
+
+import type {Transform} from '../geo/transform';
+import type {StyleLayer} from './style_layer';
+import type {SymbolStyleLayer} from './style_layer/symbol_style_layer';
+import type {Tile} from '../source/tile';
+import type {BucketPart} from '../symbol/placement';
+import {Terrain} from '../render/terrain';
+import {createProjection} from '../geo/projection/projection';
+
+class LayerPlacement {
+    _sortAcrossTiles: boolean;
+    _currentTileIndex: number;
+    _currentPartIndex: number;
+    _seenCrossTileIDs: {
+        [k in string | number]: boolean;
+    };
+    _bucketParts: Array<BucketPart>;
+
+    constructor(styleLayer: SymbolStyleLayer) {
+        this._sortAcrossTiles = styleLayer.layout.get('symbol-z-order') !== 'viewport-y' &&
+            !styleLayer.layout.get('symbol-sort-key').isConstant();
+
+        this._currentTileIndex = 0;
+        this._currentPartIndex = 0;
+        this._seenCrossTileIDs = {};
+        this._bucketParts = [];
+    }
+
+    continuePlacement(tiles: Array<Tile>, placement: Placement, showCollisionBoxes: boolean, styleLayer: StyleLayer, shouldPausePlacement: () => boolean) {
+
+        const bucketParts = this._bucketParts;
+
+        while (this._currentTileIndex < tiles.length) {
+            const tile = tiles[this._currentTileIndex];
+            placement.getBucketParts(bucketParts, styleLayer, tile, this._sortAcrossTiles);
+
+            this._currentTileIndex++;
+            if (shouldPausePlacement()) {
+                return true;
+            }
+        }
+
+        if (this._sortAcrossTiles) {
+            this._sortAcrossTiles = false;
+            bucketParts.sort((a, b) => (a.sortKey as any as number) - (b.sortKey as any as number));
+        }
+
+        while (this._currentPartIndex < bucketParts.length) {
+            const bucketPart = bucketParts[this._currentPartIndex];
+            placement.placeLayerBucketPart(bucketPart, this._seenCrossTileIDs, showCollisionBoxes);
+
+            this._currentPartIndex++;
+            if (shouldPausePlacement()) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
+export class PauseablePlacement {
+    placement: Placement;
+    _done: boolean;
+    _currentPlacementIndex: number;
+    _forceFullPlacement: boolean;
+    _showCollisionBoxes: boolean;
+    _inProgressLayer: LayerPlacement;
+
+    constructor(
+        transform: Transform,
+        terrain: Terrain,
+        order: Array<string>,
+        forceFullPlacement: boolean,
+        showCollisionBoxes: boolean,
+        fadeDuration: number,
+        crossSourceCollisions: boolean,
+        prevPlacement?: Placement
+    ) {
+        this.placement = new Placement(transform, createProjection(), terrain, fadeDuration, crossSourceCollisions, prevPlacement);
+        this._currentPlacementIndex = order.length - 1;
+        this._forceFullPlacement = forceFullPlacement;
+        this._showCollisionBoxes = showCollisionBoxes;
+        this._done = false;
+    }
+
+    isDone() {
+        return this._done;
+    }
+
+    continuePlacement(
+        order: Array<string>,
+        layers: {[_: string]: StyleLayer},
+        layerTiles: {[_: string]: Array<Tile>}
+    ) {
+        const startTime = browser.now();
+
+        const shouldPausePlacement = () => {
+            return this._forceFullPlacement ? false : (browser.now() - startTime) > 2;
+        };
+
+        while (this._currentPlacementIndex >= 0) {
+            const layerId = order[this._currentPlacementIndex];
+            const layer = layers[layerId];
+            const placementZoom = this.placement.collisionIndex.transform.zoom;
+            if (layer.type === 'symbol' &&
+                (!layer.minzoom || layer.minzoom <= placementZoom) &&
+                (!layer.maxzoom || layer.maxzoom > placementZoom)) {
+
+                if (!this._inProgressLayer) {
+                    this._inProgressLayer = new LayerPlacement(layer as any as SymbolStyleLayer);
+                }
+
+                const pausePlacement = this._inProgressLayer.continuePlacement(layerTiles[layer.source], this.placement, this._showCollisionBoxes, layer, shouldPausePlacement);
+
+                if (pausePlacement) {
+                    // We didn't finish placing all layers within 2ms,
+                    // but we can keep rendering with a partial placement
+                    // We'll resume here on the next frame
+                    return;
+                }
+
+                delete this._inProgressLayer;
+            }
+
+            this._currentPlacementIndex--;
+        }
+
+        this._done = true;
+    }
+
+    commit(now: number) {
+        this.placement.commit(now);
+        return this.placement;
+    }
+}