@mapwhit/tilerenderer 0.47.1 → 0.47.2

package/src/source/raster_tile_source.js

@@ -24,22 +24,21 @@ class RasterTileSource extends Evented {
     Object.assign(this, pick(options, ['url', 'scheme', 'tileSize']));
   }
 
-  load() {
+  async load() {
     this.fire(new Event('dataloading', { dataType: 'source' }));
-    loadTileJSON(this._options, (err, tileJSON) => {
-      if (err) {
-        this.fire(new ErrorEvent(err));
-      } else if (tileJSON) {
-        Object.assign(this, tileJSON);
-        if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
-
-        // `content` is included here to prevent a race condition where `Style#_updateSources` is called
-        // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
-        // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
-        this.fire(new Event('data', { dataType: 'source', sourceDataType: 'metadata' }));
-        this.fire(new Event('data', { dataType: 'source', sourceDataType: 'content' }));
-      }
-    });
+    try {
+      const tileJSON = await loadTileJSON(this._options);
+      Object.assign(this, tileJSON);
+      if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+
+      // `content` is included here to prevent a race condition where `Style#_updateSources` is called
+      // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
+      // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
+      this.fire(new Event('data', { dataType: 'source', sourceDataType: 'metadata' }));
+      this.fire(new Event('data', { dataType: 'source', sourceDataType: 'content' }));
+    } catch (err) {
+      this.fire(new ErrorEvent(err));
+    }
   }
 
   onAdd(map) {
@@ -55,67 +54,59 @@ class RasterTileSource extends Evented {
     return !this.tileBounds || this.tileBounds.contains(tileID.canonical);
   }
 
-  loadTile(tile, callback) {
-    const done = (err, img) => {
-      delete tile.request;
+  async loadTile(tile) {
+    try {
+      tile.abortController = new window.AbortController();
+      const data = await this.tiles(tile.tileID.canonical, tile.abortController).catch(() => {});
+      if (!data) {
+        const err = new Error('Tile could not be loaded');
+        err.status = 404; // will try to use the parent/child tile
+        throw err;
+      }
+      const img = await loadImage(data);
+      if (!img) {
+        return;
+      }
 
-      if (tile.aborted) {
-        tile.state = 'unloaded';
-        callback(null);
-      } else if (err) {
-        tile.state = 'errored';
-        callback(err);
-      } else if (img) {
-        const context = this.map.painter.context;
-        const gl = context.gl;
-        tile.texture = this.map.painter.getTileTexture(img.width);
-        if (tile.texture) {
-          tile.texture.update(img, { useMipmap: true });
-        } else {
-          tile.texture = new Texture(context, img, gl.RGBA, { useMipmap: true });
-          tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
-
-          if (context.extTextureFilterAnisotropic) {
-            gl.texParameterf(
-              gl.TEXTURE_2D,
-              context.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
-              context.extTextureFilterAnisotropicMax
-            );
-          }
+      tile.texture = this.map.painter.getTileTexture(img.width);
+      if (tile.texture) {
+        tile.texture.update(img, { useMipmap: true });
+      } else {
+        const { context } = this.map.painter;
+        const { gl } = context;
+        tile.texture = new Texture(context, img, gl.RGBA, { useMipmap: true });
+        tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+
+        if (context.extTextureFilterAnisotropic) {
+          gl.texParameterf(
+            gl.TEXTURE_2D,
+            context.extTextureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
+            context.extTextureFilterAnisotropicMax
+          );
         }
+      }
 
-        tile.state = 'loaded';
-
-        callback(null);
+      tile.state = 'loaded';
+    } catch (err) {
+      if (tile.aborted) {
+        tile.state = 'unloaded';
+        return;
       }
-    };
-
-    tile.abortController = new window.AbortController();
-    this.tiles(tile.tileID.canonical, tile.abortController)
-      .catch(() => {})
-      .then(data => {
-        if (!data) {
-          const err = new Error('Tile could not be loaded');
-          err.status = 404; // will try to use the parent/child tile
-          return done(err);
-        }
-        tile.request = loadImage(data, done);
-      });
+      tile.state = 'errored';
+      throw err;
+    }
   }
 
-  abortTile(tile, callback) {
+  abortTile(tile) {
     if (tile.abortController) {
       tile.aborted = true;
       tile.abortController.abort();
       delete tile.abortController;
-      delete tile.request;
     }
-    callback();
   }
 
-  unloadTile(tile, callback) {
+  unloadTile(tile) {
     if (tile.texture) this.map.painter.saveTileTexture(tile.texture);
-    callback();
   }
 
   hasTransition() {

package/src/source/rtl_text_plugin.js

@@ -1,4 +1,5 @@
 const { Event, Evented } = require('../util/evented');
+const browser = require('../util/browser');
 
 let pluginRequested = false;
 let pluginURL = null;
@@ -27,7 +28,7 @@ function setRTLTextPlugin(url, callback) {
     throw new Error('setRTLTextPlugin cannot be called multiple times.');
   }
   pluginRequested = true;
-  pluginURL = url;
+  pluginURL = browser.resolveURL(url);
   _completionCallback = error => {
     if (error) {
       // Clear loaded state to allow retries

package/src/source/source_cache.js

@@ -110,16 +110,16 @@ class SourceCache extends Evented {
     if (this.transform) this.update(this.transform);
   }
 
-  _loadTile(tile, callback) {
-    return this._source.loadTile(tile, callback);
+  _loadTile(tile) {
+    return this._source.loadTile(tile);
   }
 
   _unloadTile(tile) {
-    if (this._source.unloadTile) return this._source.unloadTile(tile, () => {});
+    return this._source.unloadTile?.(tile);
   }
 
   _abortTile(tile) {
-    if (this._source.abortTile) return this._source.abortTile(tile, () => {});
+    return this._source.abortTile?.(tile);
   }
 
   serialize() {
@@ -127,9 +127,7 @@ class SourceCache extends Evented {
   }
 
   prepare(context) {
-    if (this._source.prepare) {
-      this._source.prepare();
-    }
+    this._source.prepare?.();
 
     this._state.coalesceChanges(this._tiles, this.map ? this.map.painter : null);
     for (const i in this._tiles) {
@@ -202,21 +200,22 @@ class SourceCache extends Evented {
     if (tile.state !== 'loading') {
       tile.state = state;
     }
-
-    this._loadTile(tile, this._tileLoaded.bind(this, tile, id, state));
+    this._loadTile(tile).then(
+      () => this._tileLoaded(tile),
+      err => this._tileLoadError(tile, err)
+    );
   }
 
-  _tileLoaded(tile, id, previousState, err) {
-    if (err) {
-      tile.state = 'errored';
-      // ignore do nothing strategy
-      if (err.doNothing) return;
-      if (err.status !== 404) this._source.fire(new ErrorEvent(err, { tile }));
-      // continue to try loading parent/children tiles if a tile doesn't exist (404)
-      else this.update(this.transform);
-      return;
-    }
+  _tileLoadError(tile, err) {
+    tile.state = 'errored';
+    // ignore do nothing strategy
+    if (err.doNothing) return;
+    if (err.status !== 404) this._source.fire(new ErrorEvent(err, { tile }));
+    // continue to try loading parent/children tiles if a tile doesn't exist (404)
+    else this.update(this.transform);
+  }
 
+  _tileLoaded(tile, err) {
     tile.timeAdded = browser.now();
     if (this.getSource().type === 'raster-dem' && tile.dem) this._backfillDEM(tile);
     this._state.initializeTileState(tile, this.map ? this.map.painter : null);
@@ -610,7 +609,10 @@ class SourceCache extends Evented {
     const cached = Boolean(tile);
     if (!cached) {
       tile = new Tile(tileID, this._source.tileSize * tileID.overscaleFactor());
-      this._loadTile(tile, this._tileLoaded.bind(this, tile, tileID.key, tile.state));
+      this._loadTile(tile).then(
+        () => this._tileLoaded(tile),
+        err => this._tileLoadError(tile, err)
+      );
     }
 
     // Impossible, but silence flow.

package/src/source/source_state.js

@@ -5,50 +5,41 @@
  * @private
  */
 class SourceFeatureState {
-  constructor() {
-    this.state = {};
-    this.stateChanges = {};
-  }
+  #state = {};
+  #stateChanges = {};
 
   updateState(sourceLayer, feature, state) {
-    feature = String(feature);
-    this.stateChanges[sourceLayer] = this.stateChanges[sourceLayer] || {};
-    this.stateChanges[sourceLayer][feature] = this.stateChanges[sourceLayer][feature] || {};
-    Object.assign(this.stateChanges[sourceLayer][feature], state);
+    const changes = (this.#stateChanges[sourceLayer] ??= {});
+    const featureState = (changes[feature] ??= {});
+    Object.assign(featureState, state);
   }
 
   getState(sourceLayer, feature) {
-    feature = String(feature);
-    const base = this.state[sourceLayer] || {};
-    const changes = this.stateChanges[sourceLayer] || {};
-    return Object.assign({}, base[feature], changes[feature]);
+    const base = this.#state[sourceLayer];
+    const changes = this.#stateChanges[sourceLayer];
+    return Object.assign({}, base?.[feature], changes?.[feature]);
   }
 
   initializeTileState(tile, painter) {
-    tile.setFeatureState(this.state, painter);
+    tile.setFeatureState(this.#state, painter);
   }
 
   coalesceChanges(tiles, painter) {
     const changes = {};
-    for (const sourceLayer in this.stateChanges) {
-      this.state[sourceLayer] = this.state[sourceLayer] || {};
+    for (const sourceLayer in this.#stateChanges) {
+      this.#state[sourceLayer] ??= {};
       const layerStates = {};
-      for (const id in this.stateChanges[sourceLayer]) {
-        if (!this.state[sourceLayer][id]) {
-          this.state[sourceLayer][id] = {};
-        }
-        Object.assign(this.state[sourceLayer][id], this.stateChanges[sourceLayer][id]);
-        layerStates[id] = this.state[sourceLayer][id];
+      for (const id in this.#stateChanges[sourceLayer]) {
+        this.#state[sourceLayer][id] ??= {};
+        Object.assign(this.#state[sourceLayer][id], this.#stateChanges[sourceLayer][id]);
+        layerStates[id] = this.#state[sourceLayer][id];
       }
       changes[sourceLayer] = layerStates;
     }
-    this.stateChanges = {};
+    this.#stateChanges = {};
     if (Object.keys(changes).length === 0) return;
 
-    for (const id in tiles) {
-      const tile = tiles[id];
-      tile.setFeatureState(changes, painter);
-    }
+    Object.values(tiles).forEach(tile => tile.setFeatureState(changes, painter));
   }
 }
 

package/src/source/tile_id.js

@@ -1,7 +1,7 @@
 const { getTileBBox } = require('@mapbox/whoots-js');
 
 const assert = require('assert');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 const Coordinate = require('../geo/coordinate');
 
 class CanonicalTileID {

package/src/source/vector_tile_source.js

@@ -1,4 +1,3 @@
-const config = require('../util/config');
 const { Event, ErrorEvent, Evented } = require('../util/evented');
 const { pick } = require('../util/object');
 const loadTileJSON = require('./load_tilejson');
@@ -29,29 +28,25 @@ class VectorTileSource extends Evented {
       throw new Error('vector tile sources must have a tileSize of 512');
     }
 
-    this.updateWorkerConfig(config);
-    config.on('change', c => this.updateWorkerConfig(c));
-
     this.setEventedParent(eventedParent);
   }
 
-  load() {
+  async load() {
     this.fire(new Event('dataloading', { dataType: 'source' }));
 
-    loadTileJSON(this._options, (err, tileJSON) => {
-      if (err) {
-        this.fire(new ErrorEvent(err));
-      } else if (tileJSON) {
-        Object.assign(this, tileJSON);
-        if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
-
-        // `content` is included here to prevent a race condition where `Style#_updateSources` is called
-        // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
-        // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
-        this.fire(new Event('data', { dataType: 'source', sourceDataType: 'metadata' }));
-        this.fire(new Event('data', { dataType: 'source', sourceDataType: 'content' }));
-      }
-    });
+    try {
+      const tileJSON = await loadTileJSON(this._options);
+      Object.assign(this, tileJSON);
+      if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+
+      // `content` is included here to prevent a race condition where `Style#_updateSources` is called
+      // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
+      // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
+      this.fire(new Event('data', { dataType: 'source', sourceDataType: 'metadata' }));
+      this.fire(new Event('data', { dataType: 'source', sourceDataType: 'content' }));
+    } catch (err) {
+      this.fire(new ErrorEvent(err));
+    }
   }
 
   hasTile(tileID) {
@@ -67,78 +62,66 @@ class VectorTileSource extends Evented {
     return Object.assign({}, this._options);
   }
 
-  loadTile(tile, callback) {
-    tile.abortController = new window.AbortController();
-    this.tiles(tile.tileID.canonical, tile.abortController)
-      .catch(() => {})
-      .then(data => {
-        if (!data) {
-          const err = new Error('Tile could not be loaded');
-          err.status = 404; // will try to use the parent/child tile
-          return done(err);
-        }
-        const params = {
-          response: { data },
-          uid: tile.uid,
-          tileID: tile.tileID,
-          zoom: tile.tileID.overscaledZ,
-          tileSize: this.tileSize * tile.tileID.overscaleFactor(),
-          type: this.type,
-          source: this.id,
-          pixelRatio: browser.devicePixelRatio,
-          showCollisionBoxes: this.map.showCollisionBoxes
-        };
-
-        if (tile.workerID === undefined || tile.state === 'expired') {
-          tile.workerID = this.dispatcher.send('loadTile', params, done.bind(this));
-        } else if (tile.state === 'loading') {
-          // schedule tile reloading after it has been loaded
-          tile.reloadCallback = callback;
-        } else {
-          this.dispatcher.send('reloadTile', params, done.bind(this), tile.workerID);
-        }
-      });
-
-    function done(err, data) {
-      if (tile.aborted) return callback(null);
-
-      if (err) {
-        return callback(err);
-      }
-
-      if (data?.resourceTiming) tile.resourceTiming = data.resourceTiming;
+  async loadTile(tile) {
+    if (tile.workerID != null && tile.state === 'loading') {
+      tile.reloadPromise ??= Promise.withResolvers();
+      return tile.reloadPromise.promise;
+    }
+    const data = await this.#loadTile(tile);
+    if (tile.reloadPromise) {
+      const { resolve, reject } = tile.reloadPromise;
+      tile.reloadPromise = null;
+      return this.loadTile(tile).then(resolve, reject);
+    }
+    return data;
+  }
 
+  async #loadTile(tile) {
+    try {
+      tile.abortController = new window.AbortController();
+      const rawData = await this.tiles(tile.tileID.canonical, tile.abortController).catch(() => {});
+      if (!rawData) {
+        const err = new Error('Tile could not be loaded');
+        err.status = 404; // will try to use the parent/child tile
+        throw err;
+      }
+      const params = {
+        response: { data: rawData.slice() },
+        uid: tile.uid,
+        tileID: tile.tileID,
+        zoom: tile.tileID.overscaledZ,
+        tileSize: this.tileSize * tile.tileID.overscaleFactor(),
+        type: this.type,
+        source: this.id,
+        pixelRatio: browser.devicePixelRatio,
+        showCollisionBoxes: this.map.showCollisionBoxes
+      };
+      tile.workerID ??= this.dispatcher.nextWorkerId();
+      const data = await this.dispatcher.send('loadTile', params, tile.workerID);
+      data.rawTileData = rawData;
       tile.loadVectorData(data, this.map.painter);
-
-      callback(null);
-
-      if (tile.reloadCallback) {
-        this.loadTile(tile, tile.reloadCallback);
-        tile.reloadCallback = null;
+    } catch (err) {
+      if (tile.aborted) {
+        tile.state = 'unloaded';
+        return;
       }
+      tile.state = 'errored';
+      throw err;
     }
   }
 
   abortTile(tile) {
     tile.aborted = true;
     tile.abortController.abort();
-    this.dispatcher.send('abortTile', { uid: tile.uid, type: this.type, source: this.id }, undefined, tile.workerID);
   }
 
   unloadTile(tile) {
     tile.unloadVectorData();
-    this.dispatcher.send('removeTile', { uid: tile.uid, type: this.type, source: this.id }, undefined, tile.workerID);
   }
 
   hasTransition() {
     return false;
   }
-
-  updateWorkerConfig() {
-    this.dispatcher.broadcast('vector.updateConfig', {
-      source: this.id
-    });
-  }
 }
 
 module.exports = VectorTileSource;

package/src/source/vector_tile_worker_source.js

@@ -1,19 +1,18 @@
-const vt = require('@mapbox/vector-tile');
+const { VectorTile } = require('@mapbox/vector-tile');
 const Protobuf = require('@mapwhit/pbf');
 const WorkerTile = require('./worker_tile');
 
-function loadVectorTile(params, callback) {
+function loadVectorTile(params) {
   if (!params.response) {
-    return callback(new Error('no tile data'));
+    throw new Error('no tile data');
   }
   const { data } = params.response;
   if (!data) {
-    return callback();
+    return;
   }
-  callback(null, {
-    vectorTile: new vt.VectorTile(new Protobuf(data)),
-    rawData: data
-  });
+  return {
+    vectorTile: new VectorTile(new Protobuf(data))
+  };
 }
 
 /**
@@ -32,11 +31,10 @@ class VectorTileWorkerSource {
    * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
    * loads the pbf at `params.url`.
    */
-  constructor(actor, layerIndex, loadVectorData) {
+  constructor(actor, layerIndex, loadVectorData = loadVectorTile) {
     this.actor = actor;
     this.layerIndex = layerIndex;
-    this.loadVectorData = loadVectorData || loadVectorTile.bind(this);
-    this.loaded = {};
+    this.loadVectorData = loadVectorData;
   }
 
   /**
@@ -44,83 +42,20 @@ class VectorTileWorkerSource {
    * {@link VectorTileWorkerSource#loadVectorData} (which by default expects
    * a `params.url` property) for fetching and producing a VectorTile object.
    */
-  loadTile(params, callback) {
-    const uid = params.uid;
-
-    const workerTile = new WorkerTile(params);
-    this.loadVectorData(params, (err, response) => {
-      if (err || !response) {
-        return callback(err);
-      }
-
-      const rawTileData = response.rawData;
-      workerTile.vectorTile = response.vectorTile;
-      workerTile.parse(response.vectorTile, this.layerIndex, this.actor, (err, result) => {
-        if (err || !result) return callback(err);
-
-        // Transferring a copy of rawTileData because the worker needs to retain its copy.
-        callback(null, Object.assign({ rawTileData: rawTileData.slice(0) }, result));
-      });
-
-      this.loaded = this.loaded || {};
-      this.loaded[uid] = workerTile;
-    });
-  }
-
-  /**
-   * Implements {@link WorkerSource#reloadTile}.
-   */
-  reloadTile(params, callback) {
-    const loaded = this.loaded;
-    const uid = params.uid;
-    const vtSource = this;
-    if (loaded?.[uid]) {
-      const workerTile = loaded[uid];
-      workerTile.showCollisionBoxes = params.showCollisionBoxes;
-
-      const done = (err, data) => {
-        const reloadCallback = workerTile.reloadCallback;
-        if (reloadCallback) {
-          delete workerTile.reloadCallback;
-          workerTile.parse(workerTile.vectorTile, vtSource.layerIndex, vtSource.actor, reloadCallback);
-        }
-        callback(err, data);
-      };
-
-      if (workerTile.status === 'parsing') {
-        workerTile.reloadCallback = done;
-      } else if (workerTile.status === 'done') {
-        workerTile.parse(workerTile.vectorTile, this.layerIndex, this.actor, done);
-      }
+  async loadTile(params) {
+    const response = this.loadVectorData(params);
+    if (!response) {
+      return;
     }
-  }
-
-  /**
-   * Implements {@link WorkerSource#abortTile}.
-   *
-   * @param params
-   * @param params.uid The UID for this tile.
-   */
-  abortTile(params, callback) {
-    callback();
-  }
-
-  /**
-   * Implements {@link WorkerSource#removeTile}.
-   *
-   * @param params
-   * @param params.uid The UID for this tile.
-   */
-  removeTile(params, callback) {
-    const loaded = this.loaded;
-    const uid = params.uid;
-    if (loaded?.[uid]) {
-      delete loaded[uid];
+    const { vectorTile, rawData } = response;
+    const workerTile = new WorkerTile(params);
+    workerTile.vectorTile = vectorTile;
+    const result = await workerTile.parse(vectorTile, this.layerIndex, this.actor);
+    if (rawData) {
+      result.rawTileData = rawData;
     }
-    callback();
+    return result;
   }
-
-  updateConfig() {}
 }
 
 module.exports = VectorTileWorkerSource;