@mapwhit/tilerenderer 0.52.0 → 1.0.0

package/src/source/source_state.js

@@ -1,23 +1,84 @@
 /**
- * SourceFeatureState manages the state and state changes
+ * SourceFeatureState manages the state and pending changes
  * to features in a source, separated by source layer.
+ * stateChanges and deletedStates batch all changes to the tile (updates and removes, respectively)
+ * between coalesce() events. addFeatureState() and removeFeatureState() also update their counterpart's
+ * list of changes, such that coalesce() can apply the proper state changes while agnostic to the order of operations.
+ * In deletedStates, all null's denote complete removal of state at that scope
  *
  * @private
  */
 class SourceFeatureState {
   #state = {};
   #stateChanges = {};
+  #deletedStates = {};
 
-  updateState(sourceLayer, feature, state) {
+  updateState(sourceLayer, feature, newState) {
     const changes = (this.#stateChanges[sourceLayer] ??= {});
     const featureState = (changes[feature] ??= {});
-    Object.assign(featureState, state);
+    Object.assign(featureState, newState);
+
+    if (this.#deletedStates[sourceLayer] === null) {
+      this.#deletedStates[sourceLayer] = {};
+      for (const ft in this.#state[sourceLayer]) {
+        if (ft !== feature) this.#deletedStates[sourceLayer][ft] = null;
+      }
+    } else {
+      const featureDeletionQueued =
+        this.#deletedStates[sourceLayer] && this.#deletedStates[sourceLayer][feature] === null;
+      if (featureDeletionQueued) {
+        this.#deletedStates[sourceLayer][feature] = {};
+        for (const prop in this.state[sourceLayer][feature]) {
+          if (!newState[prop]) this.#deletedStates[sourceLayer][feature][prop] = null;
+        }
+      } else {
+        for (const key in newState) {
+          const deletionInQueue = this.#deletedStates[sourceLayer]?.[feature]?.[key] === null;
+          if (deletionInQueue) delete this.#deletedStates[sourceLayer][feature][key];
+        }
+      }
+    }
+  }
+
+  removeFeatureState(sourceLayer, featureId, key) {
+    const sourceLayerDeleted = this.#deletedStates[sourceLayer] === null;
+    if (sourceLayerDeleted) return;
+
+    const feature = String(featureId);
+
+    this.#deletedStates[sourceLayer] = this.#deletedStates[sourceLayer] || {};
+
+    if (key && featureId !== undefined) {
+      if (this.#deletedStates[sourceLayer][feature] !== null) {
+        this.#deletedStates[sourceLayer][feature] = this.#deletedStates[sourceLayer][feature] || {};
+        this.#deletedStates[sourceLayer][feature][key] = null;
+      }
+    } else if (featureId !== undefined) {
+      const updateInQueue = this.#stateChanges[sourceLayer]?.[feature];
+      if (updateInQueue) {
+        this.#deletedStates[sourceLayer][feature] = {};
+        for (key in this.#stateChanges[sourceLayer][feature]) this.#deletedStates[sourceLayer][feature][key] = null;
+      } else {
+        this.#deletedStates[sourceLayer][feature] = null;
+      }
+    } else {
+      this.#deletedStates[sourceLayer] = null;
+    }
   }
 
   getState(sourceLayer, feature) {
     const base = this.#state[sourceLayer];
     const changes = this.#stateChanges[sourceLayer];
-    return Object.assign({}, base?.[feature], changes?.[feature]);
+    const reconciledState = Object.assign({}, base?.[feature], changes?.[feature]);
+
+    //return empty object if the whole source layer is awaiting deletion
+    if (this.#deletedStates[sourceLayer] === null) return {};
+    if (this.#deletedStates[sourceLayer]) {
+      const featureDeletions = this.#deletedStates[sourceLayer][feature];
+      if (featureDeletions === null) return {};
+      for (const prop in featureDeletions) delete reconciledState[prop];
+    }
+    return reconciledState;
   }
 
   initializeTileState(tile, painter) {
@@ -25,21 +86,49 @@ class SourceFeatureState {
   }
 
   coalesceChanges(tiles, painter) {
-    const changes = {};
+    //track changes with full state objects, but only for features that got modified
+    const featuresChanged = {};
     for (const sourceLayer in this.#stateChanges) {
       this.#state[sourceLayer] ??= {};
       const layerStates = {};
-      for (const id in this.#stateChanges[sourceLayer]) {
-        this.#state[sourceLayer][id] ??= {};
-        Object.assign(this.#state[sourceLayer][id], this.#stateChanges[sourceLayer][id]);
-        layerStates[id] = this.#state[sourceLayer][id];
+      for (const feature in this.#stateChanges[sourceLayer]) {
+        if (!this.#state[sourceLayer][feature]) this.#state[sourceLayer][feature] = {};
+        Object.assign(this.#state[sourceLayer][feature], this.#stateChanges[sourceLayer][feature]);
+        layerStates[feature] = this.#state[sourceLayer][feature];
+      }
+      featuresChanged[sourceLayer] = layerStates;
+    }
+    for (const sourceLayer in this.#deletedStates) {
+      this.#state[sourceLayer] = this.#state[sourceLayer] || {};
+      const layerStates = {};
+
+      if (this.#deletedStates[sourceLayer] === null) {
+        for (const ft in this.#state[sourceLayer]) layerStates[ft] = {};
+        this.#state[sourceLayer] = {};
+      } else {
+        for (const feature in this.#deletedStates[sourceLayer]) {
+          const deleteWholeFeatureState = this.#deletedStates[sourceLayer][feature] === null;
+          if (deleteWholeFeatureState) this.#state[sourceLayer][feature] = {};
+          else {
+            for (const key of Object.keys(this.#deletedStates[sourceLayer][feature])) {
+              delete this.#state[sourceLayer][feature][key];
+            }
+          }
+          layerStates[feature] = this.#state[sourceLayer][feature];
+        }
       }
-      changes[sourceLayer] = layerStates;
+
+      featuresChanged[sourceLayer] = featuresChanged[sourceLayer] || {};
+      Object.assign(featuresChanged[sourceLayer], layerStates);
     }
     this.#stateChanges = {};
-    if (Object.keys(changes).length === 0) return;
+    this.#deletedStates = {};
 
-    Object.values(tiles).forEach(tile => tile.setFeatureState(changes, painter));
+    if (Object.keys(featuresChanged).length === 0) return;
+
+    for (const tile of tiles) {
+      tile.setFeatureState(featuresChanged, painter);
+    }
   }
 }
 

package/src/source/tile.js

@@ -1,13 +1,12 @@
 const { deepEqual } = require('../util/object');
 const uniqueId = require('../util/unique_id');
-const { deserialize: deserializeBucket } = require('../data/bucket');
+const { updateBuckets } = require('../data/bucket');
 const GeoJSONFeature = require('../util/vectortile_to_geojson');
 const featureFilter = require('../style-spec/feature_filter');
 const SymbolBucket = require('../data/bucket/symbol_bucket');
 const { RasterBoundsArray, CollisionBoxArray } = require('../data/array_types');
 const rasterBoundsAttributes = require('../data/raster_bounds_attributes');
 const EXTENT = require('../data/extent');
-const { default: Point } = require('@mapbox/point-geometry');
 const Texture = require('../render/texture');
 const SegmentVector = require('../data/segment');
 const { TriangleIndexArray } = require('../data/index_array_type');
@@ -30,7 +29,7 @@ class Tile {
     this.uid = uniqueId();
     this.uses = 0;
     this.tileSize = size;
-    this.buckets = {};
+    this.buckets = new Map();
     this.queryPadding = 0;
     this.hasSymbolBuckets = false;
 
@@ -58,7 +57,7 @@ class Tile {
    * @param painter
    * @returns {undefined}
    */
-  loadVectorData(data, painter, justReloaded) {
+  loadVectorData(data, painter) {
     if (this.hasData()) {
       this.unloadVectorData();
     }
@@ -73,38 +72,26 @@ class Tile {
 
     if (data.featureIndex) {
       this.latestFeatureIndex = data.featureIndex;
+      if (data.vectorTile) {
+        // Only vector tiles have `vectorTile`, and they won't update it for `reloadTile`
+        this.latestVectorTile = data.vectorTile;
+        this.latestFeatureIndex.vectorTile = data.vectorTile;
+      } else if (this.latestVectorTile) {
+        // If `vectorTile` hasn't updated, hold onto a pointer to the last one we received
+        this.latestFeatureIndex.vectorTile = this.latestVectorTile;
+      }
       if (data.rawTileData) {
-        // Only vector tiles have rawTileData, and they won't update it for
-        // 'reloadTile'
+        // rawTileData is present only in vector tiles and only in debug mode
         this.latestRawTileData = data.rawTileData;
-        this.latestFeatureIndex.rawTileData = data.rawTileData;
-      } else if (this.latestRawTileData) {
-        // If rawTileData hasn't updated, hold onto a pointer to the last
-        // one we received
-        this.latestFeatureIndex.rawTileData = this.latestRawTileData;
       }
     }
     this.collisionBoxArray = data.collisionBoxArray;
-    this.buckets = deserializeBucket(data.buckets, painter.style);
 
-    this.hasSymbolBuckets = false;
-    const buckets = Object.values(this.buckets);
-    for (const bucket of buckets) {
-      if (bucket instanceof SymbolBucket) {
-        this.hasSymbolBuckets = true;
-        if (justReloaded) {
-          bucket.justReloaded = true;
-        } else {
-          break;
-        }
-      }
-    }
+    updateBuckets(data.buckets, painter.style);
 
-    this.queryPadding = 0;
-    for (const id in this.buckets) {
-      const bucket = this.buckets[id];
-      this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(id).queryRadius(bucket));
-    }
+    this.buckets = data.buckets;
+    this.hasSymbolBuckets = data.hasSymbolBuckets;
+    this.queryPadding = data.queryPadding;
 
     if (data.imageAtlas) {
       this.imageAtlas = data.imageAtlas;
@@ -120,10 +107,10 @@ class Tile {
    * @private
    */
   unloadVectorData() {
-    for (const bucket of Object.values(this.buckets)) {
+    for (const bucket of this.buckets.values()) {
       bucket.destroy();
     }
-    this.buckets = {};
+    this.buckets.clear();
 
     this.imageAtlasTexture?.destroy();
     if (this.imageAtlas) {
@@ -141,12 +128,11 @@ class Tile {
   }
 
   getBucket(layer) {
-    return this.buckets[layer.id];
+    return this.buckets.get(layer.id);
   }
 
   upload(context) {
-    for (const id in this.buckets) {
-      const bucket = this.buckets[id];
+    for (const bucket of this.buckets.values()) {
       if (bucket.uploadPending()) {
         bucket.upload(context);
       }
@@ -178,7 +164,7 @@ class Tile {
     maxPitchScaleFactor,
     pixelPosMatrix
   ) {
-    if (!this.latestFeatureIndex?.rawTileData) return {};
+    if (!this.latestFeatureIndex?.vectorTile) return {};
 
     return this.latestFeatureIndex.query(
       {
@@ -197,7 +183,7 @@ class Tile {
   }
 
   querySourceFeatures(result, params) {
-    if (!this.latestFeatureIndex?.rawTileData) return;
+    if (!this.latestFeatureIndex?.vectorTile) return;
 
     const vtLayers = this.latestFeatureIndex.loadVTLayers();
 
@@ -258,16 +244,17 @@ class Tile {
     for (let i = 0; i < maskArray.length; i++) {
       const maskCoord = mask[maskArray[i]];
       const vertexExtent = EXTENT >> maskCoord.z;
-      const tlVertex = new Point(maskCoord.x * vertexExtent, maskCoord.y * vertexExtent);
-      const brVertex = new Point(tlVertex.x + vertexExtent, tlVertex.y + vertexExtent);
+      const tlVertexX = maskCoord.x * vertexExtent;
+      const tlVertexY = maskCoord.y * vertexExtent;
+      const brVertexX = tlVertexX + vertexExtent;
+      const brVertexY = tlVertexY + vertexExtent;
 
-      // not sure why flow is complaining here because it doesn't complain at L401
       const segment = this.segments.prepareSegment(4, maskedBoundsArray, indexArray);
 
-      maskedBoundsArray.emplaceBack(tlVertex.x, tlVertex.y, tlVertex.x, tlVertex.y);
-      maskedBoundsArray.emplaceBack(brVertex.x, tlVertex.y, brVertex.x, tlVertex.y);
-      maskedBoundsArray.emplaceBack(tlVertex.x, brVertex.y, tlVertex.x, brVertex.y);
-      maskedBoundsArray.emplaceBack(brVertex.x, brVertex.y, brVertex.x, brVertex.y);
+      maskedBoundsArray.emplaceBack(tlVertexX, tlVertexY, tlVertexX, tlVertexY);
+      maskedBoundsArray.emplaceBack(brVertexX, tlVertexY, brVertexX, tlVertexY);
+      maskedBoundsArray.emplaceBack(tlVertexX, brVertexY, tlVertexX, brVertexY);
+      maskedBoundsArray.emplaceBack(brVertexX, brVertexY, brVertexX, brVertexY);
 
       const offset = segment.vertexLength;
       // 0, 1, 2
@@ -292,14 +279,13 @@ class Tile {
   }
 
   setFeatureState(states, painter) {
-    if (!this.latestFeatureIndex?.rawTileData || Object.keys(states).length === 0) {
+    if (!this.latestFeatureIndex?.vectorTile || Object.keys(states).length === 0) {
       return;
     }
 
     const vtLayers = this.latestFeatureIndex.loadVTLayers();
 
-    for (const id in this.buckets) {
-      const bucket = this.buckets[id];
+    for (const [id, bucket] of this.buckets) {
       // Buckets are grouped by common source-layer
       const sourceLayerId = bucket.layers[0]['sourceLayer'] || '_geojsonTileLayer';
       const sourceLayer = vtLayers[sourceLayerId];

package/src/source/tile_bounds.js

@@ -3,38 +3,38 @@ const LngLatBounds = require('../geo/lng_lat_bounds');
 const { clamp } = require('../util/util');
 
 class TileBounds {
-  constructor(bounds, minzoom, maxzoom) {
-    this.bounds = LngLatBounds.convert(this.validateBounds(bounds));
-    this.minzoom = minzoom || 0;
-    this.maxzoom = maxzoom || 24;
+  constructor(bounds, minzoom = 0, maxzoom = 24) {
+    this.bounds = new LngLatBounds(validateBounds(bounds));
+    this.minzoom = minzoom;
+    this.maxzoom = maxzoom;
   }
 
-  validateBounds(bounds) {
-    // make sure the bounds property contains valid longitude and latitudes
-    if (!Array.isArray(bounds) || bounds.length !== 4) return [-180, -90, 180, 90];
-    return [Math.max(-180, bounds[0]), Math.max(-90, bounds[1]), Math.min(180, bounds[2]), Math.min(90, bounds[3])];
+  contains({ x, y, z }) {
+    const minX = Math.floor(lngX(this.bounds.getWest(), z));
+    if (x < minX) return false;
+    const maxX = Math.ceil(lngX(this.bounds.getEast(), z));
+    if (x >= maxX) return false;
+    const minY = Math.floor(latY(this.bounds.getNorth(), z));
+    if (y < minY) return false;
+    const maxY = Math.ceil(latY(this.bounds.getSouth(), z));
+    return y < maxY;
   }
+}
 
-  contains(tileID) {
-    const level = {
-      minX: Math.floor(this.lngX(this.bounds.getWest(), tileID.z)),
-      minY: Math.floor(this.latY(this.bounds.getNorth(), tileID.z)),
-      maxX: Math.ceil(this.lngX(this.bounds.getEast(), tileID.z)),
-      maxY: Math.ceil(this.latY(this.bounds.getSouth(), tileID.z))
-    };
-    const hit = tileID.x >= level.minX && tileID.x < level.maxX && tileID.y >= level.minY && tileID.y < level.maxY;
-    return hit;
-  }
+function validateBounds(bounds) {
+  // make sure the bounds property contains valid longitude and latitudes
+  if (!Array.isArray(bounds) || bounds.length !== 4) return [-180, -90, 180, 90];
+  return [Math.max(-180, bounds[0]), Math.max(-90, bounds[1]), Math.min(180, bounds[2]), Math.min(90, bounds[3])];
+}
 
-  lngX(lng, zoom) {
-    return (lng + 180) * (2 ** zoom / 360);
-  }
+function lngX(lng, zoom) {
+  return (lng + 180) * (2 ** zoom / 360);
+}
 
-  latY(lat, zoom) {
-    const f = clamp(Math.sin((Math.PI / 180) * lat), -0.9999, 0.9999);
-    const scale = 2 ** zoom / (2 * Math.PI);
-    return 2 ** (zoom - 1) + 0.5 * Math.log((1 + f) / (1 - f)) * -scale;
-  }
+function latY(lat, zoom) {
+  const f = clamp(Math.sin((Math.PI / 180) * lat), -0.9999, 0.9999);
+  const scale = 2 ** zoom / (2 * Math.PI);
+  return 2 ** (zoom - 1) + 0.5 * Math.log((1 + f) / (1 - f)) * -scale;
 }
 
 module.exports = TileBounds;

package/src/source/tile_id.js

@@ -1,7 +1,6 @@
 const { getTileBBox } = require('@mapbox/whoots-js');
 
 const assert = require('assert');
-const { register } = require('../util/transfer_registry');
 const Coordinate = require('../geo/coordinate');
 
 class CanonicalTileID {
@@ -140,11 +139,9 @@ function calculateKey(wrap, z, x, y) {
   return (dim * dim * wrap + dim * y + x) * 32 + z;
 }
 
-register('CanonicalTileID', CanonicalTileID);
-register('OverscaledTileID', OverscaledTileID, { omit: ['posMatrix'] });
-
 module.exports = {
   CanonicalTileID,
   UnwrappedTileID,
-  OverscaledTileID
+  OverscaledTileID,
+  calculateKey
 };

package/src/source/vector_tile_source.js

@@ -3,15 +3,14 @@ const { pick } = require('../util/object');
 const loadTileJSON = require('./load_tilejson');
 const TileBounds = require('./tile_bounds');
 const browser = require('../util/browser');
-
-// register feature index for worker transfer
-require('../data/feature_index');
+const VectorTileWorkerSource = require('./vector_tile_worker_source');
 
 class VectorTileSource extends Evented {
-  constructor(id, options, dispatcher, eventedParent) {
+  #worker;
+
+  constructor(id, options, eventedParent, { resources, layerIndex, showTileBoundaries }) {
     super();
     this.id = id;
-    this.dispatcher = dispatcher;
 
     this.type = 'vector';
     this.minzoom = 0;
@@ -20,6 +19,7 @@ class VectorTileSource extends Evented {
     this.tileSize = 512;
     this.reparseOverscaled = true;
     this.isTileClipped = true;
+    this._showTileBoundaries = showTileBoundaries;
 
     Object.assign(this, pick(options, ['url', 'scheme', 'tileSize']));
     this._options = Object.assign({ type: 'vector' }, options);
@@ -29,6 +29,7 @@ class VectorTileSource extends Evented {
     }
 
     this.setEventedParent(eventedParent);
+    this.#worker = new VectorTileWorkerSource(resources, layerIndex);
   }
 
   async load() {
@@ -58,10 +59,6 @@ class VectorTileSource extends Evented {
     this.load();
   }
 
-  serialize() {
-    return Object.assign({}, this._options);
-  }
-
   async loadTile(tile) {
     if (tile.workerID != null && tile.state === 'loading') {
       tile.reloadPromise ??= Promise.withResolvers();
@@ -86,7 +83,7 @@ class VectorTileSource extends Evented {
         throw err;
       }
       const params = {
-        response: { data: rawData.slice() },
+        response: { data: rawData },
         uid: tile.uid,
         tileID: tile.tileID,
         zoom: tile.tileID.overscaledZ,
@@ -95,11 +92,14 @@ class VectorTileSource extends Evented {
         source: this.id,
         pixelRatio: browser.devicePixelRatio,
         showCollisionBoxes: this.map.showCollisionBoxes,
-        globalState: this.map.getGlobalState()
+        globalState: this.map.getGlobalState(),
+        painter: this.map.painter
       };
-      tile.workerID ??= this.dispatcher.nextWorkerId();
-      const data = await this.dispatcher.send('loadTile', params, tile.workerID);
-      data.rawTileData = rawData;
+      tile.workerID ??= true;
+      const data = await this.#worker.loadTile(params);
+      if (this._showTileBoundaries) {
+        data.rawTileData = rawData;
+      }
       tile.loadVectorData(data, this.map.painter);
     } catch (err) {
       if (tile.aborted) {

package/src/source/vector_tile_worker_source.js

@@ -1,19 +1,6 @@
 const { VectorTile } = require('@mapwhit/vector-tile');
 const Protobuf = require('@mapwhit/pbf');
-const WorkerTile = require('./worker_tile');
-
-function loadVectorTile(params) {
-  if (!params.response) {
-    throw new Error('no tile data');
-  }
-  const { data } = params.response;
-  if (!data) {
-    return;
-  }
-  return {
-    vectorTile: new VectorTile(new Protobuf(data))
-  };
-}
+const makeWorkerTile = require('./worker_tile');
 
 /**
  * The {@link WorkerSource} implementation that supports {@link VectorTileSource}.
@@ -31,10 +18,22 @@ class VectorTileWorkerSource {
    * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
    * loads the pbf at `params.url`.
    */
-  constructor(resources, layerIndex, loadVectorData = loadVectorTile) {
+  constructor(resources, layerIndex) {
     this.resources = resources;
     this.layerIndex = layerIndex;
-    this.loadVectorData = loadVectorData;
+  }
+
+  loadVectorData(params) {
+    if (!params.response) {
+      throw new Error('no tile data');
+    }
+    const { data } = params.response;
+    if (!data) {
+      return;
+    }
+    return {
+      vectorTile: new VectorTile(new Protobuf(data))
+    };
   }
 
   /**
@@ -47,13 +46,10 @@ class VectorTileWorkerSource {
     if (!response) {
       return;
     }
-    const { vectorTile, rawData } = response;
-    const workerTile = new WorkerTile(params);
-    workerTile.globalState = params.globalState;
-    workerTile.vectorTile = vectorTile;
-    const result = await workerTile.parse(vectorTile, this.layerIndex, this.resources);
-    if (rawData) {
-      result.rawTileData = rawData;
+    const { vectorTile } = response;
+    const result = await makeWorkerTile(params, vectorTile, this.layerIndex, this.resources);
+    if (vectorTile) {
+      result.vectorTile = vectorTile;
     }
     return result;
   }