@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/source/query_features.js

@@ -1,11 +1,7 @@
-const assert = require('assert');
-const { mat4 } = require('@mapbox/gl-matrix');
+import glMatrix from '@mapbox/gl-matrix';
+import assert from 'assert';
 
-module.exports = {
-  queryRenderedFeatures,
-  queryRenderedSymbols,
-  querySourceFeatures
-};
+const { mat4 } = glMatrix;
 
 /*
  * Returns a matrix that can be used to convert from tile coordinates to viewport pixel coordinates.
@@ -20,14 +16,13 @@ function getPixelPosMatrix(transform, tileID) {
 function queryIncludes3DLayer(layers, styleLayers, sourceID) {
   if (layers) {
     for (const layerID of layers) {
-      const layer = styleLayers[layerID];
+      const layer = styleLayers.get(layerID);
       if (layer && layer.source === sourceID && layer.type === 'fill-extrusion') {
         return true;
       }
     }
-  } else {
-    for (const key in styleLayers) {
-      const layer = styleLayers[key];
+  } else if (styleLayers) {
+    for (const layer of styleLayers.values()) {
       if (layer.source === sourceID && layer.type === 'fill-extrusion') {
         return true;
       }
@@ -36,7 +31,7 @@ function queryIncludes3DLayer(layers, styleLayers, sourceID) {
   return false;
 }
 
-function queryRenderedFeatures(sourceCache, styleLayers, queryGeometry, params, transform) {
+export function queryRenderedFeatures(sourceCache, styleLayers, queryGeometry, params, transform) {
   const has3DLayer = queryIncludes3DLayer(params?.layers, styleLayers, sourceCache.id);
   const maxPitchScaleFactor = transform.maxPitchScaleFactor();
   const tilesIn = sourceCache.tilesIn(queryGeometry, maxPitchScaleFactor, has3DLayer);
@@ -78,7 +73,14 @@ function queryRenderedFeatures(sourceCache, styleLayers, queryGeometry, params,
   return result;
 }
 
-function queryRenderedSymbols(styleLayers, sourceCaches, queryGeometry, params, collisionIndex, retainedQueryData) {
+export function queryRenderedSymbols(
+  styleLayers,
+  sourceCaches,
+  queryGeometry,
+  params,
+  collisionIndex,
+  retainedQueryData
+) {
   const result = {};
   const renderedSymbols = collisionIndex.queryRenderedSymbols(queryGeometry);
   const bucketQueryData = [];
@@ -129,7 +131,7 @@ function queryRenderedSymbols(styleLayers, sourceCaches, queryGeometry, params,
   for (const layerName in result) {
     result[layerName].forEach(featureWrapper => {
       const feature = featureWrapper.feature;
-      const layer = styleLayers[layerName];
+      const layer = styleLayers.get(layerName);
       const sourceCache = sourceCaches[layer.source];
       const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
       feature.source = feature.layer.source;
@@ -142,7 +144,7 @@ function queryRenderedSymbols(styleLayers, sourceCaches, queryGeometry, params,
   return result;
 }
 
-function querySourceFeatures(sourceCache, params) {
+export function querySourceFeatures(sourceCache, params) {
   const tiles = sourceCache.getRenderableIds().map(id => {
     return sourceCache.getTileByID(id);
   });

package/src/source/raster_dem_tile_source.js

@@ -1,35 +1,23 @@
-const browser = require('../util/browser');
-const loadImage = require('../util/loader/image');
-const { OverscaledTileID } = require('./tile_id');
-const RasterTileSource = require('./raster_tile_source');
-// ensure DEMData is registered for worker transfer on main thread:
-require('../data/dem_data');
+import DEMData from '../data/dem_data.js';
+import browser from '../util/browser.js';
+import loadImage from '../util/loader/image.js';
+import RasterTileSource from './raster_tile_source.js';
+import { calculateKey } from './tile_id.js';
 
-class RasterDEMTileSource extends RasterTileSource {
-  constructor(id, options, dispatcher, eventedParent) {
-    super(id, options, dispatcher, eventedParent);
+export default class RasterDEMTileSource extends RasterTileSource {
+  constructor(id, options, eventedParent) {
+    super(id, options, eventedParent);
     this.type = 'raster-dem';
     this.maxzoom = 22;
     this._options = Object.assign({}, options);
     this.encoding = options.encoding || 'mapbox';
   }
 
-  serialize() {
-    return {
-      type: 'raster-dem',
-      url: this.url,
-      tileSize: this.tileSize,
-      tiles: this.tiles,
-      bounds: this.bounds,
-      encoding: this.encoding
-    };
-  }
-
   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);
+      tile.neighboringTiles = 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
@@ -48,7 +36,7 @@ class RasterDEMTileSource extends RasterTileSource {
           rawImageData,
           encoding: this.encoding
         };
-        const dem = await this.dispatcher.send('loadDEMTile', params);
+        const dem = await loadDEMTile(params);
         if (dem) {
           tile.dem = dem;
           tile.needsHillshadePrepare = true;
@@ -65,63 +53,58 @@ class RasterDEMTileSource extends RasterTileSource {
     }
   }
 
-  _getNeighboringTiles(tileID) {
-    const canonical = tileID.canonical;
-    const dim = 2 ** canonical.z;
-
-    const px = (canonical.x - 1 + dim) % dim;
-    const pxw = canonical.x === 0 ? tileID.wrap - 1 : tileID.wrap;
-    const nx = (canonical.x + 1 + dim) % dim;
-    const nxw = canonical.x + 1 === dim ? tileID.wrap + 1 : tileID.wrap;
-
-    const neighboringTiles = {};
-    // add adjacent tiles
-    neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y).key] = {
-      backfilled: false
-    };
-    neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y).key] = {
-      backfilled: false
-    };
-
-    // Add upper neighboringTiles
-    if (canonical.y > 0) {
-      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y - 1).key] = {
-        backfilled: false
-      };
-      neighboringTiles[
-        new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y - 1).key
-      ] = { backfilled: false };
-      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y - 1).key] = {
-        backfilled: false
-      };
-    }
-    // Add lower neighboringTiles
-    if (canonical.y + 1 < dim) {
-      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y + 1).key] = {
-        backfilled: false
-      };
-      neighboringTiles[
-        new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y + 1).key
-      ] = { backfilled: false };
-      neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y + 1).key] = {
-        backfilled: false
-      };
-    }
-
-    return neighboringTiles;
-  }
-
   unloadTile(tile) {
-    if (tile.demTexture) this.map.painter.saveTileTexture(tile.demTexture);
+    if (tile.demTexture) {
+      this.map.painter.saveTileTexture(tile.demTexture);
+    }
     if (tile.fbo) {
       tile.fbo.destroy();
       delete tile.fbo;
     }
-    if (tile.dem) delete tile.dem;
+    if (tile.dem) {
+      delete tile.dem;
+    }
     delete tile.neighboringTiles;
 
     tile.state = 'unloaded';
   }
 }
 
-module.exports = RasterDEMTileSource;
+// biome-ignore lint/suspicious/useAwait: thread
+async function loadDEMTile({ uid, rawImageData, encoding }) {
+  return new DEMData(uid, rawImageData, encoding);
+}
+
+function getNeighboringTiles(tileID) {
+  const {
+    canonical: { x, y, z },
+    wrap,
+    overscaledZ
+  } = tileID;
+  const dim = 2 ** z;
+  const px = (x - 1 + dim) % dim;
+  const pxw = x === 0 ? wrap - 1 : wrap;
+  const nx = (x + 1 + dim) % dim;
+  const nxw = x + 1 === dim ? wrap + 1 : wrap;
+
+  const neighboringTiles = {
+    // add adjacent tiles
+    [calculateKey(pxw, overscaledZ, px, y)]: { backfilled: false },
+    [calculateKey(nxw, overscaledZ, nx, y)]: { backfilled: false }
+  };
+
+  // Add upper neighboringTiles
+  if (y > 0) {
+    neighboringTiles[calculateKey(pxw, overscaledZ, px, y - 1)] = { backfilled: false };
+    neighboringTiles[calculateKey(wrap, overscaledZ, x, y - 1)] = { backfilled: false };
+    neighboringTiles[calculateKey(nxw, overscaledZ, nx, y - 1)] = { backfilled: false };
+  }
+  // Add lower neighboringTiles
+  if (y + 1 < dim) {
+    neighboringTiles[calculateKey(pxw, overscaledZ, px, y + 1)] = { backfilled: false };
+    neighboringTiles[calculateKey(wrap, overscaledZ, x, y + 1)] = { backfilled: false };
+    neighboringTiles[calculateKey(nxw, overscaledZ, nx, y + 1)] = { backfilled: false };
+  }
+
+  return neighboringTiles;
+}

package/src/source/raster_tile_source.js

@@ -1,15 +1,14 @@
-const { pick } = require('../util/object');
-const loadImage = require('../util/loader/image');
-const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
-const loadTileJSON = require('./load_tilejson');
-const TileBounds = require('./tile_bounds');
-const Texture = require('../render/texture');
+import { ErrorEvent, Event, Evented } from '@mapwhit/events';
+import Texture from '../render/texture.js';
+import loadImage from '../util/loader/image.js';
+import { pick } from '../util/object.js';
+import loadTileJSON from './load_tilejson.js';
+import TileBounds from './tile_bounds.js';
 
 class RasterTileSource extends Evented {
-  constructor(id, options, dispatcher, eventedParent) {
+  constructor(id, options, eventedParent) {
     super();
     this.id = id;
-    this.dispatcher = dispatcher;
     this.setEventedParent(eventedParent);
 
     this.type = 'raster';
@@ -29,7 +28,9 @@ class RasterTileSource extends Evented {
     try {
       const tileJSON = await loadTileJSON(this._options);
       Object.assign(this, tileJSON);
-      if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+      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
@@ -46,10 +47,6 @@ class RasterTileSource extends Evented {
     this.load();
   }
 
-  serialize() {
-    return Object.assign({}, this._options);
-  }
-
   hasTile(tileID) {
     return !this.tileBounds || this.tileBounds.contains(tileID.canonical);
   }
@@ -106,7 +103,9 @@ class RasterTileSource extends Evented {
   }
 
   unloadTile(tile) {
-    if (tile.texture) this.map.painter.saveTileTexture(tile.texture);
+    if (tile.texture) {
+      this.map.painter.saveTileTexture(tile.texture);
+    }
   }
 
   hasTransition() {
@@ -114,4 +113,4 @@ class RasterTileSource extends Evented {
   }
 }
 
-module.exports = RasterTileSource;
+export default RasterTileSource;

package/src/source/resources/glyphs.js

@@ -1,10 +1,9 @@
-const parseGlyphPBF = require('../../style/parse_glyph_pbf');
-
-module.exports = glyphCache;
+import parseGlyphPBF from '../../style/parse_glyph_pbf.js';
+export default glyphCache;
 
 const MAX_GLYPH_ID = 65535;
 
-function glyphCache({ actor, mapId, parseGlyphs = parseGlyphPBF }) {
+function glyphCache({ loadGlyphRange: loadGlyphRangeFromStyle, parseGlyphs = parseGlyphPBF }) {
   const entries = {};
 
   return {
@@ -56,7 +55,7 @@ function glyphCache({ actor, mapId, parseGlyphs = parseGlyphPBF }) {
   }
 
   async function loadGlyphRange(entry, stack, range) {
-    const promise = (entry.requests[range] ??= actor.send('loadGlyphRange', { stack, range }, mapId));
+    const promise = (entry.requests[range] ??= loadGlyphRangeFromStyle({ stack, range }));
     const data = await promise;
     delete entry.requests[range];
     entry.ranges[range] = true;

package/src/source/resources/index.js

@@ -1,22 +1,14 @@
-const makeGlyphs = require('./glyphs');
-const makeImages = require('./images');
+import makeGlyphs from './glyphs.js';
 
-module.exports = { resources };
-
-function resources(actor, mapId) {
-  const glyphs = makeGlyphs({ actor, mapId });
-  const images = makeImages({ actor, mapId });
+export function resources(opts) {
+  const glyphs = makeGlyphs(opts);
 
   return {
     getGlyphs,
-    getImages
+    getImages: opts.getImages
   };
 
   function getGlyphs(params) {
     return glyphs.getGlyphs(params);
   }
-
-  function getImages(params) {
-    return images.getImages(params);
-  }
 }

package/src/source/rtl_text_plugin.js

@@ -1,29 +1,37 @@
-const { Event, Evented } = require('@mapwhit/events');
-const browser = require('../util/browser');
+import dynload from 'dynload';
+import browser from '../util/browser.js';
 
 let pluginRequested = false;
-let pluginURL = null;
-let foregroundLoadComplete = false;
-
-const evented = new Evented();
+let pluginURL;
+let loading = false;
 
 let _completionCallback;
+const _loadedCallbacks = [];
 
-function registerForPluginAvailability(callback) {
-  if (pluginURL) {
-    callback({ pluginURL: pluginURL, completionCallback: _completionCallback });
-  } else {
-    evented.once('pluginAvailable', callback);
+const rtlPlugin = {
+  clearRTLTextPlugin, // exported for testing
+  loadScript, // exported for testing
+  registerForPluginAvailability,
+  setRTLTextPlugin
+};
+
+export function registerForPluginAvailability(callback) {
+  if (plugin.isLoaded()) {
+    callback();
+    return;
   }
-  return callback;
+  _loadedCallbacks.push(callback);
+  loadRTLTextPlugin();
+  return () => _loadedCallbacks.splice(_loadedCallbacks.indexOf(callback), 1);
 }
 
-function clearRTLTextPlugin() {
+export function clearRTLTextPlugin() {
+  _loadedCallbacks.length = 0;
   pluginRequested = false;
-  pluginURL = null;
+  pluginURL = undefined;
 }
 
-function setRTLTextPlugin(url, callback) {
+export function setRTLTextPlugin(url, callback) {
   if (pluginRequested) {
     throw new Error('setRTLTextPlugin cannot be called multiple times.');
   }
@@ -31,35 +39,54 @@ function setRTLTextPlugin(url, callback) {
   pluginURL = browser.resolveURL(url);
   _completionCallback = error => {
     if (error) {
+      const msg = `RTL Text Plugin failed to load scripts from ${pluginURL}`;
       // Clear loaded state to allow retries
       clearRTLTextPlugin();
       if (callback) {
-        callback(error);
+        callback(new Error(msg));
       }
-    } else {
-      // Called once for each worker
-      foregroundLoadComplete = true;
     }
+    loading = false;
+    _completionCallback = undefined;
   };
-  evented.fire(new Event('pluginAvailable', { pluginURL: pluginURL, completionCallback: _completionCallback }));
+  loadRTLTextPlugin();
+}
+
+function loadRTLTextPlugin() {
+  if (pluginURL && !plugin.isLoaded() && _loadedCallbacks.length > 0 && !loading) {
+    // needs to be called as exported method for mock testing
+    loading = rtlPlugin.loadScript(pluginURL).catch(_completionCallback);
+  }
+}
+
+function registerRTLTextPlugin(loadedPlugin) {
+  if (plugin.isLoaded()) {
+    throw new Error('RTL text plugin already registered.');
+  }
+  plugin['applyArabicShaping'] = loadedPlugin.applyArabicShaping;
+  plugin['processBidirectionalText'] = loadedPlugin.processBidirectionalText;
+  plugin['processStyledBidirectionalText'] = loadedPlugin.processStyledBidirectionalText;
+
+  _completionCallback();
+  _loadedCallbacks.forEach(callback => callback());
+  _loadedCallbacks.length = 0;
+}
+
+globalThis.registerRTLTextPlugin ??= registerRTLTextPlugin;
+
+function loadScript(url) {
+  const { promise, resolve, reject } = Promise.withResolvers();
+  const s = dynload(url);
+  s.onload = () => resolve();
+  s.onerror = () => reject(true);
+  return promise;
 }
 
-const plugin = {
+export const plugin = (rtlPlugin.plugin = {
   applyArabicShaping: null,
   processBidirectionalText: null,
   processStyledBidirectionalText: null,
-  isLoaded: function () {
-    return (
-      foregroundLoadComplete || // Foreground: loaded if the completion callback returned successfully
-      plugin.applyArabicShaping != null
-    ); // Background: loaded if the plugin functions have been compiled
-  }
-};
+  isLoaded: () => plugin.applyArabicShaping != null
+});
 
-module.exports = {
-  registerForPluginAvailability,
-  clearRTLTextPlugin,
-  setRTLTextPlugin,
-  plugin,
-  evented
-};
+export default rtlPlugin;

package/src/source/source.js

@@ -1,4 +1,4 @@
-const { bindAll } = require('../util/object');
+import { bindAll } from '../util/object.js';
 
 /**
  * The `Source` interface must be implemented by each source type, including "core" types (`vector`, `raster`,
@@ -10,7 +10,6 @@ const { bindAll } = require('../util/object');
  * @param {Object} options Source options, specific to the source type (except for `options.type`, which is always
  * required).
  * @param {string} options.type The source type, matching the value of `name` used in {@link Style#addSourceType}.
- * @param {Dispatcher} dispatcher A {@link Dispatcher} instance, which can be used to send messages to the workers.
  *
  * @fires data with `{dataType: 'source', sourceDataType: 'metadata'}` to indicate that any necessary metadata
  * has been loaded so that it's okay to call `loadTile`; and with `{dataType: 'source', sourceDataType: 'content'}`
@@ -25,11 +24,11 @@ const { bindAll } = require('../util/object');
  * if they are floor-ed to the nearest integer.
  */
 
