mapbox-gl 1.13.2

package/src/render/glyph_atlas.js

@@ -0,0 +1,71 @@
+// @flow
+
+import {AlphaImage} from '../util/image';
+import {register} from '../util/web_worker_transfer';
+import potpack from 'potpack';
+
+import type {GlyphMetrics, StyleGlyph} from '../style/style_glyph';
+
+const padding = 1;
+
+export type Rect = {
+    x: number,
+    y: number,
+    w: number,
+    h: number
+};
+
+export type GlyphPosition = {
+    rect: Rect,
+    metrics: GlyphMetrics
+};
+
+export type GlyphPositions = {[_: string]: {[_: number]: GlyphPosition } }
+
+export default class GlyphAtlas {
+    image: AlphaImage;
+    positions: GlyphPositions;
+
+    constructor(stacks: {[_: string]: {[_: number]: ?StyleGlyph } }) {
+        const positions = {};
+        const bins = [];
+
+        for (const stack in stacks) {
+            const glyphs = stacks[stack];
+            const stackPositions = positions[stack] = {};
+
+            for (const id in glyphs) {
+                const src = glyphs[+id];
+                if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) continue;
+
+                const bin = {
+                    x: 0,
+                    y: 0,
+                    w: src.bitmap.width + 2 * padding,
+                    h: src.bitmap.height + 2 * padding
+                };
+                bins.push(bin);
+                stackPositions[id] = {rect: bin, metrics: src.metrics};
+            }
+        }
+
+        const {w, h} = potpack(bins);
+        const image = new AlphaImage({width: w || 1, height: h || 1});
+
+        for (const stack in stacks) {
+            const glyphs = stacks[stack];
+
+            for (const id in glyphs) {
+                const src = glyphs[+id];
+                if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) continue;
+                const bin = positions[stack][id].rect;
+                AlphaImage.copy(src.bitmap, image, {x: 0, y: 0}, {x: bin.x + padding, y: bin.y + padding}, src.bitmap);
+            }
+        }
+
+        this.image = image;
+        this.positions = positions;
+    }
+}
+
+register('GlyphAtlas', GlyphAtlas);

package/src/render/glyph_manager.js

