@mapbox/mapbox-gl-style-spec 13.22.0-beta.1 → 13.23.0

package/expression/definitions/index.js

@@ -201,6 +201,16 @@ CompoundExpression.register(expressions, {
         [],
         (ctx) => ctx.globals.zoom
     ],
+    'pitch': [
+        NumberType,
+        [],
+        (ctx) => ctx.globals.pitch || 0
+    ],
+    'distance-from-center': [
+        NumberType,
+        [],
+        (ctx) => ctx.distanceFromCenter()
+    ],
     'heatmap-density': [
         NumberType,
         [],

package/expression/evaluation_context.js

@@ -1,9 +1,12 @@
 // @flow
 
 import {Color} from './values.js';
+
+import type Point from '@mapbox/point-geometry';
 import type {FormattedSection} from './types/formatted.js';
 import type {GlobalProperties, Feature, FeatureState} from './index.js';
 import type {CanonicalTileID} from '../../source/tile_id.js';
+import type {FeatureDistanceData} from '../feature_filter/index.js';
 
 const geometryTypes = ['Unknown', 'Point', 'LineString', 'Polygon'];
 
@@ -14,6 +17,8 @@ class EvaluationContext {
     formattedSection: ?FormattedSection;
     availableImages: ?Array<string>;
     canonical: ?CanonicalTileID;
+    featureTileCoord: ?Point;
+    featureDistanceData: ?FeatureDistanceData;
 
     _parseColorCache: {[_: string]: ?Color};
 
@@ -25,6 +30,8 @@ class EvaluationContext {
         this._parseColorCache = {};
         this.availableImages = null;
         this.canonical = null;
+        this.featureTileCoord = null;
+        this.featureDistanceData = null;
     }
 
     id() {
@@ -47,6 +54,29 @@ class EvaluationContext {
         return this.feature && this.feature.properties || {};
     }
 
+    distanceFromCenter() {
+        if (this.featureTileCoord && this.featureDistanceData) {
+
+            const c = this.featureDistanceData.center;
+            const scale = this.featureDistanceData.scale;
+            const {x, y} = this.featureTileCoord;
+
+            // Calculate the distance vector `d` (left handed)
+            const dX = x * scale - c[0];
+            const dY = y * scale - c[1];
+
+            // The bearing vector `b` (left handed)
+            const bX = this.featureDistanceData.bearing[0];
+            const bY = this.featureDistanceData.bearing[1];
+
+            // Distance is calculated as `dot(d, v)`
+            const dist = (bX * dX + bY * dY);
+            return dist;
+        }
+
+        return 0;
+    }
+
     parseColor(input: string): ?Color {
         let cached = this._parseColorCache[input];
         if (!cached) {

package/expression/index.js

@@ -27,6 +27,7 @@ import type {PropertyValueSpecification} from '../types.js';
 import type {FormattedSection} from './types/formatted.js';
 import type Point from '@mapbox/point-geometry';
 import type {CanonicalTileID} from '../../source/tile_id.js';
+import type {FeatureDistanceData} from '../feature_filter/index.js';
 
 export type Feature = {
     +type: 1 | 2 | 3 | 'Unknown' | 'Point' | 'MultiPoint' | 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon',
@@ -40,6 +41,7 @@ export type FeatureState = {[_: string]: any};
 
 export type GlobalProperties = $ReadOnly<{
     zoom: number,
+    pitch?: number,
     heatmapDensity?: number,
     lineProgress?: number,
     skyRadialProgress?: number,
@@ -63,24 +65,28 @@ export class StyleExpression {
         this._enumValues = propertySpec && propertySpec.type === 'enum' ? propertySpec.values : null;
     }
 
-    evaluateWithoutErrorHandling(globals: GlobalProperties, feature?: Feature, featureState?: FeatureState, canonical?: CanonicalTileID, availableImages?: Array<string>, formattedSection?: FormattedSection): any {
+    evaluateWithoutErrorHandling(globals: GlobalProperties, feature?: Feature, featureState?: FeatureState, canonical?: CanonicalTileID, availableImages?: Array<string>, formattedSection?: FormattedSection, featureTileCoord?: Point, featureDistanceData?: FeatureDistanceData): any {
         this._evaluator.globals = globals;
         this._evaluator.feature = feature;
         this._evaluator.featureState = featureState;
         this._evaluator.canonical = canonical;
         this._evaluator.availableImages = availableImages || null;
         this._evaluator.formattedSection = formattedSection;
+        this._evaluator.featureTileCoord = featureTileCoord || null;
+        this._evaluator.featureDistanceData = featureDistanceData || null;
 
         return this.expression.evaluate(this._evaluator);
     }
 
-    evaluate(globals: GlobalProperties, feature?: Feature, featureState?: FeatureState, canonical?: CanonicalTileID, availableImages?: Array<string>, formattedSection?: FormattedSection): any {
+    evaluate(globals: GlobalProperties, feature?: Feature, featureState?: FeatureState, canonical?: CanonicalTileID, availableImages?: Array<string>, formattedSection?: FormattedSection, featureTileCoord?: Point, featureDistanceData?: FeatureDistanceData): any {
         this._evaluator.globals = globals;
         this._evaluator.feature = feature || null;
         this._evaluator.featureState = featureState || null;
         this._evaluator.canonical = canonical;
         this._evaluator.availableImages = availableImages || null;
         this._evaluator.formattedSection = formattedSection || null;
+        this._evaluator.featureTileCoord = featureTileCoord || null;
+        this._evaluator.featureDistanceData = featureDistanceData || null;
 
         try {
             const val = this.expression.evaluate(this._evaluator);
@@ -233,7 +239,7 @@ export function createPropertyExpression(expression: mixed, propertySpec: StyleP
         return error([new ParsingError('', 'data expressions not supported')]);
     }
 
-    const isZoomConstant = isConstant.isGlobalPropertyConstant(parsed, ['zoom']);
+    const isZoomConstant = isConstant.isGlobalPropertyConstant(parsed, ['zoom', 'pitch', 'distance-from-center']);
     if (!isZoomConstant && !supportsZoomExpression(propertySpec)) {
         return error([new ParsingError('', 'zoom expressions not supported')]);
     }

package/expression/parsing_context.js

@@ -229,5 +229,5 @@ function isConstant(expression: Expression) {
     }
 
     return isFeatureConstant(expression) &&
-        isGlobalPropertyConstant(expression, ['zoom', 'heatmap-density', 'line-progress', 'sky-radial-progress', 'accumulated', 'is-supported-script']);
+        isGlobalPropertyConstant(expression, ['zoom', 'heatmap-density', 'line-progress', 'sky-radial-progress', 'accumulated', 'is-supported-script', 'pitch', 'distance-from-center']);
 }

package/feature_filter/index.js

@@ -1,14 +1,19 @@
 // @flow
 
 import {createExpression} from '../expression/index.js';
+import {isFeatureConstant} from '../expression/is_constant.js';
+import {deepUnbundle} from '../util/unbundle_jsonlint.js';
+import latest from '../reference/latest.js';
 import type {GlobalProperties, Feature} from '../expression/index.js';
 import type {CanonicalTileID} from '../../source/tile_id.js';
+import type Point from '@mapbox/point-geometry';
 
-type FilterExpression = (globalProperties: GlobalProperties, feature: Feature, canonical?: CanonicalTileID) => boolean;
-export type FeatureFilter ={filter: FilterExpression, needGeometry: boolean};
+export type FeatureDistanceData = {bearing: [number, number], center: [number, number], scale: number};
+type FilterExpression = (globalProperties: GlobalProperties, feature: Feature, canonical?: CanonicalTileID, featureTileCoord?: Point, featureDistanceData?: FeatureDistanceData) => boolean;
+export type FeatureFilter = {filter: FilterExpression, dynamicFilter?: FilterExpression, needGeometry: boolean, needFeature: boolean};
 
 export default createFilter;
-export {isExpressionFilter};
+export {isExpressionFilter, isDynamicFilter, extractStaticFilter};
 
 function isExpressionFilter(filter: any) {
     if (filter === true || filter === false) {
@@ -52,17 +57,6 @@ function isExpressionFilter(filter: any) {
     }
 }
 
-const filterSpec = {
-    'type': 'boolean',
-    'default': false,
-    'transition': false,
-    'property-type': 'data-driven',
-    'expression': {
-        'interpolated': false,
-        'parameters': ['zoom', 'feature']
-    }
-};
-
 /**
  * Given a filter expressed as nested arrays, return a new function
  * that evaluates whether a given feature (with a .properties or .tags property)
@@ -70,25 +64,192 @@ const filterSpec = {
  *
  * @private
  * @param {Array} filter mapbox gl filter
+ * @param {string} layerType the type of the layer this filter will be applied to.
  * @returns {Function} filter-evaluating function
  */
-function createFilter(filter: any): FeatureFilter {
+function createFilter(filter: any, layerType?: string = 'fill'): FeatureFilter {
     if (filter === null || filter === undefined) {
-        return {filter: () => true, needGeometry: false};
+        return {filter: () => true, needGeometry: false, needFeature: false};
     }
 
     if (!isExpressionFilter(filter)) {
         filter = convertFilter(filter);
     }
+    const filterExp = ((filter: any): string[] | string | boolean);
+
+    let staticFilter = true;
+    try {
+        staticFilter = extractStaticFilter(filterExp);
+    } catch (e) {
+        console.warn(
+`Failed to extract static filter. Filter will continue working, but at higher memory usage and slower framerate.
+This is most likely a bug, please report this via https://github.com/mapbox/mapbox-gl-js/issues/new?assignees=&labels=&template=Bug_report.md
+and paste the contents of this message in the report.
+Thank you!
+Filter Expression:
+${JSON.stringify(filterExp, null, 2)}
+        `);
+    }
 
-    const compiled = createExpression(filter, filterSpec);
-    if (compiled.result === 'error') {
-        throw new Error(compiled.value.map(err => `${err.key}: ${err.message}`).join(', '));
+    // Compile the static component of the filter
+    const filterSpec = latest[`filter_${layerType}`];
+    const compiledStaticFilter = createExpression(staticFilter, filterSpec);
+
+    let filterFunc = null;
+    if (compiledStaticFilter.result === 'error') {
+        throw new Error(compiledStaticFilter.value.map(err => `${err.key}: ${err.message}`).join(', '));
     } else {
-        const needGeometry = geometryNeeded(filter);
-        return {filter: (globalProperties: GlobalProperties, feature: Feature, canonical?: CanonicalTileID) => compiled.value.evaluate(globalProperties, feature, {}, canonical),
-            needGeometry};
+        filterFunc = (globalProperties: GlobalProperties, feature: Feature, canonical?: CanonicalTileID) => compiledStaticFilter.value.evaluate(globalProperties, feature, {}, canonical);
+    }
+
+    // If the static component is not equal to the entire filter then we have a dynamic component
+    // Compile the dynamic component separately
+    let dynamicFilterFunc = null;
+    let needFeature = null;
+    if (staticFilter !== filterExp) {
+        const compiledDynamicFilter = createExpression(filterExp, filterSpec);
+
+        if (compiledDynamicFilter.result === 'error') {
+            throw new Error(compiledDynamicFilter.value.map(err => `${err.key}: ${err.message}`).join(', '));
+        } else {
+            dynamicFilterFunc = (globalProperties: GlobalProperties, feature: Feature, canonical?: CanonicalTileID, featureTileCoord?: Point, featureDistanceData?: FeatureDistanceData) => compiledDynamicFilter.value.evaluate(globalProperties, feature, {}, canonical, undefined, undefined, featureTileCoord, featureDistanceData);
+            needFeature = !isFeatureConstant(compiledDynamicFilter.value.expression);
+        }
+    }
+
+    filterFunc = ((filterFunc: any): FilterExpression);
+    const needGeometry = geometryNeeded(staticFilter);
+
+    return {
+        filter: filterFunc,
+        dynamicFilter: dynamicFilterFunc ? dynamicFilterFunc : undefined,
+        needGeometry,
+        needFeature: !!needFeature
+    };
+}
+
+function extractStaticFilter(filter: any): any {
+    if (!isDynamicFilter(filter)) {
+        return filter;
+    }
+
+    // Shallow copy so we can replace expressions in-place
+    let result = deepUnbundle(filter);
+
+    // 1. Union branches
+    unionDynamicBranches(result);
+
+    // 2. Collapse dynamic conditions to  `true`
+    result = collapseDynamicBooleanExpressions(result);
+
+    return result;
+}
+
+function collapseDynamicBooleanExpressions(expression: any): any {
+    if (!Array.isArray(expression)) {
+        return expression;
+    }
+
+    const collapsed = collapsedExpression(expression);
+    if (collapsed === true) {
+        return collapsed;
+    } else {
+        return collapsed.map((subExpression) => collapseDynamicBooleanExpressions(subExpression));
+    }
+}
+
+/**
+ * Traverses the expression and replaces all instances of branching on a
+ * `dynamic` conditional (such as `['pitch']` or `['distance-from-center']`)
+ * into an `any` expression.
+ * This ensures that all possible outcomes of a `dynamic` branch are considered
+ * when evaluating the expression upfront during filtering.
+ *
+ * @param {Array<any>} filter the filter expression mutated in-place.
+ */
+function unionDynamicBranches(filter: any) {
+    let isBranchingDynamically = false;
+    const branches = [];
+
+    if (filter[0] === 'case') {
+        for (let i = 1; i < filter.length - 1; i += 2) {
+            isBranchingDynamically = isBranchingDynamically || isDynamicFilter(filter[i]);
+            branches.push(filter[i + 1]);
+        }
+
+        branches.push(filter[filter.length - 1]);
+    } else if (filter[0] === 'match') {
+        isBranchingDynamically = isBranchingDynamically || isDynamicFilter(filter[1]);
+
+        for (let i = 2; i < filter.length - 1; i += 2) {
+            branches.push(filter[i + 1]);
+        }
+        branches.push(filter[filter.length - 1]);
+    } else if (filter[0] === 'step') {
+        isBranchingDynamically = isBranchingDynamically || isDynamicFilter(filter[1]);
+
+        for (let i = 1; i < filter.length - 1; i += 2) {
+            branches.push(filter[i + 1]);
+        }
+    }
+
+    if (isBranchingDynamically) {
+        filter.length = 0;
+        filter.push('any', ...branches);
+    }
+
+    // traverse and recurse into children
+    for (let i = 1; i < filter.length; i++) {
+        unionDynamicBranches(filter[i]);
+    }
+}
+
+function isDynamicFilter(filter: any): boolean {
+    // Base Cases
+    if (!Array.isArray(filter)) {
+        return false;
+    }
+    if (isRootExpressionDynamic(filter[0])) {
+        return true;
+    }
+
+    for (let i = 1; i < filter.length; i++) {
+        const child = filter[i];
+        if (isDynamicFilter(child)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function isRootExpressionDynamic(expression: string): boolean {
+    return expression === 'pitch' ||
+        expression === 'distance-from-center';
+}
+
+const dynamicConditionExpressions = new Set([
+    'in',
+    '==',
+    '!=',
+    '>',
+    '>=',
+    '<',
+    '<=',
+    'to-boolean'
+]);
+
+function collapsedExpression(expression: any): any {
+    if (dynamicConditionExpressions.has(expression[0])) {
+
+        for (let i = 1; i < expression.length; i++) {
+            const param = expression[i];
+            if (isDynamicFilter(param)) {
+                return true;
+            }
+        }
     }
+    return expression;
 }
 
 // Comparison function to sort numbers and strings

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapbox/mapbox-gl-style-spec",
   "description": "a specification for mapbox gl styles",
-  "version": "13.22.0-beta.1",
+  "version": "13.23.0",
   "author": "Mapbox",
   "keywords": [
     "mapbox",