@scoova/mgl 1.0.0

package/src/render/glyph_manager.test.ts

@@ -0,0 +1,147 @@
+import {parseGlyphPbf} from '../style/parse_glyph_pbf';
+import {GlyphManager} from './glyph_manager';
+import fs from 'fs';
+import {RequestManager} from '../util/request_manager';
+
+describe('GlyphManager', () => {
+    const GLYPHS = {};
+    for (const glyph of parseGlyphPbf(fs.readFileSync('./test/unit/assets/0-255.pbf'))) {
+        GLYPHS[glyph.id] = glyph;
+    }
+
+    const identityTransform = ((url) => ({url})) as any as RequestManager;
+
+    const createLoadGlyphRangeStub = () => {
+        return jest.spyOn(GlyphManager, 'loadGlyphRange').mockImplementation((stack, range, urlTemplate, transform) => {
+            expect(stack).toBe('Arial Unicode MS');
+            expect(range).toBe(0);
+            expect(urlTemplate).toBe('https://localhost/fonts/v1/{fontstack}/{range}.pbf');
+            expect(transform).toBe(identityTransform);
+            return Promise.resolve(GLYPHS);
+        });
+    };
+
+    const createGlyphManager = (font?) => {
+        const manager = new GlyphManager(identityTransform, font);
+        manager.setURL('https://localhost/fonts/v1/{fontstack}/{range}.pbf');
+        return manager;
+    };
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('GlyphManager requests 0-255 PBF', async () => {
+        createLoadGlyphRangeStub();
+        const manager = createGlyphManager();
+
+        const returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [55]});
+        expect(returnedGlyphs['Arial Unicode MS']['55'].metrics.advance).toBe(12);
+    });
+
+    test('GlyphManager doesn\'t request twice 0-255 PBF if a glyph is missing', async () => {
+        const stub = createLoadGlyphRangeStub();
+        const manager = createGlyphManager();
+
+        await manager.getGlyphs({'Arial Unicode MS': [0.5]});
+        expect(manager.entries['Arial Unicode MS'].ranges[0]).toBe(true);
+        expect(stub).toHaveBeenCalledTimes(1);
+
+        // We remove all requests as in getGlyphs code.
+        delete manager.entries['Arial Unicode MS'].requests[0];
+
+        await manager.getGlyphs({'Arial Unicode MS': [0.5]});
+        expect(manager.entries['Arial Unicode MS'].ranges[0]).toBe(true);
+        expect(stub).toHaveBeenCalledTimes(1);
+    });
+
+    test('GlyphManager requests remote CJK PBF', async () => {
+        jest.spyOn(GlyphManager, 'loadGlyphRange').mockImplementation((_stack, _range, _urlTemplate, _transform) => {
+            return Promise.resolve(GLYPHS);
+        });
+
+        const manager = createGlyphManager();
+
+        const returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [0x5e73]});
+        expect(returnedGlyphs['Arial Unicode MS'][0x5e73]).toBeNull(); // The fixture returns a PBF without the glyph we requested
+    });
+
+    test('GlyphManager does not cache CJK chars that should be rendered locally', async () => {
+        jest.spyOn(GlyphManager, 'loadGlyphRange').mockImplementation((_stack, range, _urlTemplate, _transform) => {
+            const overlappingGlyphs = {};
+            const start = range * 256;
+            const end = start + 256;
+            for (let i = start, j = 0; i < end; i++, j++) {
+                overlappingGlyphs[i] = GLYPHS[j];
+            }
+            return Promise.resolve(overlappingGlyphs);
+        });
+
+        const manager = createGlyphManager('sans-serif');
+
+        //Request char that overlaps Katakana range
+        let returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [0x3005]});
+        expect(returnedGlyphs['Arial Unicode MS'][0x3005]).not.toBeNull();
+        //Request char from Katakana range (te テ)
+        returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [0x30C6]});
+        const glyph = returnedGlyphs['Arial Unicode MS'][0x30c6];
+        //Ensure that te is locally generated.
+        expect(glyph.bitmap.height).toBe(12);
+        expect(glyph.bitmap.width).toBe(12);
+    });
+
+    test('GlyphManager generates CJK PBF locally', async () => {
+        const manager = createGlyphManager('sans-serif');
+
+        // Chinese character píng 平
+        const returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [0x5e73]});
+        expect(returnedGlyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(0.5);
+    });
+
+    test('GlyphManager generates Katakana PBF locally', async () => {
+        const manager = createGlyphManager('sans-serif');
+
+        // Katakana letter te テ
+        const returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [0x30c6]});
+        expect(returnedGlyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(0.5);
+    });
+
+    test('GlyphManager generates Hiragana PBF locally', async () => {
+        const manager = createGlyphManager('sans-serif');
+
+        //Hiragana letter te て
+        const returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [0x3066]});
+        expect(returnedGlyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(0.5);
+    });
+
+    test('GlyphManager consistently generates CJKV text locally', async () => {
+        const manager = createGlyphManager('sans-serif');
+
+        // Space
+        expect(manager._doesCharSupportLocalGlyph(0x0020)).toBe(false);
+        // Chinese character píng 平
+        expect(manager._doesCharSupportLocalGlyph(0x5e73)).toBe(true);
+        // Chinese character biáng 𰻞
+        expect(manager._doesCharSupportLocalGlyph(0x30EDE)).toBe(true);
+        // Katakana letter te テ
+        expect(manager._doesCharSupportLocalGlyph(0x30c6)).toBe(true);
+        // Hiragana letter te て
+        expect(manager._doesCharSupportLocalGlyph(0x3066)).toBe(true);
+        // Hangul letter a 아
+        expect(manager._doesCharSupportLocalGlyph(0xC544)).toBe(true);
+    });
+
+    test('GlyphManager caches locally generated glyphs', async () => {
+
+        const manager = createGlyphManager('sans-serif');
+        const drawSpy = GlyphManager.TinySDF.prototype.draw = jest.fn().mockImplementation(() => {
+            return {data: new Uint8ClampedArray(60 * 60)} as any;
+        });
+
+        // Katakana letter te
+        const returnedGlyphs = await manager.getGlyphs({'Arial Unicode MS': [0x30c6]});
+        expect(returnedGlyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(24);
+        await manager.getGlyphs({'Arial Unicode MS': [0x30c6]});
+        expect(drawSpy).toHaveBeenCalledTimes(1);
+    });
+});

