@mapwhit/tilerenderer 1.4.0 → 1.5.0

package/build/min/package.json

@@ -1,4 +1,4 @@
 {
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "exports": {
     ".": "./src/index.js",

package/src/data/bucket/symbol_bucket.js

@@ -1,11 +1,12 @@
 import { dist } from '@mapwhit/point-geometry';
 import { Formatted } from '@mapwhit/style-expressions';
 import { VectorTileFeature } from '@mapwhit/vector-tile';
+import { rtlPlugin } from '../../source/rtl_text_plugin.js';
 import EvaluationParameters from '../../style/evaluation_parameters.js';
 import mergeLines from '../../symbol/mergelines.js';
 import { getSizeData } from '../../symbol/symbol_size.js';
 import transformText from '../../symbol/transform_text.js';
-import { allowsVerticalWritingMode } from '../../util/script_detection.js';
+import { allowsVerticalWritingMode, stringContainsRTLText } from '../../util/script_detection.js';
 import { verticalizedCharacterMap } from '../../util/verticalize_punctuation.js';
 import {
   CollisionBoxLayoutArray,
@@ -44,6 +45,15 @@ export function addDynamicAttributes(dynamicLayoutVertexArray, p, angle) {
   dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angle);
 }
 
+function containsRTLText(formattedText) {
+  for (const section of formattedText.sections) {
+    if (stringContainsRTLText(section.text)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Unlike other buckets, which simply implement #addFeature with type-specific
  * logic for (essentially) triangulating feature geometries, SymbolBucket
@@ -86,6 +96,7 @@ export default class SymbolBucket {
     this.pixelRatio = options.pixelRatio;
     this.sourceLayerIndex = options.sourceLayerIndex;
     this.hasPattern = false;
+    this.hasRTLText = false;
     this.sortKeyRanges = [];
 
     const layer = this.layers[0];
@@ -169,11 +180,16 @@ export default class SymbolBucket {
         // but plain string token evaluation skips that pathway so do the
         // conversion here.
         const resolvedTokens = layer.getValueAndResolveTokens('text-field', feature);
-        text = transformText(
-          resolvedTokens instanceof Formatted ? resolvedTokens : Formatted.fromString(resolvedTokens),
-          layer,
-          feature
-        );
+        const formattedText =
+          resolvedTokens instanceof Formatted ? resolvedTokens : Formatted.fromString(resolvedTokens);
+        // on this instance: if hasRTLText is already true, all future calls to containsRTLText can be skipped.
+        const bucketHasRTLText = (this.hasRTLText = this.hasRTLText || containsRTLText(formattedText));
+        if (
+          !bucketHasRTLText || // non-rtl text so can proceed safely
+          rtlPlugin.isRTLSupported(true) // Use the rtlText plugin to shape text if available or We don't intend to lazy-load the rtl text plugin, so proceed with incorrect shaping
+        ) {
+          text = transformText(formattedText, layer, feature);
+        }
       }
 
       let icon;
@@ -244,7 +260,9 @@ export default class SymbolBucket {
   }
 
   isEmpty() {
-    return this.symbolInstances.length === 0;
+    // When the bucket encounters only rtl-text but the plugin isnt loaded, no symbol instances will be created.
+    // In order for the bucket to be serialized, and not discarded as an empty bucket both checks are necessary.
+    return this.symbolInstances.length === 0 && !this.hasRTLText;
   }
 
   uploadPending() {

package/src/index.js

@@ -5,20 +5,21 @@ import { Point } from '@mapwhit/point-geometry';
 import packageJSON from '../package.json' with { type: 'json' };
 import { default as LngLat } from './geo/lng_lat.js';
 import { default as LngLatBounds } from './geo/lng_lat_bounds.js';
-import { setRTLTextPlugin } from './source/rtl_text_plugin.js';
+import { rtlPluginLoader } from './source/rtl_text_plugin.js';
 import { default as Style } from './style/style.js';
 import { default as Map } from './ui/map.js';
 import config from './util/config.js';
 
 const { version } = packageJSON;
 
-export { version, config, setRTLTextPlugin, Point, LngLat, LngLatBounds, Style, Map, Evented };
+export { version, config, setRTLTextPlugin, getRTLTextPluginStatus, Point, LngLat, LngLatBounds, Style, Map, Evented };
 
 // for commonjs backward compatibility
 const mapwhit = {
   version,
   config,
   setRTLTextPlugin,
+  getRTLTextPluginStatus,
   Point,
   LngLat,
   LngLatBounds,
@@ -27,24 +28,7 @@ const mapwhit = {
   Evented
 };
 
-const properties = {
-  workerCount: {
-    get() {
-      return config.WORKER_COUNT;
-    },
-    set(count) {
-      config.WORKER_COUNT = count;
-    }
-  },
-  workerUrl: {
-    get() {
-      return config.WORKER_URL;
-    },
-    set(url) {
-      config.WORKER_URL = url;
-    }
-  }
-};
+const properties = {};
 
 Object.defineProperties(mapwhit, properties);
 Object.defineProperties(config, properties);
@@ -64,11 +48,27 @@ export default mapwhit;
  *
  * @function setRTLTextPlugin
  * @param {string} pluginURL URL pointing to the Mapbox RTL text plugin source.
- * @param {Function} callback Called with an error argument if there is an error.
+ * @param {boolean} lazy If set to `true`, mapboxgl will defer loading the plugin until rtl text is encountered,
+ *    rtl text will then be rendered only after the plugin finishes loading.
+ * @example
+ * setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js', false);
+ * @see [Add support for right-to-left scripts](https://maplibre.org/maplibre-gl-js/docs/examples/mapbox-gl-rtl-text/)
+ */
+function setRTLTextPlugin(pluginURL, lazy) {
+  return rtlPluginLoader.setRTLTextPlugin(pluginURL, lazy);
+}
+/**
+ * Gets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text) status.
+ * The status can be `unavailable` (i.e. not requested or removed), `loading`, `loaded` or `error`.
+ * If the status is `loaded` and the plugin is requested again, an error will be thrown.
+ *
+ * @function getRTLTextPluginStatus
  * @example
- * mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
- * @see [Add support for right-to-left scripts](https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/)
+ * const pluginStatus = getRTLTextPluginStatus();
  */
+function getRTLTextPluginStatus() {
+  return rtlPluginLoader.getRTLTextPluginStatus();
+}
 
 // canary assert: used to confirm that asserts have been removed from production build
 import assert from 'assert';

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

@@ -148,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/style.js

@@ -5,7 +5,7 @@ import ImageManager from '../render/image_manager.js';
 import LineAtlas from '../render/line_atlas.js';
 import { queryRenderedFeatures, queryRenderedSymbols, querySourceFeatures } from '../source/query_features.js';
 import { resources } from '../source/resources/index.js';
-import plugin from '../source/rtl_text_plugin.js';
+import { rtlPluginLoader } from '../source/rtl_text_plugin.js';
 import { getType as getSourceType, setType as setSourceType } from '../source/source.js';
 import SourceCache from '../source/source_cache.js';
 import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index.js';
@@ -42,6 +42,7 @@ class Style extends Evented {
   });
   #layerIndex = new StyleLayerIndex();
   #opsQueue = [];
+  #rtlPluginLoadedHandler;
 
   constructor(map, options = {}) {
     super();
@@ -63,9 +64,8 @@ class Style extends Evented {
     this._updatedLayers = new Map();
     this._removedLayers = new Map();
     this._resetUpdates();
-
-    this._rtlTextPluginCallbackUnregister = plugin.registerForPluginAvailability(this._reloadSources.bind(this));
-
+    this.#rtlPluginLoadedHandler = this.#rtlPluginLoaded.bind(this);
+    rtlPluginLoader.on('RTLPluginLoaded', this.#rtlPluginLoadedHandler);
     this.on('data', event => {
       if (event.dataType !== 'source' || event.sourceDataType !== 'metadata') {
         return;
@@ -89,6 +89,18 @@ class Style extends Evented {
     });
   }
 
+  #rtlPluginLoaded() {
+    for (const sourceCache of Object.values(this._sources)) {
+      const { type } = sourceCache.getSource();
+      if (type === 'vector' || type === 'geojson') {
+        // Non-vector sources don't have any symbols buckets to reload when the RTL text plugin loads
+        // They also load more quickly, so they're more likely to have already displaying tiles
+        // that would be unnecessarily booted by the plugin load event
+        sourceCache.reload(); // Should be a no-op if the plugin loads before any tiles load
+      }
+    }
+  }
+
   setGlobalStateProperty(name, value) {
     if (!this._loaded) {
       this.#opsQueue.push(() => this.setGlobalStateProperty(name, value));
@@ -1043,7 +1055,7 @@ class Style extends Evented {
   }
 
   _remove() {
-    this._rtlTextPluginCallbackUnregister?.();
+    rtlPluginLoader.off('RTLPluginLoaded', this.#rtlPluginLoadedHandler);
     for (const id in this._sources) {
       this._sources[id].clearTiles();
     }
@@ -1064,12 +1076,6 @@ class Style extends Evented {
     }
   }
 
-  _reloadSources() {
-    for (const sourceCache of Object.values(this._sources)) {
-      sourceCache.reload(); // Should be a no-op if called before any tiles load
-    }
-  }
-
   _generateCollisionBoxes() {
     for (const id in this._sources) {
       this._reloadSource(id);

package/src/symbol/shaping.js

@@ -1,4 +1,4 @@
-import { plugin as rtlTextPlugin } from '../source/rtl_text_plugin.js';
+import { rtlPlugin } from '../source/rtl_text_plugin.js';
 import { charAllowsIdeographicBreaking, charHasUprightVerticalOrientation } from '../util/script_detection.js';
 import verticalizePunctuation from '../util/verticalize_punctuation.js';
 import ONE_EM from './one_em.js';
@@ -112,7 +112,7 @@ export function shapeText(
 
   let lines;
 
-  const { processBidirectionalText, processStyledBidirectionalText } = rtlTextPlugin;
+  const { processBidirectionalText, processStyledBidirectionalText } = rtlPlugin;
   if (processBidirectionalText && logicalInput.sections.length === 1) {
     // Bidi doesn't have to be style-aware
     lines = [];

package/src/symbol/transform_text.js

@@ -1,4 +1,4 @@
-import { plugin as rtlTextPlugin } from '../source/rtl_text_plugin.js';
+import { rtlPlugin } from '../source/rtl_text_plugin.js';
 
 function transformText(text, layer, feature) {
   const transform = layer._layout.get('text-transform').evaluate(feature, {});
@@ -7,9 +7,8 @@ function transformText(text, layer, feature) {
   } else if (transform === 'lowercase') {
     text = text.toLocaleLowerCase();
   }
-
-  if (rtlTextPlugin.applyArabicShaping) {
-    text = rtlTextPlugin.applyArabicShaping(text);
+  if (rtlPlugin.applyArabicShaping) {
+    text = rtlPlugin.applyArabicShaping(text);
   }
 
   return text;

package/src/util/config.js

@@ -1,9 +1,4 @@
 import { Evented } from '@mapwhit/events';
-import browser from './browser.js';
-
-function getDefaultWorkerCount() {
-  return Math.max(Math.floor(browser.hardwareConcurrency / 2), 1);
-}
 
 const config = new Evented();
 
@@ -18,7 +13,4 @@ config.notify = function () {
   config.fire('change', config);
 };
 
-config.set({
-  WORKER_COUNT: getDefaultWorkerCount(),
-  WORKER_URL: ''
-});
+config.set({});

package/src/util/script_detection.js

@@ -415,6 +415,15 @@ export function charHasRotatedVerticalOrientation(char) {
   return !(charHasUprightVerticalOrientation(char) || charHasNeutralVerticalOrientation(char));
 }
 
+export function charInRTLScript(char) {
+  // Main blocks for Hebrew, Arabic, Thaana and other RTL scripts
+  return (
+    (char >= 0x0590 && char <= 0x08ff) ||
+    isChar['Arabic Presentation Forms-A'](char) ||
+    isChar['Arabic Presentation Forms-B'](char)
+  );
+}
+
 export function charInSupportedScript(char, canRenderRTL) {
   // This is a rough heuristic: whether we "can render" a script
   // actually depends on the properties of the font being used
@@ -423,13 +432,7 @@ export function charInSupportedScript(char, canRenderRTL) {
 
   // Even in Latin script, we "can't render" combinations such as the fi
   // ligature, but we don't consider that semantically significant.
-  if (
-    !canRenderRTL &&
-    ((char >= 0x0590 && char <= 0x08ff) ||
-      isChar['Arabic Presentation Forms-A'](char) ||
-      isChar['Arabic Presentation Forms-B'](char))
-  ) {
-    // Main blocks for Hebrew, Arabic, Thaana and other RTL scripts
+  if (!canRenderRTL && charInRTLScript(char)) {
     return false;
   }
   if (
@@ -448,6 +451,15 @@ export function charInSupportedScript(char, canRenderRTL) {
   return true;
 }
 
+export function stringContainsRTLText(chars) {
+  for (const char of chars) {
+    if (charInRTLScript(char.charCodeAt(0))) {
+      return true;
+    }
+  }
+  return false;
+}
+
 export function isStringInSupportedScript(chars, canRenderRTL) {
   for (const char of chars) {
     if (!charInSupportedScript(char.charCodeAt(0), canRenderRTL)) {