@mapgis/mapbox-gl 16.0.1 → 16.2.0

package/src/render/glyph_manager.js

@@ -1,182 +0,0 @@
-// @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

@@ -1,149 +0,0 @@
-// @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

@@ -1,306 +0,0 @@
-// @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;