@mapwhit/tilerenderer 0.48.0 → 0.50.0

package/src/render/image_atlas.js

@@ -1,7 +1,6 @@
-const ShelfPack = require('@mapbox/shelf-pack');
-
 const { RGBAImage } = require('../util/image');
 const { register } = require('../util/transfer_registry');
+const potpack = require('potpack');
 
 const padding = 1;
 
@@ -32,7 +31,6 @@ class ImageAtlas {
   constructor(icons, patterns) {
     const iconPositions = {};
     const patternPositions = {};
-    const pack = new ShelfPack(0, 0, { autoResize: true });
     const bins = [];
     for (const id in icons) {
       const src = icons[id];
@@ -58,9 +56,8 @@ class ImageAtlas {
       patternPositions[id] = new ImagePosition(bin, src);
     }
 
-    pack.pack(bins, { inPlace: true });
-
-    const image = new RGBAImage({ width: pack.w, height: pack.h });
+    const { w, h } = potpack(bins);
+    const image = new RGBAImage({ width: w || 1, height: h || 1 });
 
     for (const id in icons) {
       const src = icons[id];

package/src/render/image_manager.js

@@ -1,4 +1,4 @@
-const ShelfPack = require('@mapbox/shelf-pack');
+const potpack = require('potpack');
 
 const { RGBAImage } = require('../util/image');
 const { ImagePosition } = require('./image_atlas');
@@ -26,9 +26,8 @@ class ImageManager {
   constructor() {
     this.images = {};
 
-    this.shelfPack = new ShelfPack(64, 64, { autoResize: true });
     this.patterns = {};
-    this.atlasImage = new RGBAImage({ width: 64, height: 64 });
+    this.atlasImage = new RGBAImage({ width: 1, height: 1 });
     this.dirty = true;
   }
 
@@ -56,12 +55,7 @@ class ImageManager {
   removeImage(id) {
     assert(this.images[id]);
     delete this.images[id];
-
-    const pattern = this.patterns[id];
-    if (pattern) {
-      this.shelfPack.unref(pattern.bin);
-      delete this.patterns[id];
-    }
+    delete this.patterns[id];
   }
 
   listImages() {
@@ -89,10 +83,8 @@ class ImageManager {
   // Pattern stuff
 
   getPixelSize() {
-    return {
-      width: this.shelfPack.w,
-      height: this.shelfPack.h
-    };
+    const { width, height } = this.atlasImage;
+    return { width, height };
   }
 
   getPattern(id) {
@@ -106,36 +98,13 @@ class ImageManager {
       return null;
     }
 
-    const width = image.data.width + padding * 2;
-    const height = image.data.height + padding * 2;
-
-    const bin = this.shelfPack.packOne(width, height);
-    if (!bin) {
-      return null;
-    }
-
-    this.atlasImage.resize(this.getPixelSize());
-
-    const src = image.data;
-    const dst = this.atlasImage;
-
-    const x = bin.x + padding;
-    const y = bin.y + padding;
-    const w = src.width;
-    const h = src.height;
-
-    RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x, y }, { width: w, height: h });
-
-    // Add 1 pixel wrapped padding on each side of the image.
-    RGBAImage.copy(src, dst, { x: 0, y: h - 1 }, { x: x, y: y - 1 }, { width: w, height: 1 }); // T
-    RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x: x, y: y + h }, { width: w, height: 1 }); // B
-    RGBAImage.copy(src, dst, { x: w - 1, y: 0 }, { x: x - 1, y: y }, { width: 1, height: h }); // L
-    RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x: x + w, y: y }, { width: 1, height: h }); // R
-
-    this.dirty = true;
-
+    const w = image.data.width + padding * 2;
+    const h = image.data.height + padding * 2;
+    const bin = { w, h, x: 0, y: 0 };
     const position = new ImagePosition(bin, image);
     this.patterns[id] = { bin, position };
+    this._updatePatternAtlas();
+
     return position;
   }
 
@@ -150,6 +119,37 @@ class ImageManager {
 
     this.atlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
   }
+
+  _updatePatternAtlas() {
+    const bins = [];
+    for (const id in this.patterns) {
+      bins.push(this.patterns[id].bin);
+    }
+
+    const { w, h } = potpack(bins);
+
+    const dst = this.atlasImage;
+    dst.resize({ width: w ?? 1, height: h ?? 1 });
+
+    for (const id in this.patterns) {
+      const { bin } = this.patterns[id];
+      const x = bin.x + padding;
+      const y = bin.y + padding;
+      const src = this.images[id].data;
+      const w = src.width;
+      const h = src.height;
+
+      RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x, y }, { width: w, height: h });
+
+      // Add 1 pixel wrapped padding on each side of the image.
+      RGBAImage.copy(src, dst, { x: 0, y: h - 1 }, { x: x, y: y - 1 }, { width: w, height: 1 }); // T
+      RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x: x, y: y + h }, { width: w, height: 1 }); // B
+      RGBAImage.copy(src, dst, { x: w - 1, y: 0 }, { x: x - 1, y: y }, { width: 1, height: h }); // L
+      RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x: x + w, y: y }, { width: 1, height: h }); // R
+    }
+
+    this.dirty = true;
+  }
 }
 
 module.exports = ImageManager;