package/src/render/glyph_manager.ts

@@ -0,0 +1,198 @@
+import {loadGlyphRange} from '../style/load_glyph_range';
+
+import TinySDF from '@mapbox/tiny-sdf';
+import {AlphaImage} from '../util/image';
+
+import type {StyleGlyph} from '../style/style_glyph';
+import type {RequestManager} from '../util/request_manager';
+import type {GetGlyphsResponse} from '../util/actor_messages';
+
+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]: Promise<{[_: number]: StyleGlyph | null}>;
+    };
+    ranges: {
+        [range: number]: boolean | null;
+    };
+    tinySDF?: TinySDF;
+};
+
+export class GlyphManager {
+    requestManager: RequestManager;
+    localIdeographFontFamily: string | false;
+    entries: {[stack: string]: Entry};
+    url: string;
+
+    // exposed as statics to enable stubbing in unit tests
+    static loadGlyphRange = loadGlyphRange;
+    static TinySDF = TinySDF;
+
+    constructor(requestManager: RequestManager, localIdeographFontFamily?: string | false) {
+        this.requestManager = requestManager;
+        this.localIdeographFontFamily = localIdeographFontFamily;
+        this.entries = {};
+    }
+
+    setURL(url?: string | null) {
+        this.url = url;
+    }
+
+    async getGlyphs(glyphs: {[stack: string]: Array<number>}): Promise<GetGlyphsResponse> {
+        const glyphsPromises: Promise<{stack: string; id: number; glyph: StyleGlyph}>[] = [];
+
+        for (const stack in glyphs) {
+            for (const id of glyphs[stack]) {
+                glyphsPromises.push(this._getAndCacheGlyphsPromise(stack, id));
+            }
+        }
+
+        const updatedGlyphs = await Promise.all(glyphsPromises);
+
+        const result: GetGlyphsResponse = {};
+
+        for (const {stack, id, glyph} of updatedGlyphs) {
+            if (!result[stack]) {
+                result[stack] = {};
+            }
+            // Clone the glyph so that our own copy of its ArrayBuffer doesn't get transferred.
+            result[stack][id] = glyph && {
+                id: glyph.id,
+                bitmap: glyph.bitmap.clone(),
+                metrics: glyph.metrics
+            };
+        }
+
+        return result;
+    }
+
+    async _getAndCacheGlyphsPromise(stack: string, id: number): Promise<{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) {
+            return {stack, id, glyph};
+        }
+
+        glyph = this._tinySDF(entry, stack, id);
+        if (glyph) {
+            entry.glyphs[id] = glyph;
+            return {stack, id, glyph};
+        }
+
+        const range = Math.floor(id / 256);
+        if (range * 256 > 65535) {
+            throw new Error('glyphs > 65535 not supported');
+        }
+
+        if (entry.ranges[range]) {
+            return {stack, id, glyph};
+        }
+
+        if (!this.url) {
+            throw new Error('glyphsUrl is not set');
+        }
+
+        if (!entry.requests[range]) {
+            const promise = GlyphManager.loadGlyphRange(stack, range, this.url, this.requestManager);
+            entry.requests[range] = promise;
+        }
+
+        const response = await entry.requests[range];
+        for (const id in response) {
+            if (!this._doesCharSupportLocalGlyph(+id)) {
+                entry.glyphs[+id] = response[+id];
+            }
+        }
+        entry.ranges[range] = true;
+        return {stack, id, glyph: response[id] || null};
+    }
+
+    _doesCharSupportLocalGlyph(id: number): boolean {
+        // The CJK Unified Ideographs blocks and Hangul Syllables blocks are
+        // spread across many glyph PBFs and are typically accessed very
+        // randomly. Preferring local rendering for these blocks reduces
+        // wasteful bandwidth consumption. For visual consistency within CJKV
+        // text, also include any other CJKV or siniform ideograph or hangul,
+        // hiragana, or katakana character.
+        return !!this.localIdeographFontFamily &&
+            /\p{Ideo}|\p{sc=Hang}|\p{sc=Hira}|\p{sc=Kana}/u.test(String.fromCodePoint(id));
+    }
+
+    _tinySDF(entry: Entry, stack: string, id: number): StyleGlyph {
+        const fontFamily = this.localIdeographFontFamily;
+        if (!fontFamily) {
+            return;
+        }
+
+        if (!this._doesCharSupportLocalGlyph(id)) {
+            return;
+        }
+
+        // Client-generated glyphs are rendered at 2x texture scale,
+        // because CJK glyphs are more detailed than others.
+        const textureScale = 2;
+
+        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({
+                fontSize: 24 * textureScale,
+                buffer: 3 * textureScale,
+                radius: 8 * textureScale,
+                cutoff: 0.25,
+                fontFamily,
+                fontWeight
+            });
+        }
+
+        const char = tinySDF.draw(String.fromCharCode(id));
+
+        /**
+         * TinySDF's "top" is the distance from the alphabetic baseline to the top of the glyph.
+         * Server-generated fonts specify "top" relative to an origin above the em box (the origin
+         * comes from FreeType, but I'm unclear on exactly how it's derived)
+         * ref: https://github.com/mapbox/sdf-glyph-foundry
+         *
+         * Server fonts don't yet include baseline information, so we can't line up exactly with them
+         * (and they don't line up with each other)
+         * ref: https://github.com/mapbox/node-fontnik/pull/160
+         *
+         * To approximately align TinySDF glyphs with server-provided glyphs, we use this baseline adjustment
+         * factor calibrated to be in between DIN Pro and Arial Unicode (but closer to Arial Unicode)
+         */
+        const topAdjustment = 27.5;
+
+        const leftAdjustment = 0.5;
+
+        return {
+            id,
+            bitmap: new AlphaImage({width: char.width || 30 * textureScale, height: char.height || 30 * textureScale}, char.data),
+            metrics: {
+                width: char.glyphWidth / textureScale || 24,
+                height: char.glyphHeight / textureScale || 24,
+                left: (char.glyphLeft / textureScale + leftAdjustment) || 0,
+                top: char.glyphTop / textureScale - topAdjustment || -8,
+                advance: char.glyphAdvance / textureScale || 24,
+                isDoubleResolution: true
+            }
+        };
+    }
+}

