mapbox · arindam1993 · Oct 24, 2019 · Oct 12, 2019 · Oct 12, 2019 · Oct 15, 2019
diff --git a/debug/rtl-plugin-autoload.html b/debug/rtl-plugin-autoload.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='../dist/mapbox-gl-dev.js'></script>
+<script src='../debug/access_token_generated.js'></script>
+<script>
+mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js', null, true);
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/streets-v10',
+    hash: true
+});
+
+</script>
+</body>
+</html>
diff --git a/src/data/bucket/symbol_bucket.js b/src/data/bucket/symbol_bucket.js
@@ -37,6 +37,7 @@ import {register} from '../../util/web_worker_transfer';
 import EvaluationParameters from '../../style/evaluation_parameters';
 import Formatted from '../../style-spec/expression/types/formatted';
 import ResolvedImage from '../../style-spec/expression/types/resolved_image';
+import {plugin as globalRTLTextPlugin} from '../../source/rtl_text_plugin';
 
 import type {
     Bucket,
@@ -303,6 +304,7 @@ class SymbolBucket implements Bucket {
     writingModes: Array<number>;
     allowVerticalPlacement: boolean;
     hasPaintOverrides: boolean;
+    hasRTLText: boolean;
 
     constructor(options: BucketParameters<SymbolStyleLayer>) {
         this.collisionBoxArray = options.collisionBoxArray;
@@ -315,6 +317,7 @@ class SymbolBucket implements Bucket {
         this.sourceLayerIndex = options.sourceLayerIndex;
         this.hasPattern = false;
         this.hasPaintOverrides = false;
+        this.hasRTLText = false;
 
         const layer = this.layers[0];
         const unevaluatedLayoutValues = layer._unevaluatedLayout._values;
@@ -407,10 +410,18 @@ class SymbolBucket implements Bucket {
                 // but plain string token evaluation skips that pathway so do the
                 // conversion here.
                 const resolvedTokens = layer.getValueAndResolveTokens('text-field', feature, availableImages);
-                text = transformText(resolvedTokens instanceof Formatted ?
-                    resolvedTokens :
-                    Formatted.fromString(resolvedTokens),
-                    layer, feature);
+                const formattedText = Formatted.factory(resolvedTokens);
+                if (formattedText.containsRTLText()) {
+                    this.hasRTLText = true;
+                }
+
+                if (
+                    this.hasRTLText && globalRTLTextPlugin.isLoaded() || // Use the rtlText plugin shape text
+                    !this.hasRTLText || // non-rtl terxt so can proceed safely
+                    !globalRTLTextPlugin.isAvailableInWorker() // We-doent intend to async-load the rtl text plugin, so proceed with incorrect shaping
+                ) {
+                    text = transformText(formattedText, layer, feature);
+                }
             }
 
             let icon: ResolvedImage | void;

diff --git a/src/source/rtl_text_plugin.js b/src/source/rtl_text_plugin.js
@@ -1,50 +1,73 @@
 // @flow
 
 import {Event, Evented} from '../util/evented';
+import {getArrayBuffer} from '../util/ajax';
 import browser from '../util/browser';
+import window from '../util/window';
 
 const status = {
-    unavailable: 'unavailable',
-    loading: 'loading',
+    unavailable: 'unavailable', // Not loaded
+    available: 'available', // Host url specified, but we havent started loading yet
+    loading: 'loading', // request in-flight
+    downloaded: 'downloaded', //plugin loaded and cached on main-thread and pluginBlobURL for worker is generated
     loaded: 'loaded',
     error: 'error'
 };
 let pluginStatus = status.unavailable;
 let pluginURL = null;
+let pluginBlobURL = null;
+let lazy = null;
+
+// store `pluginAvailable` that have occurred before the `registerPluginAvailability` bind
+// so we can flush all the state updates to the workers
+let eventQueue = [];
+let _pluginAvailableCb = null;
+
+let _workerAvailable = false;
 
 export const evented = new Evented();
+evented.on('pluginAvailable', (args) => {
+    if (!_pluginAvailableCb) {
+        eventQueue.push(args);
+    } else {
+        _pluginAvailableCb(args);
+    }
+});
 
 type CompletionCallback = (error?: Error) => void;
 type ErrorCallback = (error: Error) => void;
+type PluginAvailableCallback = (args: {pluginURL: ?string, lazy: ?boolean, completionCallback: CompletionCallback}) => void;
 
 let _completionCallback;
 
 export const getRTLTextPluginStatus = function () {
     return pluginStatus;
 };
 
-export const registerForPluginAvailability = function(
-    callback: (args: {pluginURL: string, completionCallback: CompletionCallback}) => void
-) {
-    if (pluginURL) {
-        callback({pluginURL, completionCallback: _completionCallback});
-    } else {
-        evented.once('pluginAvailable', callback);
+export const registerForPluginAvailability = function(callback: PluginAvailableCallback) {
+    for (const event of eventQueue) {
+        callback(event);
     }
+    eventQueue = [];
+
+    _pluginAvailableCb = callback;
     return callback;
 };
 
 export const clearRTLTextPlugin = function() {
     pluginStatus = status.unavailable;
     pluginURL = null;
+    pluginBlobURL = null;
+    lazy = null;
 };
 
-export const setRTLTextPlugin = function(url: string, callback: ErrorCallback) {
-    if (pluginStatus === status.loading || pluginStatus === status.loaded) {
+export const setRTLTextPlugin = function(url: string, callback: ?ErrorCallback, lazyLoad: ?boolean) {
+    if (pluginStatus === status.available || pluginStatus === status.loading || pluginStatus === status.loaded) {
         throw new Error('setRTLTextPlugin cannot be called multiple times.');
     }
-    pluginStatus = status.loading;
     pluginURL = browser.resolveURL(url);
+    lazy = !!lazyLoad;
+    pluginStatus = status.available;
     _completionCallback = (error?: Error) => {
         if (error) {
             // Clear loaded state to allow retries
@@ -55,23 +78,73 @@ export const setRTLTextPlugin = function(url: string, callback: ErrorCallback) {
             }
         } else {
             // Called once for each worker
-            pluginStatus = status.loaded;
+            if (!lazy) {
+                pluginStatus = status.loaded;
+            }
         }
     };
-    evented.fire(new Event('pluginAvailable', {pluginURL, completionCallback: _completionCallback}));
+
+    if (lazy) {
+        // Inform the worker-threads that we intend to load the plugin lazily later,
+        // This is so the workers can skip RTL text parsing.
+        evented.fire(new Event('pluginAvailable', {
+            pluginURL: null,
+            lazy,
+            completionCallback: _completionCallback
+        }));
+    } else {
+        downloadRTLTextPlugin();
+    }
+};
+
+export const downloadRTLTextPlugin = function() {
+    if (pluginStatus !== status.available) {
+        throw new Error('rtl-text-plugin cannot be downloaded unless a pluginURL is specified');
+    }
+    pluginStatus = status.loading;
+
+    if (pluginURL) {
+        getArrayBuffer({url: pluginURL}, (error, data) => {
+            if (error || !data) {
+                throw error;
+            } else {
+                const rtlBlob = new window.Blob([data], {type: 'application/javascript'});
+                const URL = window.URL || window.webkitURL;
+                pluginBlobURL = URL.createObjectURL(rtlBlob);
+                pluginStatus = status.downloaded;
+                evented.fire(new Event('pluginAvailable', {
+                    pluginURL: pluginBlobURL,
+                    lazy,
+                    completionCallback: _completionCallback
+                }));
+            }
+        });
+    }
 };
 
 export const plugin: {
     applyArabicShaping: ?Function,
     processBidirectionalText: ?(string, Array<number>) => Array<string>,
     processStyledBidirectionalText: ?(string, Array<number>, Array<number>) => Array<[string, Array<number>]>,
-    isLoaded: () => boolean
+    isLoaded: () => boolean,
+    isLoading: () => boolean,
+    markWorkerAvailable: () => void,
+    isAvailableInWorker: () => boolean
 } = {
     applyArabicShaping: null,
     processBidirectionalText: null,
     processStyledBidirectionalText: null,
     isLoaded() {
-        return pluginStatus === status.loaded ||       // Foreground: loaded if the completion callback returned successfully
-            plugin.applyArabicShaping != null; // Background: loaded if the plugin functions have been compiled
+        return pluginStatus === status.loaded || // Main Thread: loaded if the completion callback returned successfully
+            plugin.applyArabicShaping != null; // Web-worker: loaded if the plugin functions have been compiled
+    },
+    isLoading() { // Main Thread Only: query the loading status, this function does not return the correct value in the worker context.
+        return pluginStatus === status.loading;
+    },
+    markWorkerAvailable() { // Worker thread only: this tells the worker threads that the plugin is available on the Main thread
+        _workerAvailable = true;
+    },
+    isAvailableInWorker() {
+        return !!_workerAvailable;
     }
 };
diff --git a/src/source/tile.js b/src/source/tile.js
@@ -96,6 +96,7 @@ class Tile {
 
     symbolFadeHoldUntil: ?number;
     hasSymbolBuckets: boolean;
+    hasRTLText: boolean;
 
     /**
      * @param {OverscaledTileID} tileID
@@ -110,6 +111,7 @@ class Tile {
         this.expirationTime = null;
         this.queryPadding = 0;
         this.hasSymbolBuckets = false;
+        this.hasRTLText = false;
 
         // Counts the number of times a response was already expired when
         // received. We're using this to add a delay when making a new request
@@ -184,6 +186,19 @@ class Tile {
             }
         }
 
+        this.hasRTLText = false;
+        if (this.hasSymbolBuckets) {
+            for (const id in this.buckets) {
+                const bucket = this.buckets[id];
+                if (bucket instanceof SymbolBucket) {
+                    if (bucket.hasRTLText) {
+                        this.hasRTLText = true;
+                        break;
+                    }
+                }
+            }
+        }
+
         this.queryPadding = 0;
         for (const id in this.buckets) {
             const bucket = this.buckets[id];

diff --git a/src/source/vector_tile_source.js b/src/source/vector_tile_source.js
@@ -9,6 +9,7 @@ import TileBounds from './tile_bounds';
 import {ResourceType} from '../util/ajax';
 import browser from '../util/browser';
 import {cacheEntryPossiblyAdded} from '../util/tile_request_cache';
+import {plugin as rtlTextPlugin, getRTLTextPluginStatus, downloadRTLTextPlugin} from './rtl_text_plugin';
 
 import type {Source} from './source';
 import type {OverscaledTileID} from './tile_id';
@@ -153,6 +154,15 @@ class VectorTileSource extends Evented implements Source {
 
             if (this.map._refreshExpiredTiles && data) tile.setExpiryData(data);
             tile.loadVectorData(data, this.map.painter);
+            if (tile.hasRTLText) {
+                const plugin = rtlTextPlugin;
+                if (!plugin.isLoading() &&
+                    !plugin.isLoaded() &&
+                    getRTLTextPluginStatus() === 'available'
+                ) {
+                    downloadRTLTextPlugin();
+                }
+            }
 
             cacheEntryPossiblyAdded(this.dispatcher);
 

diff --git a/src/source/worker.js b/src/source/worker.js
@@ -59,6 +59,7 @@ export default class Worker {
             this.workerSourceTypes[name] = WorkerSource;
         };
 
+        // This is invoked by the RTL text plugin when the download via the `importScripts` call has finished, and the code has been parsed.
         this.self.registerRTLTextPlugin = (rtlTextPlugin: {applyArabicShaping: Function, processBidirectionalText: Function, processStyledBidirectionalText?: Function}) => {
             if (globalRTLTextPlugin.isLoaded()) {
                 throw new Error('RTL text plugin already registered.');
@@ -151,13 +152,19 @@ export default class Worker {
         }
     }
 
-    loadRTLTextPlugin(map: string, pluginURL: string, callback: Callback<void>) {
+    loadRTLTextPlugin(map: string, pluginData: Object, callback: Callback<void>) {
         try {
-            if (!globalRTLTextPlugin.isLoaded()) {
-                this.self.importScripts(pluginURL);
-                callback(globalRTLTextPlugin.isLoaded() ?
-                    null :
-                    new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`));
+            const {pluginURL, lazy} = pluginData;
+            if (pluginURL) {
+                if (!globalRTLTextPlugin.isLoaded()) {
+                    this.self.importScripts(pluginURL);
+                    callback(globalRTLTextPlugin.isLoaded() ?
+                        null :
+                        new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`));
+                }
+            } else if (lazy) {
+                // Set the state of the rtl text plugin in worker scope, to load the plugin if necessary.
+                globalRTLTextPlugin.markWorkerAvailable();
             }
         } catch (e) {
             callback(e.toString());

diff --git a/src/style-spec/expression/types/formatted.js b/src/style-spec/expression/types/formatted.js
@@ -1,5 +1,6 @@
 // @flow
 
+import {stringContainsRTLText} from "../../../util/script_detection";
 import type Color from '../../util/color';
 
 export class FormattedSection {
@@ -27,10 +28,27 @@ export default class Formatted {
         return new Formatted([new FormattedSection(unformatted, null, null, null)]);
     }
 
+    static factory(text: Formatted | string): Formatted {
+        if (text instanceof Formatted) {
+            return text;
+        } else {
+            return Formatted.fromString(text);
+        }
+    }
+
     toString(): string {
         return this.sections.map(section => section.text).join('');
     }
 
+    containsRTLText(): boolean {
+        for (const section of this.sections) {
+            if (stringContainsRTLText(section.text)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     serialize(): Array<mixed> {
         const serialized = ["format"];
         for (const section of this.sections) {

diff --git a/src/style/style.js b/src/style/style.js
@@ -154,9 +154,11 @@ class Style extends Evented {
 
         const self = this;
         this._rtlTextPluginCallback = Style.registerForPluginAvailability((args) => {
-            self.dispatcher.broadcast('loadRTLTextPlugin', args.pluginURL, args.completionCallback);
-            for (const id in self.sourceCaches) {
-                self.sourceCaches[id].reload(); // Should be a no-op if the plugin loads before any tiles load
+            self.dispatcher.broadcast('loadRTLTextPlugin', {pluginURL: args.pluginURL, lazy: args.lazy}, args.completionCallback);
+            if (args.pluginURL) {
+                for (const id in self.sourceCaches) {
+                    self.sourceCaches[id].reload(); // Should be a no-op if the plugin loads before any tiles load
+                }
             }
         });