@mapwhit/tilerenderer 0.47.1

package/src/source/source_state.js

@@ -0,0 +1,55 @@
+/**
+ * SourceFeatureState manages the state and state changes
+ * to features in a source, separated by source layer.
+ *
+ * @private
+ */
+class SourceFeatureState {
+  constructor() {
+    this.state = {};
+    this.stateChanges = {};
+  }
+
+  updateState(sourceLayer, feature, state) {
+    feature = String(feature);
+    this.stateChanges[sourceLayer] = this.stateChanges[sourceLayer] || {};
+    this.stateChanges[sourceLayer][feature] = this.stateChanges[sourceLayer][feature] || {};
+    Object.assign(this.stateChanges[sourceLayer][feature], state);
+  }
+
+  getState(sourceLayer, feature) {
+    feature = String(feature);
+    const base = this.state[sourceLayer] || {};
+    const changes = this.stateChanges[sourceLayer] || {};
+    return Object.assign({}, base[feature], changes[feature]);
+  }
+
+  initializeTileState(tile, painter) {
+    tile.setFeatureState(this.state, painter);
+  }
+
+  coalesceChanges(tiles, painter) {
+    const changes = {};
+    for (const sourceLayer in this.stateChanges) {
+      this.state[sourceLayer] = this.state[sourceLayer] || {};
+      const layerStates = {};
+      for (const id in this.stateChanges[sourceLayer]) {
+        if (!this.state[sourceLayer][id]) {
+          this.state[sourceLayer][id] = {};
+        }
+        Object.assign(this.state[sourceLayer][id], this.stateChanges[sourceLayer][id]);
+        layerStates[id] = this.state[sourceLayer][id];
+      }
+      changes[sourceLayer] = layerStates;
+    }
+    this.stateChanges = {};
+    if (Object.keys(changes).length === 0) return;
+
+    for (const id in tiles) {
+      const tile = tiles[id];
+      tile.setFeatureState(changes, painter);
+    }
+  }
+}
+
+module.exports = SourceFeatureState;

package/src/source/tile.js

