@mapwhit/tilerenderer 1.1.0 → 1.2.0

package/src/source/worker_tile.js

@@ -13,72 +13,86 @@ import { mapObject } from '../util/object.js';
 import { OverscaledTileID } from './tile_id.js';
 export default makeWorkerTile;
 
-async function makeWorkerTile(params, vectorTile, layerIndex, resources) {
-  const tileID = createTileID(params);
-
-  const overscaling = tileID.overscaleFactor();
-  const { zoom, pixelRatio, source, showCollisionBoxes, globalState, justReloaded, painter } = params;
-
-  const collisionBoxArray = new CollisionBoxArray();
-  const sourceLayerCoder = dictionaryCoder(Object.keys(vectorTile.layers));
-
-  const featureIndex = new FeatureIndex(tileID);
-  featureIndex.bucketLayerIDs = [];
-
-  const uniqueBuckets = new Map();
-
-  const options = {
-    featureIndex,
-    iconDependencies: {},
-    patternDependencies: {},
-    glyphDependencies: {}
-  };
+async function makeWorkerTile(params, { layers }, layerIndex, resources) {
+  const options = initializeBucketsOptions(params);
 
+  const { source } = params;
+  const sourceLayerCoder = dictionaryCoder(Object.keys(layers));
   const layerFamilies = layerIndex.familiesBySource.get(source) ?? new Map();
   for (const [sourceLayerId, sourceLayerFamilies] of layerFamilies) {
-    const sourceLayer = vectorTile.layers[sourceLayerId];
+    const sourceLayer = layers[sourceLayerId];
     if (!sourceLayer) {
       continue;
     }
-
     const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
     const features = new Array(sourceLayer.length);
     for (let index = 0; index < sourceLayer.length; index++) {
       features[index] = { feature: sourceLayer.feature(index), index, sourceLayerIndex };
     }
 
-    for (const layers of sourceLayerFamilies.values()) {
-      const layer = layers[0];
+    makeBucketsForSourceLayer(sourceLayerFamilies, sourceLayerIndex, features, params, options);
+  }
 
-      if (layer.minzoom && zoom < Math.floor(layer.minzoom)) {
-        continue;
-      }
-      if (layer.maxzoom && zoom >= layer.maxzoom) {
-        continue;
-      }
-      if (layer.visibility === 'none') {
-        continue;
-      }
+  return await finalizeBuckets(params, options, resources);
+}
+
+export async function makeSingleSourceLayerWorkerTile(params, features, sourceLayerFamilies, resources) {
+  const options = initializeBucketsOptions(params);
+
+  makeBucketsForSourceLayer(sourceLayerFamilies, 0, features, params, options);
 
-      recalculateLayers(layers, zoom, globalState);
-
-      const bucket = layer.createBucket({
-        index: featureIndex.bucketLayerIDs.length,
-        layers,
-        zoom,
-        pixelRatio,
-        overscaling,
-        collisionBoxArray,
-        sourceLayerIndex,
-        sourceID: source,
-        globalState
-      });
-      uniqueBuckets.set(layer.id, bucket);
-      bucket.populate(features, options);
-      featureIndex.bucketLayerIDs.push(layers.map(l => l.id));
+  return await finalizeBuckets(params, options, resources);
+}
+
+function initializeBucketsOptions(params) {
+  const tileID = createTileID(params);
+
+  const featureIndex = new FeatureIndex(tileID);
+  featureIndex.bucketLayerIDs = [];
+
+  return {
+    collisionBoxArray: new CollisionBoxArray(),
+    featureIndex,
+    glyphDependencies: {},
+    iconDependencies: {},
+    overscaling: tileID.overscaleFactor(),
+    patternDependencies: {},
+    uniqueBuckets: new Map()
+  };
+}
+
+function makeBucketsForSourceLayer(sourceLayerFamilies, sourceLayerIndex, features, params, options) {
+  const { zoom, pixelRatio, source } = params;
+  const { featureIndex, overscaling, collisionBoxArray, uniqueBuckets } = options;
+
+  for (const layers of sourceLayerFamilies.values()) {
+    const layer = layers[0];
+
+    if (layer.isHidden(zoom, layer.minzoom && Math.floor(layer.minzoom))) {
+      continue;
     }
+
+    recalculateLayers(layers, zoom);
+
+    const bucket = layer.createBucket({
+      index: featureIndex.bucketLayerIDs.length,
+      layers,
+      zoom,
+      pixelRatio,
+      overscaling,
+      collisionBoxArray,
+      sourceLayerIndex,
+      sourceID: source
+    });
+    uniqueBuckets.set(layer.id, bucket);
+    bucket.populate(features, options);
+    featureIndex.bucketLayerIDs.push(layers.map(l => l.id));
   }
+}
 
+async function finalizeBuckets(params, options, resources) {
+  const { zoom, showCollisionBoxes, justReloaded, painter } = params;
+  const { collisionBoxArray, featureIndex, uniqueBuckets } = options;
   const buckets = new Map();
   const { glyphAtlas, imageAtlas, glyphMap, iconMap } = await makeAtlasses(options, resources);
   let hasSymbolBuckets = false;
@@ -86,7 +100,7 @@ async function makeWorkerTile(params, vectorTile, layerIndex, resources) {
   for (const bucket of uniqueBuckets.values()) {
     if (bucket instanceof SymbolBucket) {
       hasSymbolBuckets = true;
-      recalculateLayers(bucket.layers, zoom, globalState);
+      recalculateLayers(bucket.layers, zoom);
       performSymbolLayout(
         bucket,
         glyphMap,
@@ -102,7 +116,7 @@ async function makeWorkerTile(params, vectorTile, layerIndex, resources) {
       bucket.hasPattern &&
       (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
     ) {
-      recalculateLayers(bucket.layers, zoom, globalState);
+      recalculateLayers(bucket.layers, zoom);
       bucket.addFeatures(options, imageAtlas.patternPositions);
     }
     if (bucket.isEmpty()) {
@@ -152,9 +166,9 @@ function createTileID({ tileID }) {
   return new OverscaledTileID(overscaledZ, wrap, z, x, y);
 }
 
-function recalculateLayers(layers, zoom, globalState) {
+function recalculateLayers(layers, zoom) {
   // Layers are shared and may have been used by a WorkerTile with a different zoom.
-  const parameters = new EvaluationParameters(zoom, { globalState });
+  const parameters = new EvaluationParameters(zoom);
   for (const layer of layers) {
     layer.recalculate(parameters);
   }

package/src/style/create_style_layer.js

@@ -20,6 +20,6 @@ const subclasses = {
   raster
 };
 
-export default function createStyleLayer(layer) {
-  return new subclasses[layer.type](layer);
+export default function createStyleLayer(layer, globalState) {
+  return new subclasses[layer.type](layer, globalState);
 }

package/src/style/evaluation_parameters.js

@@ -12,13 +12,11 @@ export default class EvaluationParameters {
       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/properties.js

@@ -1,6 +1,5 @@
 import { interpolate, normalizePropertyExpression } from '@mapwhit/style-expressions';
 import assert from 'assert';
-import { clone } from '../util/object.js';
 import { easeCubicInOut } from '../util/util.js';
 import EvaluationParameters from './evaluation_parameters.js';
 
@@ -60,12 +59,13 @@ import EvaluationParameters from './evaluation_parameters.js';
  *  @private
  */
 export class PropertyValue {
-  constructor(property, value) {
+  constructor(property, value, globalState) {
     this.property = property;
     this.value = value;
     this.expression = normalizePropertyExpression(
       value === undefined ? property.specification.default : value,
-      property.specification
+      property.specification,
+      globalState
     );
   }
 
@@ -97,9 +97,9 @@ export class PropertyValue {
  * @private
  */
 export class TransitionablePropertyValue {
-  constructor(property) {
+  constructor(property, globalState) {
     this.property = property;
-    this.value = new PropertyValue(property, undefined);
+    this.value = new PropertyValue(property, undefined, globalState);
   }
 
   transitioned(parameters, prior) {
@@ -132,36 +132,39 @@ export class TransitionablePropertyValue {
  * @private
  */
 export class Transitionable {
-  constructor(properties) {
+  #globalState; // reference to global state
+  constructor(properties, globalState) {
     this._properties = properties;
     this._values = Object.create(properties.defaultTransitionablePropertyValues);
+    this.#globalState = globalState;
   }
 
   getValue(name) {
-    return clone(this._values[name].value.value);
+    return structuredClone(this._values[name].value.value);
   }
 
   setValue(name, value) {
     if (!this._values.hasOwnProperty(name)) {
-      this._values[name] = new TransitionablePropertyValue(this._values[name].property);
+      this._values[name] = new TransitionablePropertyValue(this._values[name].property, this.#globalState);
     }
     // Note that we do not _remove_ an own property in the case where a value is being reset
     // to the default: the transition might still be non-default.
     this._values[name].value = new PropertyValue(
       this._values[name].property,
-      value === null ? undefined : clone(value)
+      value === null ? undefined : structuredClone(value),
+      this.#globalState
     );
   }
 
   getTransition(name) {
-    return clone(this._values[name].transition);
+    return structuredClone(this._values[name].transition);
   }
 
   setTransition(name, value) {
     if (!this._values.hasOwnProperty(name)) {
-      this._values[name] = new TransitionablePropertyValue(this._values[name].property);
+      this._values[name] = new TransitionablePropertyValue(this._values[name].property, this.#globalState);
     }
-    this._values[name].transition = clone(value) || undefined;
+    this._values[name].transition = structuredClone(value) || undefined;
   }
 
   serialize() {
@@ -308,17 +311,23 @@ export class Transitioning {
  * @private
  */
 export class Layout {
-  constructor(properties) {
+  #globalState; // reference to global state
+  constructor(properties, globalState) {
     this._properties = properties;
     this._values = Object.create(properties.defaultPropertyValues);
+    this.#globalState = globalState;
   }
 
   getValue(name) {
-    return clone(this._values[name].value);
+    return structuredClone(this._values[name].value);
   }
 
   setValue(name, value) {
-    this._values[name] = new PropertyValue(this._values[name].property, value === null ? undefined : clone(value));
+    this._values[name] = new PropertyValue(
+      this._values[name].property,
+      value === null ? undefined : structuredClone(value),
+      this.#globalState
+    );
   }
 
   serialize() {

package/src/style/style.js

@@ -10,7 +10,7 @@ import { getType as getSourceType, setType as setSourceType } from '../source/so
 import SourceCache from '../source/source_cache.js';
 import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index.js';
 import browser from '../util/browser.js';
-import { clone, deepEqual } from '../util/object.js';
+import { deepEqual } from '../util/object.js';
 import createStyleLayer from './create_style_layer.js';
 import Light from './light.js';
 import loadSprite from './load_sprite.js';
@@ -138,6 +138,8 @@ class Style extends Evented {
     for (const layer of this._layers.values()) {
       const layoutAffectingGlobalStateRefs = layer.getLayoutAffectingGlobalStateRefs();
       const paintAffectingGlobalStateRefs = layer.getPaintAffectingGlobalStateRefs();
+      const visibilityAffectingGlobalStateRefs = layer.getVisibilityAffectingGlobalStateRefs();
+      let visibilityToEval;
 
       for (const ref of globalStateRefs) {
         if (layoutAffectingGlobalStateRefs.has(ref)) {
@@ -148,6 +150,13 @@ class Style extends Evented {
             this._updatePaintProperty(layer, name, value);
           }
         }
+        if (visibilityAffectingGlobalStateRefs?.has(ref)) {
+          visibilityToEval = true;
+        }
+      }
+      if (visibilityToEval) {
+        layer.recalculateVisibility();
+        this._updateLayer(layer);
       }
     }
 
@@ -199,11 +208,14 @@ class Style extends Evented {
     const layers = this.stylesheet.layers;
 
     this._layers.clear();
+
+    this.setGlobalState(this.stylesheet.state ?? null);
+
     for (let layer of layers) {
       if (layer.ref) {
         continue; // just ignore layers that reference other layers
       }
-      layer = createStyleLayer(layer);
+      layer = createStyleLayer(layer, this._globalState);
       layer.setEventedParent(this, { layer: { id: layer.id } });
       this._layers.set(layer.id, layer);
     }
@@ -213,8 +225,6 @@ class Style extends Evented {
     this.light = this.stylesheet.light;
     this._light = new Light(this.light);
 
-    this.setGlobalState(this.stylesheet.state ?? null);
-
     this.fire(new Event('data', { dataType: 'style' }));
     this.fire(new Event('style.load'));
   }
@@ -244,7 +254,12 @@ class Style extends Evented {
     }
   }
 
-  loaded() {
+  /**
+   * Returns `true` when style is loaded.
+   * @param {Boolean} ignoreTilesLoading set to `true` to check that style is loaded
+   * even when sources are loading tiles
+   */
+  loaded(ignoreTilesLoading) {
     if (!this._loaded) {
       return false;
     }
@@ -254,7 +269,7 @@ class Style extends Evented {
     }
 
     for (const id in this._sources) {
-      if (!this._sources[id].loaded()) {
+      if (!this._sources[id].loaded(ignoreTilesLoading)) {
         return false;
       }
     }
@@ -515,11 +530,11 @@ class Style extends Evented {
 
     if (typeof layerObject.source === 'object') {
       this.addSource(id, layerObject.source);
-      layerObject = clone(layerObject);
+      layerObject = structuredClone(layerObject);
       layerObject = Object.assign(layerObject, { source: id });
     }
 
-    const layer = createStyleLayer(layerObject);
+    const layer = createStyleLayer(layerObject, this._globalState);
     this._validateLayer(layer);
 
     layer.setEventedParent(this, { layer: { id: id } });
@@ -651,7 +666,7 @@ class Style extends Evented {
       return;
     }
 
-    layer.setFilter(clone(filter));
+    layer.setFilter(structuredClone(filter));
     this._updateLayer(layer);
   }
 
@@ -661,7 +676,7 @@ class Style extends Evented {
    * @returns {*} the layer's filter, if any
    */
   getFilter(layer) {
-    return clone(this.getLayer(layer).filter);
+    return structuredClone(this.getLayer(layer).filter);
   }
 
   setLayoutProperty(layerId, name, value) {

package/src/style/style_layer/background_style_layer.js

@@ -2,8 +2,8 @@ import StyleLayer from '../style_layer.js';
 import properties from './background_style_layer_properties.js';
 
 class BackgroundStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 }
 

package/src/style/style_layer/circle_style_layer.js

@@ -1,7 +1,7 @@
 import glMatrix from '@mapbox/gl-matrix';
 import Point from '@mapbox/point-geometry';
+import { polygonIntersectsBufferedPoint } from '@mapwhit/geometry';
 import CircleBucket from '../../data/bucket/circle_bucket.js';
-import { polygonIntersectsBufferedPoint } from '../../util/intersection_tests.js';
 import { getMaximumPaintValue, translate, translateDistance } from '../query_utils.js';
 import StyleLayer from '../style_layer.js';
 import properties from './circle_style_layer_properties.js';
@@ -9,8 +9,8 @@ import properties from './circle_style_layer_properties.js';
 const { vec4 } = glMatrix;
 
 class CircleStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 
   createBucket(parameters) {

package/src/style/style_layer/fill_extrusion_style_layer.js

@@ -1,7 +1,7 @@
 import glMatrix from '@mapbox/gl-matrix';
 import Point from '@mapbox/point-geometry';
+import { polygonIntersectsMultiPolygon, polygonIntersectsPolygon } from '@mapwhit/geometry';
 import FillExtrusionBucket from '../../data/bucket/fill_extrusion_bucket.js';
-import { polygonIntersectsMultiPolygon, polygonIntersectsPolygon } from '../../util/intersection_tests.js';
 import { translate, translateDistance } from '../query_utils.js';
 import StyleLayer from '../style_layer.js';
 import properties from './fill_extrusion_style_layer_properties.js';
@@ -9,8 +9,8 @@ import properties from './fill_extrusion_style_layer_properties.js';
 const { vec4 } = glMatrix;
 
 export class FillExtrusionStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 
   createBucket(parameters) {

package/src/style/style_layer/fill_style_layer.js

@@ -1,12 +1,12 @@
+import { polygonIntersectsMultiPolygon } from '@mapwhit/geometry';
 import FillBucket from '../../data/bucket/fill_bucket.js';
-import { polygonIntersectsMultiPolygon } from '../../util/intersection_tests.js';
 import { translate, translateDistance } from '../query_utils.js';
 import StyleLayer from '../style_layer.js';
 import properties from './fill_style_layer_properties.js';
 
 class FillStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 
   recalculate(parameters) {

package/src/style/style_layer/heatmap_style_layer.js

@@ -8,8 +8,8 @@ class HeatmapStyleLayer extends StyleLayer {
     return new HeatmapBucket(options);
   }
 
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
 
     // make sure color ramp texture is generated for default heatmap color too
     this._updateColorRamp();
@@ -43,7 +43,7 @@ class HeatmapStyleLayer extends StyleLayer {
   }
 
   hasOffscreenPass() {
-    return this._paint.get('heatmap-opacity') !== 0 && this.visibility !== 'none';
+    return this._paint.get('heatmap-opacity') !== 0 && !this.isHidden();
   }
 }
 

package/src/style/style_layer/hillshade_style_layer.js

@@ -2,12 +2,12 @@ import StyleLayer from '../style_layer.js';
 import properties from './hillshade_style_layer_properties.js';
 
 class HillshadeStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 
   hasOffscreenPass() {
-    return this._paint.get('hillshade-exaggeration') !== 0 && this.visibility !== 'none';
+    return this._paint.get('hillshade-exaggeration') !== 0 && !this.isHidden();
   }
 }
 

package/src/style/style_layer/line_style_layer.js

@@ -1,7 +1,7 @@
 import Point from '@mapbox/point-geometry';
+import { polygonIntersectsBufferedMultiLine } from '@mapwhit/geometry';
 import LineBucket from '../../data/bucket/line_bucket.js';
 import renderColorRamp from '../../util/color_ramp.js';
-import { polygonIntersectsBufferedMultiLine } from '../../util/intersection_tests.js';
 import EvaluationParameters from '../evaluation_parameters.js';
 import { DataDrivenProperty } from '../properties.js';
 import { getMaximumPaintValue, translate, translateDistance } from '../query_utils.js';
@@ -29,8 +29,8 @@ const lineFloorwidthProperty = new LineFloorwidthProperty(properties.paint.prope
 lineFloorwidthProperty.useIntegerZoom = true;
 
 class LineStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 
   _handleSpecialPaintPropertyUpdate(name) {

package/src/style/style_layer/raster_style_layer.js

@@ -2,8 +2,8 @@ import StyleLayer from '../style_layer.js';
 import properties from './raster_style_layer_properties.js';
 
 class RasterStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 }
 

package/src/style/style_layer/symbol_style_layer.js

@@ -6,8 +6,8 @@ import StyleLayer from '../style_layer.js';
 import properties from './symbol_style_layer_properties.js';
 
 class SymbolStyleLayer extends StyleLayer {
-  constructor(layer) {
-    super(layer, properties);
+  constructor(layer, globalState) {
+    super(layer, properties, globalState);
   }
 
   recalculate(parameters) {

package/src/style/style_layer.js

@@ -1,6 +1,7 @@
 import { Evented } from '@mapwhit/events';
 import { supportsPropertyExpression } from '@mapwhit/style-expressions';
 import featureFilter from '../style-spec/feature_filter/index.js';
+import visibilityExpression from '../style-spec/visibility.js';
 import createKey from '../util/key.js';
 import { Layout, PossiblyEvaluatedPropertyValue, Transitionable } from './properties.js';
 
@@ -16,7 +17,7 @@ const TRANSITION_SUFFIX = '-transition';
 class StyleLayer extends Evented {
   #key;
 
-  constructor(layer, properties) {
+  constructor(layer, properties, globalState) {
     super();
 
     this.id = layer.id;
@@ -28,6 +29,8 @@ class StyleLayer extends Evented {
     this.paint = {};
     this.layout = {};
 
+    this._visibilityExpression = visibilityExpression(this.visibility, globalState);
+
     if (layer.type !== 'background') {
       this.source = layer.source;
       this['source-layer'] = this.sourceLayer = layer['source-layer'];
@@ -38,10 +41,10 @@ class StyleLayer extends Evented {
     this._featureFilter ??= featureFilter.addGlobalStateRefs(() => true);
 
     if (properties.layout) {
-      this._unevaluatedLayout = new Layout(properties.layout);
+      this._unevaluatedLayout = new Layout(properties.layout, globalState);
     }
 
-    this._transitionablePaint = new Transitionable(properties.paint);
+    this._transitionablePaint = new Transitionable(properties.paint, globalState);
 
     for (const property in layer.paint) {
       this.setPaintProperty(property, layer.paint[property]);
@@ -94,6 +97,10 @@ class StyleLayer extends Evented {
   getLayoutAffectingGlobalStateRefs() {
     const globalStateRefs = new Set();
 
+    for (const globalStateRef of this._visibilityExpression.getGlobalStateRefs()) {
+      globalStateRefs.add(globalStateRef);
+    }
+
     if (this._unevaluatedLayout) {
       for (const propertyName in this._unevaluatedLayout._values) {
         const value = this._unevaluatedLayout._values[propertyName];
@@ -134,11 +141,21 @@ class StyleLayer extends Evented {
     return globalStateRefs;
   }
 
+  /**
+   * Get list of global state references that are used within visibility expression.
+   * This is used to determine if layer visibility needs to be updated when global state property changes.
+   */
+  getVisibilityAffectingGlobalStateRefs() {
+    return this._visibilityExpression.getGlobalStateRefs();
+  }
+
   setLayoutProperty(name, value) {
     this.#key = undefined;
     this.layout[name] = value;
     if (name === 'visibility') {
-      this.visibility = value === 'none' ? value : 'visible';
+      this.visibility = value;
+      this._visibilityExpression.setValue(value);
+      this.recalculateVisibility();
       return;
     }
 
@@ -184,14 +201,14 @@ class StyleLayer extends Evented {
     // No-op; can be overridden by derived classes.
   }
 
-  isHidden(zoom) {
-    if (this.minzoom && zoom < this.minzoom) {
+  isHidden(zoom = this.minzoom, minzoom = this.minzoom) {
+    if (minzoom && zoom < minzoom) {
       return true;
     }
     if (this.maxzoom && zoom >= this.maxzoom) {
       return true;
     }
-    return this.visibility === 'none';
+    return this.visibility === 'none' || this._visibility === 'none';
   }
 
   updateTransitions(parameters) {
@@ -202,6 +219,10 @@ class StyleLayer extends Evented {
     return this._transitioningPaint.hasTransition();
   }
 
+  recalculateVisibility() {
+    this._visibility = this._visibilityExpression.evaluate();
+  }
+
   recalculate(parameters) {
     if (parameters.getCrossfadeParameters) {
       this._crossfadeParameters = parameters.getCrossfadeParameters();