@mapwhit/tilerenderer 0.47.1 → 0.47.2

package/src/ui/camera.js

@@ -1,4 +1,4 @@
-const { bindAll, deepEqual } = require('../util/object');
+const { deepEqual } = require('../util/object');
 const { clamp, wrap, ease: defaultEasing } = require('../util/util');
 const warn = require('../util/warn');
 const interpolate = require('../util/interpolate');
@@ -53,8 +53,6 @@ class Camera extends Evented {
     this._zooming = false;
     this.transform = transform;
     this._bearingSnap = options.bearingSnap;
-
-    bindAll(['_renderFrameCallback'], this);
   }
 
   /**
@@ -96,9 +94,9 @@ class Camera extends Evented {
    * @returns {Map} `this`
    * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/)
    */
-  panBy(offset, options, eventData) {
+  panBy(offset, options = {}, eventData) {
     offset = Point.convert(offset).mult(-1);
-    return this.panTo(this.transform.center, Object.assign({ offset }, options), eventData);
+    return this.panTo(this.transform.center, { offset, ...options }, eventData);
   }
 
   /**
@@ -112,16 +110,8 @@ class Camera extends Evented {
    * @fires moveend
    * @returns {Map} `this`
    */
-  panTo(lnglat, options, eventData) {
-    return this.easeTo(
-      Object.assign(
-        {
-          center: lnglat
-        },
-        options
-      ),
-      eventData
-    );
+  panTo(lnglat, options = {}, eventData) {
+    return this.easeTo({ center: lnglat, ...options }, eventData);
   }
 
   /**
@@ -171,16 +161,8 @@ class Camera extends Evented {
    * @fires zoomend
    * @returns {Map} `this`
    */
-  zoomTo(zoom, options, eventData) {
-    return this.easeTo(
-      Object.assign(
-        {
-          zoom: zoom
-        },
-        options
-      ),
-      eventData
-    );
+  zoomTo(zoom, options = {}, eventData) {
+    return this.easeTo({ zoom, ...options }, eventData);
   }
 
   /**
@@ -266,16 +248,8 @@ class Camera extends Evented {
    * @fires moveend
    * @returns {Map} `this`
    */
-  rotateTo(bearing, options, eventData) {
-    return this.easeTo(
-      Object.assign(
-        {
-          bearing: bearing
-        },
-        options
-      ),
-      eventData
-    );
+  rotateTo(bearing, options = {}, eventData) {
+    return this.easeTo({ bearing, ...options }, eventData);
   }
 
   /**
@@ -288,8 +262,8 @@ class Camera extends Evented {
    * @fires moveend
    * @returns {Map} `this`
    */
-  resetNorth(options, eventData) {
-    this.rotateTo(0, Object.assign({ duration: 1000 }, options), eventData);
+  resetNorth(options = {}, eventData) {
+    this.rotateTo(0, { duration: 1000, ...options }, eventData);
     return this;
   }
 
@@ -338,45 +312,35 @@ class Camera extends Evented {
   }
 
   /**
-   * Pans and zooms the map to contain its visible area within the specified geographical bounds.
-   * This function will also reset the map's bearing to 0 if bearing is nonzero.
-   *
    * @memberof Map#
-   * @param bounds Center these bounds in the viewport and use the highest
-   *      zoom level up to and including `Map#getMaxZoom()` that fits them in the viewport.
+   * @param bounds Calculate the center for these bounds in the viewport and use
+   *      the highest zoom level up to and including `Map#getMaxZoom()` that fits
+   *      in the viewport.
    * @param options
    * @param {number | PaddingOptions} [options.padding] The amount of padding in pixels to add to the given bounds.
-   * @param {boolean} [options.linear=false] If `true`, the map transitions using
-   *     {@link Map#easeTo}. If `false`, the map transitions using {@link Map#flyTo}. See
-   *     those functions and {@link AnimationOptions} for information about options available.
-   * @param {Function} [options.easing] An easing function for the animated transition. See {@link AnimationOptions}.
    * @param {PointLike} [options.offset=[0, 0]] The center of the given bounds relative to the map's center, measured in pixels.
-   * @param {number} [options.maxZoom] The maximum zoom level to allow when the map view transitions to the specified bounds.
-   * @param eventData Additional properties to be added to event objects of events triggered by this method.
-   * @fires movestart
-   * @fires moveend
-   * @returns {Map} `this`
+   * @param {number} [options.maxZoom] The maximum zoom level to allow when the camera would transition to the specified bounds.
+   * @returns {CameraOptions | void} If map is able to fit to provided bounds, returns `CameraOptions` with
+   *      at least `center`, `zoom`, `bearing`, `offset`, `padding`, and `maxZoom`, as well as any other
+   *      `options` provided in arguments. If map is unable to fit, method will warn and return undefined.
    * @example
    * var bbox = [[-79, 43], [-73, 45]];
-   * map.fitBounds(bbox, {
+   * var newCameraTransform = map.cameraForBounds(bbox, {
    *   padding: {top: 10, bottom:25, left: 15, right: 5}
    * });
-   * @see [Fit a map to a bounding box](https://www.mapbox.com/mapbox-gl-js/example/fitbounds/)
    */
-  fitBounds(bounds, options, eventData) {
-    options = Object.assign(
-      {
-        padding: {
-          top: 0,
-          bottom: 0,
-          right: 0,
-          left: 0
-        },
-        offset: [0, 0],
-        maxZoom: this.transform.maxZoom
+  cameraForBounds(bounds, options) {
+    options = {
+      padding: {
+        top: 0,
+        bottom: 0,
+        right: 0,
+        left: 0
       },
-      options
-    );
+      offset: [0, 0],
+      maxZoom: this.transform.maxZoom,
+      ...options
+    };
 
     if (typeof options.padding === 'number') {
       const p = options.padding;
@@ -398,7 +362,7 @@ class Camera extends Evented {
       )
     ) {
       warn.once("options.padding must be a positive number, or an Object with keys 'bottom', 'left', 'right', 'top'");
-      return this;
+      return;
     }
 
     bounds = LngLatBounds.convert(bounds);
@@ -425,13 +389,50 @@ class Camera extends Evented {
 
     if (scaleY < 0 || scaleX < 0) {
       warn.once('Map cannot fit within canvas with the given bounds, padding, and/or offset.');
-      return this;
+      return;
     }
 
     options.center = tr.unproject(nw.add(se).div(2));
     options.zoom = Math.min(tr.scaleZoom(tr.scale * Math.min(scaleX, scaleY)), options.maxZoom);
     options.bearing = 0;
 
+    return options;
+  }
+
+  /**
+   * Pans and zooms the map to contain its visible area within the specified geographical bounds.
+   * This function will also reset the map's bearing to 0 if bearing is nonzero.
+   *
+   * @memberof Map#
+   * @param bounds Center these bounds in the viewport and use the highest
+   *      zoom level up to and including `Map#getMaxZoom()` that fits them in the viewport.
+   * @param options
+   * @param {number | PaddingOptions} [options.padding] The amount of padding in pixels to add to the given bounds.
+   * @param {boolean} [options.linear=false] If `true`, the map transitions using
+   *     {@link Map#easeTo}. If `false`, the map transitions using {@link Map#flyTo}. See
+   *     those functions and {@link AnimationOptions} for information about options available.
+   * @param {Function} [options.easing] An easing function for the animated transition. See {@link AnimationOptions}.
+   * @param {PointLike} [options.offset=[0, 0]] The center of the given bounds relative to the map's center, measured in pixels.
+   * @param {number} [options.maxZoom] The maximum zoom level to allow when the map view transitions to the specified bounds.
+   * @param eventData Additional properties to be added to event objects of events triggered by this method.
+   * @fires movestart
+   * @fires moveend
+   * @returns {Map} `this`
+   * @example
+   * var bbox = [[-79, 43], [-73, 45]];
+   * map.fitBounds(bbox, {
+   *   padding: {top: 10, bottom:25, left: 15, right: 5}
+   * });
+   * @see [Fit a map to a bounding box](https://www.mapbox.com/mapbox-gl-js/example/fitbounds/)
+   */
+  fitBounds(bounds, options, eventData) {
+    const calculatedOptions = this.cameraForBounds(bounds, options);
+
+    // cameraForBounds warns + returns undefined if unable to fit:
+    if (!calculatedOptions) return this;
+
+    options = Object.assign(calculatedOptions, options);
+
     return options.linear
       ? this.easeTo(options, eventData)
       : options.animate === false
@@ -534,14 +535,12 @@ class Camera extends Evented {
   easeTo(options, eventData) {
     this.stop();
 
-    options = Object.assign(
-      {
-        offset: [0, 0],
-        duration: 500,
-        easing: defaultEasing
-      },
-      options
-    );
+    options = {
+      offset: [0, 0],
+      duration: 500,
+      easing: defaultEasing,
+      ...options
+    };
 
     if (options.animate === false) options.duration = 0;
 
@@ -732,15 +731,13 @@ class Camera extends Evented {
 
     this.stop();
 
-    options = Object.assign(
-      {
-        offset: [0, 0],
-        speed: 1.2,
-        curve: 1.42,
-        easing: defaultEasing
-      },
-      options
-    );
+    options = {
+      offset: [0, 0],
+      speed: 1.2,
+      curve: 1.42,
+      easing: defaultEasing,
+      ...options
+    };
 
     const tr = this.transform;
     const startZoom = this.getZoom();

package/src/ui/map.js

@@ -16,7 +16,7 @@ const LngLatBounds = require('../geo/lng_lat_bounds');
 const Point = require('@mapbox/point-geometry');
 const { RGBAImage } = require('../util/image');
 const { Event, ErrorEvent } = require('../util/evented');
-const TaskQueue = require('../util/task_queue');
+const taskQueue = require('../util/task_queue');
 
 const defaultMinZoom = 0;
 const defaultMaxZoom = 22;
@@ -134,36 +134,6 @@ const defaultOptions = {
  * @see [Display a map](https://www.mapbox.com/mapbox-gl-js/examples/)
  */
 class Map extends Camera {
-  /**
-   * The map's {@link ScrollZoomHandler}, which implements zooming in and out with a scroll wheel or trackpad.
-   */
-
-  /**
-   * The map's {@link BoxZoomHandler}, which implements zooming using a drag gesture with the Shift key pressed.
-   */
-
-  /**
-   * The map's {@link DragRotateHandler}, which implements rotating the map while dragging with the right
-   * mouse button or with the Control key pressed.
-   */
-
-  /**
-   * The map's {@link DragPanHandler}, which implements dragging the map with a mouse or touch gesture.
-   */
-
-  /**
-   * The map's {@link KeyboardHandler}, which allows the user to zoom, rotate, and pan the map using keyboard
-   * shortcuts.
-   */
-
-  /**
-   * The map's {@link DoubleClickZoomHandler}, which allows the user to zoom by double clicking.
-   */
-
-  /**
-   * The map's {@link TouchZoomRotateHandler}, which allows the user to zoom or rotate the map with touch gestures.
-   */
-
   constructor(options) {
     options = Object.assign({}, defaultOptions, options);
 
@@ -186,7 +156,7 @@ class Map extends Camera {
     this._fadeDuration = options.fadeDuration;
     this._crossSourceCollisions = options.crossSourceCollisions;
     this._crossFadingFactor = 1;
-    this._renderTaskQueue = new TaskQueue();
+    this._renderTaskQueue = taskQueue(this);
 
     if (typeof options.container === 'string') {
       const container = window.document.getElementById(options.container);
@@ -220,6 +190,9 @@ class Map extends Camera {
 
     this._setupContainer();
     this._setupPainter();
+    if (this.painter === undefined) {
+      throw new Error('Failed to initialize WebGL.');
+    }
 
     this.on('move', this._update.bind(this, false));
     this.on('moveend', this._update.bind(this, false));

package/src/util/actor.js

@@ -15,24 +15,16 @@ module.exports = actor;
  */
 
 function actor(target, parent, mapId, name) {
-  const callbacks = {};
-  let callbackID = 0;
+  const promises = new Map();
+  let callbackID = Number.MIN_SAFE_INTEGER;
   target.addEventListener('message', receive, false);
 
-  function postMessage(targetMapId, id, type, data, err) {
-    const buffers = [];
-    const payload = {
-      targetMapId,
-      sourceMapId: mapId,
-      type,
-      id,
-      data: serialize(data, buffers)
-    };
-    if (err) {
-      payload.error = serialize(err);
-    }
-    target.postMessage(payload, buffers);
-  }
+  return {
+    send,
+    receive,
+    remove,
+    name
+  };
 
   /**
    * Sends a message from a main-thread map to a Worker or from a Worker back to
@@ -42,50 +34,54 @@ function actor(target, parent, mapId, name) {
    * @param targetMapId A particular mapId to which to send this message.
    * @private
    */
-  function send(type, data, callback, targetMapId) {
-    let id = 'null';
-    if (callback) {
-      id = `${mapId}:${callbackID++}`;
-      callbacks[id] = callback;
-    }
+  function send(type, data, targetMapId) {
+    const id = `${mapId}:${callbackID++}`;
+    const p = Promise.withResolvers();
+    promises.set(id, p);
     postMessage(targetMapId, id, type, data);
+    return p.promise;
   }
 
-  function receive(message) {
+  async function receive(message) {
     const { data } = message;
     const { id, type, targetMapId } = data;
 
     if (targetMapId && mapId !== targetMapId) return;
 
-    const done = (err, data) => postMessage(undefined, id, '<response>', data, err);
-
     if (type === '<response>') {
-      const callback = callbacks[id];
-      delete callbacks[id];
-      if (callback) {
+      const p = promises.get(id);
+      if (p) {
+        promises.delete(id);
         if (data.error) {
-          callback(deserialize(data.error));
+          p.reject(deserialize(data.error));
         } else {
-          callback(null, deserialize(data.data));
+          p.resolve(deserialize(data.data));
         }
       }
       return;
     }
 
     if (typeof id !== 'undefined') {
+      let perform;
       if (parent[type]) {
-        // data.type == 'loadTile', 'removeTile', etc.
-        parent[type](data.sourceMapId, deserialize(data.data), done);
-        return;
-      }
-      if (parent.getWorkerSource) {
+        // data.type == 'loadTile' etc.
+        perform = () => parent[type](data.sourceMapId, deserialize(data.data));
+      } else if (parent.getWorkerSource) {
         // data.type == sourcetype.method
         const [sourcetype, method] = type.split('.');
         const params = deserialize(data.data);
         const workerSource = parent.getWorkerSource(data.sourceMapId, sourcetype, params.source);
-        workerSource[method](params, done);
+        perform = () => workerSource[method](params);
+      } else {
         return;
       }
+      try {
+        const result = await perform();
+        postMessage(data.sourceMapId, id, '<response>', result);
+      } catch (err) {
+        postMessage(data.sourceMapId, id, '<response>', undefined, err);
+      }
+      return;
     }
 
     parent[type](deserialize(data.data));
@@ -95,10 +91,18 @@ function actor(target, parent, mapId, name) {
     target.removeEventListener('message', receive, false);
   }
 
-  return {
-    send,
-    receive,
-    remove,
-    name
-  };
+  function postMessage(targetMapId, id, type, data, err) {
+    const buffers = [];
+    const payload = {
+      targetMapId,
+      sourceMapId: mapId,
+      type,
+      id,
+      data: serialize(data, buffers)
+    };
+    if (err) {
+      payload.error = serialize(err);
+    }
+    target.postMessage(payload, buffers);
+  }
 }

package/src/util/browser.js

@@ -51,6 +51,12 @@ const exported = {
     return context.getImageData(0, 0, img.width, img.height);
   },
 
+  resolveURL(path) {
+    const a = window.document.createElement('a');
+    a.href = path;
+    return a.href;
+  },
+
   hardwareConcurrency: typeof window === 'object' ? window.navigator.hardwareConcurrency : 4,
 
   get devicePixelRatio() {

package/src/util/dictionary_coder.js

@@ -1,25 +1,17 @@
 const assert = require('assert');
 
-class DictionaryCoder {
-  constructor(strings) {
-    this._stringToNumber = {};
-    this._numberToString = [];
-    for (let i = 0; i < strings.length; i++) {
-      const string = strings[i];
-      this._stringToNumber[string] = i;
-      this._numberToString[i] = string;
-    }
-  }
-
-  encode(string) {
-    assert(string in this._stringToNumber);
-    return this._stringToNumber[string];
-  }
+module.exports = dictionaryCoder;
 
-  decode(n) {
-    assert(n < this._numberToString.length);
-    return this._numberToString[n];
-  }
+function dictionaryCoder(strings) {
+  const numberToString = strings.sort();
+  const stringToNumber = new Map(numberToString.map((s, i) => [s, i]));
+  return {
+    encode(string) {
+      return stringToNumber.get(string);
+    },
+    decode(n) {
+      assert(n < numberToString.length);
+      return numberToString[n];
+    }
+  };
 }
-
-module.exports = DictionaryCoder;

package/src/util/dispatcher.js

@@ -1,11 +1,8 @@
-const async = require('./async');
 const uniqueId = require('./unique_id');
 const actor = require('./actor');
 
 module.exports = dispatcher;
 
-const noop = () => {};
-
 /**
  * Responsible for sending messages from a {@link Source} to an associated
  * {@link WorkerSource}.
@@ -15,7 +12,7 @@ const noop = () => {};
 function dispatcher(workerPool, parent, makeActor = actor) {
   // exposed to allow stubbing in unit tests
 
-  let currentActor = 0;
+  let currentActor = -1;
   const id = uniqueId();
   const workers = workerPool.acquire(id);
   const actors = workers.map((worker, i) => makeActor(worker, parent, id, `Worker ${i}`));
@@ -23,8 +20,9 @@ function dispatcher(workerPool, parent, makeActor = actor) {
   /**
    * Broadcast a message to all Workers.
    */
-  function broadcast(type, data, cb = noop) {
-    async.all(actors, (actor, done) => actor.send(type, data, done), cb);
+  function broadcast(type, data) {
+    const tasks = actors.map(actor => actor.send(type, data));
+    return Promise.all(tasks);
   }
 
   // Use round robin to send requests to web workers.
@@ -41,16 +39,8 @@ function dispatcher(workerPool, parent, makeActor = actor) {
    * @param targetID The ID of the Worker to which to send this message. Omit to allow the dispatcher to choose.
    * @returns The ID of the worker to which the message was sent.
    */
-  function send(type, data, callback, targetID) {
-    if (typeof targetID !== 'number' || isNaN(targetID)) {
-      targetID = nextActorId();
-    }
-
-    const actor = actors[targetID];
-    if (actor) {
-      actor.send(type, data, callback);
-    }
-    return targetID;
+  function send(type, data, targetID = nextActorId()) {
+    return actors[targetID]?.send(type, data) ?? Promise.resolve();
   }
 
   function remove() {
@@ -59,10 +49,17 @@ function dispatcher(workerPool, parent, makeActor = actor) {
     workerPool.release(id);
   }
 
+  function nextWorkerId(workerId = nextActorId()) {
+    return workerId;
+  }
+
   return {
-    id,
+    get id() {
+      return id;
+    },
     broadcast,
     send,
+    nextWorkerId,
     remove
   };
 }

package/src/util/image.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 
-const { register } = require('./web_worker_transfer');
+const { register } = require('./transfer_registry');
 
 function createImage(image, { width, height }, channels, data) {
   if (!data) {

package/src/util/loader/image.js

@@ -1,32 +1,32 @@
 module.exports = image;
 
-function image(data, fn) {
+function image(data) {
   if (!data) {
-    return fn(new Error('image data not loaded'));
-  }
-  if (data.byteLength === 0) {
-    transparentImage(fn);
-  } else {
-    imageFromData({ data }, fn);
+    throw new Error('image data not loaded');
   }
+  return data.byteLength === 0 ? transparentImage() : imageFromData({ data });
 }
 
-async function imageFromData(imgData, fn) {
+async function imageFromData(imgData) {
+  const { promise, resolve } = Promise.withResolvers();
   const blob = new window.Blob([imgData.data], { type: imgData.type || 'image/png' });
   const img = new window.Image();
 
   img.onload = () => {
-    fn(null, img);
+    resolve(img);
     window.URL.revokeObjectURL(img.src);
   };
   img.src = await window.URL.createObjectURL(blob);
+  return promise;
 }
 
 const transparentPngUrl =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=';
 
-function transparentImage(fn) {
+function transparentImage() {
+  const { promise, resolve } = Promise.withResolvers();
   const img = new window.Image();
-  img.onload = () => fn(null, img);
+  img.onload = () => resolve(img);
   img.src = transparentPngUrl;
+  return promise;
 }

package/src/util/polyfill.js

@@ -0,0 +1,16 @@
+/**
+ * Adds a static method `withResolvers` to the Promise object if it does not already exist.
+ *
+ * @see https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers
+ */
+if (typeof Promise.withResolvers !== 'function') {
+  Promise.withResolvers = function () {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    return { promise, resolve, reject };
+  };
+}