@mapbox/mapbox-gl-style-spec 14.8.0-beta.1 → 14.9.0-beta.1

package/expression/definitions/coercion.ts

@@ -138,7 +138,7 @@ class Coercion implements Expression {
             // created by properties that expect the 'formatted' type.
             return Formatted.fromString(valueToString(this.args[0].evaluate(ctx)));
         } else if (this.type.kind === 'resolvedImage') {
-            return ResolvedImage.fromString(valueToString(this.args[0].evaluate(ctx)));
+            return ResolvedImage.build(valueToString(this.args[0].evaluate(ctx)));
         } else if (this.type.kind === 'array') {
             return this.args.map(arg => { return arg.evaluate(ctx); });
         } else {

package/expression/definitions/config.ts

@@ -19,7 +19,7 @@ function coerceValue(type: string, value: any): any {
         return Formatted.fromString(valueToString(value));
     }
     case 'resolvedImage': {
-        return ResolvedImage.fromString(valueToString(value));
+        return ResolvedImage.build(valueToString(value));
     }
     }
     return value;

package/expression/definitions/image.ts

@@ -1,20 +1,47 @@
-import {ResolvedImageType, StringType} from '../types';
+import {ColorType, ResolvedImageType, StringType} from '../types';
 import ResolvedImage from '../types/resolved_image';
+import {isExpression} from '..';
 
+import type Color from '../../util/color';
 import type {Expression, SerializedExpression} from '../expression';
 import type EvaluationContext from '../evaluation_context';
 import type ParsingContext from '../parsing_context';
 import type {Type} from '../types';
 
