WIP: generalize expression/calculation-dependent properties

build/generate-style-code.js

@@ -16,6 +16,10 @@ global.isDataDriven = function (property) {
     return property['property-function'] === true;
 };
 
+global.isCalculationDependent = function(property) {
+    return !!property['expression-dependency'];
+}
+
 global.flowType = function (property) {
     switch (property.type) {
         case 'boolean':
@@ -43,7 +47,7 @@ global.propertyType = function (property) {
         return `DataDrivenProperty<${flowType(property)}>`;
     } else if (/-pattern$/.test(property.name) || property.name === 'line-dasharray') {
         return `CrossFadedProperty<${flowType(property)}>`;
-    } else if (property.name === 'heatmap-color' || property.name === 'line-gradient') {
+    } else if (isCalculationDependent(property) && property.type === 'color') {
         return `ColorRampProperty`;
     } else {
         return `DataConstantProperty<${flowType(property)}>`;
@@ -95,7 +99,7 @@ global.propertyValue = function (property, type) {
         return `new DataDrivenProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
     } else if (/-pattern$/.test(property.name) || property.name === 'line-dasharray') {
         return `new CrossFadedProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
-    } else if (property.name === 'heatmap-color' || property.name === 'line-gradient') {
+    } else if (isCalculationDependent(property) && property.type === 'color') {
         return `new ColorRampProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;
     } else {
         return `new DataConstantProperty(styleSpec["${type}_${property.layerType}"]["${property.name}"])`;

src/data/bucket.js

@@ -12,7 +12,8 @@ export type BucketParameters<Layer: TypedStyleLayer> = {
     zoom: number,
     pixelRatio: number,
     overscaling: number,
-    collisionBoxArray: CollisionBoxArray
+    collisionBoxArray: CollisionBoxArray,
+    lineMetrics: boolean
 }
 
 export type PopulateParameters = {

src/data/bucket/line_bucket.js

@@ -115,6 +115,7 @@ class LineBucket implements Bucket {
         this.indexArray = new TriangleIndexArray();
         this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
         this.segments = new SegmentVector();
+        this.lineMetrics = options.lineMetrics;
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters) {
@@ -159,12 +160,12 @@ class LineBucket implements Bucket {
 
     addLine(vertices: Array<Point>, feature: VectorTileFeature, join: string, cap: string, miterLimit: number, roundLimit: number) {
         let lineDistances = null;
-        if (!!feature.properties &&
-            feature.properties.hasOwnProperty('$distance_start') &&
-            feature.properties.hasOwnProperty('$distance_end')) {
+        if (this.lineMetrics && !!feature.properties &&
+            feature.properties.hasOwnProperty('clip_start') &&      // TODO finalize names
+            feature.properties.hasOwnProperty('clip_end')) {
             lineDistances = {
-                start: feature.properties.$distance_start,
-                end: feature.properties.$distance_end,
+                start: feature.properties.clip_start,
+                end: feature.properties.clip_end,
                 tileTotal: undefined
             };
         }

src/source/geojson_source.js

@@ -97,6 +97,7 @@ class GeoJSONSource extends Evented implements Source {
         this.tileSize = 512;
         this.isTileClipped = true;
         this.reparseOverscaled = true;
+        this.lineMetrics = !!options.lineMetrics;
         this._removed = false;
 
         this.dispatcher = dispatcher;
@@ -125,7 +126,7 @@ class GeoJSONSource extends Evented implements Source {
                 tolerance: (options.tolerance !== undefined ? options.tolerance : 0.375) * scale,
                 extent: EXTENT,
                 maxZoom: this.maxzoom,
-                lineMetrics: options.lineMetrics || false
+                lineMetrics: this.lineMetrics
             },
             superclusterOptions: {
                 maxZoom: options.clusterMaxZoom !== undefined ?
@@ -238,6 +239,7 @@ class GeoJSONSource extends Evented implements Source {
             maxZoom: this.maxzoom,
             tileSize: this.tileSize,
             source: this.id,
+            lineMetrics: this.lineMetrics,
             pixelRatio: browser.devicePixelRatio,
             overscaling: tile.tileID.overscaleFactor(),
             showCollisionBoxes: this.map.showCollisionBoxes

src/source/worker_tile.js

@@ -53,6 +53,7 @@ class WorkerTile {
         this.overscaling = params.overscaling;
         this.showCollisionBoxes = params.showCollisionBoxes;
         this.collectResourceTiming = !!params.collectResourceTiming;
+        this.lineMetrics = params.lineMetrics;
     }
 
     parse(data: VectorTile, layerIndex: StyleLayerIndex, actor: Actor, callback: WorkerTileCallback) {
@@ -108,7 +109,8 @@ class WorkerTile {
                     zoom: this.zoom,
                     pixelRatio: this.pixelRatio,
                     overscaling: this.overscaling,
-                    collisionBoxArray: this.collisionBoxArray
+                    collisionBoxArray: this.collisionBoxArray,
+                    lineMetrics: this.lineMetrics
                 });
 
                 bucket.populate(features, options);

src/style-spec/reference/v8.json

@@ -3286,6 +3286,7 @@
       "zoom-function": false,
       "property-function": false,
       "transition": false,
+      "expression-dependency": "line-progress",
       "requires": [
         {
           "!": "line-dasharray"
@@ -3646,6 +3647,7 @@
       "zoom-function": false,
       "property-function": false,
       "transition": false,
+      "expression-dependency": "heatmap-density",
       "sdk-support": {
         "basic functionality": {
           "js": "0.41.0"

src/style-spec/validate/validate_expression.js

@@ -13,6 +13,11 @@ export default function validateExpression(options: any) {
         });
     }
 
+    const expressionDependency = options.valueSpec['expression-dependency'];
+    if (expressionDependency && expressionDependency !== expression.value._styleExpression.expression.input.name) {
+        return new ValidationError(options.key, options.value, `Invalid data expression for ${options.propertyKey}. Expression must take ${expressionDependency} as an input.`);
+    }
+
     if (options.expressionContext === 'property' && options.propertyKey === 'text-font' &&
         (expression.value: any)._styleExpression.expression.possibleOutputs().indexOf(undefined) !== -1) {
         return [new ValidationError(options.key, options.value, 'Invalid data expression for "text-font". Output values must be contained as literals within the expression.')];

src/style-spec/validate/validate_function.js

@@ -49,7 +49,7 @@ export default function validateFunction(options) {
     if (options.styleSpec.$version >= 8) {
         if (isPropertyFunction && !options.valueSpec['property-function']) {
             errors.push(new ValidationError(options.key, options.value, 'property functions not supported'));
-        } else if (isZoomFunction && !options.valueSpec['zoom-function'] && options.objectKey !== 'heatmap-color' && options.objectKey !== 'line-gradient') {
+        } else if (isZoomFunction && !options.valueSpec['zoom-function'] && !options.valueSpec['expression-dependency']) {
             errors.push(new ValidationError(options.key, options.value, 'zoom functions not supported'));
         }
     }

src/style/properties.js

@@ -52,8 +52,8 @@ type TimePoint = number;
  *
  *  There are two main implementations of the interface -- one for properties that allow data-driven values,
  *  and one for properties that don't. There are a few "special case" implementations as well: one for properties
- *  which cross-fade between two values rather than interpolating, one for `heatmap-color` and `line-gradient`,
- *  and one for `light-position`.
+ *  which cross-fade between two values rather than interpolating, one for color ramp properties which do very,
+ *  little evaluation here in favor of doing so on the StyleLayer classes, and one for `light-position`.
  *
  * @private
  */

test/expected/text-shaping-linebreak.json

@@ -67,4 +67,4 @@
   "left": -32.5,
   "right": 32.5,
   "writingMode": 1
-}
+}

test/expected/text-shaping-newline.json

@@ -67,4 +67,4 @@
   "left": -32.5,
   "right": 32.5,
   "writingMode": 1
-}
+}

test/expected/text-shaping-newlines-in-middle.json

@@ -67,4 +67,4 @@
   "left": -32.5,
   "right": 32.5,
   "writingMode": 1
-}
+}

test/unit/style-spec/fixture/expression-dependency.input.json

@@ -0,0 +1,64 @@
+{
+  "version": 8,
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "lineMetrics": true,
+      "data": {}
+    }
+  },
+  "layers": [
+    {
+      "id": "line-gradient-good",
+      "type": "line",
+      "source": "geojson",
+      "paint": {
+        "line-gradient": [
+          "interpolate",
+          ["linear"],
+          ["line-progress"],
+          0, "#000000"
+        ]
+      }
+    },
+    {
+      "id": "line-gradient-bad",
+      "type": "line",
+      "source": "geojson",
+      "paint": {
+        "line-gradient": [
+          "interpolate",
+          ["linear"],
+          ["wrong-input"],
+          0, "#000000"
+        ]
+      }
+    },
+    {
+      "id": "heatmap-density-good",
+      "type": "heatmap",
+      "source": "geojson",
+      "paint": {
+        "heatmap-color": [
+          "interpolate",
+          ["linear"],
+          ["heatmap-density"],
+          0, "#000000"
+        ]
+      }
+    },
+    {
+      "id": "heatmap-density-bad",
+      "type": "heatmap",
+      "source": "geojson",
+      "paint": {
+        "heatmap-color": [
+          "interpolate",
+          ["linear"],
+          ["wrong-input"],
+          0, "#000000"
+        ]
+      }
+    }
+  ]
+}

test/unit/style-spec/fixture/expression-dependency.output.json

@@ -0,0 +1,18 @@
+[
+  {
+    "message": "sources.geojson: unknown property \"lineMetrics\"",
+    "line": 6
+  },
+  {
+    "message": "layers[0].paint.line-gradient: unknown property \"line-gradient\"",
+    "line": 16
+  },
+  {
+    "message": "layers[1].paint.line-gradient: unknown property \"line-gradient\"",
+    "line": 29
+  },
+  {
+    "message": "layers[3].paint.heatmap-color[2][0]: Unknown expression \"wrong-input\". If you wanted a literal array, use [\"literal\", [...]].",
+    "line": 55
+  }
+]

test/unit/style-spec/fixture/functions.output.json

@@ -190,9 +190,5 @@
   {
     "message": "layers[53].paint.heatmap-color: zoom expressions not supported",
     "line": 952
-  },
-  {
-    "message": "layers[54].paint.heatmap-color: zoom functions not supported",
-    "line": 960
   }
 ]