@mapgis/mapbox-gl 1.9.10 → 16.0.0

package/src/style/light.js

@@ -0,0 +1,130 @@
+// @flow
+
+import styleSpec from '../style-spec/reference/latest';
+
+import {endsWith, extend, sphericalToCartesian} from '../util/util';
+import {Evented} from '../util/evented';
+import {
+    validateStyle,
+    validateLight,
+    emitValidationErrors
+} from './validate_style';
+import Color from '../style-spec/util/color';
+import {number as interpolate} from '../style-spec/util/interpolate';
+
+import type {StylePropertySpecification} from '../style-spec/style-spec';
+import type EvaluationParameters from './evaluation_parameters';
+import type {StyleSetterOptions} from '../style/style';
+import {Properties, Transitionable, Transitioning, PossiblyEvaluated, DataConstantProperty} from './properties';
+
+import type {
+    Property,
+    PropertyValue,
+    TransitionParameters
+} from './properties';
+
+import type {LightSpecification} from '../style-spec/types';
+
+type LightPosition = {
+    x: number,
+    y: number,
+    z: number
+};
+
+class LightPositionProperty implements Property<[number, number, number], LightPosition> {
+    specification: StylePropertySpecification;
+
+    constructor() {
+        this.specification = styleSpec.light.position;
+    }
+
+    possiblyEvaluate(value: PropertyValue<[number, number, number], LightPosition>, parameters: EvaluationParameters): LightPosition {
+        return sphericalToCartesian(value.expression.evaluate(parameters));
+    }
+
+    interpolate(a: LightPosition, b: LightPosition, t: number): LightPosition {
+        return {
+            x: interpolate(a.x, b.x, t),
+            y: interpolate(a.y, b.y, t),
+            z: interpolate(a.z, b.z, t),
+        };
+    }
+}
+
+type Props = {|
+    "anchor": DataConstantProperty<"map" | "viewport">,
+    "position": LightPositionProperty,
+    "color": DataConstantProperty<Color>,
+    "intensity": DataConstantProperty<number>,
+|};
+
+const properties: Properties<Props> = new Properties({
+    "anchor": new DataConstantProperty(styleSpec.light.anchor),
+    "position": new LightPositionProperty(),
+    "color": new DataConstantProperty(styleSpec.light.color),
+    "intensity": new DataConstantProperty(styleSpec.light.intensity),
+});
+
+const TRANSITION_SUFFIX = '-transition';
+
+/*
+ * Represents the light used to light extruded features.
+ */
+class Light extends Evented {
+    _transitionable: Transitionable<Props>;
+    _transitioning: Transitioning<Props>;
+    properties: PossiblyEvaluated<Props>;
+
+    constructor(lightOptions?: LightSpecification) {
+        super();
+        this._transitionable = new Transitionable(properties);
+        this.setLight(lightOptions);
+        this._transitioning = this._transitionable.untransitioned();
+    }
+
+    getLight() {
+        return this._transitionable.serialize();
+    }
+
+    setLight(light?: LightSpecification, options: StyleSetterOptions = {}) {
+        if (this._validate(validateLight, light, options)) {
+            return;
+        }
+
+        for (const name in light) {
+            const value = light[name];
+            if (endsWith(name, TRANSITION_SUFFIX)) {
+                this._transitionable.setTransition(name.slice(0, -TRANSITION_SUFFIX.length), value);
+            } else {
+                this._transitionable.setValue(name, value);
+            }
+        }
+    }
+
+    updateTransitions(parameters: TransitionParameters) {
+        this._transitioning = this._transitionable.transitioned(parameters, this._transitioning);
+    }
+
+    hasTransition() {
+        return this._transitioning.hasTransition();
+    }
+
+    recalculate(parameters: EvaluationParameters) {
+        this.properties = this._transitioning.possiblyEvaluate(parameters);
+    }
+
+    _validate(validate: Function, value: mixed, options?: {validate?: boolean}) {
+        if (options && options.validate === false) {
+            return false;
+        }
+
+        return emitValidationErrors(this, validate.call(validateStyle, extend({
+            value,
+            // Workaround for https://github.com/mapbox/mapbox-gl-js/issues/2407
+            style: {glyphs: true, sprite: true},
+            styleSpec
+        })));
+    }
+}
+
+export default Light;

package/src/style/load_glyph_range.js

@@ -0,0 +1,38 @@
+// @flow
+
+import {getArrayBuffer, ResourceType} from '../util/ajax';
+
+import parseGlyphPBF from './parse_glyph_pbf';
+
+import type {StyleGlyph} from './style_glyph';
+import type {RequestManager} from '../util/mapbox';
+import type {Callback} from '../types/callback';
+
+export default function (fontstack: string,
+                           range: number,
+                           urlTemplate: string,
+                           requestManager: RequestManager,
+                           callback: Callback<{[_: number]: StyleGlyph | null}>) {
+    const begin = range * 256;
+    const end = begin + 255;
+
+    const request = requestManager.transformRequest(
+        requestManager.normalizeGlyphsURL(urlTemplate)
+            .replace('{fontstack}', fontstack)
+            .replace('{range}', `${begin}-${end}`),
+        ResourceType.Glyphs);
+
+    getArrayBuffer(request, (err: ?Error, data: ?ArrayBuffer) => {
+        if (err) {
+            callback(err);
+        } else if (data) {
+            const glyphs = {};
+
+            for (const glyph of parseGlyphPBF(data)) {
+                glyphs[glyph.id] = glyph;
+            }
+
+            callback(null, glyphs);
+        }
+    });
+}

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;