@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/source/source_state.js

@@ -1,23 +1,100 @@
 /**
- * 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,22 +102,57 @@ 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];
       }
-      changes[sourceLayer] = layerStates;
+      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];
+        }
+      }
+
+      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);
+    }
   }
 }
 
-module.exports = SourceFeatureState;
+export default SourceFeatureState;

package/src/source/tile.js

@@ -1,18 +1,16 @@
-const { deepEqual } = require('../util/object');
-const uniqueId = require('../util/unique_id');
-const { deserialize: deserializeBucket } = 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');
-const browser = require('../util/browser');
-const EvaluationParameters = require('../style/evaluation_parameters');
+import { CollisionBoxArray, RasterBoundsArray } from '../data/array_types.js';
+import { updateBuckets } from '../data/bucket.js';
+import EXTENT from '../data/extent.js';
+import { TriangleIndexArray } from '../data/index_array_type.js';
+import rasterBoundsAttributes from '../data/raster_bounds_attributes.js';
+import SegmentVector from '../data/segment.js';
+import Texture from '../render/texture.js';
+import EvaluationParameters from '../style/evaluation_parameters.js';
+import featureFilter from '../style-spec/feature_filter/index.js';
+import browser from '../util/browser.js';
+import { deepEqual } from '../util/object.js';
+import uniqueId from '../util/unique_id.js';
+import GeoJSONFeature from '../util/vectortile_to_geojson.js';
 
 /**
  * A tile object is the combination of a Coordinate, which defines
@@ -30,7 +28,7 @@ class Tile {
     this.uid = uniqueId();
     this.uses = 0;
     this.tileSize = size;
-    this.buckets = {};
+    this.buckets = new Map();
     this.queryPadding = 0;
     this.hasSymbolBuckets = false;
 
@@ -39,8 +37,12 @@ class Tile {
 
   registerFadeDuration(duration) {
     const fadeEndTime = duration + this.timeAdded;
-    if (fadeEndTime < browser.now()) return;
-    if (this.fadeEndTime && fadeEndTime < this.fadeEndTime) return;
+    if (fadeEndTime < browser.now()) {
+      return;
+    }
+    if (this.fadeEndTime && fadeEndTime < this.fadeEndTime) {
+      return;
+    }
 
     this.fadeEndTime = fadeEndTime;
   }
@@ -58,7 +60,7 @@ class Tile {
    * @param painter
    * @returns {undefined}
    */
