@mapwhit/tilerenderer 0.50.0 → 0.51.0

package/src/source/resources/images.js

@@ -0,0 +1,68 @@
+module.exports = images;
+
+function images({ actor, mapId }) {
+  const cache = new Map(); // id -> image
+  const inProgress = new Map(); // id -> promise
+
+  return {
+    getImages
+  };
+
+  async function getImages({ icons }) {
+    const missing = new Set();
+    const result = {};
+    for (const id of icons) {
+      if (cache.has(id)) {
+        const image = cache.get(id);
+        if (image) {
+          result[id] = image;
+        }
+      } else {
+        missing.add(id);
+      }
+    }
+    if (missing.size === 0) {
+      // All images are already in the cache
+      return result;
+    }
+    const active = new Set();
+    const needed = [...missing];
+    // Check if any of the missing images are already being fetched
+    for (const id of missing) {
+      if (inProgress.has(id)) {
+        active.add(inProgress.get(id));
+        missing.delete(id);
+      }
+    }
+    if (missing.size > 0) {
+      // Fetch the remaining images
+      await fetchMissing([...missing]);
+    }
+    if (active.size > 0) {
+      await Promise.all(active);
+    }
+    for (const id of needed) {
+      const image = cache.get(id);
+      if (image) {
+        result[id] = image;
+      }
+    }
+    return result;
+  }
+
+  async function fetchMissing(icons) {
+    const promise = actor.send('getImages', { icons }, mapId);
+    for (const id of icons) {
+      inProgress.set(id, promise);
+    }
+    const result = await promise;
+    // Add the fetched images to the cache
+    for (const id of icons) {
+      cache.set(id, result[id]);
+    }
+    // Remove the fetched images from the inProgress set
+    for (const id of icons) {
+      inProgress.delete(id);
+    }
+  }
+}

package/src/source/resources/index.js

@@ -0,0 +1,22 @@
+const makeGlyphs = require('./glyphs');
+const makeImages = require('./images');
+
+module.exports = { resources };
+
+function resources(actor, mapId) {
+  const glyphs = makeGlyphs({ actor, mapId });
+  const images = makeImages({ actor, mapId });
+
+  return {
+    getGlyphs,
+    getImages
+  };
+
+  function getGlyphs(params) {
+    return glyphs.getGlyphs(params);
+  }
+
+  function getImages(params) {
+    return images.getImages(params);
+  }
+}

package/src/source/vector_tile_worker_source.js

@@ -1,4 +1,4 @@
-const { VectorTile } = require('@mapbox/vector-tile');
+const { VectorTile } = require('@mapwhit/vector-tile');
 const Protobuf = require('@mapwhit/pbf');
 const WorkerTile = require('./worker_tile');
 