package/src/shaders/fill_extrusion.fragment.glsl

@@ -1,13 +1,6 @@
 varying vec4 v_color;
-#pragma mapbox: define lowp float base
-#pragma mapbox: define lowp float height
-#pragma mapbox: define highp vec4 color
 
 void main() {
-    #pragma mapbox: initialize lowp float base
-    #pragma mapbox: initialize lowp float height
-    #pragma mapbox: initialize highp vec4 color
-
     gl_FragColor = v_color;
 
 #ifdef OVERDRAW_INSPECTOR

package/src/shaders/fill_extrusion.vertex.glsl

@@ -10,14 +10,14 @@ attribute vec4 a_normal_ed;
 
 varying vec4 v_color;
 
-#pragma mapbox: define lowp float base
-#pragma mapbox: define lowp float height
+#pragma mapbox: define highp float base
+#pragma mapbox: define highp float height
 
 #pragma mapbox: define highp vec4 color
 
 void main() {
-    #pragma mapbox: initialize lowp float base
-    #pragma mapbox: initialize lowp float height
+    #pragma mapbox: initialize highp float base
+    #pragma mapbox: initialize highp float height
     #pragma mapbox: initialize highp vec4 color
 
     vec3 normal = a_normal_ed.xyz;

package/src/style/style_layer/symbol_style_layer_properties.js

@@ -19,6 +19,12 @@ const layout = new Properties({
     default: false,
     expression: { parameters: ['zoom'] }
   }),
+  'symbol-z-order': new DataConstantProperty({
+    type: 'enum',
+    values: ['viewport-y', 'source'],
+    default: 'viewport-y',
+    expression: { parameters: ['zoom'] }
+  }),
   'icon-allow-overlap': new DataConstantProperty({
     type: 'boolean',
     default: false,

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

@@ -1,6 +1,15 @@
 const assert = require('assert');
 
-const { ObjectType, ValueType, StringType, NumberType, BooleanType, checkSubtype, toString } = require('../types');
+const {
+  ObjectType,
+  ValueType,
+  StringType,
+  NumberType,
+  BooleanType,
+  checkSubtype,
+  toString,
+  array
+} = require('../types');
 const RuntimeError = require('../runtime_error');
 const { typeOf } = require('../values');
 
@@ -20,13 +29,39 @@ class Assertion {
   static parse(args, context) {
     if (args.length < 2) return context.error('Expected at least one argument.');
 
+    let i = 1;
+    let type;
+
     const name = args[0];
-    assert(types[name], name);
+    if (name === 'array') {
+      let itemType;
+      if (args.length > 2) {
+        const type = args[1];
+        if (typeof type !== 'string' || !(type in types) || type === 'object')
+          return context.error('The item type argument of "array" must be one of string, number, boolean', 1);
+        itemType = types[type];
+        i++;
+      } else {
+        itemType = ValueType;
+      }
 
-    const type = types[name];
+      let N;
+      if (args.length > 3) {
+        if (args[2] !== null && (typeof args[2] !== 'number' || args[2] < 0 || args[2] !== Math.floor(args[2]))) {
+          return context.error('The length argument to "array" must be a positive integer literal', 2);
+        }
+        N = args[2];
+        i++;
+      }
+
+      type = array(itemType, N);
+    } else {
+      assert(types[name], name);
+      type = types[name];
+    }
 
     const parsed = [];
-    for (let i = 1; i < args.length; i++) {
+    for (; i < args.length; i++) {
       const input = context.parse(args[i], i, ValueType);
       if (!input) return null;
       parsed.push(input);
@@ -62,7 +97,19 @@ class Assertion {
   }
 
   serialize() {
-    return [this.type.kind].concat(this.args.map(arg => arg.serialize()));
+    const type = this.type;
+    const serialized = [type.kind];
+    if (type.kind === 'array') {
+      const itemType = type.itemType;
+      if (itemType.kind === 'string' || itemType.kind === 'number' || itemType.kind === 'boolean') {
+        serialized.push(itemType.kind);
+        const N = type.N;
+        if (typeof N === 'number' || this.args.length > 1) {
+          serialized.push(N);
+        }
+      }
+    }
+    return serialized.concat(this.args.map(arg => arg.serialize()));
   }
 }
 

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

@@ -20,9 +20,7 @@ class Coalesce {
     const parsedArgs = [];
 
     for (const arg of args.slice(1)) {
-      const parsed = context.parse(arg, 1 + parsedArgs.length, outputType, undefined, {
-        omitTypeAnnotations: true
-      });
+      const parsed = context.parse(arg, 1 + parsedArgs.length, outputType, undefined, { typeAnnotation: 'omit' });
       if (!parsed) return null;
       outputType = outputType || parsed.type;
       parsedArgs.push(parsed);

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

@@ -1,13 +1,16 @@
 const assert = require('assert');
 
-const { ColorType, ValueType, NumberType } = require('../types');
-const { Color, validateRGBA } = require('../values');
+const { BooleanType, ColorType, NumberType, StringType, ValueType } = require('../types');
+const { Color, toString: valueToString, validateRGBA } = require('../values');
 const RuntimeError = require('../runtime_error');
-const { Formatted, FormattedSection } = require('./formatted');
+const { FormatExpression } = require('../definitions/format');
+const { Formatted } = require('../types/formatted');
 
 const types = {
+  'to-boolean': BooleanType,
+  'to-color': ColorType,
   'to-number': NumberType,
-  'to-color': ColorType
+  'to-string': StringType
 };
 
 /**
@@ -29,6 +32,9 @@ class Coercion {
     const name = args[0];
     assert(types[name], name);
 
+    if ((name === 'to-boolean' || name === 'to-string') && args.length !== 2)
+      return context.error('Expected one argument.');
+
     const type = types[name];
 
     const parsed = [];
@@ -42,12 +48,18 @@ class Coercion {
   }
 
   evaluate(ctx) {
+    if (this.type.kind === 'boolean') {
+      return Boolean(this.args[0].evaluate(ctx));
+    }
     if (this.type.kind === 'color') {
       let input;
       let error;
       for (const arg of this.args) {
         input = arg.evaluate(ctx);
         error = null;
+        if (input instanceof Color) {
+          return input;
+        }
         if (typeof input === 'string') {
           const c = ctx.parseColor(input);
           if (c) return c;
@@ -66,27 +78,23 @@ class Coercion {
         error || `Could not parse color from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`
       );
     }
-    if (this.type.kind === 'formatted') {
-      let input;
+    if (this.type.kind === 'number') {
+      let value = null;
       for (const arg of this.args) {
-        input = arg.evaluate(ctx);
-        if (typeof input === 'string') {
-          return new Formatted([new FormattedSection(input, null, null)]);
-        }
+        value = arg.evaluate(ctx);
+        if (value === null) return 0;
+        const num = Number(value);
+        if (isNaN(num)) continue;
+        return num;
       }
-      throw new RuntimeError(
-        `Could not parse formatted text from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`
-      );
+      throw new RuntimeError(`Could not convert ${JSON.stringify(value)} to number.`);
     }
-    let value = null;
-    for (const arg of this.args) {
-      value = arg.evaluate(ctx);
-      if (value === null) continue;
-      const num = Number(value);
-      if (isNaN(num)) continue;
-      return num;
+    if (this.type.kind === 'formatted') {
+      // There is no explicit 'to-formatted' but this coercion can be implicitly
+      // created by properties that expect the 'formatted' type.
+      return Formatted.fromString(valueToString(this.args[0].evaluate(ctx)));
     }
-    throw new RuntimeError(`Could not convert ${JSON.stringify(value)} to number.`);
+    return valueToString(this.args[0].evaluate(ctx));
   }
 
   eachChild(fn) {
@@ -98,6 +106,9 @@ class Coercion {
   }
 
   serialize() {
+    if (this.type.kind === 'formatted') {
+      return new FormatExpression([{ text: this.args[0], scale: null, font: null }]).serialize();
+    }
     const serialized = [`to-${this.type.kind}`];
     this.eachChild(child => {
       serialized.push(child.serialize());

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

@@ -1,27 +1,5 @@
 const { StringType, BooleanType, CollatorType } = require('../types');
-
-class Collator {
-  constructor(caseSensitive, diacriticSensitive, locale) {
-    if (caseSensitive) this.sensitivity = diacriticSensitive ? 'variant' : 'case';
-    else this.sensitivity = diacriticSensitive ? 'accent' : 'base';
-
-    this.locale = locale;
-    this.collator = new Intl.Collator(this.locale ? this.locale : [], {
-      sensitivity: this.sensitivity,
-      usage: 'search'
-    });
-  }
-
-  compare(lhs, rhs) {
-    return this.collator.compare(lhs, rhs);
-  }
-
-  resolvedLocale() {
-    // We create a Collator without "usage: search" because we don't want
-    // the search options encoded in our result (e.g. "en-u-co-search")
-    return new Intl.Collator(this.locale ? this.locale : []).resolvedOptions().locale;
-  }
-}
+const { Collator } = require('../types/collator');
 
 class CollatorExpression {
   constructor(caseSensitive, diacriticSensitive, locale) {

package/src/style-spec/expression/definitions/{formatted.js → format.js}

@@ -1,32 +1,6 @@
 const { NumberType, ValueType, FormattedType, array, StringType } = require('../types');
-
-class FormattedSection {
-  constructor(text, scale, fontStack) {
-    this.text = text;
-    this.scale = scale;
-    this.fontStack = fontStack;
-  }
-}
-
-class Formatted {
-  constructor(sections) {
-    this.sections = sections;
-  }
-
-  toString() {
-    return this.sections.map(section => section.text).join('');
-  }
-
-  serialize() {
-    const serialized = ['format'];
-    for (const section of this.sections) {
-      serialized.push(section.text);
-      const fontStack = section.fontStack ? ['literal', section.fontStack.split(',')] : null;
-      serialized.push({ 'text-font': fontStack, 'font-scale': section.scale });
-    }
-    return serialized;
-  }
-}
+const { Formatted, FormattedSection } = require('../types/formatted');
+const { toString } = require('../values');
 
 class FormatExpression {
   constructor(sections) {
@@ -77,7 +51,7 @@ class FormatExpression {
       this.sections.map(
         section =>
           new FormattedSection(
-            section.text.evaluate(ctx) || '',
+            toString(section.text.evaluate(ctx)),
             section.scale ? section.scale.evaluate(ctx) : null,
             section.font ? section.font.evaluate(ctx).join(',') : null
           )

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

@@ -8,17 +8,16 @@ const {
   ErrorType,
   CollatorType,
   array,
-  toString
+  toString: typeToString
 } = require('../types');
 
-const { typeOf, Color, validateRGBA } = require('../values');
+const { typeOf, Color, validateRGBA, toString: valueToString } = require('../values');
 const CompoundExpression = require('../compound_expression');
 const RuntimeError = require('../runtime_error');
 const Let = require('./let');
 const Var = require('./var');
 const Literal = require('./literal');
 const Assertion = require('./assertion');
-const ArrayAssertion = require('./array');
 const Coercion = require('./coercion');
 const At = require('./at');
 const Match = require('./match');
@@ -28,7 +27,7 @@ const Interpolate = require('./interpolate');
 const Coalesce = require('./coalesce');
 const { Equals, NotEquals, LessThan, GreaterThan, LessThanOrEqual, GreaterThanOrEqual } = require('./comparison');
 const { CollatorExpression } = require('./collator');
-const { Formatted, FormatExpression } = require('./formatted');
+const { FormatExpression } = require('./format');
 const Length = require('./length');
 
 const expressions = {
@@ -39,7 +38,7 @@ const expressions = {
   '<': LessThan,
   '>=': GreaterThanOrEqual,
   '<=': LessThanOrEqual,
-  array: ArrayAssertion,
+  array: Assertion,
   at: At,
   boolean: Assertion,
   case: Case,
@@ -57,8 +56,10 @@ const expressions = {
   object: Assertion,
   step: Step,
   string: Assertion,
+  'to-boolean': Coercion,
   'to-color': Coercion,
   'to-number': Coercion,
+  'to-string': Coercion,
   var: Var
 };
 
@@ -103,26 +104,7 @@ CompoundExpression.register(expressions, {
       throw new RuntimeError(v.evaluate(ctx));
     }
   ],
-  typeof: [StringType, [ValueType], (ctx, [v]) => toString(typeOf(v.evaluate(ctx)))],
-  'to-string': [
-    StringType,
-    [ValueType],
-    (ctx, [v]) => {
-      v = v.evaluate(ctx);
-      const type = typeof v;
-      if (v === null) {
-        return '';
-      }
-      if (type === 'string' || type === 'number' || type === 'boolean') {
-        return String(v);
-      }
-      if (v instanceof Color || v instanceof Formatted) {
-        return v.toString();
-      }
-      return JSON.stringify(v);
-    }
-  ],
-  'to-boolean': [BooleanType, [ValueType], (ctx, [v]) => Boolean(v.evaluate(ctx))],
+  typeof: [StringType, [ValueType], (ctx, [v]) => typeToString(typeOf(v.evaluate(ctx)))],
   'to-rgba': [
     array(NumberType, 4),
     [ColorType],
@@ -350,7 +332,7 @@ CompoundExpression.register(expressions, {
   ],
   upcase: [StringType, [StringType], (ctx, [s]) => s.evaluate(ctx).toUpperCase()],
   downcase: [StringType, [StringType], (ctx, [s]) => s.evaluate(ctx).toLowerCase()],
-  concat: [StringType, varargs(StringType), (ctx, args) => args.map(arg => arg.evaluate(ctx)).join('')],
+  concat: [StringType, varargs(ValueType), (ctx, args) => args.map(arg => valueToString(arg.evaluate(ctx))).join('')],
   'resolved-locale': [StringType, [CollatorType], (ctx, [collator]) => collator.evaluate(ctx).resolvedLocale()]
 });
 

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

@@ -37,7 +37,7 @@ class Let {
       bindings.push([name, value]);
     }
 
-    const result = context.parse(args[args.length - 1], args.length - 1, undefined, bindings);
+    const result = context.parse(args[args.length - 1], args.length - 1, context.expectedType, bindings);
     if (!result) return null;
 
     return new Let(bindings, result);

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

@@ -1,6 +1,6 @@
 const assert = require('assert');
 const { isValue, typeOf, Color } = require('../values');
-const { Formatted } = require('./formatted');
+const { Formatted } = require('../types/formatted');
 
 class Literal {
   constructor(type, value) {

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

@@ -4,6 +4,9 @@ const geometryTypes = ['Unknown', 'Point', 'LineString', 'Polygon'];
 
 class EvaluationContext {
   constructor() {
+    this.globals = null;
+    this.feature = null;
+    this.featureState = null;
     this._parseColorCache = {};
   }
 

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

@@ -18,17 +18,12 @@ class StyleExpression {
   constructor(expression, propertySpec) {
     this.expression = expression;
     this._warningHistory = {};
+    this._evaluator = new EvaluationContext();
     this._defaultValue = getDefaultValue(propertySpec);
-    if (propertySpec.type === 'enum') {
-      this._enumValues = propertySpec.values;
-    }
+    this._enumValues = propertySpec.type === 'enum' ? propertySpec.values : null;
   }
 
   evaluateWithoutErrorHandling(globals, feature, featureState) {
-    if (!this._evaluator) {
-      this._evaluator = new EvaluationContext();
-    }
-
     this._evaluator.globals = globals;
     this._evaluator.feature = feature;
     this._evaluator.featureState = featureState;
@@ -37,13 +32,9 @@ class StyleExpression {
   }
 
   evaluate(globals, feature, featureState) {
-    if (!this._evaluator) {
-      this._evaluator = new EvaluationContext();
-    }
-
     this._evaluator.globals = globals;
-    this._evaluator.feature = feature;
-    this._evaluator.featureState = featureState;
+    this._evaluator.feature = feature || null;
+    this._evaluator.featureState = featureState || null;
 
     try {
       const val = this.expression.evaluate(this._evaluator);
@@ -90,7 +81,16 @@ function isExpression(expression) {
  */
 function createExpression(expression, propertySpec) {
   const parser = new ParsingContext(definitions, [], getExpectedType(propertySpec));
-  const parsed = parser.parse(expression);
+
+  // For string-valued properties, coerce to string at the top level rather than asserting.
+  const parsed = parser.parse(
+    expression,
+    undefined,
+    undefined,
+    undefined,
+    propertySpec.type === 'string' ? { typeAnnotation: 'coerce' } : undefined
+  );
+
   if (!parsed) {
     assert(parser.errors.length > 0);
     return error(parser.errors);
@@ -283,7 +283,7 @@ function findZoomCurve(expression) {
   return result;
 }
 
-const { ColorType, StringType, NumberType, BooleanType, ValueType, array } = require('./types');
+const { ColorType, StringType, NumberType, BooleanType, ValueType, FormattedType, array } = require('./types');
 
 function getExpectedType(spec) {
   const types = {
@@ -291,14 +291,15 @@ function getExpectedType(spec) {
     string: StringType,
     number: NumberType,
     enum: StringType,
-    boolean: BooleanType
+    boolean: BooleanType,
+    formatted: FormattedType
   };
 
   if (spec.type === 'array') {
     return array(types[spec.value] || ValueType, spec.length);
   }
 
-  return types[spec.type] || null;
+  return types[spec.type];
 }
 
 function getDefaultValue(spec) {