@mapwhit/tilerenderer 0.47.2 → 0.48.0

package/build/min/package.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.47.1"
+  "version": "0.47.2"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.47.2",
+  "version": "0.48.0",
   "main": "src/index.js",
   "license": "BSD-3-Clause",
   "repository": {

package/src/data/bucket/symbol_bucket.js

@@ -31,6 +31,7 @@ const { verticalizedCharacterMap } = require('../../util/verticalize_punctuation
 const { getSizeData } = require('../../symbol/symbol_size');
 const { register } = require('../../util/transfer_registry');
 const EvaluationParameters = require('../../style/evaluation_parameters');
+const { Formatted } = require('../../style-spec/expression/definitions/formatted');
 
 // Opacity arrays are frequently updated but don't contain a lot of information, so we pack them
 // tight. Each Uint32 is actually four duplicate Uint8s for the four corners of a glyph
@@ -221,6 +222,18 @@ class SymbolBucket {
     this.lineVertexArray = new SymbolLineVertexArray();
   }
 
+  calculateGlyphDependencies(text, stack, textAlongLine, doesAllowVerticalWritingMode) {
+    for (let i = 0; i < text.length; i++) {
+      stack[text.charCodeAt(i)] = true;
+      if (textAlongLine && doesAllowVerticalWritingMode) {
+        const verticalChar = verticalizedCharacterMap[text.charAt(i)];
+        if (verticalChar) {
+          stack[verticalChar.charCodeAt(0)] = true;
+        }
+      }
+    }
+  }
+
   populate(features, options) {
     const layer = this.layers[0];
     const layout = layer.layout;
@@ -229,7 +242,7 @@ class SymbolBucket {
     const textField = layout.get('text-field');
     const iconImage = layout.get('icon-image');
     const hasText =
-      (textField.value.kind !== 'constant' || textField.value.value.length > 0) &&
+      (textField.value.kind !== 'constant' || textField.value.value.toString().length > 0) &&
       (textFont.value.kind !== 'constant' || textFont.value.value.length > 0);
     const hasIcon = iconImage.value.kind !== 'constant' || (iconImage.value.value && iconImage.value.value.length > 0);
 
@@ -286,15 +299,16 @@ class SymbolBucket {
         const stack = (stacks[fontStack] = stacks[fontStack] || {});
         const textAlongLine =
           layout.get('text-rotation-alignment') === 'map' && layout.get('symbol-placement') !== 'point';
-        const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text);
-        for (let i = 0; i < text.length; i++) {
-          stack[text.charCodeAt(i)] = true;
-          if (textAlongLine && doesAllowVerticalWritingMode) {
-            const verticalChar = verticalizedCharacterMap[text.charAt(i)];
-            if (verticalChar) {
-              stack[verticalChar.charCodeAt(0)] = true;
-            }
+        if (text instanceof Formatted) {
+          for (const section of text.sections) {
+            const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text.toString());
+            const sectionFont = section.fontStack || fontStack;
+            const sectionStack = (stacks[sectionFont] = stacks[sectionFont] || {});
+            this.calculateGlyphDependencies(section.text, sectionStack, textAlongLine, doesAllowVerticalWritingMode);
           }
+        } else {
+          const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text);
+          this.calculateGlyphDependencies(text, stack, textAlongLine, doesAllowVerticalWritingMode);
         }
       }
     }
@@ -642,8 +656,8 @@ class SymbolBucket {
     symbolInstanceIndexes.sort((aIndex, bIndex) => {
       const a = this.symbolInstances[aIndex];
       const b = this.symbolInstances[bIndex];
-      const aRotated = (sin * a.anchor.x + cos * a.anchor.y) | 0;
-      const bRotated = (sin * b.anchor.x + cos * b.anchor.y) | 0;
+      const aRotated = Math.round(sin * a.anchor.x + cos * a.anchor.y) | 0;
+      const bRotated = Math.round(sin * b.anchor.x + cos * b.anchor.y) | 0;
       return aRotated - bRotated || b.featureIndex - a.featureIndex;
     });
 

package/src/data/program_configuration.js

@@ -170,11 +170,15 @@ class SourceExpressionBinder {
 
   upload(context) {
     if (this.paintVertexArray?.arrayBuffer) {
-      this.paintVertexBuffer = context.createVertexBuffer(
-        this.paintVertexArray,
-        this.paintVertexAttributes,
-        this.expression.isStateDependent
-      );
+      if (this.paintVertexBuffer?.buffer) {
+        this.paintVertexBuffer.updateData(this.paintVertexArray);
+      } else {
+        this.paintVertexBuffer = context.createVertexBuffer(
+          this.paintVertexArray,
+          this.paintVertexAttributes,
+          this.expression.isStateDependent
+        );
+      }
     }
   }
 
@@ -265,11 +269,15 @@ class CompositeExpressionBinder {
 
   upload(context) {
     if (this.paintVertexArray?.arrayBuffer) {
-      this.paintVertexBuffer = context.createVertexBuffer(
-        this.paintVertexArray,
-        this.paintVertexAttributes,
-        this.expression.isStateDependent
-      );
+      if (this.paintVertexBuffer?.buffer) {
+        this.paintVertexBuffer.updateData(this.paintVertexArray);
+      } else {
+        this.paintVertexBuffer = context.createVertexBuffer(
+          this.paintVertexArray,
+          this.paintVertexAttributes,
+          this.expression.isStateDependent
+        );
+      }
     }
   }
 

package/src/geo/transform.js

@@ -17,12 +17,13 @@ const { vec4, mat4, mat2 } = require('@mapbox/gl-matrix');
 class Transform {
   constructor(minZoom, maxZoom, renderWorldCopies) {
     this.tileSize = 512; // constant
+    this.maxValidLatitude = 85.051129; // constant
 
     this._renderWorldCopies = renderWorldCopies === undefined ? true : renderWorldCopies;
     this._minZoom = minZoom || 0;
     this._maxZoom = maxZoom || 22;
 
-    this.latRange = [-85.05113, 85.05113];
+    this.latRange = [-this.maxValidLatitude, this.maxValidLatitude];
 
     this.width = 0;
     this.height = 0;
@@ -262,7 +263,7 @@ class Transform {
   }
 
   /**
-   * latitude to absolute x coord
+   * longitude to absolute x coord
    * @returns {number} pixel coordinate
    */
   lngX(lng) {
@@ -273,6 +274,7 @@ class Transform {
    * @returns {number} pixel coordinate
    */
   latY(lat) {
+    lat = clamp(lat, -this.maxValidLatitude, this.maxValidLatitude);
     const y = (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360));
     return ((180 - y) * this.worldSize) / 360;
   }

package/src/index.js

@@ -43,7 +43,7 @@ module.exports = {
  * @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.
  * @example
- * mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.2/mapbox-gl-rtl-text.js');
+ * 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/)
  */
 

package/src/source/rtl_text_plugin.js

@@ -47,6 +47,7 @@ function setRTLTextPlugin(url, callback) {
 const plugin = {
   applyArabicShaping: null,
   processBidirectionalText: null,
+  processStyledBidirectionalText: null,
   isLoaded: function () {
     return (
       foregroundLoadComplete || // Foreground: loaded if the completion callback returned successfully

package/src/source/source_cache.js

@@ -181,7 +181,7 @@ class SourceCache extends Evented {
     this._cache.reset();
 
     for (const i in this._tiles) {
-      this._reloadTile(i, 'reloading');
+      if (this._tiles[i].state !== 'errored') this._reloadTile(i, 'reloading');
     }
   }
 

package/src/source/tile.js

@@ -101,8 +101,9 @@ class Tile {
     }
 
     this.queryPadding = 0;
-    for (const bucket of buckets) {
-      this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(bucket.layerIds[0]).queryRadius(bucket));
+    for (const id in this.buckets) {
+      const bucket = this.buckets[id];
+      this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(id).queryRadius(bucket));
     }
 
     if (data.imageAtlas) {
@@ -297,8 +298,8 @@ class Tile {
 
     const vtLayers = this.latestFeatureIndex.loadVTLayers();
 
-    for (const i in this.buckets) {
-      const bucket = this.buckets[i];
+    for (const id in this.buckets) {
+      const bucket = this.buckets[id];
       // Buckets are grouped by common source-layer
       const sourceLayerId = bucket.layers[0]['sourceLayer'] || '_geojsonTileLayer';
       const sourceLayer = vtLayers[sourceLayerId];
@@ -307,7 +308,7 @@ class Tile {
 
       bucket.update(sourceLayerStates, sourceLayer, this.imageAtlas?.patternPositions || {});
       if (painter?.style) {
-        this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(bucket.layerIds[0]).queryRadius(bucket));
+        this.queryPadding = Math.max(this.queryPadding, painter.style.getLayer(id).queryRadius(bucket));
       }
     }
   }

package/src/source/worker.js

@@ -38,6 +38,7 @@ class Worker {
       }
       globalRTLTextPlugin['applyArabicShaping'] = rtlTextPlugin.applyArabicShaping;
       globalRTLTextPlugin['processBidirectionalText'] = rtlTextPlugin.processBidirectionalText;
+      globalRTLTextPlugin['processStyledBidirectionalText'] = rtlTextPlugin.processStyledBidirectionalText;
     };
   }
 
@@ -71,16 +72,6 @@ class Worker {
     }
   }
 
-  /**
-   * Load a {@link WorkerSource} script at params.url.  The script is run
-   * (using importScripts) with `registerWorkerSource` in scope, which is a
-   * function taking `(name, workerSourceObject)`.
-   *  @private
-   */
-  loadWorkerSource(map, params) {
-    this.self.importScripts(params.url);
-  }
-
   loadRTLTextPlugin(map, pluginURL) {
     if (!globalRTLTextPlugin.isLoaded()) {
       this.self.importScripts(pluginURL);

package/src/style/style.js

@@ -633,6 +633,10 @@ class Style extends Evented {
       this.fire(new ErrorEvent(new Error('The sourceLayer parameter must be provided for vector source types.')));
       return;
     }
+    if (feature.id == null || feature.id === '') {
+      this.fire(new ErrorEvent(new Error('The feature id parameter must be provided.')));
+      return;
+    }
 
     sourceCache.setFeatureState(sourceLayer, feature.id, state);
   }
@@ -767,25 +771,6 @@ class Style extends Evented {
     return sourceCache ? querySourceFeatures(sourceCache, params) : [];
   }
 
-  addSourceType(name, SourceType, callback) {
-    if (Style.getSourceType(name)) {
-      return callback(new Error(`A source type called "${name}" already exists.`));
-    }
-
-    Style.setSourceType(name, SourceType);
-
-    if (!SourceType.workerSourceURL) {
-      return callback(null, null);
-    }
-
-    this.dispatcher
-      .broadcast('loadWorkerSource', {
-        name: name,
-        url: SourceType.workerSourceURL
-      })
-      .then(data => callback(null, data), callback);
-  }
-
   getLight() {
     return this.light.getLight();
   }

package/src/style/style_layer/symbol_style_layer_properties.js

@@ -106,7 +106,7 @@ const layout = new Properties({
     expression: { parameters: ['zoom'] }
   }),
   'text-field': new DataDrivenProperty({
-    type: 'string',
+    type: 'formatted',
     default: '',
     tokens: true,
     expression: { parameters: ['zoom', 'feature'] }

package/src/style-spec/expression/compound_expression.js

@@ -46,20 +46,6 @@ class CompoundExpression {
         signature.length === args.length - 1 // correct param count
     );
 
-    // First parse all the args
-    const parsedArgs = [];
-    for (let i = 1; i < args.length; i++) {
-      const arg = args[i];
-      let expected;
-      if (overloads.length === 1) {
-        const params = overloads[0][0];
-        expected = Array.isArray(params) ? params[i - 1] : params.type;
-      }
-      const parsed = context.parse(arg, 1 + parsedArgs.length, expected);
-      if (!parsed) return null;
-      parsedArgs.push(parsed);
-    }
-
     let signatureContext = null;
 
     for (const [params, evaluate] of overloads) {
@@ -67,6 +53,27 @@ class CompoundExpression {
       // we eventually succeed, we haven't polluted `context.errors`.
       signatureContext = new ParsingContext(context.registry, context.path, null, context.scope);
 
+      // First parse all the args, potentially coercing to the
+      // types expected by this overload.
+      const parsedArgs = [];
+      let argParseFailed = false;
+      for (let i = 1; i < args.length; i++) {
+        const arg = args[i];
+        const expectedType = Array.isArray(params) ? params[i - 1] : params.type;
+
+        const parsed = signatureContext.parse(arg, 1 + parsedArgs.length, expectedType);
+        if (!parsed) {
+          argParseFailed = true;
+          break;
+        }
+        parsedArgs.push(parsed);
+      }
+      if (argParseFailed) {
+        // Couldn't coerce args of this overload to expected type, move
+        // on to next one.
+        continue;
+      }
+
       if (Array.isArray(params)) {
         if (params.length !== parsedArgs.length) {
           signatureContext.error(`Expected ${params.length} arguments, but found ${parsedArgs.length} instead.`);
@@ -92,8 +99,15 @@ class CompoundExpression {
     } else {
       const expected = overloads.length ? overloads : availableOverloads;
       const signatures = expected.map(([params]) => stringifySignature(params)).join(' | ');
-      const actualTypes = parsedArgs.map(arg => toString(arg.type)).join(', ');
-      context.error(`Expected arguments of type ${signatures}, but found (${actualTypes}) instead.`);
+      const actualTypes = [];
+      // For error message, re-parse arguments without trying to
+      // apply any coercions
+      for (let i = 1; i < args.length; i++) {
+        const parsed = context.parse(args[i], 1 + actualTypes.length);
+        if (!parsed) return null;
+        actualTypes.push(toString(parsed.type));
+      }
+      context.error(`Expected arguments of type ${signatures}, but found (${actualTypes.join(', ')}) instead.`);
     }
 
     return null;

package/src/style-spec/expression/definitions/coercion.js

@@ -3,6 +3,7 @@ const assert = require('assert');
 const { ColorType, ValueType, NumberType } = require('../types');
 const { Color, validateRGBA } = require('../values');
 const RuntimeError = require('../runtime_error');
+const { Formatted, FormattedSection } = require('./formatted');
 
 const types = {
   'to-number': NumberType,
@@ -65,6 +66,18 @@ class Coercion {
         error || `Could not parse color from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`
       );
     }
+    if (this.type.kind === 'formatted') {
+      let input;
+      for (const arg of this.args) {
+        input = arg.evaluate(ctx);
+        if (typeof input === 'string') {
+          return new Formatted([new FormattedSection(input, null, null)]);
+        }
+      }
+      throw new RuntimeError(
+        `Could not parse formatted text from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`
+      );
+    }
     let value = null;
     for (const arg of this.args) {
       value = arg.evaluate(ctx);

package/src/style-spec/expression/definitions/comparison.js

@@ -0,0 +1,193 @@
+const { toString, ValueType, BooleanType, CollatorType } = require('../types');
+const Assertion = require('./assertion');
+const { typeOf } = require('../values');
+const RuntimeError = require('../runtime_error');
+
+function isComparableType(op, type) {
+  if (op === '==' || op === '!=') {
+    // equality operator
+    return (
+      type.kind === 'boolean' ||
+      type.kind === 'string' ||
+      type.kind === 'number' ||
+      type.kind === 'null' ||
+      type.kind === 'value'
+    );
+  }
+  // ordering operator
+  return type.kind === 'string' || type.kind === 'number' || type.kind === 'value';
+}
+
+function eq(ctx, a, b) {
+  return a === b;
+}
+function neq(ctx, a, b) {
+  return a !== b;
+}
+function lt(ctx, a, b) {
+  return a < b;
+}
+function gt(ctx, a, b) {
+  return a > b;
+}
+function lteq(ctx, a, b) {
+  return a <= b;
+}
+function gteq(ctx, a, b) {
+  return a >= b;
+}
+
+function eqCollate(ctx, a, b, c) {
+  return c.compare(a, b) === 0;
+}
+function neqCollate(ctx, a, b, c) {
+  return !eqCollate(ctx, a, b, c);
+}
+function ltCollate(ctx, a, b, c) {
+  return c.compare(a, b) < 0;
+}
+function gtCollate(ctx, a, b, c) {
+  return c.compare(a, b) > 0;
+}
+function lteqCollate(ctx, a, b, c) {
+  return c.compare(a, b) <= 0;
+}
+function gteqCollate(ctx, a, b, c) {
+  return c.compare(a, b) >= 0;
+}
+
+/**
+ * Special form for comparison operators, implementing the signatures:
+ * - (T, T, ?Collator) => boolean
+ * - (T, value, ?Collator) => boolean
+ * - (value, T, ?Collator) => boolean
+ *
+ * For inequalities, T must be either value, string, or number. For ==/!=, it
+ * can also be boolean or null.
+ *
+ * Equality semantics are equivalent to Javascript's strict equality (===/!==)
+ * -- i.e., when the arguments' types don't match, == evaluates to false, != to
+ * true.
+ *
+ * When types don't match in an ordering comparison, a runtime error is thrown.
+ *
+ * @private
+ */
+function makeComparison(op, compareBasic, compareWithCollator) {
+  const isOrderComparison = op !== '==' && op !== '!=';
+
+  return class Comparison {
+    constructor(lhs, rhs, collator) {
+      this.type = BooleanType;
+      this.lhs = lhs;
+      this.rhs = rhs;
+      this.collator = collator;
+      this.hasUntypedArgument = lhs.type.kind === 'value' || rhs.type.kind === 'value';
+    }
+
+    static parse(args, context) {
+      if (args.length !== 3 && args.length !== 4) return context.error('Expected two or three arguments.');
+
+      const op = args[0];
+
+      let lhs = context.parse(args[1], 1, ValueType);
+      if (!lhs) return null;
+      if (!isComparableType(op, lhs.type)) {
+        return context.concat(1).error(`"${op}" comparisons are not supported for type '${toString(lhs.type)}'.`);
+      }
+      let rhs = context.parse(args[2], 2, ValueType);
+      if (!rhs) return null;
+      if (!isComparableType(op, rhs.type)) {
+        return context.concat(2).error(`"${op}" comparisons are not supported for type '${toString(rhs.type)}'.`);
+      }
+
+      if (lhs.type.kind !== rhs.type.kind && lhs.type.kind !== 'value' && rhs.type.kind !== 'value') {
+        return context.error(`Cannot compare types '${toString(lhs.type)}' and '${toString(rhs.type)}'.`);
+      }
+
+      if (isOrderComparison) {
+        // typing rules specific to less/greater than operators
+        if (lhs.type.kind === 'value' && rhs.type.kind !== 'value') {
+          // (value, T)
+          lhs = new Assertion(rhs.type, [lhs]);
+        } else if (lhs.type.kind !== 'value' && rhs.type.kind === 'value') {
+          // (T, value)
+          rhs = new Assertion(lhs.type, [rhs]);
+        }
+      }
+
+      let collator = null;
+      if (args.length === 4) {
+        if (
+          lhs.type.kind !== 'string' &&
+          rhs.type.kind !== 'string' &&
+          lhs.type.kind !== 'value' &&
+          rhs.type.kind !== 'value'
+        ) {
+          return context.error('Cannot use collator to compare non-string types.');
+        }
+        collator = context.parse(args[3], 3, CollatorType);
+        if (!collator) return null;
+      }
+
+      return new Comparison(lhs, rhs, collator);
+    }
+
+    evaluate(ctx) {
+      const lhs = this.lhs.evaluate(ctx);
+      const rhs = this.rhs.evaluate(ctx);
+
+      if (isOrderComparison && this.hasUntypedArgument) {
+        const lt = typeOf(lhs);
+        const rt = typeOf(rhs);
+        // check that type is string or number, and equal
+        if (lt.kind !== rt.kind || !(lt.kind === 'string' || lt.kind === 'number')) {
+          throw new RuntimeError(
+            `Expected arguments for "${op}" to be (string, string) or (number, number), but found (${lt.kind}, ${rt.kind}) instead.`
+          );
+        }
+      }
+
+      if (this.collator && !isOrderComparison && this.hasUntypedArgument) {
+        const lt = typeOf(lhs);
+        const rt = typeOf(rhs);
+        if (lt.kind !== 'string' || rt.kind !== 'string') {
+          return compareBasic(ctx, lhs, rhs);
+        }
+      }
+
+      return this.collator
+        ? compareWithCollator(ctx, lhs, rhs, this.collator.evaluate(ctx))
+        : compareBasic(ctx, lhs, rhs);
+    }
+
+    eachChild(fn) {
+      fn(this.lhs);
+      fn(this.rhs);
+      if (this.collator) {
+        fn(this.collator);
+      }
+    }
+
+    possibleOutputs() {
+      return [true, false];
+    }
+
+    serialize() {
+      const serialized = [op];
+      this.eachChild(child => {
+        serialized.push(child.serialize());
+      });
+      return serialized;
+    }
+  };
+}
+
+module.exports = {
+  Equals: makeComparison('==', eq, eqCollate),
+  NotEquals: makeComparison('!=', neq, neqCollate),
+  LessThan: makeComparison('<', lt, ltCollate),
+  GreaterThan: makeComparison('>', gt, gtCollate),
+  LessThanOrEqual: makeComparison('<=', lteq, lteqCollate),
+  GreaterThanOrEqual: makeComparison('>=', gteq, gteqCollate)
+};