@@ -0,0 +1,332 @@
+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 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');
+
+/**
+ * A tile object is the combination of a Coordinate, which defines
+ * its place, as well as a unique ID and data tracking for its content
+ *
+ * @private
+ */
+class Tile {
+  /**
+   * @param {OverscaledTileID} tileID
+   * @param size
+   */
+  constructor(tileID, size) {
+    this.tileID = tileID;
+    this.uid = uniqueId();
+    this.uses = 0;
+    this.tileSize = size;
+    this.buckets = {};
+    this.queryPadding = 0;
+    this.hasSymbolBuckets = false;
+
+    this.state = 'loading';
+  }
+
+  registerFadeDuration(duration) {
+    const fadeEndTime = duration + this.timeAdded;
+    if (fadeEndTime < browser.now()) return;
+    if (this.fadeEndTime && fadeEndTime < this.fadeEndTime) return;
+
+    this.fadeEndTime = fadeEndTime;
+  }
+
+  wasRequested() {
+    return this.state === 'errored' || this.state === 'loaded' || this.state === 'reloading';
+  }
+
+  /**
+   * Given a data object with a 'buffers' property, load it into
+   * this tile's elementGroups and buffers properties and set loaded
+   * to true. If the data is null, like in the case of an empty
+   * GeoJSON tile, no-op but still set loaded to true.
+   * @param {Object} data
+   * @param painter
+   * @returns {undefined}
+   */
+  loadVectorData(data, painter, justReloaded) {
+    if (this.hasData()) {
+      this.unloadVectorData();
+    }
+
+    this.state = 'loaded';
+
+    // empty GeoJSON tile
+    if (!data) {
+      this.collisionBoxArray = new CollisionBoxArray();
+      return;
+    }
+
+    if (data.featureIndex) {
+      this.latestFeatureIndex = data.featureIndex;
+      if (data.rawTileData) {
+        // Only vector tiles have rawTileData, and they won't update it for
+        // 'reloadTile'
+        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;
+        }
+      }
+    }
+
+    this.queryPadding = 0;
+    for (const bucket of buckets) {
+      this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(bucket.layerIds[0]).queryRadius(bucket));
+    }
+
+    if (data.imageAtlas) {
+      this.imageAtlas = data.imageAtlas;
+    }
+    if (data.glyphAtlasImage) {
+      this.glyphAtlasImage = data.glyphAtlasImage;
+    }
+  }
+
+  /**
+   * Release any data or WebGL resources referenced by this tile.
+   * @returns {undefined}
+   * @private
+   */
+  unloadVectorData() {
+    for (const bucket of Object.values(this.buckets)) {
+      bucket.destroy();
+    }
+    this.buckets = {};
+
+    this.imageAtlasTexture?.destroy();
+    if (this.imageAtlas) {
+      this.imageAtlas = null;
+    }
+    this.glyphAtlasTexture?.destroy();
+    this.latestFeatureIndex = null;
+    this.state = 'unloaded';
+  }
+
+  unloadDEMData() {
+    this.dem = null;
+    this.neighboringTiles = null;
+    this.state = 'unloaded';
+  }
+
+  getBucket(layer) {
+    return this.buckets[layer.id];
+  }
+
+  upload(context) {
+    for (const id in this.buckets) {
+      const bucket = this.buckets[id];
+      if (bucket.uploadPending()) {
+        bucket.upload(context);
+      }
+    }
+
+    const gl = context.gl;
+
+    if (this.imageAtlas && !this.imageAtlas.uploaded) {
+      this.imageAtlasTexture = new Texture(context, this.imageAtlas.image, gl.RGBA);
+      this.imageAtlas.uploaded = true;
+    }
+
+    if (this.glyphAtlasImage) {
+      this.glyphAtlasTexture = new Texture(context, this.glyphAtlasImage, gl.ALPHA);
+      this.glyphAtlasImage = null;
+    }
+  }
+
+  // Queries non-symbol features rendered for this tile.
+  // Symbol features are queried globally
+  queryRenderedFeatures(
+    layers,
+    sourceFeatureState,
+    queryGeometry,
+    cameraQueryGeometry,
+    scale,
+    params,
+    transform,
+    maxPitchScaleFactor,
+    pixelPosMatrix
+  ) {
+    if (!this.latestFeatureIndex?.rawTileData) return {};
+
+    return this.latestFeatureIndex.query(
+      {
+        queryGeometry,
+        cameraQueryGeometry,
+        scale,
+        tileSize: this.tileSize,
+        pixelPosMatrix,
+        transform,
+        params,
+        queryPadding: this.queryPadding * maxPitchScaleFactor
+      },
+      layers,
+      sourceFeatureState
+    );
+  }
+
+  querySourceFeatures(result, params) {
+    if (!this.latestFeatureIndex?.rawTileData) return;
+
+    const vtLayers = this.latestFeatureIndex.loadVTLayers();
+
+    const sourceLayer = params ? params.sourceLayer : '';
+    const layer = vtLayers._geojsonTileLayer || vtLayers[sourceLayer];
+
+    if (!layer) return;
+
+    const filter = featureFilter(params?.filter);
+    const { z, x, y } = this.tileID.canonical;
+    const coord = { z, x, y };
+
+    for (let i = 0; i < layer.length; i++) {
+      const feature = layer.feature(i);
+      if (filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) {
+        const geojsonFeature = new GeoJSONFeature(feature, z, x, y);
+        geojsonFeature.tile = coord;
+        result.push(geojsonFeature);
+      }
+    }
+  }
+
+  clearMask() {
+    if (this.segments) {
+      this.segments.destroy();
+      delete this.segments;
+    }
+    if (this.maskedBoundsBuffer) {
+      this.maskedBoundsBuffer.destroy();
+      delete this.maskedBoundsBuffer;
+    }
+    if (this.maskedIndexBuffer) {
+      this.maskedIndexBuffer.destroy();
+      delete this.maskedIndexBuffer;
+    }
+  }
+
+  setMask(mask, context) {
+    // don't redo buffer work if the mask is the same;
+    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;
+
+    const maskedBoundsArray = new RasterBoundsArray();
+    const indexArray = new TriangleIndexArray();
+
+    this.segments = new SegmentVector();
+    // Create a new segment so that we will upload (empty) buffers even when there is nothing to
+    // draw for this tile.
+    this.segments.prepareSegment(0, maskedBoundsArray, indexArray);
+
+    const maskArray = Object.keys(mask);
+    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);
+
+      // 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);
+
+      const offset = segment.vertexLength;
+      // 0, 1, 2
+      // 1, 2, 3
+      indexArray.emplaceBack(offset, offset + 1, offset + 2);
+      indexArray.emplaceBack(offset + 1, offset + 2, offset + 3);
+
+      segment.vertexLength += 4;
+      segment.primitiveLength += 2;
+    }
+
+    this.maskedBoundsBuffer = context.createVertexBuffer(maskedBoundsArray, rasterBoundsAttributes.members);
+    this.maskedIndexBuffer = context.createIndexBuffer(indexArray);
+  }
+
+  hasData() {
+    return this.state === 'loaded' || this.state === 'reloading';
+  }
+
+  patternsLoaded() {
+    return this.imageAtlas && !!Object.keys(this.imageAtlas.patternPositions).length;
+  }
+
+  setFeatureState(states, painter) {
+    if (!this.latestFeatureIndex?.rawTileData || Object.keys(states).length === 0) {
+      return;
+    }
+
+    const vtLayers = this.latestFeatureIndex.loadVTLayers();
+
+    for (const i in this.buckets) {
+      const bucket = this.buckets[i];
+      // 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;
+
+      bucket.update(sourceLayerStates, sourceLayer, this.imageAtlas?.patternPositions || {});
+      if (painter?.style) {
+        this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(bucket.layerIds[0]).queryRadius(bucket));
+      }
+    }
+  }
+
+  holdingForFade() {
+    return this.symbolFadeHoldUntil !== undefined;
+  }
+
+  symbolFadeFinished() {
+    return !this.symbolFadeHoldUntil || this.symbolFadeHoldUntil < browser.now();
+  }
+
+  clearFadeHold() {
+    this.symbolFadeHoldUntil = undefined;
+  }
+
+  setHoldDuration(duration) {
+    this.symbolFadeHoldUntil = browser.now() + duration;
+  }
+}
+
+module.exports = Tile;

