@scoova/mgl 1.0.0

package/src/style/style_layer.test.ts

@@ -0,0 +1,372 @@
+import {createStyleLayer} from './create_style_layer';
+import {FillStyleLayer} from './style_layer/fill_style_layer';
+import {extend} from '../util/util';
+import {Color, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {EvaluationParameters} from './evaluation_parameters';
+import {TransitionParameters} from './properties';
+import {BackgroundStyleLayer} from './style_layer/background_style_layer';
+import {SymbolStyleLayer} from './style_layer/symbol_style_layer';
+
+describe('StyleLayer', () => {
+    test('instantiates the correct subclass', () => {
+        const layer = createStyleLayer({type: 'fill'} as LayerSpecification);
+
+        expect(layer instanceof FillStyleLayer).toBeTruthy();
+    });
+});
+
+describe('StyleLayer#setPaintProperty', () => {
+    test('sets new property value', () => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background'
+        });
+
+        layer.setPaintProperty('background-color', 'blue');
+
+        expect(layer.getPaintProperty('background-color')).toBe('blue');
+    });
+
+    test('updates property value', () => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background',
+            'paint': {
+                'background-color': 'red'
+            }
+        });
+
+        layer.setPaintProperty('background-color', 'blue');
+
+        expect(layer.getPaintProperty('background-color')).toBe('blue');
+    });
+
+    test('unsets value', () => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background',
+            'paint': {
+                'background-color': 'red',
+                'background-opacity': 1
+            }
+        }) as BackgroundStyleLayer;
+
+        layer.setPaintProperty('background-color', null);
+        layer.updateTransitions({} as TransitionParameters);
+        layer.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters, undefined);
+
+        expect(layer.paint.get('background-color')).toEqual(new Color(0, 0, 0, 1));
+        expect(layer.getPaintProperty('background-color')).toBeUndefined();
+        expect(layer.paint.get('background-opacity')).toBe(1);
+        expect(layer.getPaintProperty('background-opacity')).toBe(1);
+    });
+
+    test('preserves existing transition', () => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background',
+            'paint': {
+                'background-color': 'red',
+                'background-color-transition': {
+                    duration: 600
+                }
+            } as any
+        });
+
+        layer.setPaintProperty('background-color', 'blue');
+
+        expect(layer.getPaintProperty('background-color-transition')).toEqual({duration: 600});
+    });
+
+    test('sets transition', () => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background',
+            'paint': {
+                'background-color': 'red'
+            }
+        });
+
+        layer.setPaintProperty('background-color-transition', {duration: 400});
+
+        expect(layer.getPaintProperty('background-color-transition')).toEqual({duration: 400});
+    });
+
+    test('emits on an invalid property value', () => new Promise<void>(done => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background'
+        });
+
+        layer.on('error', () => {
+            expect(layer.getPaintProperty('background-opacity')).toBeUndefined();
+            done();
+        });
+
+        layer.setPaintProperty('background-opacity', 5);
+    }));
+
+    test('emits on an invalid transition property value', () => new Promise<void>(done => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background'
+        });
+
+        layer.on('error', () => {
+            done();
+        });
+
+        layer.setPaintProperty('background-opacity-transition', {
+            duration: -10
+        });
+    }));
+
+    test('can unset fill-outline-color #2886', () => {
+        const layer = createStyleLayer({
+            id: 'building',
+            type: 'fill',
+            source: 'streets',
+            paint: {
+                'fill-color': '#00f'
+            }
+        }) as FillStyleLayer;
+
+        layer.setPaintProperty('fill-outline-color', '#f00');
+        layer.updateTransitions({} as TransitionParameters);
+        layer.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters, undefined);
+        expect(layer.paint.get('fill-outline-color').value).toEqual({kind: 'constant', value: new Color(1, 0, 0, 1)});
+
+        layer.setPaintProperty('fill-outline-color', undefined);
+        layer.updateTransitions({} as TransitionParameters);
+        layer.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters, undefined);
+        expect(layer.paint.get('fill-outline-color').value).toEqual({kind: 'constant', value: new Color(0, 0, 1, 1)});
+
+    });
+
+    test('can transition fill-outline-color from undefined to a value #3657', () => {
+        const layer = createStyleLayer({
+            id: 'building',
+            type: 'fill',
+            source: 'streets',
+            paint: {
+                'fill-color': '#00f'
+            }
+        }) as FillStyleLayer;
+
+        // setup: set and then unset fill-outline-color so that, when we then try
+        // to re-set it, StyleTransition#calculate() attempts interpolation
+        layer.setPaintProperty('fill-outline-color', '#f00');
+        layer.updateTransitions({} as TransitionParameters);
+        layer.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters, undefined);
+
+        layer.setPaintProperty('fill-outline-color', undefined);
+        layer.updateTransitions({} as TransitionParameters);
+        layer.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters, undefined);
+
+        // re-set fill-outline-color and get its value, triggering the attempt
+        // to interpolate between undefined and #f00
+        layer.setPaintProperty('fill-outline-color', '#f00');
+        layer.updateTransitions({} as TransitionParameters);
+        layer.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters, undefined);
+
+        layer.paint.get('fill-outline-color');
+
+    });
+
+    test('sets null property value', () => {
+        const layer = createStyleLayer({
+            'id': 'background',
+            'type': 'background'
+        });
+
+        layer.setPaintProperty('background-color-transition', null);
+
+        expect(layer.getPaintProperty('background-color-transition')).toBeUndefined();
+    });
+
+});
+
+describe('StyleLayer#setLayoutProperty', () => {
+    test('sets new property value', () => {
+        const layer = createStyleLayer({
+            'id': 'symbol',
+            'type': 'symbol'
+        } as LayerSpecification);
+
+        layer.setLayoutProperty('text-transform', 'lowercase');
+
+        expect(layer.getLayoutProperty('text-transform')).toBe('lowercase');
+    });
+
+    test('emits on an invalid property value', () => new Promise<void>(done => {
+        const layer = createStyleLayer({
+            'id': 'symbol',
+            'type': 'symbol'
+        } as LayerSpecification);
+
+        layer.on('error', () => {
+            done();
+        });
+
+        layer.setLayoutProperty('text-transform', 'invalidValue');
+    }));
+
+    test('updates property value', () => {
+        const layer = createStyleLayer({
+            'id': 'symbol',
+            'type': 'symbol',
+            'layout': {
+                'text-transform': 'uppercase'
+            }
+        } as LayerSpecification);
+
+        layer.setLayoutProperty('text-transform', 'lowercase');
+
+        expect(layer.getLayoutProperty('text-transform')).toBe('lowercase');
+    });
+
+    test('unsets property value', () => {
+        const layer = createStyleLayer({
+            'id': 'symbol',
+            'type': 'symbol',
+            'layout': {
+                'text-transform': 'uppercase'
+            }
+        } as LayerSpecification) as SymbolStyleLayer;
+
+        layer.setLayoutProperty('text-transform', null);
+        layer.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters, undefined);
+
+        expect(layer.layout.get('text-transform').value).toEqual({kind: 'constant', value: 'none'});
+        expect(layer.getLayoutProperty('text-transform')).toBeUndefined();
+    });
+});
+
+describe('StyleLayer#serialize', () => {
+
+    function createSymbolLayer(layer?) {
+        return extend({
+            id: 'symbol',
+            type: 'symbol',
+            paint: {
+                'text-color': 'blue'
+            },
+            layout: {
+                'text-transform': 'uppercase'
+            }
+        }, layer);
+    }
+
+    test('serializes layers', () => {
+        expect(createStyleLayer(createSymbolLayer()).serialize()).toEqual(createSymbolLayer());
+    });
+
+    test('serializes functions', () => {
+        const layerPaint = {
+            'text-color': {
+                base: 2,
+                stops: [[0, 'red'], [1, 'blue']]
+            }
+        };
+
+        expect(createStyleLayer(createSymbolLayer({paint: layerPaint})).serialize().paint).toEqual(layerPaint);
+    });
+
+    test('serializes added paint properties', () => {
+        const layer = createStyleLayer(createSymbolLayer());
+        layer.setPaintProperty('text-halo-color', 'orange');
+
+        expect(layer.serialize().paint['text-halo-color']).toBe('orange');
+        expect(layer.serialize().paint['text-color']).toBe('blue');
+
+    });
+
+    test('serializes added layout properties', () => {
+        const layer = createStyleLayer(createSymbolLayer());
+        layer.setLayoutProperty('text-size', 20);
+
+        expect(layer.serialize().layout['text-transform']).toBe('uppercase');
+        expect(layer.serialize().layout['text-size']).toBe(20);
+
+    });
+
+    test('serializes "visibility" of "visible"', () => {
+        const layer = createStyleLayer(createSymbolLayer());
+        layer.setLayoutProperty('visibility', 'visible');
+
+        expect(layer.serialize().layout['visibility']).toBe('visible');
+
+    });
+
+    test('serializes "visibility" of "none"', () => {
+        const layer = createStyleLayer(createSymbolLayer());
+        layer.setLayoutProperty('visibility', 'none');
+
+        expect(layer.serialize().layout['visibility']).toBe('none');
+
+    });
+
+    test('serializes "visibility" of undefined', () => {
+        const layer = createStyleLayer(createSymbolLayer());
+        layer.setLayoutProperty('visibility', undefined);
+
+        expect(layer.serialize().layout['visibility']).toBeUndefined();
+
+    });
+
+});
+
+describe('StyleLayer#serialize', () => {
+
+    function createSymbolLayer(layer?) {
+        return extend({
+            id: 'symbol',
+            type: 'symbol',
+            paint: {
+                'text-color': 'blue'
+            },
+            layout: {
+                'text-transform': 'uppercase'
+            }
+        }, layer);
+    }
+
+    test('serializes layers', () => {
+        expect(createStyleLayer(createSymbolLayer()).serialize()).toEqual(createSymbolLayer());
+    });
+
+    test('serializes functions', () => {
+        const layerPaint = {
+            'text-color': {
+                base: 2,
+                stops: [[0, 'red'], [1, 'blue']]
+            }
+        };
+
+        expect(createStyleLayer(createSymbolLayer({paint: layerPaint})).serialize().paint).toEqual(layerPaint);
+    });
+
+    test('serializes added paint properties', () => {
+        const layer = createStyleLayer(createSymbolLayer());
+        layer.setPaintProperty('text-halo-color', 'orange');
+
+        expect(layer.serialize().paint['text-halo-color']).toBe('orange');
+        expect(layer.serialize().paint['text-color']).toBe('blue');
+
+    });
+
+    test('serializes added layout properties', () => {
+        const layer = createStyleLayer(createSymbolLayer());
+        layer.setLayoutProperty('text-size', 20);
+
+        expect(layer.serialize().layout['text-transform']).toBe('uppercase');
+        expect(layer.serialize().layout['text-size']).toBe(20);
+
+    });
+
+    test('layer.paint is never undefined', () => {
+        const layer = createStyleLayer({type: 'fill'} as LayerSpecification);
+        // paint is never undefined
+        expect(layer.paint).toBeTruthy();
+    });
+});

