@mapwhit/tilerenderer 1.3.0 → 1.5.0

package/src/source/geojson_tiler.js

@@ -0,0 +1,89 @@
+import rewind from '@mapwhit/geojson-rewind';
+import geojsonvt from 'geojson-vt';
+import Supercluster from 'supercluster';
+import FeatureIndex from '../data/feature_index.js';
+import GeoJSONWrapper from './geojson_wrapper.js';
+import { makeSingleSourceLayerWorkerTile as makeWorkerTile } from './worker_tile.js';
+
+/**
+ * Creates tiles from GeoJSON data.
+ */
+export default function makeTiler(resources, layerIndex) {
+  let geoJSONIndex;
+  let createGeoJSONIndex;
+
+  /**
+   * Fetches (if appropriate), parses, and index geojson data into tiles. This
+   * preparatory method must be called before {@link GeoJSONWorkerSource#loadTile}
+   * can correctly serve up tiles.
+   *
+   * Defers to {@link GeoJSONWorkerSource#loadGeoJSON} for the fetching/parsing,
+   * expecting `callback(error, data)` to be called with either an error or a
+   * parsed GeoJSON object.
+   *
+   * @param params
+   */
+  function loadData(params) {
+    const { cluster, data, geojsonVtOptions, superclusterOptions } = params;
+    geoJSONIndex = undefined;
+    createGeoJSONIndex = cluster
+      ? () => {
+          rewind(data, true);
+          return new Supercluster(superclusterOptions).load(data.features);
+        }
+      : () => {
+          rewind(data, true);
+          return geojsonvt(data, geojsonVtOptions);
+        };
+  }
+
+  function getTile(tileID) {
+    if (!geoJSONIndex) {
+      if (!createGeoJSONIndex) {
+        return; // we couldn't load the file
+      }
+
+      try {
+        geoJSONIndex = createGeoJSONIndex();
+      } finally {
+        createGeoJSONIndex = undefined;
+      }
+    }
+    const { z, x, y } = tileID.canonical;
+    return geoJSONIndex.getTile(z, x, y);
+  }
+
+  /**
+   * Returns a single tile.
+   */
+  async function loadTile(params) {
+    const { tileID, source, promoteId } = params;
+    const geoJSONTile = getTile(tileID);
+    if (!geoJSONTile) {
+      return; // nothing in the given tile
+    }
+    const sourceLayer = new GeoJSONWrapper(geoJSONTile.features);
+    const layerFamilies = layerIndex.familiesBySource.get(source);
+    if (!layerFamilies) {
+      return;
+    }
+    params.featureIndex = new FeatureIndex(tileID, promoteId);
+    const { name } = sourceLayer;
+    const features = new Array(sourceLayer.length);
+    for (let index = 0; index < sourceLayer.length; index++) {
+      const feature = sourceLayer.feature(index);
+      const id = params.featureIndex.getId(feature, name);
+      features[index] = { feature, id, index, sourceLayerIndex: 0 };
+    }
+
+    const result = await makeWorkerTile(params, features, layerFamilies.get(name), resources);
+
+    result.vectorTile = sourceLayer;
+    return result;
+  }
+
+  return {
+    loadData,
+    loadTile
+  };
+}

package/src/source/rtl_text_plugin.js

@@ -1,82 +1,145 @@
+import { Event, Evented } from '@mapwhit/events';
 import dynload from 'dynload';
 import browser from '../util/browser.js';
 
-let pluginRequested = false;
-let pluginURL;
-let loading = false;
+/**
+ * The possible option of the plugin's status
+ *
+ * `unavailable`: Not loaded.
+ *
+ * `deferred`: The plugin URL has been specified, but loading has been deferred.
+ *
+ * `loading`: request in-flight.
+ *
+ * `loaded`: The plugin is now loaded
+ *
+ *  `error`: The plugin failed to load
+ */
 
