@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/style/style_layer/symbol_style_layer.js

@@ -1,10 +1,9 @@
-const StyleLayer = require('../style_layer');
-
-const SymbolBucket = require('../../data/bucket/symbol_bucket');
-const resolveTokens = require('../../util/token');
-const { isExpression } = require('@mapwhit/style-expressions');
-const assert = require('assert');
-const properties = require('./symbol_style_layer_properties');
+import { isExpression } from '@mapwhit/style-expressions';
+import assert from 'assert';
+import SymbolBucket from '../../data/bucket/symbol_bucket.js';
+import resolveTokens from '../../util/token.js';
+import StyleLayer from '../style_layer.js';
+import properties from './symbol_style_layer_properties.js';
 
 class SymbolStyleLayer extends StyleLayer {
   constructor(layer) {
@@ -14,33 +13,33 @@ class SymbolStyleLayer extends StyleLayer {
   recalculate(parameters) {
     super.recalculate(parameters);
 
-    if (this.layout.get('icon-rotation-alignment') === 'auto') {
-      if (this.layout.get('symbol-placement') !== 'point') {
-        this.layout._values['icon-rotation-alignment'] = 'map';
+    if (this._layout.get('icon-rotation-alignment') === 'auto') {
+      if (this._layout.get('symbol-placement') !== 'point') {
+        this._layout._values['icon-rotation-alignment'] = 'map';
       } else {
-        this.layout._values['icon-rotation-alignment'] = 'viewport';
+        this._layout._values['icon-rotation-alignment'] = 'viewport';
       }
     }
 
-    if (this.layout.get('text-rotation-alignment') === 'auto') {
-      if (this.layout.get('symbol-placement') !== 'point') {
-        this.layout._values['text-rotation-alignment'] = 'map';
+    if (this._layout.get('text-rotation-alignment') === 'auto') {
+      if (this._layout.get('symbol-placement') !== 'point') {
+        this._layout._values['text-rotation-alignment'] = 'map';
       } else {
-        this.layout._values['text-rotation-alignment'] = 'viewport';
+        this._layout._values['text-rotation-alignment'] = 'viewport';
       }
     }
 
     // If unspecified, `*-pitch-alignment` inherits `*-rotation-alignment`
-    if (this.layout.get('text-pitch-alignment') === 'auto') {
-      this.layout._values['text-pitch-alignment'] = this.layout.get('text-rotation-alignment');
+    if (this._layout.get('text-pitch-alignment') === 'auto') {
+      this._layout._values['text-pitch-alignment'] = this._layout.get('text-rotation-alignment');
     }
-    if (this.layout.get('icon-pitch-alignment') === 'auto') {
-      this.layout._values['icon-pitch-alignment'] = this.layout.get('icon-rotation-alignment');
+    if (this._layout.get('icon-pitch-alignment') === 'auto') {
+      this._layout._values['icon-pitch-alignment'] = this._layout.get('icon-rotation-alignment');
     }
   }
 
   getValueAndResolveTokens(name, feature) {
-    const value = this.layout.get(name).evaluate(feature, {});
+    const value = this._layout.get(name).evaluate(feature, {});
     const unevaluated = this._unevaluatedLayout._values[name];
     if (!unevaluated.isDataDriven() && !isExpression(unevaluated.value)) {
       return resolveTokens(feature.properties, value);
@@ -63,4 +62,4 @@ class SymbolStyleLayer extends StyleLayer {
   }
 }
 
-module.exports = SymbolStyleLayer;
+export default SymbolStyleLayer;

package/src/style/style_layer/symbol_style_layer_properties.js

@@ -1,6 +1,6 @@
 // This file is generated. Edit layer-properties.js.ejs, then run `make generate-style-code`.
 
-const { Properties, DataConstantProperty, DataDrivenProperty } = require('../properties');
+import { DataConstantProperty, DataDrivenProperty, Properties } from '../properties.js';
 
 const layout = new Properties({
   'symbol-placement': new DataConstantProperty({
@@ -291,4 +291,4 @@ const paint = new Properties({
   })
 });
 
-module.exports = { paint, layout };
+export default { paint, layout };

package/src/style/style_layer.js

@@ -1,13 +1,21 @@
-const { filterObject } = require('../util/object');
-
-const { Evented } = require('@mapwhit/events');
-const { Layout, Transitionable, PossiblyEvaluatedPropertyValue } = require('./properties');
-const { supportsPropertyExpression } = require('@mapwhit/style-expressions');
-const featureFilter = require('../style-spec/feature_filter');
+import { Evented } from '@mapwhit/events';
+import { supportsPropertyExpression } from '@mapwhit/style-expressions';
+import featureFilter from '../style-spec/feature_filter/index.js';
+import createKey from '../util/key.js';
+import { Layout, PossiblyEvaluatedPropertyValue, Transitionable } from './properties.js';
 
+const keyProperties = ['type', 'minzoom', 'maxzoom', 'filter', 'layout'];
 const TRANSITION_SUFFIX = '-transition';
 
+/**
+ * Representing a style layer in the map.
+ * Properties:
+ * `this.paint` - paint properties of the layer as defined in the map style
+ * `this._paint` - internal representation of paint properties necessary to calculate expressions
+ */
 class StyleLayer extends Evented {
+  #key;
+
   constructor(layer, properties) {
     super();
 
@@ -22,7 +30,7 @@ class StyleLayer extends Evented {
 
     if (layer.type !== 'background') {
       this.source = layer.source;
-      this.sourceLayer = layer['source-layer'];
+      this['source-layer'] = this.sourceLayer = layer['source-layer'];
       this.filter = layer.filter;
       this._featureFilter = featureFilter(layer.filter);
     }
@@ -46,10 +54,26 @@ class StyleLayer extends Evented {
   }
 
   setFilter(filter) {
+    this.#key = undefined;
     this.filter = filter;
     this._featureFilter = featureFilter(filter);
   }
 
+  _setZoomRange(minzoom, maxzoom) {
+    if (this.minzoom === minzoom && this.maxzoom === maxzoom) {
+      return;
+    }
+    if (minzoom != null) {
+      this.#key = undefined;
+      this.minzoom = minzoom;
+    }
+    if (maxzoom != null) {
+      this.#key = undefined;
+      this.maxzoom = maxzoom;
+    }
+    return true;
+  }
+
   getCrossfadeParameters() {
     return this._crossfadeParameters;
   }
@@ -111,6 +135,8 @@ class StyleLayer extends Evented {
   }
 
   setLayoutProperty(name, value) {
+    this.#key = undefined;
+    this.layout[name] = value;
     if (name === 'visibility') {
       this.visibility = value === 'none' ? value : 'visible';
       return;
@@ -127,21 +153,31 @@ class StyleLayer extends Evented {
   }
 
   setPaintProperty(name, value) {
+    this.paint[name] = value;
     if (name.endsWith(TRANSITION_SUFFIX)) {
       this._transitionablePaint.setTransition(name.slice(0, -TRANSITION_SUFFIX.length), value || undefined);
       return false;
     }
+    const transitionable = this._transitionablePaint._values[name];
+    const isCrossFadedProperty = transitionable.property.specification['property-type'] === 'cross-faded-data-driven';
+    const wasDataDriven = transitionable.value.isDataDriven();
+    this._transitionablePaint.setValue(name, value);
+    this._handleSpecialPaintPropertyUpdate(name);
+    const isDataDriven = this._transitionablePaint._values[name].value.isDataDriven();
+    if (isDataDriven !== wasDataDriven || (wasDataDriven && isDataDriven) || isCrossFadedProperty) {
+      // reset transitioning in progress
+      this._untransitioned(name);
+    }
     // if a cross-faded value is changed, we need to make sure the new icons get added to each tile's iconAtlas
     // so a call to _updateLayer is necessary, and we return true from this function so it gets called in
     // Style#setPaintProperty
-    const prop = this._transitionablePaint._values[name];
-    const newCrossFadedValue =
-      prop.property.specification['property-type'] === 'cross-faded-data-driven' && !prop.value.value && value;
-    const wasDataDriven = this._transitionablePaint._values[name].value.isDataDriven();
-    this._transitionablePaint.setValue(name, value);
-    const isDataDriven = this._transitionablePaint._values[name].value.isDataDriven();
-    this._handleSpecialPaintPropertyUpdate(name);
-    return isDataDriven || wasDataDriven || newCrossFadedValue;
+    return isDataDriven || wasDataDriven || isCrossFadedProperty;
+  }
+
+  _untransitioned(name) {
+    if (this._transitioningPaint) {
+      this._transitioningPaint._values[name] = this._transitionablePaint._values[name].untransitioned();
+    }
   }
 
   _handleSpecialPaintPropertyUpdate() {
@@ -149,8 +185,12 @@ class StyleLayer extends Evented {
   }
 
   isHidden(zoom) {
-    if (this.minzoom && zoom < this.minzoom) return true;
-    if (this.maxzoom && zoom >= this.maxzoom) return true;
+    if (this.minzoom && zoom < this.minzoom) {
+      return true;
+    }
+    if (this.maxzoom && zoom >= this.maxzoom) {
+      return true;
+    }
     return this.visibility === 'none';
   }
 
@@ -167,38 +207,17 @@ class StyleLayer extends Evented {
       this._crossfadeParameters = parameters.getCrossfadeParameters();
     }
     if (this._unevaluatedLayout) {
-      this.layout = this._unevaluatedLayout.possiblyEvaluate(parameters);
+      this._layout = this._unevaluatedLayout.possiblyEvaluate(parameters);
     }
 
-    this.paint = this._transitioningPaint.possiblyEvaluate(parameters);
+    this._paint = this._transitioningPaint.possiblyEvaluate(parameters);
   }
 
-  serialize() {
-    const output = {
-      id: this.id,
-      type: this.type,
-      source: this.source,
-      'source-layer': this.sourceLayer,
-      metadata: this.metadata,
-      minzoom: this.minzoom,
-      maxzoom: this.maxzoom,
-      filter: this.filter,
-      layout: this._unevaluatedLayout?.serialize(),
-      paint: this._transitionablePaint?.serialize()
-    };
-
-    if (this.visibility === 'none') {
-      output.layout = output.layout || {};
-      output.layout.visibility = 'none';
+  get key() {
+    if (!this.#key) {
+      this.#key = createKey(keyProperties, this);
     }
-
-    return filterObject(output, (value, key) => {
-      return (
-        value !== undefined &&
-        !(key === 'layout' && !Object.keys(value).length) &&
-        !(key === 'paint' && !Object.keys(value).length)
-      );
-    });
+    return this.#key;
   }
 
   is3D() {
@@ -218,8 +237,8 @@ class StyleLayer extends Evented {
   }
 
   isStateDependent() {
-    for (const property in this.paint._values) {
-      const value = this.paint.get(property);
+    for (const property in this._paint._values) {
+      const value = this._paint.get(property);
       if (
         !(value instanceof PossiblyEvaluatedPropertyValue) ||
         !supportsPropertyExpression(value.property.specification)
@@ -235,4 +254,4 @@ class StyleLayer extends Evented {
   }
 }
 
-module.exports = StyleLayer;
+export default StyleLayer;

package/src/style/style_layer_index.js

@@ -1,55 +1,30 @@
-const createStyleLayer = require('./create_style_layer');
-
-const { values } = require('../util/object');
-const featureFilter = require('../style-spec/feature_filter');
-const groupByLayout = require('../style-spec/group_by_layout');
+import groupBySource from '../util/group_layers.js';
 
 class StyleLayerIndex {
-  #layerConfigs = {};
-  #layers = {};
+  #layers = new Map();
+  #fbs = {};
 
-  constructor(layerConfigs) {
-    if (layerConfigs) {
-      this.update(layerConfigs);
+  constructor(layers) {
+    if (layers) {
+      this.replace(layers);
     }
   }
 
-  replace(layerConfigs) {
-    this.#layerConfigs = {};
-    this.#layers = {};
-    this.update(layerConfigs);
+  replace(layers) {
+    this.#layers = layers;
+    this.#fbs = null;
   }
 
-  update(layerConfigs, removedIds = []) {
-    for (const layerConfig of layerConfigs) {
-      this.#layerConfigs[layerConfig.id] = layerConfig;
-
-      const layer = (this.#layers[layerConfig.id] = createStyleLayer(layerConfig));
-      layer._featureFilter = featureFilter(layer.filter);
-    }
-    for (const id of removedIds) {
-      delete this.#layerConfigs[id];
-      delete this.#layers[id];
-    }
-
-    this.familiesBySource = {};
-
-    const groups = groupByLayout(values(this.#layerConfigs));
-
-    for (const layerConfigs of groups) {
-      const layers = layerConfigs.map(layerConfig => this.#layers[layerConfig.id]);
-
-      const layer = layers[0];
-      if (layer.visibility === 'none') {
-        continue;
-      }
+  update() {
+    this.#fbs = null;
+  }
 
-      const { source = '', sourceLayer = '_geojsonTileLayer' } = layer;
-      const sourceGroup = (this.familiesBySource[source] ??= {});
-      const sourceLayerFamilies = (sourceGroup[sourceLayer] ??= []);
-      sourceLayerFamilies.push(layers);
+  get familiesBySource() {
+    if (!this.#fbs) {
+      this.#fbs = groupBySource(this.#layers.values());
     }
+    return this.#fbs;
   }
 }
 
-module.exports = StyleLayerIndex;
+export default StyleLayerIndex;

package/src/style/zoom_history.js

@@ -33,4 +33,4 @@ class ZoomHistory {
   }
 }
 
-module.exports = ZoomHistory;
+export default ZoomHistory;

package/src/style-spec/error/parsing_error.js

@@ -5,4 +5,4 @@ function ParsingError(error) {
   this.line = match ? Number.parseInt(match[1], 10) : 0;
 }
 
-module.exports = ParsingError;
+export default ParsingError;

package/src/style-spec/error/validation_error.js

@@ -1,10 +1,12 @@
-module.exports = class ValidationError {
+export default class ValidationError {
   constructor(key, value, message, identifier) {
     this.message = (key ? `${key}: ` : '') + message;
-    if (identifier) this.identifier = identifier;
+    if (identifier) {
+      this.identifier = identifier;
+    }
 
     if (value?.__line__) {
       this.line = value.__line__;
     }
   }
-};
+}

package/src/style-spec/feature_filter/convert.js

@@ -1,13 +1,11 @@
-const { isExpressionFilter } = require('./index');
-
-module.exports = convertFilter;
+import { isExpressionFilter } from './index.js';
 
 /**
  * Convert the given legacy filter to (the JSON representation of) an
  * equivalent expression
  * @private
  */
-function convertFilter(filter) {
+export default function convertFilter(filter) {
   return _convertFilter(filter, {});
 }
 
@@ -64,9 +62,13 @@ function _convertFilter(filter, expectedTypes) {
     return filter;
   }
 
-  if (!filter) return true;
+  if (!filter) {
+    return true;
+  }
   const op = filter[0];
-  if (filter.length <= 1) return op !== 'any';
+  if (filter.length <= 1) {
+    return op !== 'any';
+  }
 
   let converted;
 
@@ -115,8 +117,12 @@ function runtimeTypeChecks(expectedTypes) {
     const get = property === '$id' ? ['id'] : ['get', property];
     conditions.push(['==', ['typeof', get], expectedTypes[property]]);
   }
-  if (conditions.length === 0) return true;
-  if (conditions.length === 1) return conditions[0];
+  if (conditions.length === 0) {
+    return true;
+  }
+  if (conditions.length === 1) {
+    return conditions[0];
+  }
   return ['all'].concat(conditions);
 }
 
@@ -155,7 +161,9 @@ function convertComparisonOp(property, value, op, expectedTypes) {
 }
 
 function convertInOp(property, values, negate = false) {
-  if (values.length === 0) return negate;
+  if (values.length === 0) {
+    return negate;
+  }
 
   let get;
   if (property === '$type') {

package/src/style-spec/feature_filter/index.js

@@ -1,11 +1,9 @@
-const { createExpression, findGlobalStateRefs } = require('@mapwhit/style-expressions');
-
-module.exports = createFilter;
+import { createExpression, findGlobalStateRefs } from '@mapwhit/style-expressions';
 
 createFilter.isExpressionFilter = isExpressionFilter;
 createFilter.addGlobalStateRefs = addGlobalStateRefs;
 
-function isExpressionFilter(filter) {
+export function isExpressionFilter(filter) {
   if (filter === true || filter === false) {
     return true;
   }
@@ -65,7 +63,7 @@ const filterSpec = {
  * @param {Array} filter mapbox gl filter
  * @returns {Function} filter-evaluating function
  */
-function createFilter(filter) {
+export default function createFilter(filter) {
   if (filter === null || filter === undefined) {
     return addGlobalStateRefs(() => true);
   }
@@ -84,7 +82,7 @@ function createFilter(filter) {
   );
 }
 
-function addGlobalStateRefs(filter, getGlobalStateRefs = () => new Set()) {
+export function addGlobalStateRefs(filter, getGlobalStateRefs = () => new Set()) {
   filter.getGlobalStateRefs = getGlobalStateRefs;
   return filter;
 }
@@ -95,9 +93,13 @@ function compare(a, b) {
 }
 
 function convertFilter(filter) {
-  if (!filter || filter.length === 0) return true;
+  if (!filter || filter.length === 0) {
+    return true;
+  }
   const [op, ...args] = filter;
-  if (filter.length <= 1) return op !== 'any';
+  if (filter.length <= 1) {
+    return op !== 'any';
+  }
   switch (op) {
     case '!=':
       return convertNegation(convertComparisonOp('==', ...args));
@@ -158,7 +160,9 @@ function convertInOp([property, ...values]) {
 }
 
 function isUniformLarge(values) {
-  if (values.length < 200) return false;
+  if (values.length < 200) {
+    return false;
+  }
   const type = typeof values[0];
   return values.every(v => typeof v === type);
 }

package/src/style-spec/util/eval_support.js

@@ -1,8 +1,8 @@
-module.exports = (function () {
+export default (function () {
   try {
     new Function('');
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 })();

package/src/style-spec/util/ref_properties.js

@@ -1 +1 @@
-module.exports = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];
+export default ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];

package/src/symbol/anchor.js

@@ -1,6 +1,4 @@
-const { default: Point } = require('@mapbox/point-geometry');
-
-const { register } = require('../util/transfer_registry');
+import Point from '@mapbox/point-geometry';
 
 class Anchor extends Point {
   constructor(x, y, angle, segment) {
@@ -16,6 +14,4 @@ class Anchor extends Point {
   }
 }
 
-register('Anchor', Anchor);
-
-module.exports = Anchor;
+export default Anchor;

package/src/symbol/check_max_angle.js

@@ -1,4 +1,4 @@
-module.exports = checkMaxAngle;
+export default checkMaxAngle;
 
 /**
  * Labels placed around really sharp angles aren't readable. Check if any
@@ -15,7 +15,9 @@ module.exports = checkMaxAngle;
  */
 function checkMaxAngle(line, anchor, labelLength, windowSize, maxAngle) {
   // horizontal labels always pass
-  if (anchor.segment === undefined) return true;
+  if (anchor.segment === undefined) {
+    return true;
+  }
 
   let p = anchor;
   let index = anchor.segment + 1;
@@ -26,7 +28,9 @@ function checkMaxAngle(line, anchor, labelLength, windowSize, maxAngle) {
     index--;
 
     // there isn't enough room for the label after the beginning of the line
-    if (index < 0) return false;
+    if (index < 0) {
+      return false;
+    }
 
     anchorDistance -= line[index].dist(p);
     p = line[index];
@@ -46,7 +50,9 @@ function checkMaxAngle(line, anchor, labelLength, windowSize, maxAngle) {
     const next = line[index + 1];
 
     // there isn't enough room for the label before the end of the line
-    if (!next) return false;
+    if (!next) {
+      return false;
+    }
 
     let angleDelta = prev.angleTo(current) - current.angleTo(next);
     // restrict angle to -pi..pi range
@@ -64,7 +70,9 @@ function checkMaxAngle(line, anchor, labelLength, windowSize, maxAngle) {
     }
 
     // the sum of angles within the window area exceeds the maximum allowed value. check fails.
-    if (recentAngleDelta > maxAngle) return false;
+    if (recentAngleDelta > maxAngle) {
+      return false;
+    }
 
     index++;
     anchorDistance += current.dist(next);

package/src/symbol/clip_line.js

@@ -1,6 +1,5 @@
-const { default: Point } = require('@mapbox/point-geometry');
-
-module.exports = clipLine;
+import Point from '@mapbox/point-geometry';
+export default clipLine;
 
 /**
  * Returns the part of a multiline that intersects with the provided rectangular box.

package/src/symbol/collision_feature.js

@@ -1,4 +1,4 @@
-const { default: Point } = require('@mapbox/point-geometry');
+import Point from '@mapbox/point-geometry';
 
 /**
  * A CollisionFeature represents the area of the tile covered by a single label.
@@ -174,8 +174,12 @@ class CollisionFeature {
       let boxDistanceToAnchor = labelStartDistance + boxOffset;
 
       // make the distance between pitch padding boxes bigger
-      if (boxOffset < 0) boxDistanceToAnchor += boxOffset;
-      if (boxOffset > labelLength) boxDistanceToAnchor += boxOffset - labelLength;
+      if (boxOffset < 0) {
+        boxDistanceToAnchor += boxOffset;
+      }
+      if (boxOffset > labelLength) {
+        boxDistanceToAnchor += boxOffset - labelLength;
+      }
 
       if (boxDistanceToAnchor < anchorDistance) {
         // The line doesn't extend far enough back for this box, skip it
@@ -227,4 +231,4 @@ class CollisionFeature {
   }
 }
 
-module.exports = CollisionFeature;
+export default CollisionFeature;

package/src/symbol/collision_index.js

@@ -1,9 +1,7 @@
-const { default: Point } = require('@mapbox/point-geometry');
-
-const intersectionTests = require('../util/intersection_tests');
-const Grid = require('./grid_index');
-
-const projection = require('../symbol/projection');
+import Point from '@mapbox/point-geometry';
+import * as projection from '../symbol/projection.js';
+import * as intersectionTests from '../util/intersection_tests.js';
+import Grid from './grid_index.js';
 
 // When a symbol crosses the edge that causes it to be included in
 // collision detection, it will cause changes in the symbols around
@@ -382,4 +380,4 @@ function markCollisionCircleUsed(collisionCircles, index, used) {
   collisionCircles[index + 4] = used ? 1 : 0;
 }
 
-module.exports = CollisionIndex;
+export default CollisionIndex;