@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/symbol/symbol_size.js

@@ -1,14 +1,11 @@
-const { normalizePropertyExpression } = require('@mapwhit/style-expressions');
-
-const interpolate = require('../util/interpolate');
-const { clamp } = require('../util/util');
-const EvaluationParameters = require('../style/evaluation_parameters');
-
-module.exports = { getSizeData, evaluateSizeForFeature, evaluateSizeForZoom };
+import { normalizePropertyExpression } from '@mapwhit/style-expressions';
+import EvaluationParameters from '../style/evaluation_parameters.js';
+import interpolate from '../util/interpolate.js';
+import { clamp } from '../util/util.js';
 
 // For {text,icon}-size, get the bucket-level data that will be needed by
 // the painter to set symbol-size-related uniforms
-function getSizeData(tileZoom, value) {
+export function getSizeData(tileZoom, value) {
   const { expression } = value;
   if (expression.kind === 'constant') {
     return {
@@ -25,10 +22,14 @@ function getSizeData(tileZoom, value) {
   const levels = expression.zoomStops;
 
   let lower = 0;
-  while (lower < levels.length && levels[lower] <= tileZoom) lower++;
+  while (lower < levels.length && levels[lower] <= tileZoom) {
+    lower++;
+  }
   lower = Math.max(0, lower - 1);
   let upper = lower;
-  while (upper < levels.length && levels[upper] < tileZoom + 1) upper++;
+  while (upper < levels.length && levels[upper] < tileZoom + 1) {
+    upper++;
+  }
   upper = Math.min(levels.length - 1, upper);
 
   const zoomRange = {
@@ -60,7 +61,7 @@ function getSizeData(tileZoom, value) {
   };
 }
 
-function evaluateSizeForFeature(sizeData, partiallyEvaluatedSize, symbol) {
+export function evaluateSizeForFeature(sizeData, partiallyEvaluatedSize, symbol) {
   const part = partiallyEvaluatedSize;
   if (sizeData.functionType === 'source') {
     return symbol.lowerSize / 10;
@@ -71,7 +72,7 @@ function evaluateSizeForFeature(sizeData, partiallyEvaluatedSize, symbol) {
   return part.uSize;
 }
 
-function evaluateSizeForZoom(sizeData, currentZoom, property) {
+export function evaluateSizeForZoom(sizeData, currentZoom, property) {
   if (sizeData.functionType === 'constant') {
     return {
       uSizeT: 0,

package/src/symbol/transform_text.js

@@ -1,7 +1,7 @@
-const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
+import { plugin as rtlTextPlugin } from '../source/rtl_text_plugin.js';
 
 function transformText(text, layer, feature) {
-  const transform = layer.layout.get('text-transform').evaluate(feature, {});
+  const transform = layer._layout.get('text-transform').evaluate(feature, {});
   if (transform === 'uppercase') {
     text = text.toLocaleUpperCase();
   } else if (transform === 'lowercase') {
@@ -15,9 +15,9 @@ function transformText(text, layer, feature) {
   return text;
 }
 
-module.exports = function (text, layer, feature) {
+export default function (text, layer, feature) {
   text.sections.forEach(section => {
     section.text = transformText(section.text, layer, feature);
   });
   return text;
-};
+}

package/src/ui/camera.js

@@ -1,12 +1,12 @@
-const { deepEqual } = require('../util/object');
-const { clamp, wrap, ease: defaultEasing } = require('../util/util');
-const warn = require('../util/warn');
-const interpolate = require('../util/interpolate');
-const browser = require('../util/browser');
-const LngLat = require('../geo/lng_lat');
-const LngLatBounds = require('../geo/lng_lat_bounds');
-const { default: Point } = require('@mapbox/point-geometry');
-const { Event, Evented } = require('@mapwhit/events');
+import Point from '@mapbox/point-geometry';
+import { Event, Evented } from '@mapwhit/events';
+import LngLat from '../geo/lng_lat.js';
+import LngLatBounds from '../geo/lng_lat_bounds.js';
+import browser from '../util/browser.js';
+import interpolate from '../util/interpolate.js';
+import { deepEqual } from '../util/object.js';
+import { clamp, ease as defaultEasing, wrap } from '../util/util.js';
+import warn from '../util/warn.js';
 
 /**
  * Options common to {@link Map#jumpTo}, {@link Map#easeTo}, and {@link Map#flyTo}, controlling the desired location,
@@ -354,8 +354,12 @@ class Camera extends Evented {
     if (
       !deepEqual(
         Object.keys(options.padding).sort((a, b) => {
-          if (a < b) return -1;
-          if (a > b) return 1;
+          if (a < b) {
+            return -1;
+          }
+          if (a > b) {
+            return 1;
+          }
           return 0;
         }),
         ['bottom', 'left', 'right', 'top']
@@ -429,7 +433,9 @@ class Camera extends Evented {
     const calculatedOptions = this.cameraForBounds(bounds, options);
 
     // cameraForBounds warns + returns undefined if unable to fit:
-    if (!calculatedOptions) return this;
+    if (!calculatedOptions) {
+      return this;
+    }
 
     options = Object.assign(calculatedOptions, options);
 
@@ -542,7 +548,9 @@ class Camera extends Evented {
       ...options
     };
 
-    if (options.animate === false) options.duration = 0;
+    if (options.animate === false) {
+      options.duration = 0;
+    }
 
     const tr = this.transform;
     const startZoom = this.getZoom();
@@ -820,7 +828,9 @@ class Camera extends Evented {
     // When u₀ = u₁, the optimal path doesn’t require both ascent and descent.
     if (Math.abs(u1) < 0.000001 || !Number.isFinite(S)) {
       // Perform a more or less instantaneous transition if the path is too short.
-      if (Math.abs(w0 - w1) < 0.000001) return this.easeTo(options, eventData);
+      if (Math.abs(w0 - w1) < 0.000001) {
+        return this.easeTo(options, eventData);
+      }
 
       const k = w1 < w0 ? -1 : 1;
       S = Math.abs(Math.log(w1 / w0)) / rho;
@@ -932,8 +942,12 @@ class Camera extends Evented {
   _normalizeBearing(bearing, currentBearing) {
     bearing = wrap(bearing, -180, 180);
     const diff = Math.abs(bearing - currentBearing);
-    if (Math.abs(bearing - 360 - currentBearing) < diff) bearing -= 360;
-    if (Math.abs(bearing + 360 - currentBearing) < diff) bearing += 360;
+    if (Math.abs(bearing - 360 - currentBearing) < diff) {
+      bearing -= 360;
+    }
+    if (Math.abs(bearing + 360 - currentBearing) < diff) {
+      bearing += 360;
+    }
     return bearing;
   }
 
@@ -941,11 +955,13 @@ class Camera extends Evented {
   // interpolating between the two endpoints will cross it.
   _normalizeCenter(center) {
     const tr = this.transform;
-    if (!tr.renderWorldCopies || tr.lngRange) return;
+    if (!tr.renderWorldCopies || tr.lngRange) {
+      return;
+    }
 
     const delta = center.lng - tr.center.lng;
     center.lng += delta > 180 ? -360 : delta < -180 ? 360 : 0;
   }
 }
 
-module.exports = Camera;
+export default Camera;

package/src/ui/map.js

@@ -1,21 +1,19 @@
-const { bindAll } = require('../util/object');
-const warn = require('../util/warn');
-
-const browser = require('../util/browser');
-const DOM = require('../util/dom');
-const loadImage = require('../util/loader/image');
-
-const Style = require('../style/style');
-const EvaluationParameters = require('../style/evaluation_parameters');
-const Painter = require('../render/painter');
-const Transform = require('../geo/transform');
-const Camera = require('./camera');
-const LngLat = require('../geo/lng_lat');
-const LngLatBounds = require('../geo/lng_lat_bounds');
-const { default: Point } = require('@mapbox/point-geometry');
-const { RGBAImage } = require('../util/image');
-const { Event, ErrorEvent } = require('@mapwhit/events');
-const taskQueue = require('../util/task_queue');
+import Point from '@mapbox/point-geometry';
+import { ErrorEvent, Event } from '@mapwhit/events';
+import LngLat from '../geo/lng_lat.js';
+import LngLatBounds from '../geo/lng_lat_bounds.js';
+import Transform from '../geo/transform.js';
+import Painter from '../render/painter.js';
+import EvaluationParameters from '../style/evaluation_parameters.js';
+import Style from '../style/style.js';
+import browser from '../util/browser.js';
+import DOM from '../util/dom.js';
+import { RGBAImage } from '../util/image.js';
+import loadImage from '../util/loader/image.js';
+import { bindAll } from '../util/object.js';
+import taskQueue from '../util/task_queue.js';
+import warn from '../util/warn.js';
+import Camera from './camera.js';
 
 const defaultMinZoom = 0;
 const defaultMaxZoom = 22;
@@ -41,10 +39,6 @@ const defaultOptions = {
 
   renderWorldCopies: true,
 
-  refreshExpiredTiles: true,
-
-  maxTileCacheSize: null,
-
   transformRequest: null,
   fadeDuration: 300,
   crossSourceCollisions: true
@@ -98,7 +92,6 @@ const defaultOptions = {
  * @param {number} [options.bearing=0] The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If `bearing` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
  * @param {number} [options.pitch=0] The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If `pitch` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
  * @param {boolean} [options.renderWorldCopies=true]  If `true`, multiple copies of the world will be rendered, when zoomed out.
- * @param {number} [options.maxTileCacheSize=null]  The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.
  * @param {number} [options.fadeDuration=300] Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
  * @param {boolean} [options.crossSourceCollisions=true] If `true`, symbols from multiple sources can collide with each other during collision detection. If `false`, collision detection is run separately for the symbols in each source.
  * @example
@@ -125,7 +118,6 @@ class Map extends Camera {
     this.loadImage = loadImage;
 
     this._interactive = options.interactive;
-    this._maxTileCacheSize = options.maxTileCacheSize;
     this._failIfMajorPerformanceCaveat = options.failIfMajorPerformanceCaveat;
     this._preserveDrawingBuffer = options.preserveDrawingBuffer;
     this._trackResize = options.trackResize;
@@ -189,7 +181,9 @@ class Map extends Camera {
 
     this.resize();
 
-    if (options.style) this.setStyle(options.style);
+    if (options.style) {
+      this.setStyle(options.style);
+    }
 
     this.on('style.load', function () {
       if (this.transform.unmodified) {
@@ -365,7 +359,9 @@ class Map extends Camera {
       this.transform.minZoom = minZoom;
       this._update();
 
-      if (this.getZoom() < minZoom) this.setZoom(minZoom);
+      if (this.getZoom() < minZoom) {
+        this.setZoom(minZoom);
+      }
 
       return this;
     }
@@ -397,7 +393,9 @@ class Map extends Camera {
       this.transform.maxZoom = maxZoom;
       this._update();
 
-      if (this.getZoom() > maxZoom) this.setZoom(maxZoom);
+      if (this.getZoom() > maxZoom) {
+        this.setZoom(maxZoom);
+      }
 
       return this;
     }
@@ -560,8 +558,6 @@ class Map extends Camera {
     //     queryRenderedFeatures(geometry: PointLike | [PointLike, PointLike], options?: Object)
     //     queryRenderedFeatures(options?: Object)
     //
-    // There no way to express that in a way that's compatible with both flow and documentation.js.
-    // Related: https://github.com/facebook/flow/issues/1556
     if (arguments.length === 2) {
       geometry = arguments[0];
       options = arguments[1];
@@ -687,7 +683,7 @@ class Map extends Camera {
    */
   getStyle() {
     if (this.style) {
-      return this.style.serialize();
+      return this.style.serialize?.() ?? this.style;
     }
   }
 
@@ -697,7 +693,9 @@ class Map extends Camera {
    * @returns {boolean} A Boolean indicating whether the style is fully loaded.
    */
   isStyleLoaded() {
-    if (!this.style) return warn.once('There is no style added to the map.');
+    if (!this.style) {
+      return warn.once('There is no style added to the map.');
+    }
     return this.style.loaded();
   }
 
@@ -727,7 +725,7 @@ class Map extends Camera {
    * @returns {boolean} A Boolean indicating whether the source is loaded.
    */
   isSourceLoaded(id) {
-    const source = this.style?.sourceCaches[id];
+    const source = this.style?._sources[id];
     if (source === undefined) {
       this.fire(new ErrorEvent(new Error(`There is no source with ID '${id}'`)));
       return;
@@ -743,13 +741,14 @@ class Map extends Camera {
    */
 
   areTilesLoaded() {
-    const sources = this.style?.sourceCaches;
+    const sources = this.style?._sources;
     for (const id in sources) {
       const source = sources[id];
       const tiles = source._tiles;
-      for (const t in tiles) {
-        const tile = tiles[t];
-        if (!(tile.state === 'loaded' || tile.state === 'errored')) return false;
+      for (const tile of tiles.values()) {
+        if (!(tile.state === 'loaded' || tile.state === 'errored')) {
+          return false;
+        }
       }
     }
     return true;
@@ -798,6 +797,16 @@ class Map extends Camera {
    */
   addImage(id, image, { pixelRatio = 1, sdf = false } = {}) {
     if (image instanceof HTMLImageElement) {
+      if (!image.complete) {
+        const promise = new Promise(resolve => {
+          image.decode().then(() => {
+            const { width, height, data } = browser.getImageData(image);
+            resolve({ data: new RGBAImage({ width, height }, data), pixelRatio, sdf });
+          });
+        });
+        this.style.addImage(id, { promise });
+        return;
+      }
       const { width, height, data } = browser.getImageData(image);
       this.style.addImage(id, { data: new RGBAImage({ width, height }, data), pixelRatio, sdf });
     } else if (image.width === undefined || image.height === undefined) {
@@ -819,6 +828,23 @@ class Map extends Camera {
     }
   }
 
+  /**
+   * Returns an image, specified by ID, currently available in the map.
+   * This includes both images from the style's original sprite
+   * and any images that have been added at runtime using {@link Map.addImage}.
+   *
+   * @param id - The ID of the image.
+   * @returns An image in the map with the specified ID.
+   *
+   * @example
+   * ```js
+   * let coffeeShopIcon = map.getImage("coffee_cup");
+   * ```
+   */
+  getImage(id) {
+    return this.style.getImage(id);
+  }
+
   /**
    * Define wether the image has been added or not
    *
@@ -1054,6 +1080,24 @@ class Map extends Camera {
     this._update();
   }
 
+  /**
+   * Removes feature state, setting it back to the default behavior. If only
+   * source is specified, removes all states of that source. If
+   * target.id is also specified, removes all keys for that feature's state.
+   * If key is also specified, removes that key from that feature's state.
+   *
+   * @param {Object} target Identifier of where to set state: can be a source, a feature, or a specific key of feature.
+   * Feature objects returned from {@link Map#queryRenderedFeatures} or event handlers can be used as feature identifiers.
+   * @param {string | number} target.id (optional) Unique id of the feature. Optional if key is not specified.
+   * @param {string} target.source The Id of the vector source or GeoJSON source for the feature.
+   * @param {string} [target.sourceLayer] (optional)  *For vector tile sources, the sourceLayer is
+   *  required.*
+   * @param {string} key (optional) The key in the feature state to reset.
+   */
+  removeFeatureState(target, key) {
+    this.style.removeFeatureState(target, key);
+    return this._update();
+  }
   /**
    * Gets the state of a feature.
    *
@@ -1204,8 +1248,12 @@ class Map extends Camera {
    * @returns {boolean} A Boolean indicating whether the map is fully loaded.
    */
   loaded() {
-    if (this._styleDirty || this._sourcesDirty) return false;
-    if (!this.style || !this.style.loaded()) return false;
+    if (this._styleDirty || this._sourcesDirty) {
+      return false;
+    }
+    if (!this.style || !this.style.loaded()) {
+      return false;
+    }
     return true;
   }
 
@@ -1218,7 +1266,9 @@ class Map extends Camera {
    * @private
    */
   _update(updateStyle) {
-    if (!this.style) return;
+    if (!this.style) {
+      return;
+    }
 
     this._styleDirty = this._styleDirty || updateStyle;
     this._sourcesDirty = true;
@@ -1357,7 +1407,9 @@ class Map extends Camera {
       window.removeEventListener('online', this._onWindowOnline, false);
     }
     const extension = this.painter.context.gl.getExtension('WEBGL_lose_context');
-    if (extension) extension.loseContext();
+    if (extension) {
+      extension.loseContext();
+    }
     removeNode(this._canvasContainer);
     removeNode(this._controlContainer);
     this._container.classList.remove('mapboxgl-map');
@@ -1396,7 +1448,9 @@ class Map extends Camera {
     return !!this._showTileBoundaries;
   }
   set showTileBoundaries(value) {
-    if (this._showTileBoundaries === value) return;
+    if (this._showTileBoundaries === value) {
+      return;
+    }
     this._showTileBoundaries = value;
     this._update();
   }
@@ -1416,7 +1470,9 @@ class Map extends Camera {
     return !!this._showCollisionBoxes;
   }
   set showCollisionBoxes(value) {
-    if (this._showCollisionBoxes === value) return;
+    if (this._showCollisionBoxes === value) {
+      return;
+    }
     this._showCollisionBoxes = value;
     if (value) {
       // When we turn collision boxes on we have to generate them for existing tiles
@@ -1444,7 +1500,9 @@ class Map extends Camera {
     return !!this._showOverdrawInspector;
   }
   set showOverdrawInspector(value) {
-    if (this._showOverdrawInspector === value) return;
+    if (this._showOverdrawInspector === value) {
+      return;
+    }
     this._showOverdrawInspector = value;
     this._update();
   }
@@ -1485,7 +1543,7 @@ class Map extends Camera {
   }
 }
 
-module.exports = Map;
+export default Map;
 
 function removeNode(node) {
   if (node.parentNode) {

package/src/util/async.js

@@ -8,16 +8,22 @@
  * called with an array, containing the results of each async call.
  * @private
  */
-exports.all = function (array, fn, callback) {
-  if (!array.length) return callback(null, []);
+export function all(array, fn, callback) {
+  if (!array.length) {
+    return callback(null, []);
+  }
   let remaining = array.length;
   const results = new Array(array.length);
   let error = null;
   array.forEach((item, i) => {
     fn(item, (err, result) => {
-      if (err) error = err;
+      if (err) {
+        error = err;
+      }
       results[i] = result;
-      if (--remaining === 0) callback(error, results);
+      if (--remaining === 0) {
+        callback(error, results);
+      }
     });
   });
-};
+}

package/src/util/browser.js

@@ -49,4 +49,4 @@ const exported = {
   }
 };
 
-module.exports = exported;
+export default exported;

package/src/util/callback.js

@@ -1,24 +1,18 @@
-module.exports = {
-  callback,
-  callbackWithSpread,
-  callbackWithNoResult
-};
-
-function callback(fn, promise) {
+export function callback(fn, promise) {
   if (fn) {
     promise.then(result => fn(null, result), fn);
   }
   return promise;
 }
 
-function callbackWithSpread(fn, promise) {
+export function callbackWithSpread(fn, promise) {
   if (fn) {
     promise.then(result => fn(null, ...result), fn);
   }
   return promise;
 }
 
-function callbackWithNoResult(fn, promise) {
+export function callbackWithNoResult(fn, promise) {
   if (fn) {
     promise.then(() => fn(null), fn);
   }

package/src/util/classify_rings.js

@@ -1,10 +1,11 @@
-const { default: quickselect } = require('quickselect');
-
-const { calculateSignedArea } = require('./util');
+import quickselect from 'quickselect';
+import { calculateSignedArea } from './util.js';
 
 // classifies an array of rings into polygons with outer rings and holes
-module.exports = function classifyRings(rings, maxRings) {
-  if (rings.length <= 1) return [rings];
+export default function classifyRings(rings, maxRings) {
+  if (rings.length <= 1) {
+    return [rings];
+  }
 
   const polygons = [];
   let polygon;
@@ -12,11 +13,15 @@ module.exports = function classifyRings(rings, maxRings) {
 
   for (const ring of rings) {
     const area = calculateSignedArea(ring);
-    if (area === 0) continue;
+    if (area === 0) {
+      continue;
+    }
 
     ring.area = Math.abs(area);
 
-    if (ccw === undefined) ccw = area < 0;
+    if (ccw === undefined) {
+      ccw = area < 0;
+    }
 
     if (ccw === area < 0) {
       append(polygon);
@@ -40,4 +45,4 @@ module.exports = function classifyRings(rings, maxRings) {
     }
     polygons.push(polygon);
   }
-};
+}

package/src/util/color_ramp.js

@@ -1,4 +1,4 @@
-const { RGBAImage } = require('./image');
+import { RGBAImage } from './image.js';
 
 /**
  * Given an expression that should evaluate to a color ramp, return
@@ -6,7 +6,7 @@ const { RGBAImage } = require('./image');
  *
  * @private
  */
-module.exports = function renderColorRamp(expression, colorRampEvaluationParameter) {
+export default function renderColorRamp(expression, colorRampEvaluationParameter) {
   const colorRampData = new Uint8Array(256 * 4);
   const evaluationGlobals = {};
   for (let i = 0, j = 0; i < 256; i++, j += 4) {
@@ -21,4 +21,4 @@ module.exports = function renderColorRamp(expression, colorRampEvaluationParamet
   }
 
   return new RGBAImage({ width: 256, height: 1 }, colorRampData);
-};
+}

package/src/util/config.js

@@ -1,12 +1,14 @@
-const { Evented } = require('@mapwhit/events');
+import { Evented } from '@mapwhit/events';
+import browser from './browser.js';
 
 function getDefaultWorkerCount() {
-  const browser = require('./browser');
   return Math.max(Math.floor(browser.hardwareConcurrency / 2), 1);
 }
 
 const config = new Evented();
 
+export default config;
+
 config.set = function set(c) {
   Object.assign(config, c);
   config.notify();
@@ -20,5 +22,3 @@ config.set({
   WORKER_COUNT: getDefaultWorkerCount(),
   WORKER_URL: ''
 });
-
-module.exports = config;

package/src/util/dictionary_coder.js

@@ -1,6 +1,5 @@
-const assert = require('assert');
-
-module.exports = dictionaryCoder;
+import assert from 'assert';
+export default dictionaryCoder;
 
 function dictionaryCoder(strings) {
   const numberToString = strings.sort();

package/src/util/dom.js

@@ -1,10 +1,14 @@
 const DOM = {};
-module.exports = DOM;
+export default DOM;
 
 DOM.create = function (tagName, className, container) {
   const el = window.document.createElement(tagName);
-  if (className) el.className = className;
-  if (container) container.appendChild(el);
+  if (className) {
+    el.className = className;
+  }
+  if (container) {
+    container.appendChild(el);
+  }
   return el;
 };