-let _completionCallback;
-const _loadedCallbacks = [];
-
-const rtlPlugin = {
-  clearRTLTextPlugin, // exported for testing
-  loadScript, // exported for testing
-  registerForPluginAvailability,
-  setRTLTextPlugin
-};
+function RTLPlugin() {
+  const self = {
+    isRTLSupported
+  };
 
-export function registerForPluginAvailability(callback) {
-  if (plugin.isLoaded()) {
-    callback();
-    return;
+  /**
+   * Checks whether the RTL language support is available.
+   * If `canChangeShortly` is false, it will only return true if the RTL language
+   * is properly supported.
+   * If `canChangeShortly` is true, it will also return true if the RTL language
+   * is not supported unless it can obtain the RTL text plugin.
+   * @param {boolean} canChangeShortly
+   * @returns
+   */
+  function isRTLSupported(canChangeShortly) {
+    if (rtlPluginLoader.getRTLTextPluginStatus() === 'loaded') {
+      return true;
+    }
+    if (!canChangeShortly) {
+      return false;
+    }
+    rtlPluginLoader.lazyLoad();
+    // any transitive state other than 'loading' means we can consider RTL supported as best as possible for now
+    return rtlPluginLoader.getRTLTextPluginStatus() !== 'loading';
   }
-  _loadedCallbacks.push(callback);
-  loadRTLTextPlugin();
-  return () => _loadedCallbacks.splice(_loadedCallbacks.indexOf(callback), 1);
-}
 
-export function clearRTLTextPlugin() {
-  _loadedCallbacks.length = 0;
-  pluginRequested = false;
-  pluginURL = undefined;
+  return self;
 }
 
-export function setRTLTextPlugin(url, callback) {
-  if (pluginRequested) {
-    throw new Error('setRTLTextPlugin cannot be called multiple times.');
+export const rtlPlugin = RTLPlugin();
+
+function RTLPluginLoader() {
+  let status = 'unavailable';
+  let url;
+
+  const self = {
+    getRTLTextPluginStatus,
+    setRTLTextPlugin,
+    lazyLoad,
+    _clearRTLTextPlugin,
+    _registerRTLTextPlugin
+  };
+
+  /** This one is exposed to outside */
+  function getRTLTextPluginStatus() {
+    return status;
+  }
+
+  // public for testing
+  function _clearRTLTextPlugin() {
+    url = undefined;
+    status = 'unavailable';
+    _setMethods();
   }
-  pluginRequested = true;
-  pluginURL = browser.resolveURL(url);
-  _completionCallback = error => {
-    if (error) {
-      const msg = `RTL Text Plugin failed to load scripts from ${pluginURL}`;
-      // Clear loaded state to allow retries
-      clearRTLTextPlugin();
-      if (callback) {
-        callback(new Error(msg));
+
+  function setRTLTextPlugin(pluginURL, deferred = false) {
+    if (url) {
+      // error
+      return Promise.reject(new Error('setRTLTextPlugin cannot be called multiple times.'));
+    }
+    url = browser.resolveURL(pluginURL);
+    if (!url) {
+      return Promise.reject(new Error(`requested url ${pluginURL} is invalid`));
+    }
+    if (status === 'requested') {
+      return _downloadRTLTextPlugin();
+    }
+    if (status === 'unavailable') {
+      // from initial state:
+      if (!deferred) {
+        return _downloadRTLTextPlugin();
       }
+      status = 'deferred';
     }
-    loading = false;
-    _completionCallback = undefined;
-  };
-  loadRTLTextPlugin();
-}
+  }
 
-function loadRTLTextPlugin() {
-  if (pluginURL && !plugin.isLoaded() && _loadedCallbacks.length > 0 && !loading) {
-    // needs to be called as exported method for mock testing
-    loading = rtlPlugin.loadScript(pluginURL).catch(_completionCallback);
+  async function _downloadRTLTextPlugin() {
+    status = 'loading';
+    try {
+      await rtlPluginLoader._loadScript({ url });
+    } catch {
+      status = 'error';
+    }
+    rtlPluginLoader.fire(new Event('RTLPluginLoaded'));
   }
-}
 
-function registerRTLTextPlugin(loadedPlugin) {
-  if (plugin.isLoaded()) {
-    throw new Error('RTL text plugin already registered.');
+  /** Start a lazy loading process of RTL plugin */
+  function lazyLoad() {
+    if (status === 'unavailable') {
+      status = 'requested';
+      return;
+    }
+    if (status === 'deferred') {
+      return _downloadRTLTextPlugin();
+    }
   }
-  plugin['applyArabicShaping'] = loadedPlugin.applyArabicShaping;
-  plugin['processBidirectionalText'] = loadedPlugin.processBidirectionalText;
-  plugin['processStyledBidirectionalText'] = loadedPlugin.processStyledBidirectionalText;
 
-  if (_completionCallback) {
-    _completionCallback();
+  function _setMethods(rtlTextPlugin) {
+    if (!rtlTextPlugin) {
+      // for testing only
+      rtlPlugin.processStyledBidirectionalText = null;
+      rtlPlugin.processBidirectionalText = null;
+      rtlPlugin.applyArabicShaping = null;
+      return;
+    }
+    rtlPlugin.applyArabicShaping = rtlTextPlugin.applyArabicShaping;
+    rtlPlugin.processBidirectionalText = rtlTextPlugin.processBidirectionalText;
+    rtlPlugin.processStyledBidirectionalText = rtlTextPlugin.processStyledBidirectionalText;
   }
-  _loadedCallbacks.forEach(callback => callback());
-  _loadedCallbacks.length = 0;
-}
 
-globalThis.registerRTLTextPlugin ??= registerRTLTextPlugin;
+  // This is invoked by the RTL text plugin when the download has finished, and the code has been parsed.
+  function _registerRTLTextPlugin(rtlTextPlugin) {
+    if (rtlPlugin.isRTLSupported()) {
+      throw new Error('RTL text plugin already registered.');
+    }
+    status = 'loaded';
+    _setMethods(rtlTextPlugin);
+  }
+
+  return self;
+}
 
-function loadScript(url) {
+// public for testing
+function _loadScript({ url }) {
   const { promise, resolve, reject } = Promise.withResolvers();
   const s = dynload(url);
   s.onload = () => resolve();
@@ -84,11 +147,15 @@ function loadScript(url) {
   return promise;
 }
 
-export const plugin = (rtlPlugin.plugin = {
-  applyArabicShaping: null,
-  processBidirectionalText: null,
-  processStyledBidirectionalText: null,
-  isLoaded: () => plugin.applyArabicShaping != null
-});
+const { getRTLTextPluginStatus, setRTLTextPlugin, lazyLoad, _clearRTLTextPlugin, _registerRTLTextPlugin } =
+  RTLPluginLoader();
+
+globalThis.registerRTLTextPlugin ??= _registerRTLTextPlugin;
 
-export default rtlPlugin;
+export const rtlPluginLoader = Object.assign(new Evented(), {
+  getRTLTextPluginStatus,
+  setRTLTextPlugin,
+  lazyLoad,
+  _clearRTLTextPlugin,
+  _loadScript
+});

package/src/source/source.js

@@ -25,6 +25,7 @@ import { bindAll } from '../util/object.js';
  */
 
 import geojson from './geojson_source.js';
+import geojsonTiler from './geojson_tiler.js';
 import image from './image_source.js';
 import rasterDem from './raster_dem_tile_source.js';
 import raster from './raster_tile_source.js';
@@ -38,6 +39,9 @@ const sourceTypes = {
   image
 };
 
+const tilerTypes = {
+  geojson: geojsonTiler
+};
 /*
  * Creates a tiled data source instance given an options object.
  *
@@ -48,11 +52,18 @@ const sourceTypes = {
  * @returns {Source}
  */
 export function create(id, specification, eventedParent, { resources, layerIndex, showTileBoundaries }) {
-  const source = new sourceTypes[specification.type](id, specification, eventedParent, {
-    resources,
-    layerIndex,
-    showTileBoundaries
-  });
+  const tiler = tilerTypes[specification.type]?.(resources, layerIndex);
+
+  const source = new sourceTypes[specification.type](
+    id,
+    specification,
+    eventedParent,
+    tiler ?? {
+      resources,
+      layerIndex,
+      showTileBoundaries
+    }
+  );
 
   bindAll(['load', 'abort', 'unload', 'serialize', 'prepare'], source);
   return source;

package/src/source/source_cache.js

@@ -799,27 +799,27 @@ class SourceCache extends Evented {
    * Set the value of a particular state for a feature
    * @private
    */
-  setFeatureState(sourceLayer, feature, state) {
+  setFeatureState(sourceLayer, featureId, state) {
     sourceLayer = sourceLayer || '_geojsonTileLayer';
-    this._state.updateState(sourceLayer, feature, state);
+    this._state.updateState(sourceLayer, featureId, state);
   }
 
   /**
    * Resets the value of a particular state key for a feature
    * @private
    */
-  removeFeatureState(sourceLayer, feature, key) {
+  removeFeatureState(sourceLayer, featureId, key) {
     sourceLayer = sourceLayer || '_geojsonTileLayer';
-    this._state.removeFeatureState(sourceLayer, feature, key);
+    this._state.removeFeatureState(sourceLayer, featureId, key);
   }
 
   /**
    * Get the entire state object for a feature
    * @private
    */
-  getFeatureState(sourceLayer, feature) {
+  getFeatureState(sourceLayer, featureId) {
     sourceLayer = sourceLayer || '_geojsonTileLayer';
-    return this._state.getState(sourceLayer, feature);
+    return this._state.getState(sourceLayer, featureId);
   }
 }
 

package/src/source/source_state.js

@@ -13,7 +13,8 @@ class SourceFeatureState {
   #stateChanges = {};
   #deletedStates = {};
 
-  updateState(sourceLayer, feature, newState) {
+  updateState(sourceLayer, featureId, newState) {
+    const feature = String(featureId);
     const changes = (this.#stateChanges[sourceLayer] ??= {});
     const featureState = (changes[feature] ??= {});
     Object.assign(featureState, newState);
@@ -76,7 +77,8 @@ class SourceFeatureState {
     }
   }
 
-  getState(sourceLayer, feature) {
+  getState(sourceLayer, featureId) {
+    const feature = String(featureId);
     const base = this.#state[sourceLayer];
     const changes = this.#stateChanges[sourceLayer];
     const reconciledState = Object.assign({}, base?.[feature], changes?.[feature]);

package/src/source/tile.js

@@ -191,11 +191,12 @@ class Tile {
   }
 
   querySourceFeatures(result, params) {
-    if (!this.latestFeatureIndex?.vectorTile) {
+    const featureIndex = this.latestFeatureIndex;
+    if (!featureIndex?.vectorTile) {
       return;
     }
 
-    const vtLayers = this.latestFeatureIndex.loadVTLayers();
+    const vtLayers = featureIndex.loadVTLayers();
 
     const sourceLayer = params ? params.sourceLayer : '';
     const layer = vtLayers._geojsonTileLayer || vtLayers[sourceLayer];
@@ -211,7 +212,8 @@ class Tile {
     for (let i = 0; i < layer.length; i++) {
       const feature = layer.feature(i);
       if (filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) {
-        const geojsonFeature = new GeoJSONFeature(feature, z, x, y);
+        const id = featureIndex.getId(feature, sourceLayer);
+        const geojsonFeature = new GeoJSONFeature(feature, z, x, y, id);
         geojsonFeature.tile = coord;
         result.push(geojsonFeature);
       }

package/src/source/vector_tile_source.js

@@ -22,6 +22,7 @@ class VectorTileSource extends Evented {
     this.url = options.url;
     this.scheme = options.scheme ?? 'xyz';
     this.tileSize = options.tileSize ?? 512;
+    this.promoteId = options.promoteId;
 
     if (this.tileSize !== 512) {
       throw new Error('vector tile sources must have a tileSize of 512');
@@ -93,6 +94,7 @@ class VectorTileSource extends Evented {
         source: this.id,
         pixelRatio: browser.devicePixelRatio,
         showCollisionBoxes: this.map.showCollisionBoxes,
+        promoteId: this.promoteId,
         painter: this.map.painter
       };
       tile.workerID ??= true;

package/src/source/worker_tile.js

@@ -27,7 +27,9 @@ async function makeWorkerTile(params, { layers }, layerIndex, resources) {
     const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
     const features = new Array(sourceLayer.length);
     for (let index = 0; index < sourceLayer.length; index++) {
-      features[index] = { feature: sourceLayer.feature(index), index, sourceLayerIndex };
+      const feature = sourceLayer.feature(index);
+      const id = options.featureIndex.getId(feature, sourceLayerId);
+      features[index] = { feature, id, index, sourceLayerIndex };
     }
 
     makeBucketsForSourceLayer(sourceLayerFamilies, sourceLayerIndex, features, params, options);
@@ -47,7 +49,7 @@ export async function makeSingleSourceLayerWorkerTile(params, features, sourceLa
 function initializeBucketsOptions(params) {
   const tileID = createTileID(params);
 
-  const featureIndex = new FeatureIndex(tileID);
+  const featureIndex = params.featureIndex ?? new FeatureIndex(tileID, params.promoteId);
   featureIndex.bucketLayerIDs = [];
 
   return {
@@ -146,6 +148,8 @@ async function finalizeBuckets(params, options, resources) {
 }
 
 async function makeAtlasses({ glyphDependencies, patternDependencies, iconDependencies }, resources) {
+  // options.glyphDependencies looks like: {"SomeFontName":{"10":true,"32":true}}
+  // this line makes an object like: {"SomeFontName":[10,32]}
   const stacks = mapObject(glyphDependencies, glyphs => Object.keys(glyphs).map(Number));
   const icons = Object.keys(iconDependencies);
   const patterns = Object.keys(patternDependencies);

package/src/style/evaluation_parameters.js

@@ -1,4 +1,4 @@
-import { plugin as rtlTextPlugin } from '../source/rtl_text_plugin.js';
+import { rtlPlugin } from '../source/rtl_text_plugin.js';
 import { isStringInSupportedScript } from '../util/script_detection.js';
 import ZoomHistory from './zoom_history.js';
 
@@ -20,7 +20,6 @@ export default class EvaluationParameters {
       this.transition = {};
     }
   }
-
   crossFadingFactor() {
     if (this.fadeDuration === 0) {
       return 1;
@@ -40,5 +39,5 @@ export default class EvaluationParameters {
 }
 
 function isSupportedScript(str) {
-  return isStringInSupportedScript(str, rtlTextPlugin.isLoaded());
+  return isStringInSupportedScript(str, rtlPlugin.isRTLSupported());
 }

package/src/style/pauseable_placement.js

@@ -2,27 +2,59 @@ import { Placement } from '../symbol/placement.js';
 import browser from '../util/browser.js';
 
 class LayerPlacement {
-  constructor() {
+  constructor(styleLayer) {
+    this._sortAcrossTiles =
+      styleLayer._layout.get('symbol-z-order') !== 'viewport-y' &&
+      styleLayer._layout.get('symbol-sort-key').constantOr(1) !== undefined;
+
     this._currentTileIndex = 0;
+    this._currentPartIndex = 0;
     this._seenCrossTileIDs = {};
+    this._bucketParts = [];
   }
 
   continuePlacement(tiles, placement, showCollisionBoxes, styleLayer, shouldPausePlacement) {
+    const bucketParts = this._bucketParts;
+
     while (this._currentTileIndex < tiles.length) {
       const tile = tiles[this._currentTileIndex];
-      placement.placeLayerTile(styleLayer, tile, showCollisionBoxes, this._seenCrossTileIDs);
+      placement.getBucketParts(bucketParts, styleLayer, tile, this._sortAcrossTiles);
 
       this._currentTileIndex++;
       if (shouldPausePlacement()) {
         return true;
       }
     }
+
+    if (this._sortAcrossTiles) {
+      this._sortAcrossTiles = false;
+      bucketParts.sort((a, b) => a.sortKey - b.sortKey);
+    }
+
+    while (this._currentPartIndex < bucketParts.length) {
+      const bucketPart = bucketParts[this._currentPartIndex];
+      placement.placeLayerBucketPart(bucketPart, this._seenCrossTileIDs, showCollisionBoxes);
+
+      this._currentPartIndex++;
+      if (shouldPausePlacement()) {
+        return true;
+      }
+    }
+    return false;
   }
 }
 
 class PauseablePlacement {
-  constructor(transform, maxIndex, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions) {
-    this.placement = new Placement(transform, fadeDuration, crossSourceCollisions);
+  constructor(
+    transform,
+    maxIndex,
+    forceFullPlacement,
+    showCollisionBoxes,
+    fadeDuration,
+    crossSourceCollisions,
+    prevPlacement
+  ) {
+    this.placement = new Placement(transform, fadeDuration, crossSourceCollisions, prevPlacement);
     this._currentPlacementIndex = maxIndex;
     this._forceFullPlacement = forceFullPlacement;
     this._showCollisionBoxes = showCollisionBoxes;
@@ -50,7 +82,7 @@ class PauseablePlacement {
         (!layer.maxzoom || layer.maxzoom > placementZoom)
       ) {
         if (!this._inProgressLayer) {
-          this._inProgressLayer = new LayerPlacement();
+          this._inProgressLayer = new LayerPlacement(layer);
         }
 
         const pausePlacement = this._inProgressLayer.continuePlacement(
@@ -77,8 +109,8 @@ class PauseablePlacement {
     this._done = true;
   }
 
-  commit(previousPlacement, now) {
-    this.placement.commit(previousPlacement, now);
+  commit(now) {
+    this.placement.commit(now);
     return this.placement;
   }
 }