package/src/source/tile_bounds.js

@@ -0,0 +1,40 @@
+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;
+  }
+
+  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(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;
+  }
+
+  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;
+  }
+}
+
+module.exports = TileBounds;

package/src/source/tile_cache.js

@@ -0,0 +1,122 @@
+const assert = require('assert');
+
+/**
+ * A [fifo cache](http://en.wikipedia.org/wiki/Cache_algorithms)
+ */
+class TileCache {
+  #data = new Map();
+
+  /**
+   * @param {number} max number of permitted values
+   * @param {Function} onRemove callback called with items when they expire
+   */
+  constructor(max, onRemove) {
+    this.max = max;
+    this.onRemove = onRemove;
+  }
+
+  /**
+   * Clear the cache
+   *
+   * @returns {TileCache} this cache
+   */
+  reset() {
+    for (const data of this.#data.values()) {
+      this.onRemove(data);
+    }
+    this.#data.clear();
+    return this;
+  }
+
+  /**
+   * Add a key, value combination to the cache, trimming its size if this pushes
+   * it over max length.
+   *
+   * @param {OverscaledTileID} tileID lookup key for the item
+   * @param {*} data any value
+   *
+   * @returns {TileCache} this cache
+   */
+  add(data) {
+    const key = data.tileID.cacheKey;
+    assert(!this.#data.has(key));
+    this.#data.set(key, data);
+    if (this.#data.size > this.max) {
+      const [[key, tile]] = this.#data;
+      this.onRemove(tile);
+      this.#data.delete(key);
+    }
+
+    return this;
+  }
+
+  /**
+   * Determine whether the value attached to `key` is present
+   *
+   * @param {OverscaledTileID} tileID the key to be looked-up
+   * @returns {boolean} whether the cache has this value
+   */
+  has(tileID) {
+    return this.#data.has(tileID.cacheKey);
+  }
+
+  /**
+   * Get the value attached to a specific key and remove data from cache.
+   * If the key is not found, returns `null`
+   *
+   * @param {OverscaledTileID} tileID the key to look up
+   * @returns {*} the data, or null if it isn't found
+   */
+  getAndRemove(tileID) {
+    return this.#getAndRemoveByKey(tileID.cacheKey);
+  }
+
+  /*
+   * Get and remove the value with the specified key.
+   */
+  #getAndRemoveByKey(key) {
+    const tile = this.#data.get(key);
+    if (tile) {
+      this.#data.delete(key);
+      return tile;
+    }
+  }
+
+  /**
+   * Get the value attached to a specific key without removing data
+   * from the cache. If the key is not found, returns `null`
+   *
+   * @param {OverscaledTileID} tileID the key to look up
+   * @returns {*} the data, or null if it isn't found
+   */
+  get(tileID) {
+    return this.#data.get(tileID.cacheKey);
+  }
+
+  /**
+   * Change the max size of the cache.
+   *
+   * @param {number} max the max size of the cache
+   * @returns {TileCache} this cache
+   */
+  setMaxSize(max) {
+    for (let overflow = this.#data.size - max; overflow > 0; overflow--) {
+      const [[key, data]] = this.#data;
+      this.onRemove(data);
+      this.#data.delete(key);
+    }
+
+    this.max = max;
+    return this;
+  }
+
+  get keys() {
+    return Array.from(this.#data.keys());
+  }
+
+  get size() {
+    return this.#data.size;
+  }
+}
+
+module.exports = TileCache;

package/src/source/tile_id.js

@@ -0,0 +1,150 @@
+const { getTileBBox } = require('@mapbox/whoots-js');
+
+const assert = require('assert');
+const { register } = require('../util/web_worker_transfer');
+const Coordinate = require('../geo/coordinate');
+
+class CanonicalTileID {
+  constructor(z, x, y) {
+    assert(z >= 0 && z <= 25);
+    assert(x >= 0 && x < 2 ** z);
+    assert(y >= 0 && y < 2 ** z);
+    this.z = z;
+    this.x = x;
+    this.y = y;
+    this.key = calculateKey(0, z, x, y);
+  }
+
+  equals(id) {
+    return this.z === id.z && this.x === id.x && this.y === id.y;
+  }
+
+  get cacheKey() {
+    return this.key;
+  }
+}
+
+class UnwrappedTileID {
+  constructor(wrap, canonical) {
+    this.wrap = wrap;
+    this.canonical = canonical;
+    this.key = calculateKey(wrap, canonical.z, canonical.x, canonical.y);
+  }
+}
+
+class OverscaledTileID {
+  constructor(overscaledZ, wrap, z, x, y) {
+    assert(overscaledZ >= z);
+    this.overscaledZ = overscaledZ;
+    this.wrap = wrap;
+    this.canonical = new CanonicalTileID(z, +x, +y);
+    this.key = calculateKey(wrap, overscaledZ, x, y);
+  }
+
+  equals(id) {
+    return this.overscaledZ === id.overscaledZ && this.wrap === id.wrap && this.canonical.equals(id.canonical);
+  }
+
+  scaledTo(targetZ) {
+    assert(targetZ <= this.overscaledZ);
+    const zDifference = this.canonical.z - targetZ;
+    if (targetZ > this.canonical.z) {
+      return new OverscaledTileID(targetZ, this.wrap, this.canonical.z, this.canonical.x, this.canonical.y);
+    }
+    return new OverscaledTileID(
+      targetZ,
+      this.wrap,
+      targetZ,
+      this.canonical.x >> zDifference,
+      this.canonical.y >> zDifference
+    );
+  }
+
+  isChildOf(parent) {
+    const zDifference = this.canonical.z - parent.canonical.z;
+    // We're first testing for z == 0, to avoid a 32 bit shift, which is undefined.
+    return (
+      parent.overscaledZ === 0 ||
+      (parent.overscaledZ < this.overscaledZ &&
+        parent.canonical.x === this.canonical.x >> zDifference &&
+        parent.canonical.y === this.canonical.y >> zDifference)
+    );
+  }
+
+  children(sourceMaxZoom) {
+    if (this.overscaledZ >= sourceMaxZoom) {
+      // return a single tile coord representing a an overscaled tile
+      return [
+        new OverscaledTileID(this.overscaledZ + 1, this.wrap, this.canonical.z, this.canonical.x, this.canonical.y)
+      ];
+    }
+
+    const z = this.canonical.z + 1;
+    const x = this.canonical.x * 2;
+    const y = this.canonical.y * 2;
+    return [
+      new OverscaledTileID(z, this.wrap, z, x, y),
+      new OverscaledTileID(z, this.wrap, z, x + 1, y),
+      new OverscaledTileID(z, this.wrap, z, x, y + 1),
+      new OverscaledTileID(z, this.wrap, z, x + 1, y + 1)
+    ];
+  }
+
+  isLessThan(rhs) {
+    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.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;
+    return false;
+  }
+
+  get cacheKey() {
+    return calculateKey(this.wrap, this.overscaledZ, this.canonical.x, this.canonical.y);
+  }
+
+  wrapped() {
+    return new OverscaledTileID(this.overscaledZ, 0, this.canonical.z, this.canonical.x, this.canonical.y);
+  }
+
+  unwrapTo(wrap) {
+    return new OverscaledTileID(this.overscaledZ, wrap, this.canonical.z, this.canonical.x, this.canonical.y);
+  }
+
+  overscaleFactor() {
+    return 2 ** (this.overscaledZ - this.canonical.z);
+  }
+
+  toUnwrapped() {
+    return new UnwrappedTileID(this.wrap, this.canonical);
+  }
+
+  toString() {
+    return `${this.overscaledZ}/${this.canonical.x}/${this.canonical.y}`;
+  }
+
+  toCoordinate() {
+    return new Coordinate(this.canonical.x + 2 ** this.wrap, this.canonical.y, this.canonical.z);
+  }
+}
+
+function calculateKey(wrap, z, x, y) {
+  wrap *= 2;
+  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
+};