@@ -20,7 +20,7 @@ function loadVectorTile(params) {
  * This class is designed to be easily reused to support custom source types
  * for data formats that can be parsed/converted into an in-memory VectorTile
  * representation.  To do so, create it with
- * `new VectorTileWorkerSource(actor, styleLayers, customLoadVectorDataFunction)`.
+ * `new VectorTileWorkerSource(resources, styleLayers, customLoadVectorDataFunction)`.
  *
  * @private
  */
@@ -31,8 +31,8 @@ class VectorTileWorkerSource {
    * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
    * loads the pbf at `params.url`.
    */
-  constructor(actor, layerIndex, loadVectorData = loadVectorTile) {
-    this.actor = actor;
+  constructor(resources, layerIndex, loadVectorData = loadVectorTile) {
+    this.resources = resources;
     this.layerIndex = layerIndex;
     this.loadVectorData = loadVectorData;
   }
@@ -50,7 +50,7 @@ class VectorTileWorkerSource {
     const { vectorTile, rawData } = response;
     const workerTile = new WorkerTile(params);
     workerTile.vectorTile = vectorTile;
-    const result = await workerTile.parse(vectorTile, this.layerIndex, this.actor);
+    const result = await workerTile.parse(vectorTile, this.layerIndex, this.resources);
     if (rawData) {
       result.rawTileData = rawData;
     }

package/src/source/worker.js

@@ -8,8 +8,11 @@ const GeoJSONWorkerSource = require('./geojson_worker_source');
 const assert = require('assert');
 const { plugin: globalRTLTextPlugin } = require('./rtl_text_plugin');
 const DEMData = require('../data/dem_data');
+const { resources } = require('./resources');
 
 class Worker {
+  #resources = {};
+
   constructor(self) {
     this.self = self;
     this.actor = new Actor(self, this);
@@ -85,10 +88,8 @@ class Worker {
     return (this.layerIndexes[mapId] ??= new StyleLayerIndex());
   }
 
-  getActor(mapId) {
-    return (this.actors[mapId] ??= {
-      send: (type, data) => this.actor.send(type, data, mapId)
-    });
+  getResources(mapId) {
+    return (this.#resources[mapId] ??= resources(this.actor, mapId));
   }
 
   getWorkerSource(mapId, type, source) {
@@ -100,7 +101,7 @@ class Worker {
 
   createWorkerSource(type, mapId) {
     const WorkerSource = this.workerSourceTypes[type];
-    return new WorkerSource(this.getActor(mapId), this.getLayerIndex(mapId));
+    return new WorkerSource(this.getResources(mapId), this.getLayerIndex(mapId));
   }
 }
 

package/src/source/worker_tile.js

@@ -33,7 +33,7 @@ class WorkerTile {
     this.showCollisionBoxes = params.showCollisionBoxes;
   }
 
-  async parse(data, layerIndex, actor) {
+  async parse(data, layerIndex, resources) {
     this.status = 'parsing';
     this.data = data;
 
@@ -103,9 +103,9 @@ class WorkerTile {
     const icons = Object.keys(options.iconDependencies);
     const patterns = Object.keys(options.patternDependencies);
     const tasks = [
-      Object.keys(stacks).length ? actor.send('getGlyphs', { uid: this.uid, stacks }) : {},
-      icons.length ? actor.send('getImages', { icons }) : {},
-      patterns.length ? actor.send('getImages', { icons: patterns }) : {}
+      Object.keys(stacks).length ? resources.getGlyphs({ uid: this.uid, stacks }) : {},
+      icons.length ? resources.getImages({ icons }) : {},
+      patterns.length ? resources.getImages({ icons: patterns }) : {}
     ];
     const [glyphMap, iconMap, patternMap] = await Promise.all(tasks);
     const glyphAtlas = new GlyphAtlas(glyphMap);

package/src/style/properties.js

@@ -2,8 +2,7 @@ const assert = require('assert');
 
 const { clone } = require('../util/object');
 const { easeCubicInOut } = require('../util/util');
-const interpolate = require('../style-spec/util/interpolate');
-const { normalizePropertyExpression } = require('../style-spec/expression');
+const { interpolate, normalizePropertyExpression } = require('@mapwhit/style-expressions');
 const { register } = require('../util/transfer_registry');
 const EvaluationParameters = require('./evaluation_parameters');
 

package/src/style/style.js

@@ -32,7 +32,7 @@ class Style extends Evented {
     this.map = map;
     this.dispatcher = dispatcher(getWorkerPool(), this);
     this.imageManager = new ImageManager();
-    this.glyphManager = new GlyphManager(options.localIdeographFontFamily);
+    this.glyphManager = new GlyphManager();
     this.lineAtlas = new LineAtlas(256, 512);
     this.crossTileSymbolIndex = new CrossTileSymbolIndex();
 
@@ -928,8 +928,8 @@ class Style extends Evented {
     return this.imageManager.getImages(icons);
   }
 
-  getGlyphs(_mapId, { stacks }) {
-    return this.glyphManager.getGlyphs(stacks);
+  loadGlyphRange(_mapId, { stack, range }) {
+    return this.glyphManager.loadGlyphRange(stack, range);
   }
 }
 

package/src/style/style_layer/symbol_style_layer.js

@@ -2,7 +2,7 @@ const StyleLayer = require('../style_layer');
 
 const SymbolBucket = require('../../data/bucket/symbol_bucket');
 const resolveTokens = require('../../util/token');
-const { isExpression } = require('../../style-spec/expression');
+const { isExpression } = require('@mapwhit/style-expressions');
 const assert = require('assert');
 const properties = require('./symbol_style_layer_properties');
 

package/src/style/style_layer.js

@@ -2,7 +2,7 @@ const { filterObject } = require('../util/object');
 
 const { Evented } = require('../util/evented');
 const { Layout, Transitionable, PossiblyEvaluatedPropertyValue } = require('./properties');
-const { supportsPropertyExpression } = require('../style-spec/util/properties');
+const { supportsPropertyExpression } = require('@mapwhit/style-expressions');
 
 const TRANSITION_SUFFIX = '-transition';
 

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

@@ -1,4 +1,4 @@
-const { createExpression } = require('../expression');
+const { createExpression } = require('@mapwhit/style-expressions');
 
 module.exports = createFilter;
 
@@ -31,8 +31,9 @@ function isExpressionFilter(filter) {
 
     case 'any':
     case 'all':
-      for (const f of filter.slice(1)) {
-        if (!isExpressionFilter(f) && typeof f !== 'boolean') {
+      for (let i = 1; i < filter.length; i++) {
+        const f = filter[i];
+        if (typeof f !== 'boolean' && !isExpressionFilter(f)) {
           return false;
         }
       }
@@ -86,34 +87,37 @@ function compare(a, b) {
 
 function convertFilter(filter) {
   if (!filter) return true;
-  const op = filter[0];
+  const [op, ...args] = filter;
   if (filter.length <= 1) return op !== 'any';
-  const converted =
-    op === '=='
-      ? convertComparisonOp(filter[1], filter[2], '==')
-      : op === '!='
-        ? convertNegation(convertComparisonOp(filter[1], filter[2], '=='))
-        : op === '<' || op === '>' || op === '<=' || op === '>='
-          ? convertComparisonOp(filter[1], filter[2], op)
-          : op === 'any'
-            ? convertDisjunctionOp(filter.slice(1))
-            : op === 'all'
-              ? ['all'].concat(filter.slice(1).map(convertFilter))
-              : op === 'none'
-                ? ['all'].concat(filter.slice(1).map(convertFilter).map(convertNegation))
-                : op === 'in'
-                  ? convertInOp(filter[1], filter.slice(2))
-                  : op === '!in'
-                    ? convertNegation(convertInOp(filter[1], filter.slice(2)))
-                    : op === 'has'
-                      ? convertHasOp(filter[1])
-                      : op === '!has'
-                        ? convertNegation(convertHasOp(filter[1]))
-                        : true;
-  return converted;
+  switch (op) {
+    case '!=':
+      return convertNegation(convertComparisonOp('==', ...args));
+    case '==':
+    case '<':
+    case '>':
+    case '<=':
+    case '>=':
+      return convertComparisonOp(op, ...args);
+    case 'any':
+      return convertDisjunctionOp(args);
+    case 'all':
+      return ['all', ...args.map(convertFilter)];
+    case 'none':
+      return ['all', ...args.map(convertFilter).map(convertNegation)];
+    case 'in':
+      return convertInOp(args);
+    case '!in':
+      return convertNegation(convertInOp(args));
+    case 'has':
+      return convertHasOp(args[0]);
+    case '!has':
+      return convertNegation(convertHasOp(args[0]));
+    default:
+      return true;
+  }
 }
 
-function convertComparisonOp(property, value, op) {
+function convertComparisonOp(op, property, value) {
   switch (property) {
     case '$type':
       return [`filter-type-${op}`, value];
@@ -125,10 +129,10 @@ function convertComparisonOp(property, value, op) {
 }
 
 function convertDisjunctionOp(filters) {
-  return ['any'].concat(filters.map(convertFilter));
+  return ['any', ...filters.map(convertFilter)];
 }
 
-function convertInOp(property, values) {
+function convertInOp([property, ...values]) {
   if (values.length === 0) {
     return false;
   }
@@ -138,13 +142,18 @@ function convertInOp(property, values) {
     case '$id':
       return ['filter-id-in', ['literal', values]];
     default:
-      if (values.length > 200 && !values.some(v => typeof v !== typeof values[0])) {
-        return ['filter-in-large', property, ['literal', values.sort(compare)]];
-      }
-      return ['filter-in-small', property, ['literal', values]];
+      return isUniformLarge(values)
+        ? ['filter-in-large', property, ['literal', values.sort(compare)]]
+        : ['filter-in-small', property, ['literal', values]];
   }
 }
 
+function isUniformLarge(values) {
+  if (values.length < 200) return false;
+  const type = typeof values[0];
+  return values.every(v => typeof v === type);
+}
+
 function convertHasOp(property) {
   switch (property) {
     case '$type':

package/src/style-spec/group_by_layout.js

@@ -1,33 +1,20 @@
 const refProperties = require('./util/ref_properties');
 
 function stringify(obj) {
+  if (obj == null) return 'null';
   const type = typeof obj;
-  if (type === 'number' || type === 'boolean' || type === 'string' || obj === undefined || obj === null)
-    return JSON.stringify(obj);
+  if (type === 'number' || type === 'boolean' || type === 'string') return obj;
 
   if (Array.isArray(obj)) {
-    let str = '[';
-    for (const val of obj) {
-      str += `${stringify(val)},`;
-    }
-    return `${str}]`;
+    return '[' + obj.map(val => stringify(val)).join(',') + ']';
   }
 
   const keys = Object.keys(obj).sort();
-
-  let str = '{';
-  for (let i = 0; i < keys.length; i++) {
-    str += `${JSON.stringify(keys[i])}:${stringify(obj[keys[i]])},`;
-  }
-  return `${str}}`;
+  return '{' + keys.map(key => `${key}:${stringify(obj[key])}`).join(',') + '}';
 }
 
 function getKey(layer) {
-  let key = '';
-  for (const k of refProperties) {
-    key += `/${stringify(layer[k])}`;
-  }
-  return key;
+  return refProperties.map(k => stringify(layer[k])).join('/');
 }
 
 module.exports = groupByLayout;
@@ -49,20 +36,11 @@ module.exports = groupByLayout;
 function groupByLayout(layers) {
   const groups = {};
 
-  for (let i = 0; i < layers.length; i++) {
-    const k = getKey(layers[i]);
-    let group = groups[k];
-    if (!group) {
-      group = groups[k] = [];
-    }
-    group.push(layers[i]);
-  }
-
-  const result = [];
-
-  for (const k in groups) {
-    result.push(groups[k]);
+  for (const l of layers) {
+    const k = getKey(l);
+    const group = (groups[k] ??= []);
+    group.push(l);
   }
 
-  return result;
+  return Object.values(groups);
 }

package/src/symbol/mergelines.js

@@ -1,5 +1,3 @@
-const { Formatted } = require('../style-spec/expression/types/formatted');
-
 module.exports = function (features) {
   const leftIndex = new Map();
   const rightIndex = new Map();

package/src/symbol/symbol_layout.js

@@ -12,7 +12,6 @@ const classifyRings = require('../util/classify_rings');
 const EXTENT = require('../data/extent');
 const SymbolBucket = require('../data/bucket/symbol_bucket');
 const EvaluationParameters = require('../style/evaluation_parameters');
-const { Formatted } = require('../style-spec/expression/types/formatted');
 const murmur3 = require('murmurhash-js');
 
 // The symbol layout process needs `text-size` evaluated at up to five different zoom levels, and

package/src/symbol/symbol_size.js

@@ -1,4 +1,4 @@
-const { normalizePropertyExpression } = require('../style-spec/expression');
+const { normalizePropertyExpression } = require('@mapwhit/style-expressions');
 
 const interpolate = require('../util/interpolate');
 const { clamp } = require('../util/util');

package/src/symbol/transform_text.js

@@ -1,5 +1,4 @@
 const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
-const { Formatted } = require('../style-spec/expression/types/formatted');
 
 function transformText(text, layer, feature) {
   const transform = layer.layout.get('text-transform').evaluate(feature, {});

package/src/ui/map.js

@@ -9,7 +9,6 @@ const Style = require('../style/style');
 const EvaluationParameters = require('../style/evaluation_parameters');
 const Painter = require('../render/painter');
 const Transform = require('../geo/transform');
-const bindHandlers = require('./bind_handlers');
 const Camera = require('./camera');
 const LngLat = require('../geo/lng_lat');
 const LngLatBounds = require('../geo/lng_lat_bounds');
@@ -31,18 +30,8 @@ const defaultOptions = {
 
   interactive: true,
 
-  scrollZoom: true,
-  boxZoom: true,
-  dragRotate: true,
-  dragPan: true,
-  keyboard: true,
-  doubleClickZoom: true,
-  touchZoomRotate: true,
-
   bearingSnap: 7,
 
-  clickTolerance: 3,
-
   attributionControl: true,
 
   failIfMajorPerformanceCaveat: false,
@@ -98,19 +87,11 @@ const defaultOptions = {
  *   bearing will snap to north. For example, with a `bearingSnap` of 7, if the user rotates
  *   the map within 7 degrees of north, the map will automatically snap to exact north.
  * @param {boolean} [options.pitchWithRotate=true] If `false`, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
- * @param {number} [options.clickTolerance=3] The max number of pixels a user can shift the mouse pointer during a click for it to be considered a valid click (as opposed to a mouse drag).
  * @param {string} [options.logoPosition='bottom-left'] A string representing the position of the Mapbox wordmark on the map. Valid options are `top-left`,`top-right`, `bottom-left`, `bottom-right`.
  * @param {boolean} [options.failIfMajorPerformanceCaveat=false] If `true`, map creation will fail if the performance of Mapbox
  *   GL JS would be dramatically worse than expected (i.e. a software renderer would be used).
  * @param {boolean} [options.preserveDrawingBuffer=false] If `true`, the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()`. This is `false` by default as a performance optimization.
  * @param {LngLatBoundsLike} [options.maxBounds] If set, the map will be constrained to the given bounds.
- * @param {boolean|Object} [options.scrollZoom=true] If `true`, the "scroll to zoom" interaction is enabled. An `Object` value is passed as options to {@link ScrollZoomHandler#enable}.
- * @param {boolean} [options.boxZoom=true] If `true`, the "box zoom" interaction is enabled (see {@link BoxZoomHandler}).
- * @param {boolean} [options.dragRotate=true] If `true`, the "drag to rotate" interaction is enabled (see {@link DragRotateHandler}).
- * @param {boolean} [options.dragPan=true] If `true`, the "drag to pan" interaction is enabled (see {@link DragPanHandler}).
- * @param {boolean} [options.keyboard=true] If `true`, keyboard shortcuts are enabled (see {@link KeyboardHandler}).
- * @param {boolean} [options.doubleClickZoom=true] If `true`, the "double click to zoom" interaction is enabled (see {@link DoubleClickZoomHandler}).
- * @param {boolean|Object} [options.touchZoomRotate=true] If `true`, the "pinch to rotate and zoom" interaction is enabled. An `Object` value is passed as options to {@link TouchZoomRotateHandler#enable}.
  * @param {boolean} [options.trackResize=true]  If `true`, the map will automatically resize when the browser window resizes.
  * @param {LngLatLike} [options.center=[0, 0]] The inital geographical centerpoint of the map. If `center` 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, 0]` Note: Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
  * @param {number} [options.zoom=0] The initial zoom level of the map. If `zoom` 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`.
@@ -118,10 +99,6 @@ const defaultOptions = {
  * @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 {string} [options.localIdeographFontFamily=null] If specified, defines a CSS font-family
- *   for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' ranges.
- *   In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold).
- *   The purpose of this option is to avoid bandwidth-intensive glyph server requests. (see [Use locally generated ideographs](https://www.mapbox.com/mapbox-gl-js/example/local-ideographs))
  * @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
@@ -134,6 +111,8 @@ const defaultOptions = {
  * @see [Display a map](https://www.mapbox.com/mapbox-gl-js/examples/)
  */
 class Map extends Camera {
+  #mapGestures;
+
   constructor(options) {
     options = Object.assign({}, defaultOptions, options);
 
@@ -203,8 +182,6 @@ class Map extends Camera {
       window.addEventListener('resize', this._onWindowResize, false);
     }
 
-    bindHandlers(this, options);
-
     this.jumpTo({
       center: options.center,
       zoom: options.zoom,
@@ -214,7 +191,7 @@ class Map extends Camera {
 
     this.resize();
 
-    if (options.style) this.setStyle(options.style, { localIdeographFontFamily: options.localIdeographFontFamily });
+    if (options.style) this.setStyle(options.style);
 
     this.on('style.load', function () {
       if (this.transform.unmodified) {
@@ -465,27 +442,21 @@ class Map extends Camera {
    * Returns true if the map is panning, zooming, rotating, or pitching due to a camera animation or user gesture.
    */
   isMoving() {
-    return (
-      this._moving ||
-      this.dragPan.isActive() ||
-      this.dragRotate.isActive() ||
-      this.touchZoomRotate.isActive() ||
-      this.scrollZoom.isActive()
-    );
+    return !!(this._moving || this._mapGestures?.isMoving());
   }
 
   /**
    * Returns true if the map is zooming due to a camera animation or user gesture.
    */
   isZooming() {
-    return this._zooming || this.touchZoomRotate.isActive() || this.scrollZoom.isZooming();
+    return !!(this._zooming || this._mapGestures?.isZooming());
   }
 
   /**
    * Returns true if the map is rotating due to a camera animation or user gesture.
    */
   isRotating() {
-    return this._rotating || this.touchZoomRotate.isActive() || this.dragRotate.isActive();
+    return !!(this._rotating || this._mapGestures?.isRotating());
   }
 
   /**
@@ -666,9 +637,6 @@ class Map extends Camera {
    * @param {Object} [options]
    * @param {boolean} [options.diff=true] If false, force a 'full' update, removing the current style
    *   and adding building the given one instead of attempting a diff-based update.
-   * @param {string} [options.localIdeographFontFamily=null] If non-null, defines a css font-family
-   *   for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables'
-   *   ranges. Forces a full update.
    * @returns {Map} `this`
    * @see [Change a map's style](https://www.mapbox.com/mapbox-gl-js/example/setstyle/)
    */
@@ -823,7 +791,11 @@ class Map extends Camera {
       );
     } else {
       const { width, height, data } = image;
-      this.style.addImage(id, { data: new RGBAImage({ width, height }, new Uint8Array(data)), pixelRatio, sdf });
+      this.style.addImage(id, {
+        data: new RGBAImage({ width, height }, new Uint8Array(data)),
+        pixelRatio,
+        sdf
+      });
     }
   }
 

package/src/util/browser.js

@@ -1,25 +1,10 @@
 // TODO move code that assumes that `window` may not be set to relevant tests
 
-const now =
-  typeof window === 'object' && window.performance?.now
-    ? window.performance.now.bind(window.performance)
-    : Date.now.bind(Date);
+const now = () => performance.now();
 
-const raf =
-  typeof window === 'object'
-    ? window.requestAnimationFrame ||
-      window.mozRequestAnimationFrame ||
-      window.webkitRequestAnimationFrame ||
-      window.msRequestAnimationFrame
-    : fn => setTimeout(fn, 0);
+const raf = typeof window === 'object' ? window.requestAnimationFrame : fn => setTimeout(fn, 0);
 
-const cancel =
-  typeof window === 'object'
-    ? window.cancelAnimationFrame ||
-      window.mozCancelAnimationFrame ||
-      window.webkitCancelAnimationFrame ||
-      window.msCancelAnimationFrame
-    : id => clearTimeout(id);
+const cancel = typeof window === 'object' ? window.cancelAnimationFrame : id => clearTimeout(id);
 
 /**
  * @private

package/src/util/classify_rings.js

@@ -1,4 +1,4 @@
-const quickselect = require('quickselect');
+const { default: quickselect } = require('quickselect');
 
 const { calculateSignedArea } = require('./util');