@@ -0,0 +1,182 @@
+// @flow
+
+import loadGlyphRange from '../style/load_glyph_range';
+
+import TinySDF from '@mapbox/tiny-sdf';
+import isChar from '../util/is_char_in_unicode_block';
+import {asyncAll} from '../util/util';
+import {AlphaImage} from '../util/image';
+
+import type {StyleGlyph} from '../style/style_glyph';
+import type {RequestManager} from '../util/mapbox';
+import type {Callback} from '../types/callback';
+
+type Entry = {
+    // null means we've requested the range, but the glyph wasn't included in the result.
+    glyphs: {[id: number]: StyleGlyph | null},
+    requests: {[range: number]: Array<Callback<{[_: number]: StyleGlyph | null}>>},
+    ranges: {[range: number]: boolean | null},
+    tinySDF?: TinySDF
+};
+
+class GlyphManager {
+    requestManager: RequestManager;
+    localIdeographFontFamily: ?string;
+    entries: {[_: string]: Entry};
+    url: ?string;
+
+    // exposed as statics to enable stubbing in unit tests
+    static loadGlyphRange: typeof loadGlyphRange;
+    static TinySDF: Class<TinySDF>;
+
+    constructor(requestManager: RequestManager, localIdeographFontFamily: ?string) {
+        this.requestManager = requestManager;
+        this.localIdeographFontFamily = localIdeographFontFamily;
+        this.entries = {};
+    }
+
+    setURL(url: ?string) {
+        this.url = url;
+    }
+
+    getGlyphs(glyphs: {[stack: string]: Array<number>}, callback: Callback<{[stack: string]: {[id: number]: ?StyleGlyph}}>) {
+        const all = [];
+
+        for (const stack in glyphs) {
+            for (const id of glyphs[stack]) {
+                all.push({stack, id});
+            }
+        }
+
+        asyncAll(all, ({stack, id}, callback: Callback<{stack: string, id: number, glyph: ?StyleGlyph}>) => {
+            let entry = this.entries[stack];
+            if (!entry) {
+                entry = this.entries[stack] = {
+                    glyphs: {},
+                    requests: {},
+                    ranges: {}
+                };
+            }
+
+            let glyph = entry.glyphs[id];
+            if (glyph !== undefined) {
+                callback(null, {stack, id, glyph});
+                return;
+            }
+
+            glyph = this._tinySDF(entry, stack, id);
+            if (glyph) {
+                entry.glyphs[id] = glyph;
+                callback(null, {stack, id, glyph});
+                return;
+            }
+
+            const range = Math.floor(id / 256);
+            if (range * 256 > 65535) {
+                callback(new Error('glyphs > 65535 not supported'));
+                return;
+            }
+
+            if (entry.ranges[range]) {
+                callback(null, {stack, id, glyph});
+                return;
+            }
+
+            let requests = entry.requests[range];
+            if (!requests) {
+                requests = entry.requests[range] = [];
+                GlyphManager.loadGlyphRange(stack, range, (this.url: any), this.requestManager,
+                    (err, response: ?{[_: number]: StyleGlyph | null}) => {
+                        if (response) {
+                            for (const id in response) {
+                                if (!this._doesCharSupportLocalGlyph(+id)) {
+                                    entry.glyphs[+id] = response[+id];
+                                }
+                            }
+                            entry.ranges[range] = true;
+                        }
+                        for (const cb of requests) {
+                            cb(err, response);
+                        }
+                        delete entry.requests[range];
+                    });
+            }
+
+            requests.push((err, result: ?{[_: number]: StyleGlyph | null}) => {
+                if (err) {
+                    callback(err);
+                } else if (result) {
+                    callback(null, {stack, id, glyph: result[id] || null});
+                }
+            });
+        }, (err, glyphs: ?Array<{stack: string, id: number, glyph: ?StyleGlyph}>) => {
+            if (err) {
+                callback(err);
+            } else if (glyphs) {
+                const result = {};
+
+                for (const {stack, id, glyph} of glyphs) {
+                    // Clone the glyph so that our own copy of its ArrayBuffer doesn't get transferred.
+                    (result[stack] || (result[stack] = {}))[id] = glyph && {
+                        id: glyph.id,
+                        bitmap: glyph.bitmap.clone(),
+                        metrics: glyph.metrics
+                    };
+                }
+
+                callback(null, result);
+            }
+        });
+    }
+
+    _doesCharSupportLocalGlyph(id: number): boolean {
+        /* eslint-disable new-cap */
+        return !!this.localIdeographFontFamily &&
+            (isChar['CJK Unified Ideographs'](id) ||
+                isChar['Hangul Syllables'](id) ||
+                isChar['Hiragana'](id) ||
+                isChar['Katakana'](id));
+        /* eslint-enable new-cap */
+    }
+
+    _tinySDF(entry: Entry, stack: string, id: number): ?StyleGlyph {
+        const family = this.localIdeographFontFamily;
+        if (!family) {
+            return;
+        }
+
+        if (!this._doesCharSupportLocalGlyph(id)) {
+            return;
+        }
+
+        let tinySDF = entry.tinySDF;
+        if (!tinySDF) {
+            let fontWeight = '400';
+            if (/bold/i.test(stack)) {
+                fontWeight = '900';
+            } else if (/medium/i.test(stack)) {
+                fontWeight = '500';
+            } else if (/light/i.test(stack)) {
+                fontWeight = '200';
+            }
+            tinySDF = entry.tinySDF = new GlyphManager.TinySDF(24, 3, 8, .25, family, fontWeight);
+        }
+
+        return {
+            id,
+            bitmap: new AlphaImage({width: 30, height: 30}, tinySDF.draw(String.fromCharCode(id))),
+            metrics: {
+                width: 24,
+                height: 24,
+                left: 0,
+                top: -8,
+                advance: 24
+            }
+        };
+    }
+}
+
+GlyphManager.loadGlyphRange = loadGlyphRange;
+GlyphManager.TinySDF = TinySDF;
+
+export default GlyphManager;

