Async Actor

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Convert plantuml diagrams to mermaid ([#3217](https://github.com/maplibre/maplibre-gl-js/pull/3217))
 - Improve buffer transfer in Safari after Safari fixed a memory leak bug ([#3225](https://github.com/maplibre/maplibre-gl-js/pull/3225))
 - Minify internal exports to reduce bundle size ([#3216](https://github.com/maplibre/maplibre-gl-js/pull/3216))
+- ⚠️ Change the undeling worker communication from callbacks to promises. This has a breaking effect on the implementation of custom `WorkerSource` and how it behaves ([#3233](https://github.com/maplibre/maplibre-gl-js/pull/3233))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

src/data/dem_data.ts

@@ -16,7 +16,7 @@ import {register} from '../util/web_worker_transfer';
 export type DEMEncoding = 'mapbox' | 'terrarium' | 'custom'
 
 export class DEMData {
-    uid: string;
+    uid: string | number;
     data: Uint32Array;
     stride: number;
     dim: number;
@@ -29,7 +29,7 @@ export class DEMData {
 
     // RGBAImage data has uniform 1px padding on all sides: square tile edge size defines stride
     // and dim is calculated as stride - 2.
-    constructor(uid: string, data: RGBAImage, encoding: DEMEncoding, redFactor = 1.0, greenFactor = 1.0, blueFactor = 1.0, baseShift = 0.0) {
+    constructor(uid: string | number, data: RGBAImage | ImageData, encoding: DEMEncoding, redFactor = 1.0, greenFactor = 1.0, blueFactor = 1.0, baseShift = 0.0) {
         this.uid = uid;
         if (data.height !== data.width) throw new RangeError('DEM tiles must be square');
         if (encoding && !['mapbox', 'terrarium', 'custom'].includes(encoding)) {

src/render/glyph_atlas.ts

@@ -2,7 +2,8 @@ import {AlphaImage} from '../util/image';
 import {register} from '../util/web_worker_transfer';
 import potpack from 'potpack';
 
-import type {GlyphMetrics, StyleGlyph} from '../style/style_glyph';
+import type {GlyphMetrics} from '../style/style_glyph';
+import type {GetGlyphsResponse} from '../util/actor_messages';
 
 const padding = 1;
 
@@ -37,11 +38,7 @@ export class GlyphAtlas {
     image: AlphaImage;
     positions: GlyphPositions;
 
-    constructor(stacks: {
-        [_: string]: {
-            [_: number]: StyleGlyph;
-        };
-    }) {
+    constructor(stacks: GetGlyphsResponse) {
         const positions = {};
         const bins = [];
 

src/render/glyph_manager.test.ts

@@ -36,8 +36,7 @@ describe('GlyphManager', () => {
         createLoadGlyphRangeStub();
         const manager = createGlyphManager();
 
-        manager.getGlyphs({'Arial Unicode MS': [55]}, (err, glyphs) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [55]}).then((glyphs) => {
             expect(glyphs['Arial Unicode MS']['55'].metrics.advance).toBe(12);
             done();
         });
@@ -47,16 +46,14 @@ describe('GlyphManager', () => {
         const stub = createLoadGlyphRangeStub();
         const manager = createGlyphManager();
 
-        manager.getGlyphs({'Arial Unicode MS': [0.5]}, (err) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [0.5]}).then(() => {
             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];
 
-            manager.getGlyphs({'Arial Unicode MS': [0.5]}, (err) => {
-                expect(err).toBeFalsy();
+            manager.getGlyphs({'Arial Unicode MS': [0.5]}).then(() => {
                 expect(manager.entries['Arial Unicode MS'].ranges[0]).toBe(true);
                 expect(stub).toHaveBeenCalledTimes(1);
                 done();
@@ -71,8 +68,7 @@ describe('GlyphManager', () => {
 
         const manager = createGlyphManager();
 
-        manager.getGlyphs({'Arial Unicode MS': [0x5e73]}, (err, glyphs) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [0x5e73]}).then((glyphs) => {
             expect(glyphs['Arial Unicode MS'][0x5e73]).toBeNull(); // The fixture returns a PBF without the glyph we requested
             done();
         });
@@ -92,12 +88,10 @@ describe('GlyphManager', () => {
         const manager = createGlyphManager('sans-serif');
 
         //Request char that overlaps Katakana range
-        manager.getGlyphs({'Arial Unicode MS': [0x3005]}, (err, glyphs) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [0x3005]}).then((glyphs) => {
             expect(glyphs['Arial Unicode MS'][0x3005]).not.toBeNull();
             //Request char from Katakana range (te テ)
-            manager.getGlyphs({'Arial Unicode MS': [0x30C6]}, (err, glyphs) => {
-                expect(err).toBeFalsy();
+            manager.getGlyphs({'Arial Unicode MS': [0x30C6]}).then((glyphs) => {
                 const glyph = glyphs['Arial Unicode MS'][0x30c6];
                 //Ensure that te is locally generated.
                 expect(glyph.bitmap.height).toBe(12);
@@ -111,8 +105,7 @@ describe('GlyphManager', () => {
         const manager = createGlyphManager('sans-serif');
 
         // character 平
-        manager.getGlyphs({'Arial Unicode MS': [0x5e73]}, (err, glyphs) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [0x5e73]}).then((glyphs) => {
             expect(glyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(0.5);
             done();
         });
@@ -122,8 +115,7 @@ describe('GlyphManager', () => {
         const manager = createGlyphManager('sans-serif');
 
         // Katakana letter te テ
-        manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, (err, glyphs) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [0x30c6]}).then((glyphs) => {
             expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(0.5);
             done();
         });
@@ -133,8 +125,7 @@ describe('GlyphManager', () => {
         const manager = createGlyphManager('sans-serif');
 
         //Hiragana letter te て
-        manager.getGlyphs({'Arial Unicode MS': [0x3066]}, (err, glyphs) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [0x3066]}).then((glyphs) => {
             expect(glyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(0.5);
             done();
         });
@@ -148,10 +139,9 @@ describe('GlyphManager', () => {
         });
 
         // Katakana letter te
-        manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, (err, glyphs) => {
-            expect(err).toBeFalsy();
+        manager.getGlyphs({'Arial Unicode MS': [0x30c6]}).then((glyphs) => {
             expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(24);
-            manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, () => {
+            manager.getGlyphs({'Arial Unicode MS': [0x30c6]}).then(() => {
                 expect(drawSpy).toHaveBeenCalledTimes(1);
                 done();
             });

src/render/glyph_manager.ts

@@ -2,12 +2,12 @@ import {loadGlyphRange} from '../style/load_glyph_range';
 
 import TinySDF from '@mapbox/tiny-sdf';
 import {unicodeBlockLookup} 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/request_manager';
 import type {Callback} from '../types/callback';
+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.
@@ -47,117 +47,105 @@ export class GlyphManager {
         this.url = url;
     }
 
-    getGlyphs(glyphs: {
-        [stack: string]: Array<number>;
-    }, callback: Callback<{
-        [stack: string]: {
-            [id: number]: StyleGlyph;
-        };
-    }>) {
+    async getGlyphs(glyphs: {[stack: string]: Array<number>}): Promise<GetGlyphsResponse> {
         const all = [];
 
         for (const stack in glyphs) {
             for (const id of glyphs[stack]) {
                 all.push({stack, id});
             }
         }
+        const promises = all.map(({stack, id}) => {
+            return new Promise<{stack: string; id: number; glyph: StyleGlyph}>((resolve, reject) => {
+                let entry = this.entries[stack];
+                if (!entry) {
+                    entry = this.entries[stack] = {
+                        glyphs: {},
+                        requests: {},
+                        ranges: {}
+                    };
+                }
 
-        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;
-            }
+                let glyph = entry.glyphs[id];
+                if (glyph !== undefined) {
+                    resolve({stack, id, glyph});
+                    return;
+                }
 
-            glyph = this._tinySDF(entry, stack, id);
-            if (glyph) {
-                entry.glyphs[id] = glyph;
-                callback(null, {stack, id, glyph});
-                return;
-            }
+                glyph = this._tinySDF(entry, stack, id);
+                if (glyph) {
+                    entry.glyphs[id] = glyph;
+                    resolve({stack, id, glyph});
+                    return;
+                }
 
-            const range = Math.floor(id / 256);
-            if (range * 256 > 65535) {
-                callback(new Error('glyphs > 65535 not supported'));
-                return;
-            }
+                const range = Math.floor(id / 256);
+                if (range * 256 > 65535) {
+                    reject(new Error('glyphs > 65535 not supported'));
+                    return;
+                }
 
-            if (entry.ranges[range]) {
-                callback(null, {stack, id, glyph});
-                return;
-            }
+                if (entry.ranges[range]) {
+                    resolve({stack, id, glyph});
+                    return;
+                }
 
-            if (!this.url) {
-                callback(new Error('glyphsUrl is not set'));
-                return;
-            }
+                if (!this.url) {
+                    reject(new Error('glyphsUrl is not set'));
+                    return;
+                }
 
-            let requests = entry.requests[range];
-            if (!requests) {
-                requests = entry.requests[range] = [];
-                GlyphManager.loadGlyphRange(stack, range, this.url, this.requestManager,
-                    (err, response?: {
-                        [_: number]: StyleGlyph | null;
-                    } | null) => {
-                        if (response) {
-                            for (const id in response) {
-                                if (!this._doesCharSupportLocalGlyph(+id)) {
-                                    entry.glyphs[+id] = response[+id];
+                let requests = entry.requests[range];
+                if (!requests) {
+                    requests = entry.requests[range] = [];
+                    GlyphManager.loadGlyphRange(stack, range, this.url, this.requestManager,
+                        (err, response?: {
+                            [_: number]: StyleGlyph | null;
+                        } | null) => {
+                            if (response) {
+                                for (const id in response) {
+                                    if (!this._doesCharSupportLocalGlyph(+id)) {
+                                        entry.glyphs[+id] = response[+id];
+                                    }
                                 }
+                                entry.ranges[range] = true;
                             }
-                            entry.ranges[range] = true;
-                        }
-                        for (const cb of requests) {
-                            cb(err, response);
-                        }
-                        delete entry.requests[range];
-                    });
-            }
-
-            requests.push((err, result?: {
-                [_: number]: StyleGlyph | null;
-            } | null) => {
-                if (err) {
-                    callback(err);
-                } else if (result) {
-                    callback(null, {stack, id, glyph: result[id] || null});
+                            for (const cb of requests) {
+                                cb(err, response);
+                            }
+                            delete entry.requests[range];
+                        });
                 }
+
+                requests.push((err, result?: {
+                    [_: number]: StyleGlyph | null;
+                } | null) => {
+                    if (err) {
+                        reject(err);
+                    } else if (result) {
+                        resolve({stack, id, glyph: result[id] || null});
+                    }
+                });
             });
-        }, (err, glyphs?: Array<{
-            stack: string;
-            id: number;
-            glyph: StyleGlyph;
-        }> | null) => {
-            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
-                    };
-                }
+        });
+
+        const updatedGlyphs = await Promise.all(promises);
+
+        const result: GetGlyphsResponse = {};
 
-                callback(null, result);
+        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;
     }
 
     _doesCharSupportLocalGlyph(id: number): boolean {

src/render/image_atlas.ts

@@ -7,6 +7,7 @@ import type {StyleImage} 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};
@@ -71,7 +72,7 @@ export class ImageAtlas {
     haveRenderCallbacks: Array<string>;
     uploaded: boolean;
 
-    constructor(icons: {[_: string]: StyleImage}, patterns: {[_: string]: StyleImage}) {
+    constructor(icons: GetImagesResponse, patterns: GetImagesResponse) {
         const iconPositions = {}, patternPositions = {};
         this.haveRenderCallbacks = [];