package/src/render/image_atlas.ts

@@ -0,0 +1,159 @@
+/* eslint-disable key-spacing */
+import {RGBAImage} from '../util/image';
+import {register} from '../util/web_worker_transfer';
+import potpack from 'potpack';
+
+import type {StyleImage} from '../style/style_image';
+import {TextFit} from '../style/style_image';
+import type {ImageManager} from './image_manager';
+import type {Texture} from './texture';
+import type {Rect} from './glyph_atlas';
+import type {GetImagesResponse} from '../util/actor_messages';
+
+const IMAGE_PADDING: number = 1;
+export {IMAGE_PADDING};
+
+export class ImagePosition {
+    paddedRect: Rect;
+    pixelRatio: number;
+    version: number;
+    stretchY: Array<[number, number]>;
+    stretchX: Array<[number, number]>;
+    content: [number, number, number, number];
+    textFitWidth: TextFit;
+    textFitHeight: TextFit;
+
+    constructor(paddedRect: Rect, {
+        pixelRatio,
+        version,
+        stretchX,
+        stretchY,
+        content,
+        textFitWidth,
+        textFitHeight
+    }: StyleImage) {
+        this.paddedRect = paddedRect;
+        this.pixelRatio = pixelRatio;
+        this.stretchX = stretchX;
+        this.stretchY = stretchY;
+        this.content = content;
+        this.version = version;
+        this.textFitWidth = textFitWidth;
+        this.textFitHeight = textFitHeight;
+    }
+
+    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
+        ];
+    }
+}
+
+/**
+ * A class holding all the images
+ */
+export class ImageAtlas {
+    image: RGBAImage;
+    iconPositions: {[_: string]: ImagePosition};
+    patternPositions: {[_: string]: ImagePosition};
+    haveRenderCallbacks: Array<string>;
+    uploaded: boolean;
+
+    constructor(icons: GetImagesResponse, patterns: GetImagesResponse) {
+        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);