mapbox-gl 1.13.2

package/src/style/load_sprite.js

@@ -0,0 +1,67 @@
+// @flow
+
+import {getJSON, getImage, ResourceType} from '../util/ajax';
+
+import browser from '../util/browser';
+import {RGBAImage} from '../util/image';
+
+import type {StyleImage} from './style_image';
+import type {RequestManager} from '../util/mapbox';
+import type {Callback} from '../types/callback';
+import type {Cancelable} from '../types/cancelable';
+
+export default function(baseURL: string,
+                          requestManager: RequestManager,
+                          callback: Callback<{[_: string]: StyleImage}>): Cancelable {
+    let json: any, image, error;
+    const format = browser.devicePixelRatio > 1 ? '@2x' : '';
+
+    let jsonRequest = getJSON(requestManager.transformRequest(requestManager.normalizeSpriteURL(baseURL, format, '.json'), ResourceType.SpriteJSON), (err: ?Error, data: ?Object) => {
+        jsonRequest = null;
+        if (!error) {
+            error = err;
+            json = data;
+            maybeComplete();
+        }
+    });
+
+    let imageRequest = getImage(requestManager.transformRequest(requestManager.normalizeSpriteURL(baseURL, format, '.png'), ResourceType.SpriteImage), (err, img) => {
+        imageRequest = null;
+        if (!error) {
+            error = err;
+            image = img;
+            maybeComplete();
+        }
+    });
+
+    function maybeComplete() {
+        if (error) {
+            callback(error);
+        } else if (json && image) {
+            const imageData = browser.getImageData(image);
+            const result = {};
+
+            for (const id in json) {
+                const {width, height, x, y, sdf, pixelRatio, stretchX, stretchY, content} = json[id];
+                const data = new RGBAImage({width, height});
+                RGBAImage.copy(imageData, data, {x, y}, {x: 0, y: 0}, {width, height});
+                result[id] = {data, pixelRatio, sdf, stretchX, stretchY, content};
+            }
+
+            callback(null, result);
+        }
+    }
+
+    return {
+        cancel() {
+            if (jsonRequest) {
+                jsonRequest.cancel();
+                jsonRequest = null;
+            }
+            if (imageRequest) {
+                imageRequest.cancel();
+                imageRequest = null;
+            }
+        }
+    };
+}

package/src/style/parse_glyph_pbf.js

@@ -0,0 +1,44 @@
+// @flow
+
+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: Object, 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 default function (data: ArrayBuffer | Uint8Array): Array<StyleGlyph> {
+    return new Protobuf(data).readFields(readFontstacks, []);
+}
+
+export const GLYPH_PBF_BORDER = border;

package/src/style/pauseable_placement.js

@@ -0,0 +1,132 @@
+// @flow
+
+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';
+
+class LayerPlacement {
+    _sortAcrossTiles: boolean;
+    _currentTileIndex: number;
+    _currentPartIndex: number;
+    _seenCrossTileIDs: { [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').constantOr(1) !== undefined;
+
+        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: any): number) - ((b.sortKey: any): 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;
+    }
+}
+
+class PauseablePlacement {
+    placement: Placement;
+    _done: boolean;
+    _currentPlacementIndex: number;
+    _forceFullPlacement: boolean;
+    _showCollisionBoxes: boolean;
+    _inProgressLayer: ?LayerPlacement;
+
+    constructor(transform: Transform, order: Array<string>,
+                forceFullPlacement: boolean,
+                showCollisionBoxes: boolean,
+                fadeDuration: number,
+                crossSourceCollisions: boolean,
+                prevPlacement?: Placement) {
+
+        this.placement = new Placement(transform, fadeDuration, crossSourceCollisions, prevPlacement);
+        this._currentPlacementIndex = order.length - 1;
+        this._forceFullPlacement = forceFullPlacement;
+        this._showCollisionBoxes = showCollisionBoxes;
+        this._done = false;
+    }
+
+    isDone(): boolean {
+        return this._done;
+    }
+
+    continuePlacement(order: Array<string>, layers: {[_: string]: StyleLayer}, layerTiles: {[_: string]: Array<Tile>}) {
+        const startTime = browser.now();
+
+        const shouldPausePlacement = () => {
+            const elapsedTime = browser.now() - startTime;
+            return this._forceFullPlacement ? false : elapsedTime > 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: any): 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;
+    }
+}
+
+export default PauseablePlacement;