@mapwhit/tilerenderer 0.49.0 → 0.51.0

package/src/source/geojson_wrapper.js

@@ -1,9 +1,9 @@
 const Point = require('@mapbox/point-geometry');
-
-const mvt = require('@mapbox/vector-tile');
-const toGeoJSON = mvt.VectorTileFeature.prototype.toGeoJSON;
+const { VectorTileFeature } = require('@mapwhit/vector-tile');
 const EXTENT = require('../data/extent');
 
+const { toGeoJSON } = VectorTileFeature.prototype;
+
 // The feature type used by geojson-vt and supercluster. Should be extracted to
 // global type and used in module definitions for those two modules.
 
@@ -11,10 +11,6 @@ class FeatureWrapper {
   constructor(feature) {
     this._feature = feature;
 
-    this.extent = EXTENT;
-    this.type = feature.type;
-    this.properties = feature.tags;
-
     // If the feature has a top-level `id` property, copy it over, but only
     // if it can be coerced to an integer, because this wrapper is used for
     // serializing geojson feature data into vector tile PBF data, and the
@@ -26,23 +22,22 @@ class FeatureWrapper {
     }
   }
 
+  get type() {
+    return this._feature.type;
+  }
+
+  get properties() {
+    return this._feature.tags;
+  }
+
+  get extent() {
+    return EXTENT;
+  }
+
   loadGeometry() {
-    if (this._feature.type === 1) {
-      const geometry = [];
-      for (const point of this._feature.geometry) {
-        geometry.push([new Point(point[0], point[1])]);
-      }
-      return geometry;
-    }
-    const geometry = [];
-    for (const ring of this._feature.geometry) {
-      const newRing = [];
-      for (const point of ring) {
-        newRing.push(new Point(point[0], point[1]));
-      }
-      geometry.push(newRing);
-    }
-    return geometry;
+    return this.type === 1
+      ? this._feature.geometry.map(p => [makePoint(p)])
+      : this._feature.geometry.map(ring => ring.map(makePoint));
   }
 
   toGeoJSON(x, y, z) {
@@ -53,15 +48,28 @@ class FeatureWrapper {
 class GeoJSONWrapper {
   constructor(features) {
     this.layers = { _geojsonTileLayer: this };
-    this.name = '_geojsonTileLayer';
-    this.extent = EXTENT;
-    this.length = features.length;
     this._features = features;
   }
 
+  get extent() {
+    return EXTENT;
+  }
+
+  get length() {
+    return this._features.length;
+  }
+
+  get name() {
+    return '_geojsonTileLayer';
+  }
+
   feature(i) {
     return new FeatureWrapper(this._features[i]);
   }
 }
 
 module.exports = GeoJSONWrapper;
+
+function makePoint(arr) {
+  return new Point(arr[0], arr[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/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/style-spec/reference/v8.json

@@ -3148,7 +3148,7 @@
         }
       },
       "concat": {
-        "doc": "Returns a `string` consisting of the concatenation of the inputs. If any inputs are `formatted`, returns a `formatted` with default formatting options for all unformatted inputs.",
+        "doc": "Returns a `string` consisting of the concatenation of the inputs. Each input is converted to a string as if by `to-string`.",
         "group": "String",
         "sdk-support": {
           "basic functionality": {

package/src/symbol/mergelines.js

@@ -1,5 +1,3 @@
-const { Formatted } = require('../style-spec/expression/definitions/formatted');
-
 module.exports = function (features) {
   const leftIndex = new Map();
   const rightIndex = new Map();
@@ -8,7 +6,7 @@ module.exports = function (features) {
 
   for (let k = 0; k < features.length; k++) {
     const { geometry, text: featureText } = features[k];
-    const text = featureText instanceof Formatted ? featureText.toString() : featureText;
+    const text = featureText ? featureText.toString() : null;
 
     if (!text) {
       add(k);

package/src/symbol/placement.js

@@ -170,6 +170,25 @@ class Placement {
     const textOptional = layout.get('text-optional');
     const iconOptional = layout.get('icon-optional');
 
+    const textAllowOverlap = layout.get('text-allow-overlap');
+    const iconAllowOverlap = layout.get('icon-allow-overlap');
+    // This logic is similar to the "defaultOpacityState" logic below in updateBucketOpacities
+    // If we know a symbol is always supposed to show, force it to be marked visible even if
+    // it wasn't placed into the collision index (because some or all of it was outside the range
+    // of the collision grid).
+    // There is a subtle edge case here we're accepting:
+    //  Symbol A has text-allow-overlap: true, icon-allow-overlap: true, icon-optional: false
+    //  A's icon is outside the grid, so doesn't get placed
+    //  A's text would be inside grid, but doesn't get placed because of icon-optional: false
+    //  We still show A because of the allow-overlap settings.
+    //  Symbol B has allow-overlap: false, and gets placed where A's text would be
+    //  On panning in, there is a short period when Symbol B and Symbol A will overlap
+    //  This is the reverse of our normal policy of "fade in on pan", but should look like any other
+    //  collision and hopefully not be too noticeable.
+    // See https://github.com/mapbox/mapbox-gl-js/issues/7172
+    const alwaysShowText = textAllowOverlap && (iconAllowOverlap || !bucket.hasIconData() || iconOptional);
+    const alwaysShowIcon = iconAllowOverlap && (textAllowOverlap || !bucket.hasTextData() || textOptional);
+
     const collisionGroup = this.collisionGroups.get(bucket.sourceID);
 
     if (!bucket.collisionArrays && collisionBoxArray) {
@@ -304,8 +323,8 @@ class Placement {
         assert(bucket.bucketInstanceId !== 0);
 
         this.placements[symbolInstance.crossTileID] = new JointPlacement(
-          placeText,
-          placeIcon,
+          placeText || (alwaysShowText && placedGlyphBoxes),
+          placeIcon || alwaysShowIcon,
           offscreen || bucket.justReloaded
         );
         seenCrossTileIDs[symbolInstance.crossTileID] = true;