package/src/render/image_atlas.js

@@ -0,0 +1,149 @@
+// @flow
+
+import {RGBAImage} from '../util/image';
+import {register} from '../util/web_worker_transfer';
+import potpack from 'potpack';
+
+import type {StyleImage} from '../style/style_image';
+import type ImageManager from './image_manager';
+import type Texture from './texture';
+
+const IMAGE_PADDING: number = 1;
+export {IMAGE_PADDING};
+
+type Rect = {
+    x: number,
+    y: number,
+    w: number,
+    h: number
+};
+
+export class ImagePosition {
+    paddedRect: Rect;
+    pixelRatio: number;
+    version: number;
+    stretchY: ?Array<[number, number]>;
+    stretchX: ?Array<[number, number]>;
+    content: ?[number, number, number, number];
+
+    constructor(paddedRect: Rect, {pixelRatio, version, stretchX, stretchY, content}: StyleImage) {
+        this.paddedRect = paddedRect;
+        this.pixelRatio = pixelRatio;
+        this.stretchX = stretchX;
+        this.stretchY = stretchY;
+        this.content = content;
+        this.version = version;
+    }
+
+    get tl(): [number, number] {
+        return [
+            this.paddedRect.x + IMAGE_PADDING,
+            this.paddedRect.y + IMAGE_PADDING
+        ];
+    }
+
+    get br(): [number, number] {
+        return [
+            this.paddedRect.x + this.paddedRect.w - IMAGE_PADDING,
+            this.paddedRect.y + this.paddedRect.h - IMAGE_PADDING
+        ];
+    }
+
+    get tlbr(): Array<number> {
+        return this.tl.concat(this.br);
+    }
+
+    get displaySize(): [number, number] {
+        return [
+            (this.paddedRect.w - IMAGE_PADDING * 2) / this.pixelRatio,
+            (this.paddedRect.h - IMAGE_PADDING * 2) / this.pixelRatio
+        ];
+    }
+}
+
+export default class ImageAtlas {
+    image: RGBAImage;
+    iconPositions: {[_: string]: ImagePosition};
+    patternPositions: {[_: string]: ImagePosition};
+    haveRenderCallbacks: Array<string>;
+    uploaded: ?boolean;
+
+    constructor(icons: {[_: string]: StyleImage}, patterns: {[_: string]: StyleImage}) {
+        const iconPositions = {}, patternPositions = {};
+        this.haveRenderCallbacks = [];
+
+        const bins = [];
+
+        this.addImages(icons, iconPositions, bins);
+        this.addImages(patterns, patternPositions, bins);
+
+        const {w, h} = potpack(bins);
+        const image = new RGBAImage({width: w || 1, height: h || 1});
+
+        for (const id in icons) {
+            const src = icons[id];
+            const bin = iconPositions[id].paddedRect;
+            RGBAImage.copy(src.data, image, {x: 0, y: 0}, {x: bin.x + IMAGE_PADDING, y: bin.y + IMAGE_PADDING}, src.data);
+        }
+
+        for (const id in patterns) {
+            const src = patterns[id];
+            const bin = patternPositions[id].paddedRect;
+            const x = bin.x + IMAGE_PADDING,
+                y = bin.y + IMAGE_PADDING,
+                w = src.data.width,
+                h = src.data.height;
+
+            RGBAImage.copy(src.data, image, {x: 0, y: 0}, {x, y}, src.data);
+            // Add 1 pixel wrapped padding on each side of the image.
+            RGBAImage.copy(src.data, image, {x: 0, y: h - 1}, {x, y: y - 1}, {width: w, height: 1}); // T
+            RGBAImage.copy(src.data, image, {x: 0, y:     0}, {x, y: y + h}, {width: w, height: 1}); // B
+            RGBAImage.copy(src.data, image, {x: w - 1, y: 0}, {x: x - 1, y}, {width: 1, height: h}); // L
+            RGBAImage.copy(src.data, image, {x: 0,     y: 0}, {x: x + w, y}, {width: 1, height: h}); // R
+        }
+
+        this.image = image;
+        this.iconPositions = iconPositions;
+        this.patternPositions = patternPositions;
+    }
+
+    addImages(images: {[_: string]: StyleImage}, positions: {[_: string]: ImagePosition}, bins: Array<Rect>) {
+        for (const id in images) {
+            const src = images[id];
+            const bin = {
+                x: 0,
+                y: 0,
+                w: src.data.width + 2 * IMAGE_PADDING,
+                h: src.data.height + 2 * IMAGE_PADDING,
+            };
+            bins.push(bin);
+            positions[id] = new ImagePosition(bin, src);
+
+            if (src.hasRenderCallback) {
+                this.haveRenderCallbacks.push(id);
+            }
+        }
+    }
+
+    patchUpdatedImages(imageManager: ImageManager, texture: Texture) {
+        imageManager.dispatchRenderCallbacks(this.haveRenderCallbacks);
+        for (const name in imageManager.updatedImages) {
+            this.patchUpdatedImage(this.iconPositions[name], imageManager.getImage(name), texture);
+            this.patchUpdatedImage(this.patternPositions[name], imageManager.getImage(name), texture);
+        }
+    }
+
+    patchUpdatedImage(position: ?ImagePosition, image: ?StyleImage, texture: Texture) {
+        if (!position || !image) return;
+
+        if (position.version === image.version) return;
+
+        position.version = image.version;
+        const [x, y] = position.tl;
+        texture.update(image.data, undefined, {x, y});
+    }
+
+}
+
+register('ImagePosition', ImagePosition);
+register('ImageAtlas', ImageAtlas);

