@mapwhit/tilerenderer 0.51.0 → 0.52.0

package/build/min/package.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.50.0"
+  "version": "0.51.1"
 }

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.51.0",
-  "main": "src/index.js",
+  "version": "0.52.0",
+  "exports": {
+    ".": "./src/index.js",
+    "./worker": "./src/worker.js"
+  },
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -10,23 +13,24 @@
   },
   "dependencies": {
     "@mapbox/gl-matrix": "^0.0.1",
-    "@mapbox/point-geometry": "^0.1.0",
-    "@mapbox/unitbezier": "^0.0.0",
+    "@mapbox/point-geometry": "~1",
+    "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/whoots-js": "^3.0.0",
+    "@mapwhit/events": "^0.0.1",
     "@mapwhit/geojson-rewind": "^1.0.0",
     "@mapwhit/pbf": "^1.0.0",
-    "@mapwhit/style-expressions": "^0.0.2",
-    "@mapwhit/vector-tile": "^1.0.0",
-    "@mapwhit/vt-pbf": "^1.0.0",
+    "@mapwhit/style-expressions": "^1.1.0",
+    "@mapwhit/vector-tile": "^2.0.1",
+    "@mapwhit/vt-pbf": "^2.0.0",
     "@pirxpilot/nanoassert": "~1",
     "csscolorparser": "^1.0.3",
     "earcut": "^3.0.1",
     "geojson-vt": "^4.0.2",
     "grid-index": "^1.1.0",
     "murmurhash-js": "^1.0.0",
-    "potpack": "^1.0.1",
+    "potpack": "^2.1.0",
     "quickselect": "^3.0.0",
-    "supercluster": "^2.0.1",
+    "supercluster": "^8.0.1",
     "tinyqueue": "^3.0.0"
   },
   "browser": {

package/src/data/array_types.js

@@ -3,7 +3,7 @@
 const assert = require('assert');
 const { Struct, StructArray } = require('../util/struct_array');
 const { register } = require('../util/transfer_registry');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 /**
  * Implementation of the StructArray layout:

package/src/data/bucket/circle_bucket.js

@@ -23,6 +23,7 @@ function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
 class CircleBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -37,7 +38,9 @@ class CircleBucket {
 
   populate(features, options) {
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) {
+      if (
+        this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      ) {
         const geometry = loadGeometry(feature);
         this.addFeature(feature, geometry, index);
         options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);

package/src/data/bucket/fill_bucket.js

@@ -16,6 +16,7 @@ const EvaluationParameters = require('../../style/evaluation_parameters');
 class FillBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -35,7 +36,10 @@ class FillBucket {
     this.hasPattern = hasPattern('fill', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+      if (
+        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      )
+        continue;
 
       const geometry = loadGeometry(feature);
 

package/src/data/bucket/fill_extrusion_bucket.js

@@ -36,6 +36,7 @@ function addVertex(vertexArray, x, y, nx, ny, nz, t, e) {
 class FillExtrusionBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -53,7 +54,10 @@ class FillExtrusionBucket {
     this.hasPattern = hasPattern('fill-extrusion', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+      if (
+        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      )
+        continue;
 
       const geometry = loadGeometry(feature);
 

package/src/data/bucket/line_bucket.js

@@ -72,6 +72,7 @@ function addLineVertex(layoutVertexBuffer, point, extrude, round, up, dir, lines
 class LineBucket {
   constructor(options) {
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -90,7 +91,10 @@ class LineBucket {
     this.hasPattern = hasPattern('line', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+      if (
+        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
+      )
+        continue;
 
       const geometry = loadGeometry(feature);
 

package/src/data/bucket/symbol_bucket.js

@@ -18,7 +18,7 @@ const {
   GlyphOffsetArray,
   SymbolLineVertexArray
 } = require('../array_types');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 const SegmentVector = require('../segment');
 const { ProgramConfigurationSet } = require('../program_configuration');
 const { TriangleIndexArray, LineIndexArray } = require('../index_array_type');
@@ -176,6 +176,7 @@ class SymbolBucket {
   constructor(options) {
     this.collisionBoxArray = options.collisionBoxArray;
     this.zoom = options.zoom;
+    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.layerIds = this.layers.map(layer => layer.id);
@@ -258,7 +259,7 @@ class SymbolBucket {
 
     const icons = options.iconDependencies;
     const stacks = options.glyphDependencies;
-    const globalProperties = new EvaluationParameters(this.zoom);
+    const globalProperties = new EvaluationParameters(this.zoom, { globalState: this.globalState });
 
     for (const { feature, index, sourceLayerIndex } of features) {
       if (!layer._featureFilter(globalProperties, feature)) {

package/src/geo/transform.js

@@ -1,6 +1,6 @@
 const LngLat = require('./lng_lat');
 
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 const Coordinate = require('./coordinate');
 const { wrap, clamp } = require('../util/util');
 const interpolate = require('../util/interpolate');

package/src/index.js

@@ -7,8 +7,8 @@ module.exports = {
   Style: require('./style/style'),
   LngLat: require('./geo/lng_lat'),
   LngLatBounds: require('./geo/lng_lat_bounds'),
-  Point: require('@mapbox/point-geometry'),
-  Evented: require('./util/evented').Evented,
+  Point: require('@mapbox/point-geometry').default,
+  Evented: require('@mapwhit/events').Evented,
   config: require('./util/config'),
 
   get workerCount() {

package/src/render/glyph_atlas.js

@@ -1,6 +1,6 @@
 const { AlphaImage } = require('../util/image');
 const { register } = require('../util/transfer_registry');
-const potpack = require('potpack');
+const { default: potpack } = require('potpack');
 
 const padding = 1;
 

package/src/render/image_atlas.js

@@ -1,6 +1,6 @@
 const { RGBAImage } = require('../util/image');
 const { register } = require('../util/transfer_registry');
-const potpack = require('potpack');
+const { default: potpack } = require('potpack');
 
 const padding = 1;
 

package/src/render/image_manager.js

@@ -1,4 +1,4 @@
-const potpack = require('potpack');
+const { default: potpack } = require('potpack');
 
 const { RGBAImage } = require('../util/image');
 const { ImagePosition } = require('./image_atlas');

package/src/source/geojson_source.js

@@ -1,4 +1,4 @@
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 
 const EXTENT = require('../data/extent');
 const browser = require('../util/browser');
@@ -184,7 +184,8 @@ class GeoJSONSource extends Evented {
       tileSize: this.tileSize,
       source: this.id,
       pixelRatio: browser.devicePixelRatio,
-      showCollisionBoxes: this.map.showCollisionBoxes
+      showCollisionBoxes: this.map.showCollisionBoxes,
+      globalState: this.map.getGlobalState()
     };
 
     const justReloaded = tile.workerID != null;

package/src/source/geojson_worker_source.js

@@ -1,7 +1,7 @@
 const rewind = require('@mapwhit/geojson-rewind');
 const GeoJSONWrapper = require('./geojson_wrapper');
-const vtpbf = require('@mapwhit/vt-pbf');
-const supercluster = require('supercluster');
+const { fromVectorTileJs } = require('@mapwhit/vt-pbf');
+const { default: Supercluster } = require('supercluster');
 const { default: geojsonvt } = require('geojson-vt');
 const VectorTileWorkerSource = require('./vector_tile_worker_source');
 
@@ -29,7 +29,7 @@ function loadGeoJSONTile(params) {
   // Encode the geojson-vt tile into binary vector tile form.  This
   // is a convenience that allows `FeatureIndex` to operate the same way
   // across `VectorTileSource` and `GeoJSONSource` data.
-  let pbf = vtpbf(geojsonWrapper);
+  let pbf = fromVectorTileJs(geojsonWrapper);
   if (pbf.byteOffset !== 0 || pbf.byteLength !== pbf.buffer.byteLength) {
     // Compatibility with node Buffer (https://github.com/mapbox/pbf/issues/35)
     pbf = new Uint8Array(pbf);
@@ -81,7 +81,7 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
     this._createGeoJSONIndex = params.cluster
       ? () => {
           rewind(data, true);
-          return supercluster(params.superclusterOptions).load(data.features);
+          return new Supercluster(params.superclusterOptions).load(data.features);
         }
       : () => {
           rewind(data, true);

package/src/source/geojson_wrapper.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 const { VectorTileFeature } = require('@mapwhit/vector-tile');
 const EXTENT = require('../data/extent');
 

package/src/source/image_source.js

@@ -2,8 +2,8 @@ const { getCoordinatesCenter } = require('../util/util');
 
 const { CanonicalTileID } = require('./tile_id');
 const LngLat = require('../geo/lng_lat');
-const Point = require('@mapbox/point-geometry');
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { default: Point } = require('@mapbox/point-geometry');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const loadImage = require('../util/loader/image');
 const EXTENT = require('../data/extent');
 const { RasterBoundsArray } = require('../data/array_types');

package/src/source/raster_tile_source.js

@@ -1,6 +1,6 @@
 const { pick } = require('../util/object');
 const loadImage = require('../util/loader/image');
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const loadTileJSON = require('./load_tilejson');
 const TileBounds = require('./tile_bounds');
 const Texture = require('../render/texture');

package/src/source/rtl_text_plugin.js

@@ -1,4 +1,4 @@
-const { Event, Evented } = require('../util/evented');
+const { Event, Evented } = require('@mapwhit/events');
 const browser = require('../util/browser');
 
 let pluginRequested = false;

package/src/source/source_cache.js

@@ -1,11 +1,11 @@
 const { create: createSource } = require('./source');
 const Tile = require('./tile');
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const TileCache = require('./tile_cache');
 const Coordinate = require('../geo/coordinate');
 const { keysDifference } = require('../util/object');
 const EXTENT = require('../data/extent');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 const browser = require('../util/browser');
 const { OverscaledTileID } = require('./tile_id');
 const assert = require('assert');

package/src/source/tile.js

@@ -7,7 +7,7 @@ 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 { default: Point } = require('@mapbox/point-geometry');
 const Texture = require('../render/texture');
 const SegmentVector = require('../data/segment');
 const { TriangleIndexArray } = require('../data/index_array_type');

package/src/source/vector_tile_source.js

@@ -1,4 +1,4 @@
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const { pick } = require('../util/object');
 const loadTileJSON = require('./load_tilejson');
 const TileBounds = require('./tile_bounds');
@@ -94,7 +94,8 @@ class VectorTileSource extends Evented {
         type: this.type,
         source: this.id,
         pixelRatio: browser.devicePixelRatio,
-        showCollisionBoxes: this.map.showCollisionBoxes
+        showCollisionBoxes: this.map.showCollisionBoxes,
+        globalState: this.map.getGlobalState()
       };
       tile.workerID ??= this.dispatcher.nextWorkerId();
       const data = await this.dispatcher.send('loadTile', params, tile.workerID);

package/src/source/vector_tile_worker_source.js

@@ -49,6 +49,7 @@ class VectorTileWorkerSource {
     }
     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) {

package/src/source/worker_tile.js

@@ -31,6 +31,7 @@ class WorkerTile {
     this.source = params.source;
     this.overscaling = this.tileID.overscaleFactor();
     this.showCollisionBoxes = params.showCollisionBoxes;
+    this.globalState = params.globalState;
   }
 
   async parse(data, layerIndex, resources) {
@@ -81,7 +82,7 @@ class WorkerTile {
         if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
         if (layer.visibility === 'none') continue;
 
-        recalculateLayers(family, this.zoom);
+        recalculateLayers(family, this.zoom, { globalState: this.globalState });
 
         const bucket = (buckets[layer.id] = layer.createBucket({
           index: featureIndex.bucketLayerIDs.length,
@@ -91,7 +92,8 @@ class WorkerTile {
           overscaling: this.overscaling,
           collisionBoxArray: this.collisionBoxArray,
           sourceLayerIndex: sourceLayerIndex,
-          sourceID: this.source
+          sourceID: this.source,
+          globalState: this.globalState
         }));
 
         bucket.populate(features, options);
@@ -114,7 +116,7 @@ class WorkerTile {
     for (const key in buckets) {
       const bucket = buckets[key];
       if (bucket instanceof SymbolBucket) {
-        recalculateLayers(bucket.layers, this.zoom);
+        recalculateLayers(bucket.layers, this.zoom, { globalState: this.globalState });
         performSymbolLayout(
           bucket,
           glyphMap,
@@ -127,7 +129,7 @@ class WorkerTile {
         bucket.hasPattern &&
         (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
       ) {
-        recalculateLayers(bucket.layers, this.zoom);
+        recalculateLayers(bucket.layers, this.zoom, { globalState: this.globalState });
         bucket.addFeatures(options, imageAtlas.patternPositions);
       }
     }
@@ -143,9 +145,9 @@ class WorkerTile {
   }
 }
 
-function recalculateLayers(layers, zoom) {
+function recalculateLayers(layers, zoom, options) {
   // Layers are shared and may have been used by a WorkerTile with a different zoom.
-  const parameters = new EvaluationParameters(zoom);
+  const parameters = new EvaluationParameters(zoom, options);
   for (const layer of layers) {
     layer.recalculate(parameters);
   }

package/src/style/evaluation_parameters.js

@@ -8,15 +8,17 @@ class EvaluationParameters {
     this.zoom = zoom;
 
     if (options) {
-      this.now = options.now;
-      this.fadeDuration = options.fadeDuration;
-      this.zoomHistory = options.zoomHistory;
-      this.transition = options.transition;
+      this.now = options.now || 0;
+      this.fadeDuration = options.fadeDuration || 0;
+      this.zoomHistory = options.zoomHistory || new ZoomHistory();
+      this.transition = options.transition || {};
+      this.globalState = options.globalState || {};
     } else {
       this.now = 0;
       this.fadeDuration = 0;
       this.zoomHistory = new ZoomHistory();
       this.transition = {};
+      this.globalState = {};
     }
   }
 

package/src/style/light.js

@@ -1,5 +1,5 @@
 const { sphericalToCartesian } = require('../util/util');
-const { Evented } = require('../util/evented');
+const { Evented } = require('@mapwhit/events');
 const interpolate = require('../util/interpolate');
 
 const lightSpec = {

package/src/style/properties.js

@@ -75,6 +75,10 @@ class PropertyValue {
     return this.expression.kind === 'source' || this.expression.kind === 'composite';
   }
 
+  getGlobalStateRefs() {
+    return this.expression.globalStateRefs ?? new Set();
+  }
+
   possiblyEvaluate(parameters) {
     return this.property.possiblyEvaluate(this, parameters);
   }

package/src/style/query_utils.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 module.exports = {
   getMaximumPaintValue,

package/src/style/style.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const createStyleLayer = require('./create_style_layer');
 const loadSprite = require('./load_sprite');
 const ImageManager = require('../render/image_manager');
@@ -41,6 +41,7 @@ class Style extends Evented {
     this.sourceCaches = {};
     this.zoomHistory = new ZoomHistory();
     this._loaded = false;
+    this._globalState = {};
 
     this._resetUpdates();
 
@@ -78,6 +79,80 @@ class Style extends Evented {
     });
   }
 
+  setGlobalStateProperty(name, value) {
+    this._checkLoaded();
+
+    const newValue = value === null ? (this.stylesheet.state?.[name]?.default ?? null) : value;
+
+    if (deepEqual(newValue, this._globalState[name])) {
+      return this;
+    }
+
+    this._globalState[name] = newValue;
+
+    const sourceIdsToReload = this._findGlobalStateAffectedSources([name]);
+
+    for (const id in this.sourceCaches) {
+      if (sourceIdsToReload.has(id)) {
+        this._reloadSource(id);
+        this._changed = true;
+      }
+    }
+  }
+
+  getGlobalState() {
+    return this._globalState;
+  }
+
+  setGlobalState(newStylesheetState) {
+    this._checkLoaded();
+
+    const changedGlobalStateRefs = [];
+
+    for (const propertyName in newStylesheetState) {
+      const didChange = !deepEqual(this._globalState[propertyName], newStylesheetState[propertyName].default);
+
+      if (didChange) {
+        changedGlobalStateRefs.push(propertyName);
+        this._globalState[propertyName] = newStylesheetState[propertyName].default;
+      }
+    }
+
+    const sourceIdsToReload = this._findGlobalStateAffectedSources(changedGlobalStateRefs);
+
+    for (const id in this.sourceCaches) {
+      if (sourceIdsToReload.has(id)) {
+        this._reloadSource(id);
+        this._changed = true;
+      }
+    }
+  }
+
+  /**
+   * Find all sources that are affected by the global state changes.
+   * For example, if a layer filter uses global-state expression, this function will return the source id of that layer.
+   */
+  _findGlobalStateAffectedSources(globalStateRefs) {
+    if (globalStateRefs.length === 0) {
+      return new Set();
+    }
+
+    const sourceIdsToReload = new Set();
+
+    for (const layerId in this._layers) {
+      const layer = this._layers[layerId];
+      const layoutAffectingGlobalStateRefs = layer.getLayoutAffectingGlobalStateRefs();
+
+      for (const ref of globalStateRefs) {
+        if (layoutAffectingGlobalStateRefs.has(ref)) {
+          sourceIdsToReload.add(layer.source);
+        }
+      }
+    }
+
+    return sourceIdsToReload;
+  }
+
   loadJSON(json) {
     this.fire(new Event('dataloading', { dataType: 'style' }));
 
@@ -128,6 +203,8 @@ class Style extends Evented {
 
     this.light = new Light(this.stylesheet.light);
 
+    this.setGlobalState(this.stylesheet.state ?? null);
+
     this.fire(new Event('data', { dataType: 'style' }));
     this.fire(new Event('style.load'));
   }
@@ -547,12 +624,12 @@ class Style extends Evented {
     }
 
     if (filter === null || filter === undefined) {
-      layer.filter = undefined;
+      layer.setFilter(undefined);
       this._updateLayer(layer);
       return;
     }
 
-    layer.filter = clone(filter);
+    layer.setFilter(clone(filter));
     this._updateLayer(layer);
   }
 

package/src/style/style_layer/circle_style_layer.js

@@ -5,7 +5,7 @@ const { polygonIntersectsBufferedPoint } = require('../../util/intersection_test
 const { getMaximumPaintValue, translateDistance, translate } = require('../query_utils');
 const properties = require('./circle_style_layer_properties');
 const { vec4 } = require('@mapbox/gl-matrix');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 class CircleStyleLayer extends StyleLayer {
   constructor(layer) {

package/src/style/style_layer/fill_extrusion_style_layer.js

@@ -5,7 +5,7 @@ const { polygonIntersectsPolygon, polygonIntersectsMultiPolygon } = require('../
 const { translateDistance, translate } = require('../query_utils');
 const properties = require('./fill_extrusion_style_layer_properties');
 const { vec4 } = require('@mapbox/gl-matrix');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 class FillExtrusionStyleLayer extends StyleLayer {
   constructor(layer) {

package/src/style/style_layer/line_style_layer.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 const StyleLayer = require('../style_layer');
 const LineBucket = require('../../data/bucket/line_bucket');