-  loadVectorData(data, painter, justReloaded) {
+  loadVectorData(data, painter) {
     if (this.hasData()) {
       this.unloadVectorData();
     }
@@ -73,38 +75,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 +110,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 +131,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 +167,9 @@ class Tile {
     maxPitchScaleFactor,
     pixelPosMatrix
   ) {
-    if (!this.latestFeatureIndex?.rawTileData) return {};
+    if (!this.latestFeatureIndex?.vectorTile) {
+      return {};
+    }
 
     return this.latestFeatureIndex.query(
       {
@@ -197,14 +188,18 @@ class Tile {
   }
 
   querySourceFeatures(result, params) {
-    if (!this.latestFeatureIndex?.rawTileData) return;
+    if (!this.latestFeatureIndex?.vectorTile) {
+      return;
+    }
 
     const vtLayers = this.latestFeatureIndex.loadVTLayers();
 
     const sourceLayer = params ? params.sourceLayer : '';
     const layer = vtLayers._geojsonTileLayer || vtLayers[sourceLayer];
 
-    if (!layer) return;
+    if (!layer) {
+      return;
+    }
 
     const filter = featureFilter(params?.filter);
     const { z, x, y } = this.tileID.canonical;
@@ -237,14 +232,18 @@ class Tile {
 
   setMask(mask, context) {
     // don't redo buffer work if the mask is the same;
-    if (deepEqual(this.mask, mask)) return;
+    if (deepEqual(this.mask, mask)) {
+      return;
+    }
 
     this.mask = mask;
     this.clearMask();
 
     // We want to render the full tile, and keeping the segments/vertices/indices empty means
     // using the global shared buffers for covering the entire tile.
-    if (deepEqual(mask, { 0: true })) return;
+    if (deepEqual(mask, { 0: true })) {
+      return;
+    }
 
     const maskedBoundsArray = new RasterBoundsArray();
     const indexArray = new TriangleIndexArray();
@@ -258,16 +257,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,19 +292,20 @@ 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];
       const sourceLayerStates = states[sourceLayerId];
-      if (!sourceLayer || !sourceLayerStates || Object.keys(sourceLayerStates).length === 0) continue;
+      if (!sourceLayer || !sourceLayerStates || Object.keys(sourceLayerStates).length === 0) {
+        continue;
+      }
 
       bucket.update(sourceLayerStates, sourceLayer, this.imageAtlas?.patternPositions || {});
       if (painter?.style) {
@@ -330,4 +331,4 @@ class Tile {
   }
 }
 
-module.exports = Tile;
+export default Tile;

package/src/source/tile_bounds.js

@@ -1,40 +1,47 @@
-const LngLatBounds = require('../geo/lng_lat_bounds');
-
-const { clamp } = require('../util/util');
+import LngLatBounds from '../geo/lng_lat_bounds.js';
+import { clamp } from '../util/util.js';
 
 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;
+export default TileBounds;

package/src/source/tile_cache.js

@@ -1,4 +1,4 @@
-const assert = require('assert');
+import assert from 'assert';
 
 /**
  * A [fifo cache](http://en.wikipedia.org/wiki/Cache_algorithms)
@@ -119,4 +119,4 @@ class TileCache {
   }
 }
 
-module.exports = TileCache;
+export default TileCache;

package/src/source/tile_id.js

@@ -1,10 +1,7 @@
-const { getTileBBox } = require('@mapbox/whoots-js');
+import assert from 'assert';
+import Coordinate from '../geo/coordinate.js';
 
-const assert = require('assert');
-const { register } = require('../util/transfer_registry');
-const Coordinate = require('../geo/coordinate');
-
-class CanonicalTileID {
+export class CanonicalTileID {
   constructor(z, x, y) {
     assert(z >= 0 && z <= 25);
     assert(x >= 0 && x < 2 ** z);
@@ -24,7 +21,7 @@ class CanonicalTileID {
   }
 }
 
-class UnwrappedTileID {
+export class UnwrappedTileID {
   constructor(wrap, canonical) {
     this.wrap = wrap;
     this.canonical = canonical;
@@ -32,7 +29,7 @@ class UnwrappedTileID {
   }
 }
 
-class OverscaledTileID {
+export class OverscaledTileID {
   constructor(overscaledZ, wrap, z, x, y) {
     assert(overscaledZ >= z);
     this.overscaledZ = overscaledZ;
@@ -91,16 +88,30 @@ class OverscaledTileID {
   }
 
   isLessThan(rhs) {
-    if (this.wrap < rhs.wrap) return true;
-    if (this.wrap > rhs.wrap) return false;
+    if (this.wrap < rhs.wrap) {
+      return true;
+    }
+    if (this.wrap > rhs.wrap) {
+      return false;
+    }
 
-    if (this.overscaledZ < rhs.overscaledZ) return true;
-    if (this.overscaledZ > rhs.overscaledZ) return false;
+    if (this.overscaledZ < rhs.overscaledZ) {
+      return true;
+    }
+    if (this.overscaledZ > rhs.overscaledZ) {
+      return false;
+    }
 
-    if (this.canonical.x < rhs.canonical.x) return true;
-    if (this.canonical.x > rhs.canonical.x) return false;
+    if (this.canonical.x < rhs.canonical.x) {
+      return true;
+    }
+    if (this.canonical.x > rhs.canonical.x) {
+      return false;
+    }
 
-    if (this.canonical.y < rhs.canonical.y) return true;
+    if (this.canonical.y < rhs.canonical.y) {
+      return true;
+    }
     return false;
   }
 
@@ -133,18 +144,11 @@ class OverscaledTileID {
   }
 }
 
-function calculateKey(wrap, z, x, y) {
+export function calculateKey(wrap, z, x, y) {
   wrap *= 2;
-  if (wrap < 0) wrap = wrap * -1 - 1;
+  if (wrap < 0) {
+    wrap = wrap * -1 - 1;
+  }
   const dim = 1 << z;
   return (dim * dim * wrap + dim * y + x) * 32 + z;
 }
-
-register('CanonicalTileID', CanonicalTileID);
-register('OverscaledTileID', OverscaledTileID, { omit: ['posMatrix'] });
-
-module.exports = {
-  CanonicalTileID,
-  UnwrappedTileID,
-  OverscaledTileID
-};