@mapwhit/tilerenderer 0.47.1 → 0.48.0

package/src/source/raster_dem_tile_source.js

@@ -25,56 +25,44 @@ class RasterDEMTileSource extends RasterTileSource {
     };
   }
 
-  loadTile(tile, callback) {
-    const done = (err, dem) => {
-      if (err) {
-        tile.state = 'errored';
-        callback(err);
+  async loadTile(tile) {
+    try {
+      tile.abortController = new window.AbortController();
+      const data = await this.tiles(tile.tileID.canonical, tile.abortController).catch(() => {});
+      tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
+      if (!data) {
+        const err = new Error('Tile could not be loaded');
+        err.status = 404; // will try to use the parent/child tile
+        throw err;
       }
-
-      if (dem) {
-        tile.dem = dem;
-        tile.needsHillshadePrepare = true;
-        tile.state = 'loaded';
-        callback(null);
+      const img = await loadImage(data);
+      if (!img) {
+        return;
       }
-    };
-    const imageLoaded = (err, img) => {
-      delete tile.request;
-      if (tile.aborted) {
-        tile.state = 'unloaded';
-        callback(null);
-      } else if (err) {
-        tile.state = 'errored';
-        callback(err);
-      } else if (img) {
+      if (!tile.dem) {
         const rawImageData = browser.getImageData(img);
         const params = {
           uid: tile.uid,
           coord: tile.tileID,
           source: this.id,
-          rawImageData: rawImageData,
+          rawImageData,
           encoding: this.encoding
         };
-
-        if (!tile.workerID || tile.state === 'expired') {
-          tile.workerID = this.dispatcher.send('loadDEMTile', params, done);
+        const dem = await this.dispatcher.send('loadDEMTile', params);
+        if (dem) {
+          tile.dem = dem;
+          tile.needsHillshadePrepare = true;
+          tile.state = 'loaded';
         }
       }
-    };
-
-    tile.abortController = new window.AbortController();
-    this.tiles(tile.tileID.canonical, tile.abortController)
-      .catch(() => {})
-      .then(data => {
-        tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
-        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, imageLoaded);
-      });
+    } catch (err) {
+      if (tile.aborted) {
+        tile.state = 'unloaded';
+        return;
+      }
+      tile.state = 'errored';
+      throw err;
+    }
   }
 
   _getNeighboringTiles(tileID) {
@@ -133,7 +121,6 @@ class RasterDEMTileSource extends RasterTileSource {
     delete tile.neighboringTiles;
 
     tile.state = 'unloaded';
-    this.dispatcher.send('removeDEMTile', { uid: tile.uid, source: this.id }, undefined, tile.workerID);
   }
 }
 

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
@@ -46,6 +47,7 @@ function setRTLTextPlugin(url, callback) {
 const plugin = {
   applyArabicShaping: null,
   processBidirectionalText: null,
+  processStyledBidirectionalText: null,
   isLoaded: function () {
     return (
       foregroundLoadComplete || // Foreground: loaded if the completion callback returned successfully

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) {
@@ -183,7 +181,7 @@ class SourceCache extends Evented {
     this._cache.reset();
 
     for (const i in this._tiles) {
-      this._reloadTile(i, 'reloading');
+      if (this._tiles[i].state !== 'errored') this._reloadTile(i, 'reloading');
     }
   }
 
@@ -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.js

@@ -101,8 +101,9 @@ class Tile {
     }
 
     this.queryPadding = 0;
-    for (const bucket of buckets) {
-      this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(bucket.layerIds[0]).queryRadius(bucket));
+    for (const id in this.buckets) {
+      const bucket = this.buckets[id];
+      this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(id).queryRadius(bucket));
     }
 
     if (data.imageAtlas) {
@@ -297,8 +298,8 @@ class Tile {
 
     const vtLayers = this.latestFeatureIndex.loadVTLayers();
 
-    for (const i in this.buckets) {
-      const bucket = this.buckets[i];
+    for (const id in this.buckets) {
+      const bucket = this.buckets[id];
       // Buckets are grouped by common source-layer
       const sourceLayerId = bucket.layers[0]['sourceLayer'] || '_geojsonTileLayer';
       const sourceLayer = vtLayers[sourceLayerId];
@@ -307,7 +308,7 @@ class Tile {
 
       bucket.update(sourceLayerStates, sourceLayer, this.imageAtlas?.patternPositions || {});
       if (painter?.style) {
-        this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(bucket.layerIds[0]).queryRadius(bucket));
+        this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(id).queryRadius(bucket));
       }
     }
   }

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;