package/src/render/image_manager.js

@@ -0,0 +1,306 @@
+// @flow
+
+import potpack from 'potpack';
+
+import {Event, ErrorEvent, Evented} from '../util/evented';
+import {RGBAImage} from '../util/image';
+import {ImagePosition} from './image_atlas';
+import Texture from './texture';
+import assert from 'assert';
+import {renderStyleImage} from '../style/style_image';
+import {warnOnce} from '../util/util';
+
+import type {StyleImage} from '../style/style_image';
+import type Context from '../gl/context';
+import type {Bin} from 'potpack';
+import type {Callback} from '../types/callback';
+
+type Pattern = {
+    bin: Bin,
+    position: ImagePosition
+};
+
+// When copied into the atlas texture, image data is padded by one pixel on each side. Icon
+// images are padded with fully transparent pixels, while pattern images are padded with a
+// copy of the image data wrapped from the opposite side. In both cases, this ensures the
+// correct behavior of GL_LINEAR texture sampling mode.
+const padding = 1;
+
+/*
+    ImageManager does three things:
+
+        1. Tracks requests for icon images from tile workers and sends responses when the requests are fulfilled.
+        2. Builds a texture atlas for pattern images.
+        3. Rerenders renderable images once per frame
+
+    These are disparate responsibilities and should eventually be handled by different classes. When we implement
+    data-driven support for `*-pattern`, we'll likely use per-bucket pattern atlases, and that would be a good time
+    to refactor this.
+*/
+class ImageManager extends Evented {
+    images: {[_: string]: StyleImage};
+    updatedImages: {[_: string]: boolean};
+    callbackDispatchedThisFrame: {[_: string]: boolean};
+    loaded: boolean;
+    requestors: Array<{ids: Array<string>, callback: Callback<{[_: string]: StyleImage}>}>;
+
+    patterns: {[_: string]: Pattern};
+    atlasImage: RGBAImage;
+    atlasTexture: ?Texture;
+    dirty: boolean;
+
+    constructor() {
+        super();
+        this.images = {};
+        this.updatedImages = {};
+        this.callbackDispatchedThisFrame = {};
+        this.loaded = false;
+        this.requestors = [];
+
+        this.patterns = {};
+        this.atlasImage = new RGBAImage({width: 1, height: 1});
+        this.dirty = true;
+    }
+
+    isLoaded() {
+        return this.loaded;
+    }
+
+    setLoaded(loaded: boolean) {
+        if (this.loaded === loaded) {
+            return;
+        }
+
+        this.loaded = loaded;
+
+        if (loaded) {
+            for (const {ids, callback} of this.requestors) {
+                this._notify(ids, callback);
+            }
+            this.requestors = [];
+        }
+    }
+
+    getImage(id: string): ?StyleImage {
+        return this.images[id];
+    }
+
+    addImage(id: string, image: StyleImage) {
+        assert(!this.images[id]);
+        if (this._validate(id, image)) {
+            this.images[id] = image;
+        }
+    }
+
+    _validate(id: string, image: StyleImage) {
+        let valid = true;
+        if (!this._validateStretch(image.stretchX, image.data && image.data.width)) {
+            this.fire(new ErrorEvent(new Error(`Image "${id}" has invalid "stretchX" value`)));
+            valid = false;
+        }
+        if (!this._validateStretch(image.stretchY, image.data && image.data.height)) {
+            this.fire(new ErrorEvent(new Error(`Image "${id}" has invalid "stretchY" value`)));
+            valid = false;
+        }
+        if (!this._validateContent(image.content, image)) {
+            this.fire(new ErrorEvent(new Error(`Image "${id}" has invalid "content" value`)));
+            valid = false;
+        }
+        return valid;
+    }
+
+    _validateStretch(stretch: ?Array<[number, number]> | void, size: number) {
+        if (!stretch) return true;
+        let last = 0;
+        for (const part of stretch) {
+            if (part[0] < last || part[1] < part[0] || size < part[1]) return false;
+            last = part[1];
+        }
+        return true;
+    }
+
+    _validateContent(content: ?[number, number, number, number] | void, image: StyleImage) {
+        if (!content) return true;
+        if (content.length !== 4) return false;
+        if (content[0] < 0 || image.data.width < content[0]) return false;
+        if (content[1] < 0 || image.data.height < content[1]) return false;
+        if (content[2] < 0 || image.data.width < content[2]) return false;
+        if (content[3] < 0 || image.data.height < content[3]) return false;
+        if (content[2] < content[0]) return false;
+        if (content[3] < content[1]) return false;
+        return true;
+    }
+
+    updateImage(id: string, image: StyleImage) {
+        const oldImage = this.images[id];
+        assert(oldImage);
+        assert(oldImage.data.width === image.data.width);
+        assert(oldImage.data.height === image.data.height);
+        image.version = oldImage.version + 1;
+        this.images[id] = image;
+        this.updatedImages[id] = true;
+    }
+
+    removeImage(id: string) {
+        assert(this.images[id]);
+        const image = this.images[id];
+        delete this.images[id];
+        delete this.patterns[id];
+
+        if (image.userImage && image.userImage.onRemove) {
+            image.userImage.onRemove();
+        }
+    }
+
+    listImages(): Array<string> {
+        return Object.keys(this.images);
+    }
+
+    getImages(ids: Array<string>, callback: Callback<{[_: string]: StyleImage}>) {
+        // If the sprite has been loaded, or if all the icon dependencies are already present
+        // (i.e. if they've been added via runtime styling), then notify the requestor immediately.
+        // Otherwise, delay notification until the sprite is loaded. At that point, if any of the
+        // dependencies are still unavailable, we'll just assume they are permanently missing.
+        let hasAllDependencies = true;
+        if (!this.isLoaded()) {
+            for (const id of ids) {
+                if (!this.images[id]) {
+                    hasAllDependencies = false;
+                }
+            }
+        }
+        if (this.isLoaded() || hasAllDependencies) {
+            this._notify(ids, callback);
+        } else {
+            this.requestors.push({ids, callback});
+        }
+    }
+
+    _notify(ids: Array<string>, callback: Callback<{[_: string]: StyleImage}>) {
+        const response = {};
+
+        for (const id of ids) {
+            if (!this.images[id]) {
+                this.fire(new Event('styleimagemissing', {id}));
+            }
+            const image = this.images[id];
+            if (image) {
+                // Clone the image so that our own copy of its ArrayBuffer doesn't get transferred.
+                response[id] = {
+                    data: image.data.clone(),
+                    pixelRatio: image.pixelRatio,
+                    sdf: image.sdf,
+                    version: image.version,
+                    stretchX: image.stretchX,
+                    stretchY: image.stretchY,
+                    content: image.content,
+                    hasRenderCallback: Boolean(image.userImage && image.userImage.render)
+                };
+            } else {
+                warnOnce(`Image "${id}" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.`);
+            }
+        }
+
+        callback(null, response);
+    }
+
+    // Pattern stuff
+
+    getPixelSize() {
+        const {width, height} = this.atlasImage;
+        return {width, height};
+    }
+
+    getPattern(id: string): ?ImagePosition {
+        const pattern = this.patterns[id];
+
+        const image = this.getImage(id);
+        if (!image) {
+            return null;
+        }
+
+        if (pattern && pattern.position.version === image.version) {
+            return pattern.position;
+        }
+
+        if (!pattern) {
+            const w = image.data.width + padding * 2;
+            const h = image.data.height + padding * 2;
+            const bin = {w, h, x: 0, y: 0};
+            const position = new ImagePosition(bin, image);
+            this.patterns[id] = {bin, position};
+        } else {
+            pattern.position.version = image.version;
+        }
+
+        this._updatePatternAtlas();
+
+        return this.patterns[id].position;
+    }
+
+    bind(context: Context) {
+        const gl = context.gl;
+        if (!this.atlasTexture) {
+            this.atlasTexture = new Texture(context, this.atlasImage, gl.RGBA);
+        } else if (this.dirty) {
+            this.atlasTexture.update(this.atlasImage);
+            this.dirty = false;
+        }
+
+        this.atlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+    }
+
+    _updatePatternAtlas() {
+        const bins = [];
+        for (const id in this.patterns) {
+            bins.push(this.patterns[id].bin);
+        }
+
+        const {w, h} = potpack(bins);
+
+        const dst = this.atlasImage;
+        dst.resize({width: w || 1, height: h || 1});
+
+        for (const id in this.patterns) {
+            const {bin} = this.patterns[id];
+            const x = bin.x + padding;
+            const y = bin.y + padding;
+            const src = this.images[id].data;
+            const w = src.width;
+            const h = src.height;
+
+            RGBAImage.copy(src, dst, {x: 0, y: 0}, {x, y}, {width: w, height: h});
+
+            // Add 1 pixel wrapped padding on each side of the image.
+            RGBAImage.copy(src, dst, {x: 0, y: h - 1}, {x, y: y - 1}, {width: w, height: 1}); // T
+            RGBAImage.copy(src, dst, {x: 0, y:     0}, {x, y: y + h}, {width: w, height: 1}); // B
+            RGBAImage.copy(src, dst, {x: w - 1, y: 0}, {x: x - 1, y}, {width: 1, height: h}); // L
+            RGBAImage.copy(src, dst, {x: 0,     y: 0}, {x: x + w, y}, {width: 1, height: h}); // R
+        }
+
+        this.dirty = true;
+    }
+
+    beginFrame() {
+        this.callbackDispatchedThisFrame = {};
+    }
+
+    dispatchRenderCallbacks(ids: Array<string>) {
+        for (const id of ids) {
+
+            // the callback for the image was already dispatched for a different frame
+            if (this.callbackDispatchedThisFrame[id]) continue;
+            this.callbackDispatchedThisFrame[id] = true;
+
+            const image = this.images[id];
+            assert(image);
+
+            const updated = renderStyleImage(image);
+            if (updated) {
+                this.updateImage(id, image);
+            }
+        }
+    }
+}
+
+export default ImageManager;