@mapwhit/tilerenderer 0.47.1 → 0.48.0

package/src/render/image_manager.js

@@ -22,10 +22,9 @@ const padding = 1;
     to refactor this.
 */
 class ImageManager {
+  #loadedState = Promise.withResolvers();
   constructor() {
     this.images = {};
-    this.loaded = false;
-    this.requestors = [];
 
     this.shelfPack = new ShelfPack(64, 64, { autoResize: true });
     this.patterns = {};
@@ -34,22 +33,15 @@ class ImageManager {
   }
 
   isLoaded() {
-    return this.loaded;
+    return !!this.#loadedState.loaded;
   }
 
-  setLoaded(loaded) {
-    if (this.loaded === loaded) {
+  setLoaded() {
+    if (this.#loadedState.loaded) {
       return;
     }
-
-    this.loaded = loaded;
-
-    if (loaded) {
-      for (const { ids, callback } of this.requestors) {
-        this._notify(ids, callback);
-      }
-      this.requestors = [];
-    }
+    this.#loadedState.loaded = true;
+    this.#loadedState.resolve();
   }
 
   getImage(id) {
@@ -76,29 +68,10 @@ class ImageManager {
     return Object.keys(this.images);
   }
 
-  getImages(ids, callback) {
-    // If the sprite has been loaded, or if all the icon dependencies are already present
-    // (i.e. if they've been addeded via runtime styling), then notify the requestor immediately.
-    // Otherwise, delay notification until the sprite is loaded. At that point, if any of the
-    // dependencies are still unavailable, we'll just assume they are permanently missing.
-    let hasAllDependencies = true;
-    if (!this.isLoaded()) {
-      for (const id of ids) {
-        if (!this.images[id]) {
-          hasAllDependencies = false;
-        }
-      }
-    }
-    if (this.isLoaded() || hasAllDependencies) {
-      this._notify(ids, callback);
-    } else {
-      this.requestors.push({ ids, callback });
-    }
-  }
+  async getImages(ids) {
+    await this.#loadedState.promise;
 
-  _notify(ids, callback) {
     const response = {};
-
     for (const id of ids) {
       const image = this.images[id];
       if (image) {
@@ -110,8 +83,7 @@ class ImageManager {
         };
       }
     }
-
-    callback(null, response);
+    return response;
   }
 
   // Pattern stuff

package/src/source/geojson_source.js

@@ -49,9 +49,10 @@ const browser = require('../util/browser');
  * @see [Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/)
  */
 class GeoJSONSource extends Evented {
-  /**
-   * @private
-   */
+  #pendingDataEvents = new Set();
+  #newData = false;
+  #updateInProgress = false;
+
   constructor(id, options, dispatcher, eventedParent) {
     super();
 
@@ -109,19 +110,7 @@ class GeoJSONSource extends Evented {
   }
 
   load() {
-    this.fire(new Event('dataloading', { dataType: 'source' }));
-    this._updateWorkerData(err => {
-      if (err) {
-        this.fire(new ErrorEvent(err));
-        return;
-      }
-
-      const data = { dataType: 'source', sourceDataType: 'metadata' };
-
-      // although GeoJSON sources contain no metadata, we fire this event to let the SourceCache
-      // know its ok to start requesting tiles.
-      this.fire(new Event('data', data));
-    });
+    this.#updateData('metadata');
   }
 
   onAdd(map) {
@@ -137,73 +126,55 @@ class GeoJSONSource extends Evented {
    */
   setData(data) {
     this._data = data;
-    this.fire(new Event('dataloading', { dataType: 'source' }));
-    this._updateWorkerData(err => {
-      if (err) {
-        return this.fire(new ErrorEvent(err));
-      }
-
-      const data = { dataType: 'source', sourceDataType: 'content' };
-      this.fire(new Event('data', data));
-    });
-
+    this.#updateData();
     return this;
   }
 
+  async #updateData(sourceDataType = 'content') {
+    this.#newData = true;
+    this.#pendingDataEvents.add(sourceDataType);
+    if (this.#updateInProgress) {
+      // will handle this update when the current one is done
+      return;
+    }
+    try {
+      this.#updateInProgress = true;
+      this.fire(new Event('dataloading', { dataType: 'source' }));
+      while (this.#newData) {
+        this.#newData = false;
+        await this._updateWorkerData(this._data);
+      }
+      this.#pendingDataEvents.forEach(sourceDataType =>
+        this.fire(new Event('data', { dataType: 'source', sourceDataType }))
+      );
+      this.#pendingDataEvents.clear();
+    } catch (err) {
+      this.fire(new ErrorEvent(err));
+    } finally {
+      this.#updateInProgress = false;
+    }
+  }
+
   /*
    * Responsible for invoking WorkerSource's geojson.loadData target, which
    * handles loading the geojson data and preparing to serve it up as tiles,
    * using geojson-vt or supercluster as appropriate.
    */
-  _updateWorkerData(callback) {
-    // biome-ignore lint/suspicious/useAwait: normalize return values as promises
-    async function loadGeoJSON(data) {
-      if (typeof data === 'function') {
-        return data();
-      }
-      return data;
+  async _updateWorkerData(data) {
+    const json = typeof data === 'function' ? await data().catch(() => {}) : data;
+    if (!json) {
+      throw new Error('no GeoJSON data');
     }
+    const options = { ...this.workerOptions, data: JSON.stringify(json) };
+    this.workerID ??= this.dispatcher.nextWorkerId();
 
-    const data = this._data;
-    loadGeoJSON(data)
-      .catch(() => {})
-      .then(json => {
-        if (!json) {
-          return callback(new Error('no GeoJSON data'));
-        }
-        const options = Object.assign({}, this.workerOptions);
-        options.data = JSON.stringify(json);
-        // target {this.type}.loadData rather than literally geojson.loadData,
-        // so that other geojson-like source types can easily reuse this
-        // implementation
-        this.workerID = this.dispatcher.send(
-          `${this.type}.loadData`,
-          options,
-          (err, result) => {
-            if (this._removed || result?.abandoned) {
-              return;
-            }
-
-            this._loaded = true;
-
-            if (result?.resourceTiming?.[this.id]) this._resourceTiming = result.resourceTiming[this.id].slice(0);
-            // Any `loadData` calls that piled up while we were processing
-            // this one will get coalesced into a single call when this
-            // 'coalesce' message is processed.
-            // We would self-send from the worker if we had access to its
-            // message queue. Waiting instead for the 'coalesce' to round-trip
-            // through the foreground just means we're throttling the worker
-            // to run at a little less than full-throttle.
-            this.dispatcher.send(`${this.type}.coalesce`, { source: options.source }, null, this.workerID);
-            callback(err);
-          },
-          this.workerID
-        );
-      });
+    // target {this.type}.loadData rather than literally geojson.loadData,
+    // so that other geojson-like source types can easily reuse this
+    // implementation
+    await this.dispatcher.send(`${this.type}.loadData`, options, this.workerID);
   }
 
-  loadTile(tile, callback) {
-    const message = tile.workerID === undefined ? 'loadTile' : 'reloadTile';
+  async loadTile(tile) {
     const params = {
       type: this.type,
       uid: tile.uid,
@@ -216,26 +187,12 @@ class GeoJSONSource extends Evented {
       showCollisionBoxes: this.map.showCollisionBoxes
     };
 
-    tile.workerID = this.dispatcher.send(
-      message,
-      params,
-      (err, data) => {
-        tile.unloadVectorData();
-
-        if (tile.aborted) {
-          return callback(null);
-        }
-
-        if (err) {
-          return callback(err);
-        }
-
-        tile.loadVectorData(data, this.map.painter, message === 'reloadTile');
-
-        return callback(null);
-      },
-      this.workerID
-    );
+    const justReloaded = tile.workerID != null;
+    tile.workerID ??= this.dispatcher.nextWorkerId(this.workerID);
+    const data = await this.dispatcher.send('loadTile', params, tile.workerID).finally(() => tile.unloadVectorData());
+    if (!tile.aborted) {
+      tile.loadVectorData(data, this.map.painter, justReloaded);
+    }
   }
 
   abortTile(tile) {
@@ -244,12 +201,11 @@ class GeoJSONSource extends Evented {
 
   unloadTile(tile) {
     tile.unloadVectorData();
-    this.dispatcher.send('removeTile', { uid: tile.uid, type: this.type, source: this.id }, null, tile.workerID);
   }
 
   onRemove() {
     this._removed = true;
-    this.dispatcher.send('removeSource', { type: this.type, source: this.id }, null, this.workerID);
+    return this.dispatcher.send('removeSource', { type: this.type, source: this.id }, this.workerID);
   }
 
   serialize() {

package/src/source/geojson_worker_source.js

@@ -3,19 +3,25 @@ const GeoJSONWrapper = require('./geojson_wrapper');
 const vtpbf = require('@mapwhit/vt-pbf');
 const supercluster = require('supercluster');
 const geojsonvt = require('geojson-vt');
-const assert = require('assert');
 const VectorTileWorkerSource = require('./vector_tile_worker_source');
 
-function loadGeoJSONTile(params, callback) {
-  const canonical = params.tileID.canonical;
-
+function loadGeoJSONTile(params) {
   if (!this._geoJSONIndex) {
-    return callback(null, null); // we couldn't load the file
+    if (!this._createGeoJSONIndex) {
+      return; // we couldn't load the file
+    }
+
+    try {
+      this._geoJSONIndex = this._createGeoJSONIndex();
+    } finally {
+      this._createGeoJSONIndex = null;
+    }
   }
 
-  const geoJSONTile = this._geoJSONIndex.getTile(canonical.z, canonical.x, canonical.y);
+  const { z, x, y } = params.tileID.canonical;
+  const geoJSONTile = this._geoJSONIndex.getTile(z, x, y);
   if (!geoJSONTile) {
-    return callback(null, null); // nothing in the given tile
+    return; // nothing in the given tile
   }
 
   const geojsonWrapper = new GeoJSONWrapper(geoJSONTile.features);
@@ -29,14 +35,12 @@ function loadGeoJSONTile(params, callback) {
     pbf = new Uint8Array(pbf);
   }
 
-  callback(null, {
+  return {
     vectorTile: geojsonWrapper,
     rawData: pbf.buffer
-  });
+  };
 }
 
-// 'loadData' received while coalescing, trigger one more 'loadData' on receiving 'coalesced'
-
 /**
  * The {@link WorkerSource} implementation that supports {@link GeoJSONSource}.
  * This class is designed to be easily reused to support custom source types
@@ -45,7 +49,6 @@ function loadGeoJSONTile(params, callback) {
  * `new GeoJSONWorkerSource(actor, layerIndex, customLoadGeoJSONFunction)`.
  * For a full example, see [mapbox-gl-topojson](https://github.com/developmentseed/mapbox-gl-topojson).
  *
- * @private
  */
 class GeoJSONWorkerSource extends VectorTileWorkerSource {
   /**
@@ -69,141 +72,37 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
    * expecting `callback(error, data)` to be called with either an error or a
    * parsed GeoJSON object.
    *
-   * When `loadData` requests come in faster than they can be processed,
-   * they are coalesced into a single request using the latest data.
-   * See {@link GeoJSONWorkerSource#coalesce}
-   *
    * @param params
    * @param callback
    */
-  loadData(params, callback) {
-    if (this._pendingCallback) {
-      // Tell the foreground the previous call has been abandoned
-      this._pendingCallback(null, { abandoned: true });
-    }
-    this._pendingCallback = callback;
-    this._pendingLoadDataParams = params;
-
-    if (this._state && this._state !== 'Idle') {
-      this._state = 'NeedsLoadData';
-    } else {
-      this._state = 'Coalescing';
-      this._loadData();
-    }
-  }
-
-  /**
-   * Internal implementation: called directly by `loadData`
-   * or by `coalesce` using stored parameters.
-   */
-  _loadData() {
-    if (!this._pendingCallback || !this._pendingLoadDataParams) {
-      assert(false);
-      return;
-    }
-    const callback = this._pendingCallback;
-    const params = this._pendingLoadDataParams;
-    delete this._pendingCallback;
-    delete this._pendingLoadDataParams;
-    this.loadGeoJSON(params, (err, data) => {
-      if (err || !data) {
-        return callback(err);
-      }
-      if (typeof data !== 'object') {
-        return callback(new Error('Input data is not a valid GeoJSON object.'));
-      }
-      rewind(data, true);
-
-      try {
-        this._geoJSONIndex = params.cluster
-          ? supercluster(params.superclusterOptions).load(data.features)
-          : geojsonvt(data, params.geojsonVtOptions);
-      } catch (err) {
-        return callback(err);
-      }
-
-      this.loaded = {};
-
-      const result = {};
-      callback(null, result);
-    });
+  loadData(params) {
+    const data = this.loadGeoJSON(params);
+    this._geoJSONIndex = null;
+    this._createGeoJSONIndex = params.cluster
+      ? () => {
+          rewind(data, true);
+          return supercluster(params.superclusterOptions).load(data.features);
+        }
+      : () => {
+          rewind(data, true);
+          return geojsonvt(data, params.geojsonVtOptions);
+        };
   }
 
   /**
-   * While processing `loadData`, we coalesce all further
-   * `loadData` messages into a single call to _loadData
-   * that will happen once we've finished processing the
-   * first message. {@link GeoJSONSource#_updateWorkerData}
-   * is responsible for sending us the `coalesce` message
-   * at the time it receives a response from `loadData`
-   *
-   *          State: Idle
-   *          ↑          |
-   *     'coalesce'   'loadData'
-   *          |     (triggers load)
-   *          |          ↓
-   *        State: Coalescing
-   *          ↑          |
-   *   (triggers load)   |
-   *     'coalesce'   'loadData'
-   *          |          ↓
-   *        State: NeedsLoadData
-   */
-  coalesce() {
-    if (this._state === 'Coalescing') {
-      this._state = 'Idle';
-    } else if (this._state === 'NeedsLoadData') {
-      this._state = 'Coalescing';
-      this._loadData();
-    }
-  }
-
-  /**
-   * Implements {@link WorkerSource#reloadTile}.
-   *
-   * If the tile is loaded, uses the implementation in VectorTileWorkerSource.
-   * Otherwise, such as after a setData() call, we load the tile fresh.
-   *
-   * @param params
-   * @param params.uid The UID for this tile.
-   */
-  reloadTile(params, callback) {
-    const loaded = this.loaded;
-    const uid = params.uid;
-
-    if (loaded?.[uid]) {
-      return super.reloadTile(params, callback);
-    }
-    return this.loadTile(params, callback);
-  }
-
-  /**
-   * Fetch and parse GeoJSON according to the given params.  Calls `callback`
-   * with `(err, data)`, where `data` is a parsed GeoJSON object.
+   * Fetch and parse GeoJSON according to the given params.
    *
    * GeoJSON is expected as a literal (string or object) `params.data`.
    *
    * @param params
    * @param [params.data] Literal GeoJSON data. Must be provided.
    */
-  loadGeoJSON(params, callback) {
-    if (typeof params.data === 'string') {
-      try {
-        return callback(null, JSON.parse(params.data));
-      } catch (e) {
-        return callback(new Error('Input data is not a valid GeoJSON object.'));
-      }
-    } else {
-      return callback(new Error('Input data is not a valid GeoJSON object.'));
-    }
-  }
-
-  removeSource(params, callback) {
-    if (this._pendingCallback) {
-      // Don't leak callbacks
-      this._pendingCallback(null, { abandoned: true });
+  loadGeoJSON(params) {
+    try {
+      return JSON.parse(params.data);
+    } catch (e) {
+      throw new Error('Input data is not a valid GeoJSON object.');
     }
-    callback();
   }
 }
 

package/src/source/image_source.js

@@ -61,19 +61,15 @@ class ImageSource extends Evented {
     this.options = options;
   }
 
-  load() {
+  async load() {
     this.fire(new Event('dataloading', { dataType: 'source' }));
-
     this.url = this.options.url;
-
-    loadImage(this.url, (err, image) => {
-      if (err) {
-        this.fire(new ErrorEvent(err));
-      } else if (image) {
-        this.image = image;
-        this._finishLoading();
-      }
-    });
+    try {
+      this.image = await loadImage(this.url);
+      this._finishLoading();
+    } catch (err) {
+      this.fire(new ErrorEvent(err));
+    }
   }
 
   _finishLoading() {
@@ -180,7 +176,7 @@ class ImageSource extends Evented {
     }
   }
 
-  loadTile(tile, callback) {
+  loadTile(tile) {
     // We have a single tile -- whoose coordinates are this.tileID -- that
     // covers the image we want to render.  If that's the one being
     // requested, set it up with the image; otherwise, mark the tile as
@@ -190,11 +186,10 @@ class ImageSource extends Evented {
     if (this.tileID?.equals(tile.tileID.canonical)) {
       this.tiles[String(tile.tileID.wrap)] = tile;
       tile.buckets = {};
-      callback(null);
     } else {
       tile.state = 'errored';
-      callback(null);
     }
+    return Promise.resolve();
   }
 
   serialize() {

package/src/source/load_tilejson.js

@@ -1,40 +1,33 @@
 const { pick } = require('../util/object');
-const browser = require('../util/browser');
 
-module.exports = function (options, callback) {
-  function loaded(err, tileJSON) {
-    if (err) return callback(err);
-    if (tileJSON) {
-      const { resourceSets } = tileJSON;
-      if (resourceSets) {
-        if (!resourceSets.length) {
-          return callback('expected resources');
-        }
-        const { resources } = resourceSets[0];
-        if (!resources?.length) {
-          return callback('expected resources');
-        }
-        const { imageUrl, imageUrlSubdomains } = resources[0];
-        const result = Object.assign(
-          {
-            tiles: imageUrlSubdomains.map(sub => imageUrl.replace('{subdomain}', sub).replace('http:', 'https:'))
-          },
-          options
-        );
-        delete result.url;
-        return callback(null, result);
-      }
-      const result = pick(tileJSON, ['tiles', 'minzoom', 'maxzoom', 'attribution', 'mapbox_logo', 'bounds']);
-
-      if (tileJSON.vector_layers) {
-        result.vectorLayers = tileJSON.vector_layers;
-        result.vectorLayerIds = result.vectorLayers.map(layer => layer.id);
-      }
+module.exports = function (tileJSON) {
+  return tileJSON.resourceSets ? fromResourseSets(tileJSON) : fromTileJSON(tileJSON);
+};
 
-      callback(null, result);
-    }
+function fromTileJSON(tileJSON) {
+  const result = pick(tileJSON, ['tiles', 'minzoom', 'maxzoom', 'attribution', 'bounds']);
+  if (tileJSON.vector_layers) {
+    result.vectorLayers = tileJSON.vector_layers;
+    result.vectorLayerIds = result.vectorLayers.map(layer => layer.id);
   }
+  return result;
+}
 
+function fromResourseSets(tileJSON) {
+  const { resourceSets } = tileJSON;
+  if (!resourceSets.length) {
+    throw new Error('expected resources');
+  }
+  const { resources } = resourceSets[0];
+  if (!resources?.length) {
+    throw new Error('expected resources');
+  }
+  const { imageUrl, imageUrlSubdomains } = resources[0];
+  const result = {
+    tiles: imageUrlSubdomains.map(sub => imageUrl.replace('{subdomain}', sub).replace('http:', 'https:')),
+    ...tileJSON
+  };
   // expects already loaded object, `url` property is ignored
-  browser.frame(() => loaded(null, options));
-};
+  delete result.url;
+  return result;
+}