@mapwhit/tilerenderer 0.47.1 → 0.48.0

package/src/source/vector_tile_worker_source.js

@@ -1,19 +1,18 @@
-const vt = require('@mapbox/vector-tile');
+const { VectorTile } = require('@mapbox/vector-tile');
 const Protobuf = require('@mapwhit/pbf');
 const WorkerTile = require('./worker_tile');
 
-function loadVectorTile(params, callback) {
+function loadVectorTile(params) {
   if (!params.response) {
-    return callback(new Error('no tile data'));
+    throw new Error('no tile data');
   }
   const { data } = params.response;
   if (!data) {
-    return callback();
+    return;
   }
-  callback(null, {
-    vectorTile: new vt.VectorTile(new Protobuf(data)),
-    rawData: data
-  });
+  return {
+    vectorTile: new VectorTile(new Protobuf(data))
+  };
 }
 
 /**
@@ -32,11 +31,10 @@ class VectorTileWorkerSource {
    * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
    * loads the pbf at `params.url`.
    */
-  constructor(actor, layerIndex, loadVectorData) {
+  constructor(actor, layerIndex, loadVectorData = loadVectorTile) {
     this.actor = actor;
     this.layerIndex = layerIndex;
-    this.loadVectorData = loadVectorData || loadVectorTile.bind(this);
-    this.loaded = {};
+    this.loadVectorData = loadVectorData;
   }
 
   /**
@@ -44,83 +42,20 @@ class VectorTileWorkerSource {
    * {@link VectorTileWorkerSource#loadVectorData} (which by default expects
    * a `params.url` property) for fetching and producing a VectorTile object.
    */
-  loadTile(params, callback) {
-    const uid = params.uid;
-
-    const workerTile = new WorkerTile(params);
-    this.loadVectorData(params, (err, response) => {
-      if (err || !response) {
-        return callback(err);
-      }
-
-      const rawTileData = response.rawData;
-      workerTile.vectorTile = response.vectorTile;
-      workerTile.parse(response.vectorTile, this.layerIndex, this.actor, (err, result) => {
-        if (err || !result) return callback(err);
-
-        // Transferring a copy of rawTileData because the worker needs to retain its copy.
-        callback(null, Object.assign({ rawTileData: rawTileData.slice(0) }, result));
-      });
-
-      this.loaded = this.loaded || {};
-      this.loaded[uid] = workerTile;
-    });
-  }
-
-  /**
-   * Implements {@link WorkerSource#reloadTile}.
-   */
-  reloadTile(params, callback) {
-    const loaded = this.loaded;
-    const uid = params.uid;
-    const vtSource = this;
-    if (loaded?.[uid]) {
-      const workerTile = loaded[uid];
-      workerTile.showCollisionBoxes = params.showCollisionBoxes;
-
-      const done = (err, data) => {
-        const reloadCallback = workerTile.reloadCallback;
-        if (reloadCallback) {
-          delete workerTile.reloadCallback;
-          workerTile.parse(workerTile.vectorTile, vtSource.layerIndex, vtSource.actor, reloadCallback);
-        }
-        callback(err, data);
-      };
-
-      if (workerTile.status === 'parsing') {
-        workerTile.reloadCallback = done;
-      } else if (workerTile.status === 'done') {
-        workerTile.parse(workerTile.vectorTile, this.layerIndex, this.actor, done);
-      }
+  async loadTile(params) {
+    const response = this.loadVectorData(params);
+    if (!response) {
+      return;
     }
-  }
-
-  /**
-   * Implements {@link WorkerSource#abortTile}.
-   *
-   * @param params
-   * @param params.uid The UID for this tile.
-   */
-  abortTile(params, callback) {
-    callback();
-  }
-
-  /**
-   * Implements {@link WorkerSource#removeTile}.
-   *
-   * @param params
-   * @param params.uid The UID for this tile.
-   */
-  removeTile(params, callback) {
-    const loaded = this.loaded;
-    const uid = params.uid;
-    if (loaded?.[uid]) {
-      delete loaded[uid];
+    const { vectorTile, rawData } = response;
+    const workerTile = new WorkerTile(params);
+    workerTile.vectorTile = vectorTile;
+    const result = await workerTile.parse(vectorTile, this.layerIndex, this.actor);
+    if (rawData) {
+      result.rawTileData = rawData;
     }
-    callback();
+    return result;
   }
-
-  updateConfig() {}
 }
 
 module.exports = VectorTileWorkerSource;

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]) {
@@ -39,134 +38,69 @@ class Worker {
       }
       globalRTLTextPlugin['applyArabicShaping'] = rtlTextPlugin.applyArabicShaping;
       globalRTLTextPlugin['processBidirectionalText'] = rtlTextPlugin.processBidirectionalText;
+      globalRTLTextPlugin['processStyledBidirectionalText'] = rtlTextPlugin.processStyledBidirectionalText;
     };
   }
 
-  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) {
+  loadTile(mapId, params) {
     assert(params.type);
-    this.getWorkerSource(mapId, params.type, params.source).loadTile(params, callback);
+    return this.getWorkerSource(mapId, params.type, params.source).loadTile(params);
   }
 
-  loadDEMTile(mapId, params, callback) {
-    this.getDEMWorkerSource(mapId, params.source).loadTile(params, callback);
+  loadDEMTile(mapId, params) {
+    const { uid, rawImageData, encoding } = params;
+    return new DEMData(uid, rawImageData, encoding);
   }
 
-  reloadTile(mapId, params, callback) {
-    assert(params.type);
-    this.getWorkerSource(mapId, params.type, params.source).reloadTile(params, callback);
-  }
+  removeSource(mapId, params) {
+    const { type, source } = params;
+    assert(type);
+    assert(source);
 
-  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);
-  }
-
-  removeDEMTile(mapId, params) {
-    this.getDEMWorkerSource(mapId, params.source).removeTile(params);
-  }
-
-  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();
-    }
-  }
-
-  /**
-   * Load a {@link WorkerSource} script at params.url.  The script is run
-   * (using importScripts) with `registerWorkerSource` in scope, which is a
-   * function taking `(name, workerSourceObject)`.
-   *  @private
-   */
-  loadWorkerSource(map, params, callback) {
-    try {
-      this.self.importScripts(params.url);
-      callback();
-    } catch (e) {
-      callback(e.toString());
+    const worker = this.workerSources?.[mapId]?.[type]?.[source];
+    if (worker) {
+      delete this.workerSources[mapId][type][source];
+      worker.removeSource?.(params);
     }
   }
 
-  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);
@@ -631,6 +633,10 @@ class Style extends Evented {
       this.fire(new ErrorEvent(new Error('The sourceLayer parameter must be provided for vector source types.')));
       return;
     }