package/src/style/style_layer.ts

@@ -0,0 +1,287 @@
+import {filterObject} from '../util/util';
+
+import {latest as styleSpec, supportsPropertyExpression} from '@maplibre/maplibre-gl-style-spec';
+import {
+    validateStyle,
+    validateLayoutProperty,
+    validatePaintProperty,
+    emitValidationErrors
+} from './validate_style';
+import {Evented} from '../util/evented';
+import {Layout, Transitionable, Transitioning, Properties, PossiblyEvaluated, PossiblyEvaluatedPropertyValue} from './properties';
+
+import type {Bucket} from '../data/bucket';
+import type Point from '@mapbox/point-geometry';
+import type {FeatureFilter, FeatureState,
+    LayerSpecification,
+    FilterSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {TransitionParameters, PropertyValue} from './properties';
+import {EvaluationParameters} from './evaluation_parameters';
+import type {CrossfadeParameters} from './evaluation_parameters';
+
+import type {Transform} from '../geo/transform';
+import type {CustomLayerInterface} from './style_layer/custom_style_layer';
+import type {Map} from '../ui/map';
+import type {StyleSetterOptions} from './style';
+import {mat4} from 'gl-matrix';
+import type {VectorTileFeature} from '@mapbox/vector-tile';
+
+const TRANSITION_SUFFIX = '-transition';
+
+/**
+ * A base class for style layers
+ */
+export abstract class StyleLayer extends Evented {
+    id: string;
+    metadata: unknown;
+    type: LayerSpecification['type'] | CustomLayerInterface['type'];
+    source: string;
+    sourceLayer: string;
+    minzoom: number;
+    maxzoom: number;
+    filter: FilterSpecification | void;
+    visibility: 'visible' | 'none' | void;
+    _crossfadeParameters: CrossfadeParameters;
+
+    _unevaluatedLayout: Layout<any>;
+    readonly layout: unknown;
+
+    _transitionablePaint: Transitionable<any>;
+    _transitioningPaint: Transitioning<any>;
+    readonly paint: unknown;
+
+    _featureFilter: FeatureFilter;
+
+    readonly onAdd: ((map: Map) => void);
+    readonly onRemove: ((map: Map) => void);
+
+    queryRadius?(bucket: Bucket): number;
+    queryIntersectsFeature?(
+        queryGeometry: Array<Point>,
+        feature: VectorTileFeature,
+        featureState: FeatureState,
+        geometry: Array<Array<Point>>,
+        zoom: number,
+        transform: Transform,
+        pixelsToTileUnits: number,
+        pixelPosMatrix: mat4
+    ): boolean | number;
+
+    constructor(layer: LayerSpecification | CustomLayerInterface, properties: Readonly<{
+        layout?: Properties<any>;
+        paint?: Properties<any>;
+    }>) {
+        super();
+
+        this.id = layer.id;
+        this.type = layer.type;
+        this._featureFilter = {filter: () => true, needGeometry: false};
+
+        if (layer.type === 'custom') return;
+
+        layer = (layer as any as LayerSpecification);
+
+        this.metadata = layer.metadata;
+        this.minzoom = layer.minzoom;
+        this.maxzoom = layer.maxzoom;
+
+        if (layer.type !== 'background') {
+            this.source = layer.source;
+            this.sourceLayer = layer['source-layer'];
+            this.filter = layer.filter;
+        }
+
+        if (properties.layout) {
+            this._unevaluatedLayout = new Layout(properties.layout);
+        }
+
+        if (properties.paint) {
+            this._transitionablePaint = new Transitionable(properties.paint);
+
+            for (const property in layer.paint) {
+                this.setPaintProperty(property, layer.paint[property], {validate: false});
+            }
+            for (const property in layer.layout) {
+                this.setLayoutProperty(property, layer.layout[property], {validate: false});
+            }
+
+            this._transitioningPaint = this._transitionablePaint.untransitioned();
+            //$FlowFixMe
+            this.paint = new PossiblyEvaluated(properties.paint);
+        }
+    }
+
+    getCrossfadeParameters() {
+        return this._crossfadeParameters;
+    }
+
+    getLayoutProperty(name: string) {
+        if (name === 'visibility') {
+            return this.visibility;
+        }
+
+        return this._unevaluatedLayout.getValue(name);
+    }
+
+    setLayoutProperty(name: string, value: any, options: StyleSetterOptions = {}) {
+        if (value !== null && value !== undefined) {
+            const key = `layers.${this.id}.layout.${name}`;
+            if (this._validate(validateLayoutProperty, key, name, value, options)) {
+                return;
+            }
+        }
+
+        if (name === 'visibility') {
+            this.visibility = value;
+            return;
+        }
+
+        this._unevaluatedLayout.setValue(name, value);
+    }
+
+    getPaintProperty(name: string) {
+        if (name.endsWith(TRANSITION_SUFFIX)) {
+            return this._transitionablePaint.getTransition(name.slice(0, -TRANSITION_SUFFIX.length));
+        } else {
+            return this._transitionablePaint.getValue(name);
+        }
+    }
+
+    setPaintProperty(name: string, value: unknown, options: StyleSetterOptions = {}) {
+        if (value !== null && value !== undefined) {
+            const key = `layers.${this.id}.paint.${name}`;
+            if (this._validate(validatePaintProperty, key, name, value, options)) {
+                return false;
+            }
+        }
+
+        if (name.endsWith(TRANSITION_SUFFIX)) {
+            this._transitionablePaint.setTransition(name.slice(0, -TRANSITION_SUFFIX.length), (value as any) || undefined);
+            return false;
+        } else {
+            const transitionable = this._transitionablePaint._values[name];
+            const isCrossFadedProperty = transitionable.property.specification['property-type'] === 'cross-faded-data-driven';
+            const wasDataDriven = transitionable.value.isDataDriven();
+            const oldValue = transitionable.value;
+
+            this._transitionablePaint.setValue(name, value);
+            this._handleSpecialPaintPropertyUpdate(name);
+
+            const newValue = this._transitionablePaint._values[name].value;
+            const isDataDriven = newValue.isDataDriven();
+
+            // if a cross-faded value is changed, we need to make sure the new icons get added to each tile's iconAtlas
+            // so a call to _updateLayer is necessary, and we return true from this function so it gets called in
+            // Style#setPaintProperty
+            return isDataDriven || wasDataDriven || isCrossFadedProperty || this._handleOverridablePaintPropertyUpdate(name, oldValue, newValue);
+        }
+    }
+
+    _handleSpecialPaintPropertyUpdate(_: string) {
+        // No-op; can be overridden by derived classes.
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleOverridablePaintPropertyUpdate<T, R>(name: string, oldValue: PropertyValue<T, R>, newValue: PropertyValue<T, R>): boolean {
+        // No-op; can be overridden by derived classes.
+        return false;
+    }
+
+    isHidden(zoom: number) {
+        if (this.minzoom && zoom < this.minzoom) return true;
+        if (this.maxzoom && zoom >= this.maxzoom) return true;
+        return this.visibility === 'none';
+    }
+
+    updateTransitions(parameters: TransitionParameters) {
+        this._transitioningPaint = this._transitionablePaint.transitioned(parameters, this._transitioningPaint);
+    }
+
+    hasTransition() {
+        return this._transitioningPaint.hasTransition();
+    }
+
+    recalculate(parameters: EvaluationParameters, availableImages: Array<string>) {
+        if (parameters.getCrossfadeParameters) {
+            this._crossfadeParameters = parameters.getCrossfadeParameters();
+        }
+
+        if (this._unevaluatedLayout) {
+            (this as any).layout = this._unevaluatedLayout.possiblyEvaluate(parameters, undefined, availableImages);
+        }
+
+        (this as any).paint = this._transitioningPaint.possiblyEvaluate(parameters, undefined, availableImages);
+    }
+
+    serialize(): LayerSpecification {
+        const output: LayerSpecification = {
+            'id': this.id,
+            'type': this.type as LayerSpecification['type'],
+            'source': this.source,
+            'source-layer': this.sourceLayer,
+            'metadata': this.metadata,
+            'minzoom': this.minzoom,
+            'maxzoom': this.maxzoom,
+            'filter': this.filter as FilterSpecification,
+            'layout': this._unevaluatedLayout && this._unevaluatedLayout.serialize(),
+            'paint': this._transitionablePaint && this._transitionablePaint.serialize()
+        };
+
+        if (this.visibility) {
+            output.layout = output.layout || {};
+            output.layout.visibility = this.visibility;
+        }
+
+        return filterObject(output, (value, key) => {
+            return value !== undefined &&
+                !(key === 'layout' && !Object.keys(value).length) &&
+                !(key === 'paint' && !Object.keys(value).length);
+        });
+    }
+
+    _validate(validate: Function, key: string, name: string, value: unknown, options: StyleSetterOptions = {}) {
+        if (options && options.validate === false) {
+            return false;
+        }
+        return emitValidationErrors(this, validate.call(validateStyle, {
+            key,
+            layerType: this.type,
+            objectKey: name,
+            value,
+            styleSpec,
+            // Workaround for https://github.com/mapbox/mapbox-gl-js/issues/2407
+            style: {glyphs: true, sprite: true}
+        }));
+    }
+
+    is3D() {
+        return false;
+    }
+
+    isTileClipped() {
+        return false;
+    }
+
+    hasOffscreenPass() {
+        return false;
+    }
+
+    resize() {
+        // noop
+    }
+
+    isStateDependent() {
+        for (const property in (this as any).paint._values) {
+            const value = (this as any).paint.get(property);
+            if (!(value instanceof PossiblyEvaluatedPropertyValue) || !supportsPropertyExpression(value.property.specification)) {
+                continue;
+            }
+
+            if ((value.value.kind === 'source' || value.value.kind === 'composite') &&
+                value.value.isStateDependent) {
+                return true;
+            }
+        }
+        return false;
+    }
+}