Async Actor

src/source/raster_dem_tile_source.ts

@@ -18,6 +18,7 @@ import type {RasterDEMSourceSpecification} from '@maplibre/maplibre-gl-style-spe
 import type {ExpiryData} from '../util/ajax';
 import {isOffscreenCanvasDistorted} from '../util/offscreen_canvas_distorted';
 import {RGBAImage} from '../util/image';
+import {LoadDEMTileMessage} from '../util/actor_messages';
 
 /**
  * A source containing raster DEM tiles (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
@@ -84,7 +85,18 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
 
                 if (!tile.actor || tile.state === 'expired') {
                     tile.actor = this.dispatcher.getActor();
-                    tile.actor.send('loadDEMTile', params, done);
+                    try {
+                        const data = await tile.actor.sendAsync<LoadDEMTileMessage>({type: 'loadDEMTile', data: params});
+                        // HM TODO: find a way to fix this linting errors
+                        tile.dem = data; // eslint-disable-line require-atomic-updates
+                        tile.needsHillshadePrepare = true; // eslint-disable-line require-atomic-updates
+                        tile.needsTerrainPrepare = true; // eslint-disable-line require-atomic-updates
+                        tile.state = 'loaded'; // eslint-disable-line require-atomic-updates
+                        callback(null);
+                    } catch (err) {
+                        tile.state = 'errored'; // eslint-disable-line require-atomic-updates
+                        callback(err);
+                    }
                 }
             }
         }, this.map._refreshExpiredTiles);
@@ -101,21 +113,6 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
             }
             return browser.getImageData(img, 1);
         }
-
-        function done(err, data) {
-            if (err) {
-                tile.state = 'errored';
-                callback(err);
-            }
-
-            if (data) {
-                tile.dem = data;
-                tile.needsHillshadePrepare = true;
-                tile.needsTerrainPrepare = true;
-                tile.state = 'loaded';
-                callback(null);
-            }
-        }
     }
 
     _getNeighboringTiles(tileID: OverscaledTileID) {

src/source/raster_dem_tile_worker_source.test.ts

@@ -3,20 +3,17 @@ import {DEMData} from '../data/dem_data';
 import {WorkerDEMTileParameters} from './worker_source';
 
 describe('loadTile', () => {
-    test('loads DEM tile', done => {
+    test('loads DEM tile', async () => {
         const source = new RasterDEMTileWorkerSource();
 
-        source.loadTile({
+        const data = await source.loadTile({
             source: 'source',
             uid: '0',
             rawImageData: {data: new Uint8ClampedArray(256), height: 8, width: 8},
             dim: 256
-        } as any as WorkerDEMTileParameters, (err, data) => {
-            if (err) done(err);
-            expect(Object.keys(source.loaded)).toEqual(['0']);
-            expect(data instanceof DEMData).toBeTruthy();
-            done();
-        });
+        } as any as WorkerDEMTileParameters);
+        expect(Object.keys(source.loaded)).toEqual(['0']);
+        expect(data instanceof DEMData).toBeTruthy();
     });
 });
 

src/source/raster_dem_tile_worker_source.ts

@@ -3,7 +3,6 @@ import {RGBAImage} from '../util/image';
 import type {Actor} from '../util/actor';
 import type {
     WorkerDEMTileParameters,
-    WorkerDEMTileCallback,
     TileParameters
 } from './worker_source';
 import {getImageData, isImageBitmap} from '../util/util';
@@ -16,7 +15,7 @@ export class RasterDEMTileWorkerSource {
         this.loaded = {};
     }
 
-    async loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
+    async loadTile(params: WorkerDEMTileParameters): Promise<DEMData | null> {
         const {uid, encoding, rawImageData, redFactor, greenFactor, blueFactor, baseShift} = params;
         const width = rawImageData.width + 2;
         const height = rawImageData.height + 2;
@@ -26,7 +25,7 @@ export class RasterDEMTileWorkerSource {
         const dem = new DEMData(uid, imagePixels, encoding, redFactor, greenFactor, blueFactor, baseShift);
         this.loaded = this.loaded || {};
         this.loaded[uid] = dem;
-        callback(null, dem);
+        return dem;
     }
 
     removeTile(params: TileParameters) {

src/source/worker.ts

@@ -11,7 +11,6 @@ import type {
     WorkerTileParameters,
     WorkerDEMTileParameters,
     WorkerTileCallback,
-    WorkerDEMTileCallback,
     TileParameters
 } from '../source/worker_source';
 
@@ -85,6 +84,10 @@ export default class Worker {
             globalRTLTextPlugin['processBidirectionalText'] = rtlTextPlugin.processBidirectionalText;
             globalRTLTextPlugin['processStyledBidirectionalText'] = rtlTextPlugin.processStyledBidirectionalText;
         };
+
+        this.actor.registerMessageHandler('loadDEMTile', (mapId: string, params: WorkerDEMTileParameters) => {
+            return this.getDEMWorkerSource(mapId, params.source).loadTile(params);
+        });
     }
 
     setReferrer(mapID: string, referrer: string) {
@@ -121,10 +124,6 @@ export default class Worker {
         this.getWorkerSource(mapId, params.type, params.source).loadTile(params, callback);
     }
 
-    loadDEMTile(mapId: string, params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
-        this.getDEMWorkerSource(mapId, params.source).loadTile(params, callback);
-    }
-
     reloadTile(mapId: string, params: WorkerTileParameters & {
         type: string;
     }, callback: WorkerTileCallback) {

src/source/worker_source.ts

@@ -6,7 +6,7 @@ import type {OverscaledTileID} from './tile_id';
 import type {Bucket} from '../data/bucket';
 import type {FeatureIndex} from '../data/feature_index';
 import type {CollisionBoxArray} from '../data/array_types.g';
-import type {DEMData, DEMEncoding} from '../data/dem_data';
+import type {DEMEncoding} from '../data/dem_data';
 import type {StyleGlyph} from '../style/style_glyph';
 import type {StyleImage} from '../style/style_image';
 import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
@@ -69,7 +69,6 @@ export type WorkerTileResult = {
 };
 
 export type WorkerTileCallback = (error?: Error | null, result?: WorkerTileResult | null) => void;
-export type WorkerDEMTileCallback = (err?: Error | null, result?: DEMData | null) => void;
 
 /**
  * May be implemented by custom source types to provide code that can be run on

src/util/actor.ts

@@ -8,6 +8,7 @@ import type {WorkerSource} from '../source/worker_source';
 import type {OverscaledTileID} from '../source/tile_id';
 import type {Callback} from '../types/callback';
 import type {StyleGlyph} from '../style/style_glyph';
+import type {AsyncMessage, MessageType} from './actor_messages';
 
 export interface ActorTarget {
     addEventListener: typeof window.addEventListener;
@@ -31,13 +32,6 @@ export interface GlyphsProvider {
     );
 }
 
-export type MessageType = '<response>' | '<cancel>' |
-'geojson.getClusterExpansionZoom' | 'geojson.getClusterChildren' | 'geojson.getClusterLeaves' | 'geojson.loadData' |
-'removeSource' | 'loadWorkerSource' | 'loadDEMTile' | 'removeDEMTile' |
-'removeTile' | 'reloadTile' | 'abortTile' | 'loadTile' | 'getTile' |
-'getGlyphs' | 'getImages' | 'setImages' |
-'syncRTLPluginState' | 'setReferrer' | 'setLayers' | 'updateLayers';
-
 export type MessageData = {
     id: string;
     type: MessageType;
@@ -70,6 +64,7 @@ export class Actor {
     cancelCallbacks: { [x: number]: () => void };
     invoker: ThrottledInvoker;
     globalScope: ActorTarget;
+    messageHandlers: { [x in MessageType]?: (...args: any[]) => any };
 
     /**
      * @param target - The target
@@ -84,11 +79,28 @@ export class Actor {
         this.tasks = {};
         this.taskQueue = [];
         this.cancelCallbacks = {};
+        this.messageHandlers = {};
         this.invoker = new ThrottledInvoker(this.process);
         this.target.addEventListener('message', this.receive, false);
         this.globalScope = isWorker() ? target : window;
     }
 
+    registerMessageHandler(type: MessageType, handler: (...args: any[]) => any) {
+        this.messageHandlers[type] = handler;
+    }
+
+    sendAsync<T extends AsyncMessage<any>>(message: T): Promise<any> {
+        return new Promise((resolve, reject) => {
+            this.send(message.type, message.data, (err: Error, data: any) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve(data);
+                }
+            }, message.targetMapId, message.mustQueue);
+        });
+    }
+
     /**
      * Sends a message from a main-thread map to a Worker or from a Worker back to
      * a main-thread map instance.
@@ -100,7 +112,7 @@ export class Actor {
         type: MessageType,
         data: unknown,
         callback?: Function | null,
-        targetMapId?: string | null,
+        targetMapId?: string | number | null,
         mustQueue: boolean = false
     ): Cancelable {
         // We're using a string ID instead of numbers because they are being used as object keys
@@ -236,7 +248,11 @@ export class Actor {
 
             let callback: Cancelable = null;
             const params = deserialize(task.data);
-            if (this.parent[task.type]) {
+            if (this.messageHandlers[task.type]) {
+                callback = this.messageHandlers[task.type](task.sourceMapId, params)
+                    .then((data) => done(null, data))
+                    .catch((err) => done(err, null));
+            } else if (this.parent[task.type]) {
                 // task.type == 'loadTile', 'removeTile', etc.
                 callback = this.parent[task.type](task.sourceMapId, params, done);
             } else if ('getWorkerSource' in this.parent) {

src/util/actor_messages.ts

@@ -0,0 +1,32 @@
+import type {DEMEncoding} from '../data/dem_data';
+import type {OverscaledTileID} from '../source/tile_id';
+import type {RGBAImage} from './image';
+
+export type MessageType = '<response>' | '<cancel>' |
+'geojson.getClusterExpansionZoom' | 'geojson.getClusterChildren' | 'geojson.getClusterLeaves' | 'geojson.loadData' |
+'removeSource' | 'loadWorkerSource' | 'loadDEMTile' | 'removeDEMTile' |
+'removeTile' | 'reloadTile' | 'abortTile' | 'loadTile' | 'getTile' |
+'getGlyphs' | 'getImages' | 'setImages' |
+'syncRTLPluginState' | 'setReferrer' | 'setLayers' | 'updateLayers';
+
+export type AsyncMessage<T> = {
+    type: MessageType;
+    data: T;
+    targetMapId?: string | number | null;
+    mustQueue?: boolean;
+    sourceMapId?: string | number | null;
+}
+
+export type LoadDEMTileData = {
+    uid: number;
+    coord: OverscaledTileID;
+    source: string;
+    rawImageData: ImageBitmap | RGBAImage | ImageData;
+    encoding: DEMEncoding;
+    redFactor: number;
+    greenFactor: number;
+    blueFactor: number;
+    baseShift: number;
+}
+
+export type LoadDEMTileMessage = AsyncMessage<LoadDEMTileData> & { type: 'loadDEMTile' };

src/util/dispatcher.ts

@@ -1,8 +1,9 @@
 import {asyncAll} from './util';
-import {Actor, GlyphsProvider, MessageType} from './actor';
+import {Actor, GlyphsProvider} from './actor';
 
 import type {WorkerPool} from './worker_pool';
 import type {WorkerSource} from '../source/worker_source'; /* eslint-disable-line */ // this is used for the docs' import
+import type {MessageType} from './actor_messages';
 /**
  * Responsible for sending messages from a {@link Source} to an associated
  * {@link WorkerSource}.