+    if (feature.id == null || feature.id === '') {
+      this.fire(new ErrorEvent(new Error('The feature id parameter must be provided.')));
+      return;
+    }
 
     sourceCache.setFeatureState(sourceLayer, feature.id, state);
   }
@@ -765,27 +771,6 @@ class Style extends Evented {
     return sourceCache ? querySourceFeatures(sourceCache, params) : [];
   }
 
-  addSourceType(name, SourceType, callback) {
-    if (Style.getSourceType(name)) {
-      return callback(new Error(`A source type called "${name}" already exists.`));
-    }
-
-    Style.setSourceType(name, SourceType);
-
-    if (!SourceType.workerSourceURL) {
-      return callback(null, null);
-    }
-
-    this.dispatcher.broadcast(
-      'loadWorkerSource',
-      {
-        name: name,
-        url: SourceType.workerSourceURL
-      },
-      callback
-    );
-  }
-
   getLight() {
     return this.light.getLight();
   }
@@ -939,12 +924,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/symbol_style_layer_properties.js

@@ -106,7 +106,7 @@ const layout = new Properties({
     expression: { parameters: ['zoom'] }
   }),
   'text-field': new DataDrivenProperty({
-    type: 'string',
+    type: 'formatted',
     default: '',
     tokens: true,
     expression: { parameters: ['zoom', 'feature'] }