@mapwhit/tilerenderer 0.47.1 → 0.47.2

package/build/min/package.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.46.2"
+  "version": "0.47.1"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.47.1",
+  "version": "0.47.2",
   "main": "src/index.js",
   "license": "BSD-3-Clause",
   "repository": {
@@ -26,7 +26,6 @@
     "grid-index": "^1.1.0",
     "quickselect": "^2.0.0",
     "supercluster": "^2.0.1",
-    "tile-cache": "^1.0.2",
     "tinyqueue": "^1.1.0"
   },
   "browser": {

package/src/data/array_types.js

@@ -2,7 +2,7 @@
 
 const assert = require('assert');
 const { Struct, StructArray } = require('../util/struct_array');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 const Point = require('@mapbox/point-geometry');
 
 /**

package/src/data/bucket/circle_bucket.js

@@ -6,7 +6,7 @@ const { ProgramConfigurationSet } = require('../program_configuration');
 const { TriangleIndexArray } = require('../index_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
-const { register } = require('../../util/web_worker_transfer');
+const { register } = require('../../util/transfer_registry');
 const EvaluationParameters = require('../../style/evaluation_parameters');
 
 function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {

package/src/data/bucket/fill_bucket.js

@@ -8,7 +8,7 @@ const earcut = require('earcut');
 const classifyRings = require('../../util/classify_rings');
 const assert = require('assert');
 const EARCUT_MAX_RINGS = 500;
-const { register } = require('../../util/web_worker_transfer');
+const { register } = require('../../util/transfer_registry');
 const { hasPattern, addPatternDependencies } = require('./pattern_bucket_features');
 const loadGeometry = require('../load_geometry');
 const EvaluationParameters = require('../../style/evaluation_parameters');

package/src/data/bucket/fill_extrusion_bucket.js

@@ -12,7 +12,7 @@ const {
 const classifyRings = require('../../util/classify_rings');
 const assert = require('assert');
 const EARCUT_MAX_RINGS = 500;
-const { register } = require('../../util/web_worker_transfer');
+const { register } = require('../../util/transfer_registry');
 const { hasPattern, addPatternDependencies } = require('./pattern_bucket_features');
 const loadGeometry = require('../load_geometry');
 const EvaluationParameters = require('../../style/evaluation_parameters');

package/src/data/bucket/heatmap_bucket.js

@@ -1,6 +1,6 @@
 const CircleBucket = require('./circle_bucket');
 
-const { register } = require('../../util/web_worker_transfer');
+const { register } = require('../../util/transfer_registry');
 
 class HeatmapBucket extends CircleBucket {
   // Needed for flow to accept omit: ['layers'] below, due to

package/src/data/bucket/line_bucket.js

@@ -7,7 +7,7 @@ const { TriangleIndexArray } = require('../index_array_type');
 const EXTENT = require('../extent');
 const mvt = require('@mapbox/vector-tile');
 const vectorTileFeatureTypes = mvt.VectorTileFeature.types;
-const { register } = require('../../util/web_worker_transfer');
+const { register } = require('../../util/transfer_registry');
 const { hasPattern, addPatternDependencies } = require('./pattern_bucket_features');
 const loadGeometry = require('../load_geometry');
 const EvaluationParameters = require('../../style/evaluation_parameters');

package/src/data/bucket/symbol_bucket.js

@@ -29,7 +29,7 @@ const mvt = require('@mapbox/vector-tile');
 const vectorTileFeatureTypes = mvt.VectorTileFeature.types;
 const { verticalizedCharacterMap } = require('../../util/verticalize_punctuation');
 const { getSizeData } = require('../../symbol/symbol_size');
-const { register } = require('../../util/web_worker_transfer');
+const { register } = require('../../util/transfer_registry');
 const EvaluationParameters = require('../../style/evaluation_parameters');
 
 // Opacity arrays are frequently updated but don't contain a lot of information, so we pack them

package/src/data/dem_data.js

@@ -1,7 +1,7 @@
 const { RGBAImage } = require('../util/image');
 
 const warn = require('../util/warn');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 
 // DEMData is a data structure for decoding, backfilling, and storing elevation data for processing in the hillshade shaders
 // data can be populated either from a pngraw image tile or from serliazed data sent back from a worker. When data is initially

package/src/data/feature_index.js

@@ -2,26 +2,23 @@ const loadGeometry = require('./load_geometry');
 const EXTENT = require('./extent');
 const featureFilter = require('../style-spec/feature_filter');
 const Grid = require('grid-index');
-const DictionaryCoder = require('../util/dictionary_coder');
+const dictionaryCoder = require('../util/dictionary_coder');
 const vt = require('@mapbox/vector-tile');
 const Protobuf = require('@mapwhit/pbf');
 const GeoJSONFeature = require('../util/vectortile_to_geojson');
 const { arraysIntersect } = require('../util/object');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 const EvaluationParameters = require('../style/evaluation_parameters');
 const { polygonIntersectsBox } = require('../util/intersection_tests');
 
 const { FeatureIndexArray } = require('./array_types');
 
 class FeatureIndex {
-  constructor(tileID, grid, featureIndexArray) {
+  constructor(tileID, grid = new Grid(EXTENT, 16, 0), featureIndexArray = new FeatureIndexArray()) {
     this.tileID = tileID;
-    this.x = tileID.canonical.x;
-    this.y = tileID.canonical.y;
-    this.z = tileID.canonical.z;
-    this.grid = grid || new Grid(EXTENT, 16, 0);
+    this.grid = grid;
     this.grid3D = new Grid(EXTENT, 16, 0);
-    this.featureIndexArray = featureIndexArray || new FeatureIndexArray();
+    this.featureIndexArray = featureIndexArray;
   }
 
   insert(feature, geometry, featureIndex, sourceLayerIndex, bucketIndex, is3D) {
@@ -30,25 +27,10 @@ class FeatureIndex {
 
     const grid = is3D ? this.grid3D : this.grid;
 
-    for (let r = 0; r < geometry.length; r++) {
-      const ring = geometry[r];
-
-      const bbox = [
-        Number.POSITIVE_INFINITY,
-        Number.POSITIVE_INFINITY,
-        Number.NEGATIVE_INFINITY,
-        Number.NEGATIVE_INFINITY
-      ];
-      for (let i = 0; i < ring.length; i++) {
-        const p = ring[i];
-        bbox[0] = Math.min(bbox[0], p.x);
-        bbox[1] = Math.min(bbox[1], p.y);
-        bbox[2] = Math.max(bbox[2], p.x);
-        bbox[3] = Math.max(bbox[3], p.y);
-      }
-
-      if (bbox[0] < EXTENT && bbox[1] < EXTENT && bbox[2] >= 0 && bbox[3] >= 0) {
-        grid.insert(key, bbox[0], bbox[1], bbox[2], bbox[3]);
+    for (const ring of geometry) {
+      const { minX, minY, maxX, maxY } = getBounds(ring);
+      if (minX < EXTENT && minY < EXTENT && maxX >= 0 && maxY >= 0) {
+        grid.insert(key, minX, minY, maxX, maxY);
       }
     }
   }
@@ -56,9 +38,7 @@ class FeatureIndex {
   loadVTLayers() {
     if (!this.vtLayers) {
       this.vtLayers = new vt.VectorTile(new Protobuf(this.rawTileData)).layers;
-      this.sourceLayerCoder = new DictionaryCoder(
-        this.vtLayers ? Object.keys(this.vtLayers).sort() : ['_geojsonTileLayer']
-      );
+      this.sourceLayerCoder = dictionaryCoder(this.vtLayers ? Object.keys(this.vtLayers) : ['_geojsonTileLayer']);
     }
     return this.vtLayers;
   }
@@ -99,10 +79,7 @@ class FeatureIndex {
       }
     );
 
-    for (const key of matching3D) {
-      matching.push(key);
-    }
-
+    matching.push(...matching3D);
     matching.sort(topDownFeatureComparator);
 
     const result = {};
@@ -116,6 +93,26 @@ class FeatureIndex {
 
       const match = this.featureIndexArray.get(index);
       let featureGeometry = null;
+      const intersectionTest = (feature, styleLayer) => {
+        if (!featureGeometry) {
+          featureGeometry = loadGeometry(feature);
+        }
+        let featureState = {};
+        if (feature.id) {
+          // `feature-state` expression evaluation requires feature state to be available
+          featureState = sourceFeatureState.getState(styleLayer.sourceLayer || '_geojsonTileLayer', String(feature.id));
+        }
+        return styleLayer.queryIntersectsFeature(
+          queryGeometry,
+          feature,
+          featureState,
+          featureGeometry,
+          this.tileID.canonical.z,
+          args.transform,
+          pixelsToTileUnits,
+          args.pixelPosMatrix
+        );
+      };
       this.loadMatchingFeature(
         result,
         match.bucketIndex,
@@ -124,29 +121,7 @@ class FeatureIndex {
         filter,
         params.layers,
         styleLayers,
-        (feature, styleLayer) => {
-          if (!featureGeometry) {
-            featureGeometry = loadGeometry(feature);
-          }
-          let featureState = {};
-          if (feature.id) {
-            // `feature-state` expression evaluation requires feature state to be available
-            featureState = sourceFeatureState.getState(
-              styleLayer.sourceLayer || '_geojsonTileLayer',
-              String(feature.id)
-            );
-          }
-          return styleLayer.queryIntersectsFeature(
-            queryGeometry,
-            feature,
-            featureState,
-            featureGeometry,
-            this.z,
-            args.transform,
-            pixelsToTileUnits,
-            args.pixelPosMatrix
-          );
-        }
+        intersectionTest
       );
     }
 
@@ -172,10 +147,9 @@ class FeatureIndex {
 
     if (!filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) return;
 
-    for (let l = 0; l < layerIDs.length; l++) {
-      const layerID = layerIDs[l];
-
-      if (filterLayerIDs && filterLayerIDs.indexOf(layerID) < 0) {
+    const { x, y, z } = this.tileID.canonical;
+    for (const layerID of layerIDs) {
+      if (filterLayerIDs && !filterLayerIDs.includes(layerID)) {
         continue;
       }
 
@@ -188,13 +162,10 @@ class FeatureIndex {
         continue;
       }
 
-      const geojsonFeature = new GeoJSONFeature(feature, this.z, this.x, this.y);
+      const geojsonFeature = new GeoJSONFeature(feature, z, x, y);
       geojsonFeature.layer = styleLayer.serialize();
-      let layerResult = result[layerID];
-      if (layerResult === undefined) {
-        layerResult = result[layerID] = [];
-      }
-      layerResult.push({ featureIndex: featureIndex, feature: geojsonFeature, intersectionZ });
+      const layerResult = (result[layerID] ??= []);
+      layerResult.push({ featureIndex, feature: geojsonFeature, intersectionZ });
     }
   }
 
@@ -219,16 +190,6 @@ class FeatureIndex {
     }
     return result;
   }
-
-  hasLayer(id) {
-    for (const layerIDs of this.bucketLayerIDs) {
-      for (const layerID of layerIDs) {
-        if (id === layerID) return true;
-      }
-    }
-
-    return false;
-  }
 }
 
 register('FeatureIndex', FeatureIndex, { omit: ['rawTileData', 'sourceLayerCoder'] });
@@ -240,11 +201,11 @@ function getBounds(geometry) {
   let minY = Number.POSITIVE_INFINITY;
   let maxX = Number.NEGATIVE_INFINITY;
   let maxY = Number.NEGATIVE_INFINITY;
-  for (const p of geometry) {
-    minX = Math.min(minX, p.x);
-    minY = Math.min(minY, p.y);
-    maxX = Math.max(maxX, p.x);
-    maxY = Math.max(maxY, p.y);
+  for (const { x, y } of geometry) {
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
   }
   return { minX, minY, maxX, maxY };
 }

package/src/data/program_configuration.js

@@ -1,6 +1,6 @@
 const { packUint8ToFloat } = require('../shaders/encode_attribute');
 const { supportsPropertyExpression } = require('../style-spec/util/properties');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 const { PossiblyEvaluatedPropertyValue } = require('../style/properties');
 const {
   StructArrayLayout1f4,

package/src/data/segment.js

@@ -1,6 +1,6 @@
 const warn = require('../util/warn');
 
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 
 class SegmentVector {
   constructor(segments = []) {
@@ -8,11 +8,11 @@ class SegmentVector {
   }
 
   prepareSegment(numVertices, layoutVertexArray, indexArray) {
-    let segment = this.segments[this.segments.length - 1];
     if (numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH)
       warn.once(
         `Max vertices per segment is ${SegmentVector.MAX_VERTEX_ARRAY_LENGTH}: bucket requested ${numVertices}`
       );
+    let segment = this.segments.at(-1);
     if (!segment || segment.vertexLength + numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
       segment = {
         vertexOffset: layoutVertexArray.length,

package/src/gl/color_mode.js

@@ -5,6 +5,12 @@ const ONE = 0x0001;
 const ONE_MINUS_SRC_ALPHA = 0x0303;
 
 class ColorMode {
+  static Replace = [ONE, ZERO];
+
+  static disabled = new ColorMode(ColorMode.Replace, Color.transparent, [false, false, false, false]);
+  static unblended = new ColorMode(ColorMode.Replace, Color.transparent, [true, true, true, true]);
+  static alphaBlended = new ColorMode([ONE, ONE_MINUS_SRC_ALPHA], Color.transparent, [true, true, true, true]);
+
   constructor(blendFunction, blendColor, mask) {
     this.blendFunction = blendFunction;
     this.blendColor = blendColor;
@@ -12,10 +18,4 @@ class ColorMode {
   }
 }
 
-ColorMode.Replace = [ONE, ZERO];
-
-ColorMode.disabled = new ColorMode(ColorMode.Replace, Color.transparent, [false, false, false, false]);
-ColorMode.unblended = new ColorMode(ColorMode.Replace, Color.transparent, [true, true, true, true]);
-ColorMode.alphaBlended = new ColorMode([ONE, ONE_MINUS_SRC_ALPHA], Color.transparent, [true, true, true, true]);
-
 module.exports = ColorMode;

package/src/index.js

@@ -1,3 +1,5 @@
+require('./util/polyfill');
+
 module.exports = {
   version: require('../package.json').version,
   setRTLTextPlugin: require('./source/rtl_text_plugin').setRTLTextPlugin,

package/src/render/glyph_atlas.js

@@ -1,7 +1,7 @@
 const ShelfPack = require('@mapbox/shelf-pack');
 
 const { AlphaImage } = require('../util/image');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 
 const padding = 1;
 

package/src/render/glyph_manager.js

@@ -3,7 +3,6 @@ const loadGlyphRange = require('../style/load_glyph_range');
 const TinySDF = require('@mapbox/tiny-sdf');
 const isChar = require('../util/is_char_in_unicode_block');
 const { AlphaImage } = require('../util/image');
-const { callback } = require('../util/callback');
 
 class GlyphManager {
   // exposed as statics to enable stubbing in unit tests
@@ -19,62 +18,58 @@ class GlyphManager {
     this.loader = loader;
   }
 
-  getGlyphs(glyphs, fn) {
-    return callback(fn, perform.call(this, glyphs));
-
-    async function perform(glyphs) {
-      const all = [];
-      for (const stack in glyphs) {
-        for (const id of glyphs[stack]) {
-          all.push(retrieveGlyph(this, { stack, id }));
-        }
+  async getGlyphs(glyphs) {
+    const all = [];
+    for (const stack in glyphs) {
+      for (const id of glyphs[stack]) {
+        all.push(retrieveGlyph(this, { stack, id }));
       }
-      const fetchedGlyphs = await Promise.all(all);
-      const result = {};
-      for (const { stack, id, glyph } of fetchedGlyphs) {
-        // Clone the glyph so that our own copy of its ArrayBuffer doesn't get transferred.
-        (result[stack] ??= {})[id] = cloneGlyph(glyph);
-      }
-      return result;
-
-      function cloneGlyph(glyph) {
-        if (glyph) {
-          return {
-            id: glyph.id,
-            bitmap: glyph.bitmap.clone(),
-            metrics: glyph.metrics
-          };
-        }
+    }
+    const fetchedGlyphs = await Promise.all(all);
+    const result = {};
+    for (const { stack, id, glyph } of fetchedGlyphs) {
+      // Clone the glyph so that our own copy of its ArrayBuffer doesn't get transferred.
+      (result[stack] ??= {})[id] = cloneGlyph(glyph);
+    }
+    return result;
+
+    function cloneGlyph(glyph) {
+      if (glyph) {
+        return {
+          id: glyph.id,
+          bitmap: glyph.bitmap.clone(),
+          metrics: glyph.metrics
+        };
       }
+    }
 
-      async function retrieveGlyph({ entries, loader, localIdeographFontFamily }, { stack, id }) {
-        const entry = (entries[stack] ??= { glyphs: {}, requests: {} });
+    async function retrieveGlyph({ entries, loader, localIdeographFontFamily }, { stack, id }) {
+      const entry = (entries[stack] ??= { glyphs: {}, requests: {} });
 
-        let glyph = entry.glyphs[id];
-        if (glyph) {
-          return { stack, id, glyph };
-        }
+      let glyph = entry.glyphs[id];
+      if (glyph) {
+        return { stack, id, glyph };
+      }
 
-        glyph = tinySDF(localIdeographFontFamily, entry, stack, id);
-        if (glyph) {
-          return { stack, id, glyph };
-        }
+      glyph = tinySDF(localIdeographFontFamily, entry, stack, id);
+      if (glyph) {
+        return { stack, id, glyph };
+      }
 
-        const range = Math.floor(id / 256);
-        if (range * 256 > 65535) {
-          throw new Error('glyphs > 65535 not supported');
-        }
+      const range = Math.floor(id / 256);
+      if (range * 256 > 65535) {
+        throw new Error('glyphs > 65535 not supported');
+      }
 
-        const promise = (entry.requests[range] ??= GlyphManager.loadGlyphRange(stack, range, loader));
-        const response = await promise;
-        if (response) {
-          for (const id in response) {
-            entry.glyphs[+id] = response[+id];
-          }
+      const promise = (entry.requests[range] ??= GlyphManager.loadGlyphRange(stack, range, loader));
+      const response = await promise;
+      if (response) {
+        for (const id in response) {
+          entry.glyphs[+id] = response[+id];
         }
-        delete entry.requests[range];
-        return { stack, id, glyph: response?.[id] || null };
       }
+      delete entry.requests[range];
+      return { stack, id, glyph: response?.[id] || null };
     }
   }
 }

package/src/render/image_atlas.js

@@ -1,7 +1,7 @@
 const ShelfPack = require('@mapbox/shelf-pack');
 
 const { RGBAImage } = require('../util/image');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 
 const padding = 1;
 

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