+export type ImageParams = Record<string, Expression>;
+
+export type ImageOptions = {
+    params: ImageParams;
+}
+
+function isImageOptions(value: unknown) {
+    if (typeof value !== 'string' && !isExpression(value)) {
+        return true;
+    }
+
+    return false;
+}
+
 export default class ImageExpression implements Expression {
     type: Type;
     inputPrimary: Expression;
+    inputPrimaryParams: Record<string, Expression> | undefined;
     inputSecondary: Expression | null | undefined;
+    inputSecondaryParams: Record<string, Expression> | undefined;
 
-    constructor(inputPrimary: Expression, inputSecondary?: Expression | null) {
+    _imageWarnHistory: Record<string, boolean> = {};
+
+    constructor(
+        inputPrimary: Expression,
+        inputSecondary?: Expression | null,
+        inputPrimaryParams?: Record<string, Expression>,
+        inputSecondaryParams?: Record<string, Expression>
+    ) {
         this.type = ResolvedImageType;
         this.inputPrimary = inputPrimary;
         this.inputSecondary = inputSecondary;
+        this.inputPrimaryParams = inputPrimaryParams;
+        this.inputSecondaryParams = inputSecondaryParams;
     }
 
     static parse(args: ReadonlyArray<unknown>, context: ParsingContext): Expression | null | undefined {
@@ -23,23 +50,126 @@ export default class ImageExpression implements Expression {
             return context.error(`Expected two or more arguments.`);
         }
 
-        const namePrimary = context.parse(args[1], 1, StringType);
-        // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'Expression'.
-        if (!namePrimary) return context.error(`No image name provided.`);
+        let nextArgId = 1;
+        const imageExpression: Array<{image: Expression, options: Record<string, Expression>}> = [];
+
+        function tryParseImage() {
+            if (nextArgId < args.length) {
+                const imageName = context.parse(args[nextArgId], nextArgId++, StringType);
+                if (!imageName) {
+                    context.error(imageExpression.length ? `Secondary image variant is not a string.` : `No image name provided.`);
+                    return false;
+                }
+
+                imageExpression.push({image: imageName, options: undefined});
+                return true;
+            }
+
+            return true;
+        }
+
+        function tryParseOptions() {
+            if (nextArgId < args.length) {
+                if (!isImageOptions(args[nextArgId])) {
+                    return true;
+                }
+
+                const params = (args[nextArgId] as ImageOptions).params;
+
+                const optionsContext = context.concat(nextArgId);
+
+                if (!params) {
+                    nextArgId++;
+                    return true;
+                }
+
+                if (typeof params !== 'object' || params.constructor !== Object) {
+                    optionsContext.error(`Image options \"params\" should be an object`);
+                    return false;
+                }
+
+                const parsed = {};
+
+                const childContext = optionsContext.concat(undefined, 'params');
+
+                for (const key in params) {
+                    if (!key) {
+                        childContext.error(`Image parameter name should be non-empty`);
+                        return false;
+                    }
+
+                    const value = childContext.concat(undefined, key).parse(params[key], undefined, ColorType, undefined, {typeAnnotation: 'coerce'});
+                    if (!value) {
+                        return false;
+                    }
+
+                    parsed[key] = value;
+                }
+
+                imageExpression[imageExpression.length - 1].options = parsed;
+                nextArgId++;
+
+                return true;
+            }
+
+            return true;
+        }
+
+        // Parse the primary and secondary image expressions
+        for (let i = 0; i < 2; i++) {
+            if (!tryParseImage() || !tryParseOptions()) {
+                return;
+            }
+        }
 
-        if (args.length === 2) {
-            return new ImageExpression(namePrimary);
+        return new ImageExpression(
+            imageExpression[0].image,
+            imageExpression[1] ? imageExpression[1].image : undefined,
+            imageExpression[0].options,
+            imageExpression[1] ? imageExpression[1].options : undefined
+        );
+    }
+
+    evaluateParams(ctx: EvaluationContext, params: Record<string, Expression> | undefined): {params: Record<string, Color>} {
+        const result: Record<string, Color> = {};
+        if (params) {
+            for (const key in params) {
+                if (params[key]) {
+                    try {
+                        const color = params[key].evaluate(ctx);
+                        const msg = `Ignoring image parameter "${key}" with semi-transparent color ${color.toString()}`;
+
+                        if (color.a !== 1) {
+                            if (!this._imageWarnHistory[msg]) {
+                                console.warn(msg);
+                                this._imageWarnHistory[msg] = true;
+                            }
+                            continue;
+                        }
+                        result[key] = color;
+                    } catch (err) {
+                        continue;
+                    }
+                }
+            }
+        } else {
+            return undefined;
         }
 
-        const nameSecondary = context.parse(args[2], 1, StringType);
-        // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'Expression'.
-        if (!nameSecondary) return context.error(`Secondary image variant is not a string.`);
+        if (Object.keys(result).length === 0) {
+            return undefined;
+        }
 
-        return new ImageExpression(namePrimary, nameSecondary);
+        return {params: result};
     }
 
     evaluate(ctx: EvaluationContext): null | ResolvedImage {
-        const value = ResolvedImage.fromString(this.inputPrimary.evaluate(ctx), this.inputSecondary ? this.inputSecondary.evaluate(ctx) : undefined);
+        const value = ResolvedImage.build(
+            this.inputPrimary.evaluate(ctx),
+            this.inputSecondary ? this.inputSecondary.evaluate(ctx) : undefined,
+            this.inputPrimaryParams ? this.evaluateParams(ctx, this.inputPrimaryParams) : undefined,
+            this.inputSecondaryParams ? this.evaluateParams(ctx, this.inputSecondaryParams) : undefined
+        );
         if (value && ctx.availableImages) {
             value.available = ctx.availableImages.indexOf(value.namePrimary) > -1;
             // If there's a secondary variant, only mark it available if both are present
@@ -53,8 +183,22 @@ export default class ImageExpression implements Expression {
 
     eachChild(fn: (_: Expression) => void) {
         fn(this.inputPrimary);
+        if (this.inputPrimaryParams) {
+            for (const key in this.inputPrimaryParams) {
+                if (this.inputPrimaryParams[key]) {
+                    fn(this.inputPrimaryParams[key]);
+                }
+            }
+        }
         if (this.inputSecondary) {
             fn(this.inputSecondary);
+            if (this.inputSecondaryParams) {
+                for (const key in this.inputSecondaryParams) {
+                    if (this.inputSecondaryParams[key]) {
+                        fn(this.inputSecondaryParams[key]);
+                    }
+                }
+            }
         }
     }
 
@@ -63,10 +207,36 @@ export default class ImageExpression implements Expression {
         return false;
     }
 
+    serializeParams(params: Record<string, Expression> | undefined): {params: Record<string, SerializedExpression>} {
+        const result: Record<string, SerializedExpression> = {};
+        if (params) {
+            for (const key in params) {
+                if (params[key]) {
+                    result[key] = params[key].serialize();
+                }
+            }
+        } else {
+            return undefined;
+        }
+
+        return {params: result};
+    }
+
     serialize(): SerializedExpression {
+        const serialized: SerializedExpression = ["image", this.inputPrimary.serialize()];
+
+        if (this.inputPrimaryParams) {
+            serialized.push(this.serializeParams(this.inputPrimaryParams));
+        }
+
         if (this.inputSecondary) {
-            return ["image", this.inputPrimary.serialize(), this.inputSecondary.serialize()];
+            serialized.push(this.inputSecondary.serialize());
+
+            if (this.inputSecondaryParams) {
+                serialized.push(this.serializeParams(this.inputSecondaryParams));
+            }
         }
-        return ["image", this.inputPrimary.serialize()];
+
+        return serialized;
     }
 }

package/expression/definitions/index.ts

@@ -182,6 +182,13 @@ CompoundExpression.register(expressions, {
             return v.evaluate(ctx).toRenderColor(null).toArray();
         }
     ],
+    'to-hsla': [
+        array(NumberType, 4),
+        [ColorType],
+        (ctx, [v]) => {
+            return v.evaluate(ctx).toRenderColor(null).toHslaArray();
+        }
+    ],
     'rgb': [
         ColorType,
         [NumberType, NumberType, NumberType],

package/expression/definitions/interpolate.ts

@@ -1,8 +1,10 @@
 import UnitBezier from '@mapbox/unitbezier';
 import * as interpolate from '../../util/interpolate';
-import {toString, NumberType, ColorType} from '../types';
+import {toString, NumberType, ColorType, ValueType} from '../types';
 import {findStopLessThanOrEqualTo} from '../stops';
 import {hcl, lab} from '../../util/color_spaces';
+import Literal from './literal';
+import RuntimeError from '../runtime_error';
 
 import type Color from '../../util/color';
 import type {Stops} from '../stops';
@@ -27,14 +29,16 @@ class Interpolate implements Expression {
     operator: 'interpolate' | 'interpolate-hcl' | 'interpolate-lab';
     interpolation: InterpolationType;
     input: Expression;
+    dynamicStops: Expression | null;
     labels: Array<number>;
     outputs: Array<Expression>;
 
-    constructor(type: Type, operator: 'interpolate' | 'interpolate-hcl' | 'interpolate-lab', interpolation: InterpolationType, input: Expression, stops: Stops) {
+    constructor(type: Type, operator: 'interpolate' | 'interpolate-hcl' | 'interpolate-lab', interpolation: InterpolationType, input: Expression, dynamicStops: Expression | null, stops: Stops) {
         this.type = type;
         this.operator = operator;
         this.interpolation = interpolation;
         this.input = input;
+        this.dynamicStops = dynamicStops;
 
         this.labels = [];
         this.outputs = [];
@@ -101,12 +105,12 @@ class Interpolate implements Expression {
             return context.error(`Unknown interpolation type ${String(interpolation[0])}`, 1, 0);
         }
 
-        if (args.length - 1 < 4) {
+        if (args.length - 1 < 3) {
             // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'Interpolate'.
-            return context.error(`Expected at least 4 arguments, but found only ${args.length - 1}.`);
+            return context.error(`Expected at least 3 arguments, but found only ${args.length - 1}.`);
         }
 
-        if ((args.length - 1) % 2 !== 0) {
+        if (args.length - 1 > 3 && (args.length - 1) % 2 !== 0) {
             // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'Interpolate'.
             return context.error(`Expected an even number of arguments.`);
         }
@@ -123,6 +127,15 @@ class Interpolate implements Expression {
             outputType = context.expectedType;
         }
 
+        // Exactly 3 arguments means that the steps are created by an expression
+        if (args.length - 1 === 3) {
+            const dynamicStops = context.parse(rest[0], 3, ValueType);
+            if (!dynamicStops) return null;
+
+            // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'InterpolationType'.
+            return new Interpolate(outputType, (operator as any), interpolation, input, dynamicStops, stops);
+        }
+
         for (let i = 0; i < rest.length; i += 2) {
             const label = rest[i];
             const value = rest[i + 1];
@@ -159,12 +172,36 @@ class Interpolate implements Expression {
         }
 
         // @ts-expect-error - TS2345 - Argument of type 'unknown' is not assignable to parameter of type 'InterpolationType'.
-        return new Interpolate(outputType, (operator as any), interpolation, input, stops);
+        return new Interpolate(outputType, (operator as any), interpolation, input, null, stops);
     }
 
     evaluate(ctx: EvaluationContext): Color {
-        const labels = this.labels;
-        const outputs = this.outputs;
+        let labels = this.labels;
+        let outputs = this.outputs;
+
+        if (this.dynamicStops) {
+            const dynamicStopsValue = (this.dynamicStops.evaluate(ctx) as [number]);
+            if (dynamicStopsValue.length % 2 !== 0) {
+                throw new RuntimeError('Expected an even number of arguments.');
+            }
+            labels = [];
+            outputs = [];
+            for (let i = 0; i < dynamicStopsValue.length; i += 2) {
+                const label = dynamicStopsValue[i];
+                const output = new Literal(NumberType, dynamicStopsValue[i + 1]);
+                if (typeof label !== 'number') {
+                    throw new RuntimeError('Input/output pairs for "interpolate" expressions must be defined using literal numeric values (not computed expressions) for the input values.');
+                }
+                if (labels.length && labels[labels.length - 1] >= label) {
+                    throw new RuntimeError('Input/output pairs for "interpolate" expressions must be arranged with input values in strictly ascending order.');
+                }
+                labels.push(label);
+                outputs.push(output);
+            }
+            if (labels.length === 0) {
+                throw new RuntimeError('Expected at least one input/output pair.');
+            }
+        }
 
         if (labels.length === 1) {
             return outputs[0].evaluate(ctx);
@@ -225,11 +262,15 @@ class Interpolate implements Expression {
 
         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()
-            );
+        if (this.dynamicStops) {
+            serialized.push(this.dynamicStops.serialize());
+        } else {
+            for (let i = 0; i < this.labels.length; i++) {
+                serialized.push(
+                    this.labels[i],
+                    this.outputs[i].serialize()
+                );
+            }
         }
         return serialized;
     }

package/expression/expression.ts

@@ -22,6 +22,7 @@ export type ExpressionParser = (args: ReadonlyArray<unknown>, context: ParsingCo
 export type ExpressionRegistration = {
     new(...args: any[]): Expression;
     readonly parse: ExpressionParser;
+    _classRegistryKey?: string;
 };
 
 export type ExpressionRegistry = {

package/expression/index.ts

@@ -16,7 +16,8 @@ import {
     supportsPropertyExpression,
     supportsZoomExpression,
     supportsLightExpression,
-    supportsInterpolation
+    supportsInterpolation,
+    supportsLineProgressExpression
 } from '../util/properties';
 import {isFunction, createFunction} from '../function/index';
 import {Color} from './values';
@@ -71,6 +72,7 @@ export class StyleExpression {
     _defaultValue: Value;
     _warningHistory: {[key: string]: boolean};
     _enumValues?: {[_: string]: unknown};
+    configDependencies: Set<string>;
 
     constructor(expression: Expression, propertySpec?: StylePropertySpecification, scope?: string, options?: ConfigOptions) {
         this.expression = expression;
@@ -78,6 +80,7 @@ export class StyleExpression {
         this._evaluator = new EvaluationContext(scope, options);
         this._defaultValue = propertySpec ? getDefaultValue(propertySpec) : null;
         this._enumValues = propertySpec && propertySpec.type === 'enum' ? propertySpec.values : null;
+        this.configDependencies = isConstant.getConfigDependencies(expression);
     }
 
     evaluateWithoutErrorHandling(
@@ -183,11 +186,13 @@ export class ZoomConstantExpression<Kind extends EvaluationKind> {
     configDependencies: Set<string>;
     _styleExpression: StyleExpression;
     isLightConstant: boolean | null | undefined;
+    isLineProgressConstant: boolean | null | undefined;
 
-    constructor(kind: Kind, expression: StyleExpression, isLightConstant?: boolean | null) {
+    constructor(kind: Kind, expression: StyleExpression, isLightConstant?: boolean | null, isLineProgressConstant?: boolean | null) {
         this.kind = kind;
         this._styleExpression = expression;
         this.isLightConstant = isLightConstant;
+        this.isLineProgressConstant = isLineProgressConstant;
         this.isStateDependent = kind !== ('constant' as EvaluationKind) && !isConstant.isStateConstant(expression.expression);
         this.configDependencies = isConstant.getConfigDependencies(expression.expression);
     }
@@ -220,17 +225,19 @@ export class ZoomDependentExpression<Kind extends EvaluationKind> {
     zoomStops: Array<number>;
     isStateDependent: boolean;
     isLightConstant: boolean | null | undefined;
+    isLineProgressConstant: boolean | null | undefined;
     configDependencies: Set<string>;
 
     _styleExpression: StyleExpression;
     interpolationType: InterpolationType | null | undefined;
 
-    constructor(kind: Kind, expression: StyleExpression, zoomStops: Array<number>, interpolationType?: InterpolationType, isLightConstant?: boolean | null) {
+    constructor(kind: Kind, expression: StyleExpression, zoomStops: Array<number>, interpolationType?: InterpolationType, isLightConstant?: boolean | null, isLineProgressConstant?: boolean | null) {
         this.kind = kind;
         this.zoomStops = zoomStops;
         this._styleExpression = expression;
         this.isStateDependent = kind !== ('camera' as EvaluationKind) && !isConstant.isStateConstant(expression.expression);
         this.isLightConstant = isLightConstant;
+        this.isLineProgressConstant = isLineProgressConstant;
         this.configDependencies = isConstant.getConfigDependencies(expression.expression);
         this.interpolationType = interpolationType;
     }
@@ -282,6 +289,7 @@ export type SourceExpression = {
     kind: 'source';
     isStateDependent: boolean;
     isLightConstant: boolean | null | undefined;
+    isLineProgressConstant: boolean | null | undefined;
     configDependencies: Set<string>;
     readonly evaluate: (
         globals: GlobalProperties,
@@ -313,6 +321,7 @@ export interface CompositeExpression {
     kind: 'composite';
     isStateDependent: boolean;
     isLightConstant: boolean | null | undefined;
+    isLineProgressConstant: boolean | null | undefined;
     configDependencies: Set<string>;
     readonly evaluate: (
         globals: GlobalProperties,
@@ -360,6 +369,11 @@ export function createPropertyExpression(
         return error([new ParsingError('', 'measure-light expression not supported')]);
     }
 
+    const isLineProgressConstant = isConstant.isGlobalPropertyConstant(parsed, ['line-progress']);
+    if (!isLineProgressConstant && !supportsLineProgressExpression(propertySpec)) {
+        return error([new ParsingError('', 'line-progress expression not supported')]);
+    }
+
     const canRelaxZoomRestriction = propertySpec.expression && propertySpec.expression.relaxZoomRestriction;
     const zoomCurve = findZoomCurve(parsed);
     if (!zoomCurve && !isZoomConstant && !canRelaxZoomRestriction) {
@@ -371,20 +385,20 @@ export function createPropertyExpression(
     }
 
     if (!zoomCurve) {
-        return success(isFeatureConstant ?
+        return success((isFeatureConstant && isLineProgressConstant) ?
         // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'unknown'.
-            (new ZoomConstantExpression('constant', expression.value, isLightConstant) as ConstantExpression) :
+            (new ZoomConstantExpression('constant', expression.value, isLightConstant, isLineProgressConstant) as ConstantExpression) :
         // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'unknown'.
-            (new ZoomConstantExpression('source', expression.value, isLightConstant) as SourceExpression));
+            (new ZoomConstantExpression('source', expression.value, isLightConstant, isLineProgressConstant) as SourceExpression));
     }
 
     const interpolationType = zoomCurve instanceof Interpolate ? zoomCurve.interpolation : undefined;
 
-    return success(isFeatureConstant ?
+    return success((isFeatureConstant && isLineProgressConstant) ?
     // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'unknown'.
-        (new ZoomDependentExpression('camera', expression.value, zoomCurve.labels, interpolationType, isLightConstant) as CameraExpression) :
+        (new ZoomDependentExpression('camera', expression.value, zoomCurve.labels, interpolationType, isLightConstant, isLineProgressConstant) as CameraExpression) :
     // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'unknown'.
-        (new ZoomDependentExpression('composite', expression.value, zoomCurve.labels, interpolationType, isLightConstant) as CompositeExpression));
+        (new ZoomDependentExpression('composite', expression.value, zoomCurve.labels, interpolationType, isLightConstant, isLineProgressConstant) as CompositeExpression));
 }
 
 // serialization wrapper for old-style stop functions normalized to the

package/expression/types/formatted.ts

@@ -32,7 +32,7 @@ export default class Formatted {
     isEmpty(): boolean {
         if (this.sections.length === 0) return true;
         return !this.sections.some(section => section.text.length !== 0 ||
-                                             (section.image && section.image.namePrimary.length !== 0));
+                                             (section.image && section.image.namePrimary));
     }
 
     static factory(text: Formatted | string): Formatted {

package/expression/types/image_id_with_options.ts

@@ -0,0 +1,54 @@
+import type {RasterizationOptions} from "./resolved_image";
+
+export class ImageIdWithOptions {
+    id: string;
+    options: RasterizationOptions;
+
+    constructor(id: string, options?: RasterizationOptions) {
+        this.id = id;
+        this.options = options || {params: {}};
+
+        if (!this.options.transform) {
+            this.options.transform = new DOMMatrix([1, 0, 0, 1, 0, 0]);
+        } else {
+            const {a, b, c, d, e, f} = this.options.transform;
+            this.options.transform = new DOMMatrix([a, b, c, d, e, f]);
+        }
+    }
+
+    static deserializeFromString(serialized: string): ImageIdWithOptions {
+        const deserializedObject = JSON.parse(serialized);
+        const options: RasterizationOptions = {params: deserializedObject.options.params};
+
+        const {a, b, c, d, e, f} = deserializedObject.options.transform;
+
+        options.transform = new DOMMatrix([a, b, c, d, e, f]);
+
+        return new ImageIdWithOptions(deserializedObject.id, deserializedObject.options);
+    }
+
+    scaleSelf(factor: number): this {
+        this.options.transform = this.options.transform.scale(factor);
+        return this;
+    }
+
+    serialize(): string {
+        const serialisedObject: Record<string, any> = {
+            id: this.id,
+        };
+
+        if (this.options) {
+            serialisedObject.options = this.options;
+        }
+
+        const {
+            a, b, c, d, e, f,
+        } = this.options.transform;
+
+        serialisedObject.options.transform = {
+            a, b, c, d, e, f,
+        };
+
+        return JSON.stringify(serialisedObject);
+    }
+}