maplibre-gl 2.2.0-pre.2 → 2.2.0

package/src/source/video_source.test.ts

@@ -19,7 +19,7 @@ describe('VideoSource', () => {
     // Attribution File:Volcano Lava Sample.webm: U.S. Geological Survey (USGS), Public domain, via Wikimedia Commons
     const source = createSource({
         type: 'video',
-        urls : [ 'cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm' ],
+        urls: ['cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'],
         coordinates: [
             [-76.54, 39.18],
             [-76.52, 39.18],
@@ -50,7 +50,7 @@ describe('VideoSource', () => {
         const source = createSource({
             type: 'video',
             video: el,
-            urls : [ 'cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm' ],
+            urls: ['cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'],
             coordinates: [
                 [-76.54, 39.18],
                 [-76.52, 39.18],

package/src/style/light.test.ts

@@ -77,7 +77,7 @@ describe('Light#setLight', () => {
         const light = new Light({});
 
         const lightSpy = jest.spyOn(light, '_validate');
-        light.setLight({color: [999]}, {validate: false});
+        light.setLight({color: [999]} as any, {validate: false});
         light.updateTransitions({transition: false} as any as TransitionParameters);
         light.recalculate({zoom: 16, zoomHistory: {}, now: 10} as EvaluationParameters);
 

package/src/style/load_sprite.ts

@@ -8,7 +8,7 @@ import type {RequestManager} from '../util/request_manager';
 import type {Callback} from '../types/callback';
 import type {Cancelable} from '../types/cancelable';
 
-export default function(
+export default function loadSprite(
     baseURL: string,
     requestManager: RequestManager,
     pixelRatio: number,

package/src/style/parse_glyph_pbf.ts

@@ -35,7 +35,7 @@ function readGlyph(tag: number, glyph: any, pbf: Protobuf) {
     else if (tag === 7) glyph.advance = pbf.readVarint();
 }
 
-export default function(data: ArrayBuffer | Uint8Array): Array<StyleGlyph> {
+export default function parseGlyphPbf(data: ArrayBuffer | Uint8Array): Array<StyleGlyph> {
     return new Protobuf(data).readFields(readFontstacks, []);
 }
 

package/src/style/style.test.ts

@@ -883,7 +883,7 @@ describe('Style#addLayer', () => {
                 'type': 'geojson',
                 'data': {
                     'type': 'Point',
-                    'coordinates': [ 0, 0]
+                    'coordinates': [0, 0]
                 }
             };
             const layer = {id: 'inline-source-layer', type: 'circle', source} as any as LayerSpecification;
@@ -1901,7 +1901,7 @@ describe('Style#queryRenderedFeatures', () => {
                 errors++;
             }
         });
-        style.queryRenderedFeatures([{x: 0, y: 0}], {layers:'string'}, transform);
+        style.queryRenderedFeatures([{x: 0, y: 0}], {layers: 'string'}, transform);
         expect(errors).toBe(1);
     });
 
@@ -1939,7 +1939,7 @@ describe('Style#queryRenderedFeatures', () => {
         jest.spyOn(style, 'fire').mockImplementation((event) => {
             if (event['error'] && event['error'].message.includes('does not exist in the map\'s style and cannot be queried for features.')) errors++;
         });
-        const results = style.queryRenderedFeatures([{x: 0, y: 0}], {layers:['merp']}, transform);
+        const results = style.queryRenderedFeatures([{x: 0, y: 0}], {layers: ['merp']}, transform);
         expect(errors).toBe(1);
         expect(results).toHaveLength(0);
     });

package/src/style/style.ts

@@ -441,7 +441,7 @@ class Style extends Evented {
         for (const sourceId in sourcesUsedBefore) {
             const sourceCache = this.sourceCaches[sourceId];
             if (sourcesUsedBefore[sourceId] !== sourceCache.used) {
-                sourceCache.fire(new Event('data', {sourceDataType: 'visibility', dataType:'source', sourceId}));
+                sourceCache.fire(new Event('data', {sourceDataType: 'visibility', dataType: 'source', sourceId}));
             }
         }
 
@@ -663,7 +663,7 @@ class Style extends Evented {
         const sourceCache = this.sourceCaches[id];
         delete this.sourceCaches[id];
         delete this._updatedSources[id];
-        sourceCache.fire(new Event('data', {sourceDataType: 'metadata', dataType:'source', sourceId: id}));
+        sourceCache.fire(new Event('data', {sourceDataType: 'metadata', dataType: 'source', sourceId: id}));
         sourceCache.setEventedParent(null);
         sourceCache.onRemove(this.map);
         this._changed = true;

package/src/style/style_layer/background_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/circle_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/fill_extrusion_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/fill_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/heatmap_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/hillshade_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/line_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/raster_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/symbol_style_layer.ts

@@ -1,7 +1,7 @@
 import StyleLayer from '../style_layer';
 
 import assert from 'assert';
-import SymbolBucket from '../../data/bucket/symbol_bucket';
+import SymbolBucket, {SymbolFeature} from '../../data/bucket/symbol_bucket';
 import resolveTokens from '../../util/resolve_tokens';
 import properties, {SymbolLayoutPropsPossiblyEvaluated, SymbolPaintPropsPossiblyEvaluated} from './symbol_style_layer_properties.g';
 
@@ -204,4 +204,19 @@ export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, Symb
     return result;
 }
 
+export type SymbolPadding = [number, number, number, number];
+
+export function getIconPadding(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, feature: SymbolFeature, canonical: CanonicalTileID, pixelRatio = 1): SymbolPadding {
+    // Support text-padding in addition to icon-padding? Unclear how to apply asymmetric text-padding to the radius for collision circles.
+    const result = layout.get('icon-padding').evaluate(feature, {}, canonical);
+    const values = result && result.values;
+
+    return [
+        values[0] * pixelRatio,
+        values[1] * pixelRatio,
+        values[2] * pixelRatio,
+        values[3] * pixelRatio,
+    ];
+}
+
 export default SymbolStyleLayer;

package/src/style/style_layer/symbol_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 
@@ -41,7 +42,7 @@ export type SymbolLayoutProps = {
     "icon-text-fit-padding": DataConstantProperty<[number, number, number, number]>,
     "icon-image": DataDrivenProperty<ResolvedImage>,
     "icon-rotate": DataDrivenProperty<number>,
-    "icon-padding": DataConstantProperty<number>,
+    "icon-padding": DataDrivenProperty<Padding>,
     "icon-keep-upright": DataConstantProperty<boolean>,
     "icon-offset": DataDrivenProperty<[number, number]>,
     "icon-anchor": DataDrivenProperty<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
@@ -87,7 +88,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "icon-text-fit-padding": [number, number, number, number],
     "icon-image": PossiblyEvaluatedPropertyValue<ResolvedImage>,
     "icon-rotate": PossiblyEvaluatedPropertyValue<number>,
-    "icon-padding": number,
+    "icon-padding": PossiblyEvaluatedPropertyValue<Padding>,
     "icon-keep-upright": boolean,
     "icon-offset": PossiblyEvaluatedPropertyValue<[number, number]>,
     "icon-anchor": PossiblyEvaluatedPropertyValue<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
@@ -133,7 +134,7 @@ const layout: Properties<SymbolLayoutProps> = new Properties({
     "icon-text-fit-padding": new DataConstantProperty(styleSpec["layout_symbol"]["icon-text-fit-padding"] as any as StylePropertySpecification),
     "icon-image": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-image"] as any as StylePropertySpecification),
     "icon-rotate": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-rotate"] as any as StylePropertySpecification),
-    "icon-padding": new DataConstantProperty(styleSpec["layout_symbol"]["icon-padding"] as any as StylePropertySpecification),
+    "icon-padding": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-padding"] as any as StylePropertySpecification),
     "icon-keep-upright": new DataConstantProperty(styleSpec["layout_symbol"]["icon-keep-upright"] as any as StylePropertySpecification),
     "icon-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-offset"] as any as StylePropertySpecification),
     "icon-anchor": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-anchor"] as any as StylePropertySpecification),

package/src/style-spec/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 16.1.0
+
+### ✨ Features and improvements
+* Update `icon-padding` symbol layout property to support asymmetric padding [#1289](https://github.com/maplibre/maplibre-gl-js/pull/1289)
+
 ## 16.0.0
 
 ### Breaking changes

package/src/style-spec/composite.test.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import composite from './composite';
 
 describe('composite', () => {

package/src/style-spec/composite.ts

@@ -1,5 +1,6 @@
+import type {StyleSpecification} from './types.g';
 
-export default function (style) {
+export default function composite(style: StyleSpecification): StyleSpecification {
     const styleIDs = [];
     const sourceIDs = [];
     const compositedSourceLayers = [];
@@ -32,7 +33,7 @@ export default function (style) {
         'url': `mapbox://${compositeID}`
     };
 
-    style.layers.forEach((layer) => {
+    style.layers.forEach((layer: any) => {
         if (styleIDs.indexOf(layer.source) >= 0) {
             layer.source = compositeID;
 

package/src/style-spec/diff.test.ts

@@ -88,7 +88,7 @@ test('diff', () => {
     }, {
         layers: [{id: 'a', filter: ['==', 'foo', 'baz']}]
     })).toEqual([
-        {command: 'setFilter', args: ['a', [ '==', 'foo', 'baz' ] ]}
+        {command: 'setFilter', args: ['a', ['==', 'foo', 'baz']]}
     ]);
 
     expect(diffStyles({
@@ -329,9 +329,9 @@ test('diff', () => {
     ]);
 
     expect(diffStyles({
-        layers: [ {id: 'a', source: 'source-one'} ]
+        layers: [{id: 'a', source: 'source-one'}]
     }, {
-        layers: [ {id: 'a', source: 'source-two'} ]
+        layers: [{id: 'a', source: 'source-two'}]
     })).toEqual([
         {command: 'removeLayer', args: ['a']},
         {command: 'addLayer', args: [{id: 'a', source: 'source-two'}, undefined]}

package/src/style-spec/empty.ts

@@ -1,6 +1,7 @@
 import latest from './reference/latest';
+import {StyleSpecification} from './types.g';
 
-export default function emptyStyle() {
+export default function emptyStyle(): StyleSpecification {
     const style = {};
 
     const version = latest['$version'];
@@ -25,5 +26,5 @@ export default function emptyStyle() {
         }
     }
 
-    return style;
+    return style as StyleSpecification;
 }

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

@@ -46,10 +46,6 @@ class CompoundExpression implements Expression {
         return false;
     }
 
-    serialize(): Array<unknown> {
-        return [this.name as unknown].concat(this.args.map(arg => arg.serialize()));
-    }
-
     static parse(args: ReadonlyArray<unknown>, context: ParsingContext): Expression {
         const op: string = (args[0] as any);
         const definition = CompoundExpression.definitions[op];

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

@@ -105,24 +105,6 @@ class Assertion implements Expression {
     outputDefined(): boolean {
         return this.args.every(arg => arg.outputDefined());
     }
-
-    serialize(): Array<unknown> {
-        const type = this.type;
-        const serialized = [type.kind as unknown];
-        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()));
-    }
 }
 
 export default Assertion;

package/src/style-spec/expression/definitions/at.ts

@@ -59,10 +59,6 @@ class At implements Expression {
     outputDefined() {
         return false;
     }
-
-    serialize() {
-        return ['at', this.index.serialize(), this.input.serialize()];
-    }
 }
 
 export default At;

package/src/style-spec/expression/definitions/case.ts

@@ -72,12 +72,6 @@ class Case implements Expression {
     outputDefined(): boolean {
         return this.branches.every(([_, out]) => out.outputDefined()) && this.otherwise.outputDefined();
     }
-
-    serialize() {
-        const serialized = ['case' as unknown];
-        this.eachChild(child => { serialized.push(child.serialize()); });
-        return serialized;
-    }
 }
 
 export default Case;

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

@@ -80,12 +80,6 @@ class Coalesce implements Expression {
     outputDefined(): boolean {
         return this.args.every(arg => arg.outputDefined());
     }
-
-    serialize() {
-        const serialized = ['coalesce' as unknown];
-        this.eachChild(child => { serialized.push(child.serialize()); });
-        return serialized;
-    }
 }
 
 export default Coalesce;

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

@@ -1,11 +1,9 @@
 import assert from 'assert';
 
 import {BooleanType, ColorType, NumberType, StringType, ValueType} from '../types';
-import {Color, toString as valueToString, validateRGBA} from '../values';
+import {Color, Padding, toString as valueToString, validateRGBA} from '../values';
 import RuntimeError from '../runtime_error';
 import Formatted from '../types/formatted';
-import FormatExpression from '../definitions/format';
-import ImageExpression from '../definitions/image';
 import ResolvedImage from '../types/resolved_image';
 
 import type {Expression} from '../expression';
@@ -83,7 +81,18 @@ class Coercion implements Expression {
                     }
                 }
             }
-            throw new RuntimeError(error || `Could not parse color from value '${typeof input === 'string' ? input : String(JSON.stringify(input))}'`);
+            throw new RuntimeError(error || `Could not parse color from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
+        } else if (this.type.kind === 'padding') {
+            let input;
+            for (const arg of this.args) {
+                input = arg.evaluate(ctx);
+
+                const pad = Padding.parse(input);
+                if (pad) {
+                    return pad;
+                }
+            }
+            throw new RuntimeError(`Could not parse padding from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
         } else if (this.type.kind === 'number') {
             let value = null;
             for (const arg of this.args) {
@@ -112,20 +121,6 @@ class Coercion implements Expression {
     outputDefined(): boolean {
         return this.args.every(arg => arg.outputDefined());
     }
-
-    serialize() {
-        if (this.type.kind === 'formatted') {
-            return new FormatExpression([{content: this.args[0], scale: null, font: null, textColor: null}]).serialize();
-        }
-
-        if (this.type.kind === 'resolvedImage') {
-            return new ImageExpression(this.args[0]).serialize();
-        }
-
-        const serialized = [`to-${this.type.kind}` as unknown];
-        this.eachChild(child => { serialized.push(child.serialize()); });
-        return serialized;
-    }
 }
 
 export default Coercion;

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

@@ -63,14 +63,4 @@ export default class CollatorExpression implements Expression {
         // possible outputs anyway, so we can get away with leaving this false for now.
         return false;
     }
-
-    serialize() {
-        const options = {};
-        options['case-sensitive'] = this.caseSensitive.serialize();
-        options['diacritic-sensitive'] = this.diacriticSensitive.serialize();
-        if (this.locale) {
-            options['locale'] = this.locale.serialize();
-        }
-        return ['collator', options];
-    }
 }

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

@@ -165,12 +165,6 @@ function makeComparison(op: ComparisonOperator, compareBasic, compareWithCollato
         outputDefined(): boolean {
             return true;
         }
-
-        serialize() {
-            const serialized = [op as unknown];
-            this.eachChild(child => { serialized.push(child.serialize()); });
-            return serialized;
-        }
     };
 }
 

package/src/style-spec/expression/definitions/format.ts

@@ -128,23 +128,4 @@ export default class FormatExpression implements Expression {
         // Usually, this.text will be undefined anyway
         return false;
     }
-
-    serialize() {
-        const serialized = ['format'] as (string | {})[];
-        for (const section of this.sections) {
-            serialized.push(section.content.serialize());
-            const options = {};
-            if (section.scale) {
-                options['font-scale'] = section.scale.serialize();
-            }
-            if (section.font) {
-                options['text-font'] = section.font.serialize();
-            }
-            if (section.textColor) {
-                options['text-color'] = section.textColor.serialize();
-            }
-            serialized.push(options);
-        }
-        return serialized;
-    }
 }

package/src/style-spec/expression/definitions/image.ts

@@ -43,8 +43,4 @@ export default class ImageExpression implements Expression {
         // The output of image is determined by the list of available images in the evaluation context
         return false;
     }
-
-    serialize() {
-        return ['image', this.input.serialize()];
-    }
 }

package/src/style-spec/expression/definitions/in.ts

@@ -70,10 +70,6 @@ class In implements Expression {
     outputDefined() {
         return true;
     }
-
-    serialize() {
-        return ['in', this.needle.serialize(), this.haystack.serialize()];
-    }
 }
 
 export default In;

package/src/style-spec/expression/definitions/index_of.ts

@@ -83,14 +83,6 @@ class IndexOf implements Expression {
     outputDefined() {
         return false;
     }
-
-    serialize() {
-        if (this.fromIndex != null && this.fromIndex !== undefined) {
-            const fromIndex = this.fromIndex.serialize();
-            return ['index-of', this.needle.serialize(), this.haystack.serialize(), fromIndex];
-        }
-        return ['index-of', this.needle.serialize(), this.haystack.serialize()];
-    }
 }
 
 export default IndexOf;

package/src/style-spec/expression/definitions/interpolate.ts

@@ -135,6 +135,7 @@ class Interpolate implements Expression {
 
         if (outputType.kind !== 'number' &&
             outputType.kind !== 'color' &&
+            outputType.kind !== 'padding' &&
             !(
                 outputType.kind === 'array' &&
                 outputType.itemType.kind === 'number' &&
@@ -192,31 +193,6 @@ class Interpolate implements Expression {
     outputDefined(): boolean {
         return this.outputs.every(out => out.outputDefined());
     }
-
-    serialize(): Array<unknown> {
-        let interpolation;
-        if (this.interpolation.name === 'linear') {
-            interpolation = ['linear'];
-        } else if (this.interpolation.name === 'exponential') {
-            if  (this.interpolation.base === 1) {
-                interpolation = ['linear'];
-            } else {
-                interpolation = ['exponential', this.interpolation.base];
-            }
-        } else {
-            interpolation = ['cubic-bezier' as unknown].concat(this.interpolation.controlPoints);
-        }
-
-        const serialized = [this.operator, interpolation, this.input.serialize()];
-
-        for (let i = 0; i < this.labels.length; i++) {
-            serialized.push(
-                this.labels[i],
-                this.outputs[i].serialize()
-            );
-        }
-        return serialized;
-    }
 }
 
 /**

package/src/style-spec/expression/definitions/length.ts

@@ -48,12 +48,6 @@ class Length implements Expression {
     outputDefined() {
         return false;
     }
-
-    serialize() {
-        const serialized = ['length' as unknown];
-        this.eachChild(child => { serialized.push(child.serialize()); });
-        return serialized;
-    }
 }
 
 export default Length;

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

@@ -56,15 +56,6 @@ class Let implements Expression {
     outputDefined() {
         return this.result.outputDefined();
     }
-
-    serialize() {
-        const serialized = ['let' as unknown];
-        for (const [name, expr] of this.bindings) {
-            serialized.push(name, expr.serialize());
-        }
-        serialized.push(this.result.serialize());
-        return serialized;
-    }
 }
 
 export default Let;

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

@@ -1,6 +1,4 @@
-import assert from 'assert';
-import {isValue, typeOf, Color} from '../values';
-import Formatted from '../types/formatted';
+import {isValue, typeOf} from '../values';
 
 import type {Type} from '../types';
 import type {Value}  from '../values';
@@ -50,26 +48,6 @@ class Literal implements Expression {
     outputDefined() {
         return true;
     }
-
-    serialize(): Array<unknown> {
-        if (this.type.kind === 'array' || this.type.kind === 'object') {
-            return ['literal', this.value];
-        } else if (this.value instanceof Color) {
-            // Constant-folding can generate Literal expressions that you
-            // couldn't actually generate with a "literal" expression,
-            // so we have to implement an equivalent serialization here
-            return ['rgba' as unknown].concat(this.value.toArray());
-        } else if (this.value instanceof Formatted) {
-            // Same as Color
-            return this.value.serialize();
-        } else {
-            assert(this.value === null ||
-                typeof this.value === 'string' ||
-                typeof this.value === 'number' ||
-                typeof this.value === 'boolean');
-            return this.value as any;
-        }
-    }
 }
 
 export default Literal;