@mapwhit/tilerenderer 0.50.0 → 0.51.1

package/src/source/resources/glyphs.js

@@ -0,0 +1,73 @@
+const parseGlyphPBF = require('../../style/parse_glyph_pbf');
+
+module.exports = glyphCache;
+
+const MAX_GLYPH_ID = 65535;
+
+function glyphCache({ actor, mapId, parseGlyphs = parseGlyphPBF }) {
+  const entries = {};
+
+  return {
+    getGlyphs
+  };
+
+  async function getGlyphs({ stacks }) {
+    const all = [];
+    for (const [stack, ids] of Object.entries(stacks)) {
+      const addedRanges = new Set();
+      for (const id of ids) {
+        if (id > MAX_GLYPH_ID) {
+          continue;
+        }
+        const range = Math.floor(id / 256);
+        if (!addedRanges.has(range) && !hasRange(stack, range)) {
+          addedRanges.add(range);
+          all.push(retrieveGlyphRange({ stack, range }));
+        }
+      }
+    }
+    if (all.length > 0) {
+      await Promise.all(all);
+    }
+    const result = {};
+    for (const [stack, ids] of Object.entries(stacks)) {
+      const entry = getEntry(stack);
+      const resultStack = (result[stack] ??= {});
+      for (const id of ids) {
+        if (id <= MAX_GLYPH_ID) {
+          resultStack[id] = entry.glyphs[id] ?? null;
+        } else {
+          resultStack[id] = null;
+        }
+      }
+    }
+    return result;
+  }
+
+  async function retrieveGlyphRange({ stack, range }) {
+    const entry = getEntry(stack);
+    const data = await loadGlyphRange(entry, stack, range);
+    if (!data) {
+      return null;
+    }
+    for (const glyph of parseGlyphs(data)) {
+      entry.glyphs[glyph.id] = glyph;
+    }
+  }
+
+  async function loadGlyphRange(entry, stack, range) {
+    const promise = (entry.requests[range] ??= actor.send('loadGlyphRange', { stack, range }, mapId));
+    const data = await promise;
+    delete entry.requests[range];
+    entry.ranges[range] = true;
+    return data;
+  }
+
+  function getEntry(stack) {
+    return (entries[stack] ??= { glyphs: {}, requests: {}, ranges: {} });
+  }
+
+  function hasRange(stack, range) {
+    return getEntry(stack).ranges[range];
+  }
+}

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/rtl_text_plugin.js

@@ -1,4 +1,4 @@
-const { Event, Evented } = require('../util/evented');
+const { Event, Evented } = require('@mapwhit/events');
 const browser = require('../util/browser');
 
 let pluginRequested = false;

package/src/source/source_cache.js

@@ -1,11 +1,11 @@
 const { create: createSource } = require('./source');
 const Tile = require('./tile');
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const TileCache = require('./tile_cache');
 const Coordinate = require('../geo/coordinate');
 const { keysDifference } = require('../util/object');
 const EXTENT = require('../data/extent');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 const browser = require('../util/browser');
 const { OverscaledTileID } = require('./tile_id');
 const assert = require('assert');

package/src/source/tile.js

@@ -7,7 +7,7 @@ const SymbolBucket = require('../data/bucket/symbol_bucket');
 const { RasterBoundsArray, CollisionBoxArray } = require('../data/array_types');
 const rasterBoundsAttributes = require('../data/raster_bounds_attributes');
 const EXTENT = require('../data/extent');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 const Texture = require('../render/texture');
 const SegmentVector = require('../data/segment');
 const { TriangleIndexArray } = require('../data/index_array_type');

package/src/source/vector_tile_source.js

@@ -1,4 +1,4 @@
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const { pick } = require('../util/object');
 const loadTileJSON = require('./load_tilejson');
 const TileBounds = require('./tile_bounds');

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/light.js

@@ -1,5 +1,5 @@
 const { sphericalToCartesian } = require('../util/util');
-const { Evented } = require('../util/evented');
+const { Evented } = require('@mapwhit/events');
 const interpolate = require('../util/interpolate');
 
 const lightSpec = {

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/query_utils.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 module.exports = {
   getMaximumPaintValue,

package/src/style/style.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 
-const { Event, ErrorEvent, Evented } = require('../util/evented');
+const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const createStyleLayer = require('./create_style_layer');
 const loadSprite = require('./load_sprite');
 const ImageManager = require('../render/image_manager');
@@ -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/circle_style_layer.js

@@ -5,7 +5,7 @@ const { polygonIntersectsBufferedPoint } = require('../../util/intersection_test
 const { getMaximumPaintValue, translateDistance, translate } = require('../query_utils');
 const properties = require('./circle_style_layer_properties');
 const { vec4 } = require('@mapbox/gl-matrix');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 class CircleStyleLayer extends StyleLayer {
   constructor(layer) {

package/src/style/style_layer/fill_extrusion_style_layer.js

@@ -5,7 +5,7 @@ const { polygonIntersectsPolygon, polygonIntersectsMultiPolygon } = require('../
 const { translateDistance, translate } = require('../query_utils');
 const properties = require('./fill_extrusion_style_layer_properties');
 const { vec4 } = require('@mapbox/gl-matrix');
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 class FillExtrusionStyleLayer extends StyleLayer {
   constructor(layer) {

package/src/style/style_layer/line_style_layer.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 const StyleLayer = require('../style_layer');
 const LineBucket = require('../../data/bucket/line_bucket');

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

@@ -1,8 +1,8 @@
 const { filterObject } = require('../util/object');
 
-const { Evented } = require('../util/evented');
+const { Evented } = require('@mapwhit/events');
 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/anchor.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 const { register } = require('../util/transfer_registry');
 

package/src/symbol/clip_line.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 module.exports = clipLine;
 

package/src/symbol/collision_feature.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 /**
  * A CollisionFeature represents the area of the tile covered by a single label.

package/src/symbol/collision_index.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 const intersectionTests = require('../util/intersection_tests');
 const Grid = require('./grid_index');

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/projection.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 const { mat4, vec4 } = require('@mapbox/gl-matrix');
 const symbolSize = require('./symbol_size');

package/src/symbol/quads.js

@@ -1,4 +1,4 @@
-const Point = require('@mapbox/point-geometry');
+const { default: Point } = require('@mapbox/point-geometry');
 
 const { GLYPH_PBF_BORDER } = require('../style/parse_glyph_pbf');
 

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');