-const vector = require('../source/vector_tile_source');
-const raster = require('../source/raster_tile_source');
-const rasterDem = require('../source/raster_dem_tile_source');
-const geojson = require('../source/geojson_source');
-const image = require('../source/image_source');
+import geojson from './geojson_source.js';
+import image from './image_source.js';
+import rasterDem from './raster_dem_tile_source.js';
+import raster from './raster_tile_source.js';
+import vector from './vector_tile_source.js';
 
 const sourceTypes = {
   vector,
@@ -46,30 +45,23 @@ const sourceTypes = {
  * @param {Object} source A source definition object compliant with
  * [`mapbox-gl-style-spec`](https://www.mapbox.com/mapbox-gl-style-spec/#sources) or, for a third-party source type,
  * with that type's requirements.
- * @param {Dispatcher} dispatcher
  * @returns {Source}
  */
-function create(id, specification, dispatcher, eventedParent) {
-  const source = new sourceTypes[specification.type](id, specification, dispatcher, eventedParent);
-
-  if (source.id !== id) {
-    throw new Error(`Expected Source id to be ${id} instead of ${source.id}`);
-  }
+export function create(id, specification, eventedParent, { resources, layerIndex, showTileBoundaries }) {
+  const source = new sourceTypes[specification.type](id, specification, eventedParent, {
+    resources,
+    layerIndex,
+    showTileBoundaries
+  });
 
   bindAll(['load', 'abort', 'unload', 'serialize', 'prepare'], source);
   return source;
 }
 
-function getType(name) {
+export function getType(name) {
   return sourceTypes[name];
 }
 
-function setType(name, type) {
+export function setType(name, type) {
   sourceTypes[name] = type;
 }
-
-module.exports = {
-  create,
-  getType,
-  setType
-};