@mapwhit/tilerenderer 0.47.1 → 0.47.2

package/src/source/worker.js

@@ -1,20 +1,20 @@
+require('../util/polyfill');
+
 const Actor = require('../util/actor');
 
 const StyleLayerIndex = require('../style/style_layer_index');
 const VectorTileWorkerSource = require('./vector_tile_worker_source');
-const RasterDEMTileWorkerSource = require('./raster_dem_tile_worker_source');
 const GeoJSONWorkerSource = require('./geojson_worker_source');
 const assert = require('assert');
 const { plugin: globalRTLTextPlugin } = require('./rtl_text_plugin');
+const DEMData = require('../data/dem_data');
 
-/**
- * @private
- */
 class Worker {
   constructor(self) {
     this.self = self;
     this.actor = new Actor(self, this);
 
+    this.actors = {};
     this.layerIndexes = {};
 
     this.workerSourceTypes = {
@@ -24,7 +24,6 @@ class Worker {
 
     // [mapId][sourceType][sourceName] => worker source instance
     this.workerSources = {};
-    this.demWorkerSources = {};
 
     this.self.registerWorkerSource = (name, WorkerSource) => {
       if (this.workerSourceTypes[name]) {
@@ -42,63 +41,33 @@ class Worker {
     };
   }
 
-  setLayers(mapId, layers, callback) {
+  setLayers(mapId, layers) {
     this.getLayerIndex(mapId).replace(layers);
-    callback();
   }
 
-  updateLayers(mapId, params, callback) {
+  updateLayers(mapId, params) {
     this.getLayerIndex(mapId).update(params.layers, params.removedIds);
-    callback();
-  }
-
-  loadTile(mapId, params, callback) {
-    assert(params.type);
-    this.getWorkerSource(mapId, params.type, params.source).loadTile(params, callback);
-  }
-
-  loadDEMTile(mapId, params, callback) {
-    this.getDEMWorkerSource(mapId, params.source).loadTile(params, callback);
   }
 
-  reloadTile(mapId, params, callback) {
+  loadTile(mapId, params) {
     assert(params.type);
-    this.getWorkerSource(mapId, params.type, params.source).reloadTile(params, callback);
+    return this.getWorkerSource(mapId, params.type, params.source).loadTile(params);
   }
 
-  abortTile(mapId, params, callback) {
-    assert(params.type);
-    this.getWorkerSource(mapId, params.type, params.source).abortTile(params, callback);
-  }
-
-  removeTile(mapId, params, callback) {
-    assert(params.type);
-    this.getWorkerSource(mapId, params.type, params.source).removeTile(params, callback);
+  loadDEMTile(mapId, params) {
+    const { uid, rawImageData, encoding } = params;
+    return new DEMData(uid, rawImageData, encoding);
   }
 
-  removeDEMTile(mapId, params) {
-    this.getDEMWorkerSource(mapId, params.source).removeTile(params);
-  }
+  removeSource(mapId, params) {
+    const { type, source } = params;
+    assert(type);
+    assert(source);
 
-  removeSource(mapId, params, callback) {
-    assert(params.type);
-    assert(params.source);
-
-    if (
-      !this.workerSources[mapId] ||
-      !this.workerSources[mapId][params.type] ||
-      !this.workerSources[mapId][params.type][params.source]
-    ) {
-      return;
-    }
-
-    const worker = this.workerSources[mapId][params.type][params.source];
-    delete this.workerSources[mapId][params.type][params.source];
-
-    if (worker.removeSource !== undefined) {
-      worker.removeSource(params, callback);
-    } else {
-      callback();
+    const worker = this.workerSources?.[mapId]?.[type]?.[source];
+    if (worker) {
+      delete this.workerSources[mapId][type][source];
+      worker.removeSource?.(params);
     }
   }
 
@@ -108,65 +77,39 @@ class Worker {
    * function taking `(name, workerSourceObject)`.
    *  @private
    */
-  loadWorkerSource(map, params, callback) {
-    try {
-      this.self.importScripts(params.url);
-      callback();
-    } catch (e) {
-      callback(e.toString());
-    }
+  loadWorkerSource(map, params) {
+    this.self.importScripts(params.url);
   }
 
-  loadRTLTextPlugin(map, pluginURL, callback) {
-    try {
+  loadRTLTextPlugin(map, pluginURL) {
+    if (!globalRTLTextPlugin.isLoaded()) {
+      this.self.importScripts(pluginURL);
       if (!globalRTLTextPlugin.isLoaded()) {
-        this.self.importScripts(pluginURL);
-        callback(
-          globalRTLTextPlugin.isLoaded()
-            ? null
-            : new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`)
-        );
+        throw new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`);
       }
-    } catch (e) {
-      callback(e.toString());
     }
   }
 
   getLayerIndex(mapId) {
-    let layerIndexes = this.layerIndexes[mapId];
-    if (!layerIndexes) {
-      layerIndexes = this.layerIndexes[mapId] = new StyleLayerIndex();
-    }
-    return layerIndexes;
+    return (this.layerIndexes[mapId] ??= new StyleLayerIndex());
   }
 
-  getWorkerSource(mapId, type, source) {
-    if (!this.workerSources[mapId]) this.workerSources[mapId] = {};
-    if (!this.workerSources[mapId][type]) this.workerSources[mapId][type] = {};
-
-    if (!this.workerSources[mapId][type][source]) {
-      // use a wrapped actor so that we can attach a target mapId param
-      // to any messages invoked by the WorkerSource
-      const actor = {
-        send: (type, data, callback) => {
-          this.actor.send(type, data, callback, mapId);
-        }
-      };
-
-      this.workerSources[mapId][type][source] = new this.workerSourceTypes[type](actor, this.getLayerIndex(mapId));
-    }
-
-    return this.workerSources[mapId][type][source];
+  getActor(mapId) {
+    return (this.actors[mapId] ??= {
+      send: (type, data) => this.actor.send(type, data, mapId)
+    });
   }
 
-  getDEMWorkerSource(mapId, source) {
-    if (!this.demWorkerSources[mapId]) this.demWorkerSources[mapId] = {};
+  getWorkerSource(mapId, type, source) {
+    this.workerSources[mapId] ??= {};
+    this.workerSources[mapId][type] ??= {};
 
-    if (!this.demWorkerSources[mapId][source]) {
-      this.demWorkerSources[mapId][source] = new RasterDEMTileWorkerSource();
-    }
+    return (this.workerSources[mapId][type][source] ??= this.createWorkerSource(type, mapId));
+  }
 
-    return this.demWorkerSources[mapId][source];
+  createWorkerSource(type, mapId) {
+    const WorkerSource = this.workerSourceTypes[type];
+    return new WorkerSource(this.getActor(mapId), this.getLayerIndex(mapId));
   }
 }
 

package/src/source/worker_tile.js

@@ -2,7 +2,7 @@ const FeatureIndex = require('../data/feature_index');
 
 const { performSymbolLayout } = require('../symbol/symbol_layout');
 const { CollisionBoxArray } = require('../data/array_types');
-const DictionaryCoder = require('../util/dictionary_coder');
+const dictionaryCoder = require('../util/dictionary_coder');
 const SymbolBucket = require('../data/bucket/symbol_bucket');
 const LineBucket = require('../data/bucket/line_bucket');
 const FillBucket = require('../data/bucket/fill_bucket');
@@ -33,12 +33,12 @@ class WorkerTile {
     this.showCollisionBoxes = params.showCollisionBoxes;
   }
 
-  parse(data, layerIndex, actor, callback) {
+  async parse(data, layerIndex, actor) {
     this.status = 'parsing';
     this.data = data;
 
     this.collisionBoxArray = new CollisionBoxArray();
-    const sourceLayerCoder = new DictionaryCoder(Object.keys(data.layers).sort());
+    const sourceLayerCoder = dictionaryCoder(Object.keys(data.layers));
 
     const featureIndex = new FeatureIndex(this.tileID);
     featureIndex.bucketLayerIDs = [];
@@ -99,92 +99,47 @@ class WorkerTile {
       }
     }
 
-    let error;
-    let glyphMap;
-    let iconMap;
-    let patternMap;
-
     const stacks = mapObject(options.glyphDependencies, glyphs => Object.keys(glyphs).map(Number));
-    if (Object.keys(stacks).length) {
-      actor.send('getGlyphs', { uid: this.uid, stacks }, (err, result) => {
-        if (!error) {
-          error = err;
-          glyphMap = result;
-          maybePrepare.call(this);
-        }
-      });
-    } else {
-      glyphMap = {};
-    }
-
     const icons = Object.keys(options.iconDependencies);
-    if (icons.length) {
-      actor.send('getImages', { icons }, (err, result) => {
-        if (!error) {
-          error = err;
-          iconMap = result;
-          maybePrepare.call(this);
-        }
-      });
-    } else {
-      iconMap = {};
-    }
-
     const patterns = Object.keys(options.patternDependencies);
-    if (patterns.length) {
-      actor.send('getImages', { icons: patterns }, (err, result) => {
-        if (!error) {
-          error = err;
-          patternMap = result;
-          maybePrepare.call(this);
-        }
-      });
-    } else {
-      patternMap = {};
-    }
-
-    maybePrepare.call(this);
-
-    function maybePrepare() {
-      if (error) {
-        return callback(error);
-      }
-      if (glyphMap && iconMap && patternMap) {
-        const glyphAtlas = new GlyphAtlas(glyphMap);
-        const imageAtlas = new ImageAtlas(iconMap, patternMap);
-
-        for (const key in buckets) {
-          const bucket = buckets[key];
-          if (bucket instanceof SymbolBucket) {
-            recalculateLayers(bucket.layers, this.zoom);
-            performSymbolLayout(
-              bucket,
-              glyphMap,
-              glyphAtlas.positions,
-              iconMap,
-              imageAtlas.iconPositions,
-              this.showCollisionBoxes
-            );
-          } else if (
-            bucket.hasPattern &&
-            (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
-          ) {
-            recalculateLayers(bucket.layers, this.zoom);
-            bucket.addFeatures(options, imageAtlas.patternPositions);
-          }
-        }
-
-        this.status = 'done';
-
-        callback(null, {
-          buckets: values(buckets).filter(b => !b.isEmpty()),
-          featureIndex,
-          collisionBoxArray: this.collisionBoxArray,
-          glyphAtlasImage: glyphAtlas.image,
-          imageAtlas
-        });
+    const tasks = [
+      Object.keys(stacks).length ? actor.send('getGlyphs', { uid: this.uid, stacks }) : {},
+      icons.length ? actor.send('getImages', { icons }) : {},
+      patterns.length ? actor.send('getImages', { icons: patterns }) : {}
+    ];
+    const [glyphMap, iconMap, patternMap] = await Promise.all(tasks);
+    const glyphAtlas = new GlyphAtlas(glyphMap);
+    const imageAtlas = new ImageAtlas(iconMap, patternMap);
+
+    for (const key in buckets) {
+      const bucket = buckets[key];
+      if (bucket instanceof SymbolBucket) {
+        recalculateLayers(bucket.layers, this.zoom);
+        performSymbolLayout(
+          bucket,
+          glyphMap,
+          glyphAtlas.positions,
+          iconMap,
+          imageAtlas.iconPositions,
+          this.showCollisionBoxes
+        );
+      } else if (
+        bucket.hasPattern &&
+        (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
+      ) {
+        recalculateLayers(bucket.layers, this.zoom);
+        bucket.addFeatures(options, imageAtlas.patternPositions);
       }
     }
+
+    this.status = 'done';
+    return {
+      buckets: values(buckets).filter(b => !b.isEmpty()),
+      featureIndex,
+      collisionBoxArray: this.collisionBoxArray,
+      glyphAtlasImage: glyphAtlas.image,
+      imageAtlas
+    };
   }
 }
 

package/src/style/load_sprite.js

@@ -4,23 +4,20 @@ const loadImage = require('../util/loader/image');
 
 module.exports = loadSprite;
 
-function loadSprite(sprite, callback) {
-  loadImage(sprite.image, (error, image) => {
-    const { json } = sprite;
-    if (error) {
-      callback(error);
-    } else if (json && image) {
-      const imageData = browser.getImageData(image);
-      const result = {};
+async function loadSprite(sprite) {
+  const image = await loadImage(sprite.image);
+  const { json } = sprite;
+  if (json && image) {
+    const imageData = browser.getImageData(image);
+    const result = {};
 
-      for (const id in json) {
-        const { width, height, x, y, sdf, pixelRatio } = json[id];
-        const data = new RGBAImage({ width, height });
-        RGBAImage.copy(imageData, data, { x, y }, { x: 0, y: 0 }, { width, height });
-        result[id] = { data, pixelRatio, sdf };
-      }
-
-      callback(null, result);
+    for (const id in json) {
+      const { width, height, x, y, sdf, pixelRatio } = json[id];
+      const data = new RGBAImage({ width, height });
+      RGBAImage.copy(imageData, data, { x, y }, { x: 0, y: 0 }, { width, height });
+      result[id] = { data, pixelRatio, sdf };
     }
-  });
+
+    return result;
+  }
 }

package/src/style/properties.js

@@ -4,7 +4,7 @@ const { clone } = require('../util/object');
 const { easeCubicInOut } = require('../util/util');
 const interpolate = require('../style-spec/util/interpolate');
 const { normalizePropertyExpression } = require('../style-spec/expression');
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 const EvaluationParameters = require('./evaluation_parameters');
 
 /**

package/src/style/style.js

@@ -46,7 +46,9 @@ class Style extends Evented {
 
     const self = this;
     this._rtlTextPluginCallback = Style.registerForPluginAvailability(args => {
-      self.dispatcher.broadcast('loadRTLTextPlugin', args.pluginURL, args.completionCallback);
+      self.dispatcher
+        .broadcast('loadRTLTextPlugin', args.pluginURL)
+        .then(_ => args.completionCallback(), args.completionCallback);
       for (const id in self.sourceCaches) {
         self.sourceCaches[id].reload(); // Should be a no-op if the plugin loads before any tiles load
       }
@@ -93,20 +95,20 @@ class Style extends Evented {
     }
 
     if (json.sprite) {
-      loadSprite(json.sprite, (err, images) => {
-        if (err) {
-          this.fire(new ErrorEvent(err));
-        } else if (images) {
-          for (const id in images) {
-            this.imageManager.addImage(id, images[id]);
+      loadSprite(json.sprite)
+        .then(images => {
+          if (images) {
+            for (const id in images) {
+              this.imageManager.addImage(id, images[id]);
+            }
           }
-        }
 
-        this.imageManager.setLoaded(true);
-        this.fire(new Event('data', { dataType: 'style' }));
-      });
+          this.imageManager.setLoaded();
+          this.fire(new Event('data', { dataType: 'style' }));
+        })
+        .catch(err => this.fire(new ErrorEvent(err)));
     } else {
-      this.imageManager.setLoaded(true);
+      this.imageManager.setLoaded();
     }
 
     this.glyphManager.setGlyphsLoader(json.glyphs);
@@ -776,14 +778,12 @@ class Style extends Evented {
       return callback(null, null);
     }
 
-    this.dispatcher.broadcast(
-      'loadWorkerSource',
-      {
+    this.dispatcher
+      .broadcast('loadWorkerSource', {
         name: name,
         url: SourceType.workerSourceURL
-      },
-      callback
-    );
+      })
+      .then(data => callback(null, data), callback);
   }
 
   getLight() {
@@ -939,12 +939,12 @@ class Style extends Evented {
 
   // Callbacks from web workers
 
-  getImages(mapId, params, callback) {
-    this.imageManager.getImages(params.icons, callback);
+  getImages(_mapId, { icons }) {
+    return this.imageManager.getImages(icons);
   }
 
-  getGlyphs(mapId, params, callback) {
-    return this.glyphManager.getGlyphs(params.stacks, callback);
+  getGlyphs(_mapId, { stacks }) {
+    return this.glyphManager.getGlyphs(stacks);
   }
 }
 

package/src/style/style_layer_index.js

@@ -5,54 +5,48 @@ const featureFilter = require('../style-spec/feature_filter');
 const groupByLayout = require('../style-spec/group_by_layout');
 
 class StyleLayerIndex {
+  #layerConfigs = {};
+  #layers = {};
+
   constructor(layerConfigs) {
     if (layerConfigs) {
-      this.replace(layerConfigs);
+      this.update(layerConfigs);
     }
   }
 
   replace(layerConfigs) {
-    this._layerConfigs = {};
-    this._layers = {};
-    this.update(layerConfigs, []);
+    this.#layerConfigs = {};
+    this.#layers = {};
+    this.update(layerConfigs);
   }
 
-  update(layerConfigs, removedIds) {
+  update(layerConfigs, removedIds = []) {
     for (const layerConfig of layerConfigs) {
-      this._layerConfigs[layerConfig.id] = layerConfig;
+      this.#layerConfigs[layerConfig.id] = layerConfig;
 
-      const layer = (this._layers[layerConfig.id] = createStyleLayer(layerConfig));
+      const layer = (this.#layers[layerConfig.id] = createStyleLayer(layerConfig));
       layer._featureFilter = featureFilter(layer.filter);
     }
     for (const id of removedIds) {
-      delete this._layerConfigs[id];
-      delete this._layers[id];
+      delete this.#layerConfigs[id];
+      delete this.#layers[id];
     }
 
     this.familiesBySource = {};
 
-    const groups = groupByLayout(values(this._layerConfigs));
+    const groups = groupByLayout(values(this.#layerConfigs));
 
     for (const layerConfigs of groups) {
-      const layers = layerConfigs.map(layerConfig => this._layers[layerConfig.id]);
+      const layers = layerConfigs.map(layerConfig => this.#layers[layerConfig.id]);
 
       const layer = layers[0];
       if (layer.visibility === 'none') {
         continue;
       }
 
-      const sourceId = layer.source || '';
-      let sourceGroup = this.familiesBySource[sourceId];
-      if (!sourceGroup) {
-        sourceGroup = this.familiesBySource[sourceId] = {};
-      }
-
-      const sourceLayerId = layer.sourceLayer || '_geojsonTileLayer';
-      let sourceLayerFamilies = sourceGroup[sourceLayerId];
-      if (!sourceLayerFamilies) {
-        sourceLayerFamilies = sourceGroup[sourceLayerId] = [];
-      }
-
+      const { source = '', sourceLayer = '_geojsonTileLayer' } = layer;
+      const sourceGroup = (this.familiesBySource[source] ??= {});
+      const sourceLayerFamilies = (sourceGroup[sourceLayer] ??= []);
       sourceLayerFamilies.push(layers);
     }
   }

package/src/style-spec/reference/v8.json

@@ -80,7 +80,7 @@
     },
     "transition": {
       "type": "transition",
-      "doc": "A global transition definition to use as a default across properties.",
+      "doc": "A global transition definition to use as a default across properties, to be used for timing transitions between one value and the next when no property-specific transition is set. Collision-based symbol fading is controlled independently of the style's `transition` property.",
       "example": {
         "duration": 300,
         "delay": 0
@@ -2621,7 +2621,7 @@
         }
       },
       "feature-state": {
-        "doc": "Retrieves a property value from the current feature's state. Returns null if the requested property is not present on the feature's state object.",
+        "doc": "Retrieves a property value from the current feature's state. Returns null if the requested property is not present on the feature's state. A feature's state is not part of the GeoJSON or vector tile data, and must be set programmatically on each feature. Note that [\"feature-state\"] can only be used with paint properties that support data-driven styling.",
         "group": "Feature data",
         "sdk-support": {
           "basic functionality": {

package/src/symbol/anchor.js

@@ -1,6 +1,6 @@
 const Point = require('@mapbox/point-geometry');
 
-const { register } = require('../util/web_worker_transfer');
+const { register } = require('../util/transfer_registry');
 
 class Anchor extends Point {
   constructor(x, y, angle, segment) {

package/src/symbol/collision_index.js

@@ -39,6 +39,8 @@ class CollisionIndex {
 
     this.screenRightBoundary = transform.width + viewportPadding;
     this.screenBottomBoundary = transform.height + viewportPadding;
+    this.gridRightBoundary = transform.width + 2 * viewportPadding;
+    this.gridBottomBoundary = transform.height + 2 * viewportPadding;
   }
 
   placeCollisionBox(collisionBox, allowOverlap, textPixelRatio, posMatrix, collisionGroupPredicate) {
@@ -53,14 +55,16 @@ class CollisionIndex {
     const brX = collisionBox.x2 * tileToViewport + projectedPoint.point.x;
     const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
 
-    if (!allowOverlap) {
-      if (this.grid.hitTest(tlX, tlY, brX, brY, collisionGroupPredicate)) {
-        return {
-          box: [],
-          offscreen: false
-        };
-      }
+    if (
+      !this.isInsideGrid(tlX, tlY, brX, brY) ||
+      (!allowOverlap && this.grid.hitTest(tlX, tlY, brX, brY, collisionGroupPredicate))
+    ) {
+      return {
+        box: [],
+        offscreen: false
+      };
     }
+
     return {
       box: [tlX, tlY, brX, brY],
       offscreen: this.isOffscreen(tlX, tlY, brX, brY)
@@ -135,6 +139,7 @@ class CollisionIndex {
     );
 
     let collisionDetected = false;
+    let inGrid = false;
     let entirelyOffscreen = true;
 
     const tileToViewport = projectedAnchor.perspectiveRatio * textPixelRatio;
@@ -211,14 +216,12 @@ class CollisionIndex {
       placedCollisionCircles.push(projectedPoint.x, projectedPoint.y, radius, collisionBoxArrayIndex);
       markCollisionCircleUsed(collisionCircles, k, true);
 
-      entirelyOffscreen =
-        entirelyOffscreen &&
-        this.isOffscreen(
-          projectedPoint.x - radius,
-          projectedPoint.y - radius,
-          projectedPoint.x + radius,
-          projectedPoint.y + radius
-        );
+      const x1 = projectedPoint.x - radius;
+      const y1 = projectedPoint.y - radius;
+      const x2 = projectedPoint.x + radius;
+      const y2 = projectedPoint.y + radius;
+      entirelyOffscreen = entirelyOffscreen && this.isOffscreen(x1, y1, x2, y2);
+      inGrid = inGrid || this.isInsideGrid(x1, y1, x2, y2);
 
       if (!allowOverlap) {
         if (this.grid.hitTestCircle(projectedPoint.x, projectedPoint.y, radius, collisionGroupPredicate)) {
@@ -236,7 +239,7 @@ class CollisionIndex {
     }
 
     return {
-      circles: collisionDetected ? [] : placedCollisionCircles,
+      circles: collisionDetected || !inGrid ? [] : placedCollisionCircles,
       offscreen: entirelyOffscreen
     };
   }
@@ -370,6 +373,10 @@ class CollisionIndex {
       x2 < viewportPadding || x1 >= this.screenRightBoundary || y2 < viewportPadding || y1 > this.screenBottomBoundary
     );
   }
+
+  isInsideGrid(x1, y1, x2, y2) {
+    return x2 >= 0 && x1 < this.gridRightBoundary && y2 >= 0 && y1 < this.gridBottomBoundary;
+  }
 }
 
 function markCollisionCircleUsed(collisionCircles, index, used) {