[core] Add line-gradient property

Porting of mapbox/mapbox-gl-js#6303
See the link above for the description of the feature and
its limitations).

Based on patch from @lbud (Lauren Budorick).

cmake/core-files.txt

@@ -316,6 +316,8 @@ src/mbgl/shaders/hillshade_prepare.cpp
 src/mbgl/shaders/hillshade_prepare.hpp
 src/mbgl/shaders/line.cpp
 src/mbgl/shaders/line.hpp
+src/mbgl/shaders/line_gradient.cpp
+src/mbgl/shaders/line_gradient.hpp
 src/mbgl/shaders/line_pattern.cpp
 src/mbgl/shaders/line_pattern.hpp
 src/mbgl/shaders/line_sdf.cpp

include/mbgl/style/layers/layer.hpp.ejs

@@ -7,7 +7,7 @@
 
 #pragma once
 
-<% if (type === 'heatmap') { -%>
+<% if (type === 'heatmap' || type === 'line') { -%>
 #include <mbgl/style/color_ramp_property_value.hpp>
 <% } -%>
 #include <mbgl/style/layer.hpp>

include/mbgl/style/layers/line_layer.hpp

@@ -2,6 +2,7 @@
 
 #pragma once
 
+#include <mbgl/style/color_ramp_property_value.hpp>
 #include <mbgl/style/layer.hpp>
 #include <mbgl/style/filter.hpp>
 #include <mbgl/style/property_value.hpp>
@@ -119,6 +120,12 @@ class LineLayer : public Layer {
     void setLinePatternTransition(const TransitionOptions&);
     TransitionOptions getLinePatternTransition() const;
 
+    static ColorRampPropertyValue getDefaultLineGradient();
+    ColorRampPropertyValue getLineGradient() const;
+    void setLineGradient(ColorRampPropertyValue);
+    void setLineGradientTransition(const TransitionOptions&);
+    TransitionOptions getLineGradientTransition() const;
+
     // Private implementation
 
     class Impl;

platform/android/MapboxGLAndroidSDK/src/main/java/com/mapbox/mapboxsdk/style/layers/LineLayer.java

@@ -478,6 +478,34 @@ public void setLinePatternTransition(TransitionOptions options) {
     nativeSetLinePatternTransition(options.getDuration(), options.getDelay());
   }
 
+  /**
+   * Get the LineGradient property
+   *
+   * @return property wrapper value around String
+   */
+  @SuppressWarnings("unchecked")
+  public PropertyValue<String> getLineGradient() {
+    checkThread();
+    return (PropertyValue<String>) new PropertyValue("line-gradient", nativeGetLineGradient());
+  }
+
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @return int representation of a rgba string color
+   * @throws RuntimeException thrown if property isn't a value
+   */
+  @ColorInt
+  public int getLineGradientAsInt() {
+    checkThread();
+    PropertyValue<String> value = getLineGradient();
+    if (value.isValue()) {
+      return rgbaToColor(value.getValue());
+    } else {
+      throw new RuntimeException("line-gradient was set as a Function");
+    }
+  }
+
   @Keep
   private native Object nativeGetLineCap();
 
@@ -574,6 +602,9 @@ public void setLinePatternTransition(TransitionOptions options) {
   @Keep
   private native void nativeSetLinePatternTransition(long duration, long delay);
 
+  @Keep
+  private native Object nativeGetLineGradient();
+
   @Override
   @Keep
   protected native void finalize() throws Throwable;

platform/android/MapboxGLAndroidSDK/src/main/java/com/mapbox/mapboxsdk/style/layers/PropertyFactory.java

@@ -394,6 +394,36 @@ public static PropertyValue<Expression> linePattern(Expression expression) {
     return new PaintPropertyValue<>("line-pattern", expression);
   }
 
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @param value a int color value
+   * @return property wrapper around String color
+   */
+  public static PropertyValue<String> lineGradient(@ColorInt int value) {
+    return new PaintPropertyValue<>("line-gradient", colorToRgbaString(value));
+  }
+
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @param value a String value
+   * @return property wrapper around String
+   */
+  public static PropertyValue<String> lineGradient(String value) {
+    return new PaintPropertyValue<>("line-gradient", value);
+  }
+
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @param expression an expression statement
+   * @return property wrapper around an expression statement
+   */
+  public static PropertyValue<Expression> lineGradient(Expression expression) {
+    return new PaintPropertyValue<>("line-gradient", expression);
+  }
+
   /**
    * The opacity at which the icon will be drawn.
    *

platform/android/MapboxGLAndroidSDKTestApp/src/androidTest/java/com/mapbox/mapboxsdk/testapp/style/layer.junit.ejs

@@ -118,7 +118,7 @@ public class <%- camelize(type) %>LayerTest extends BaseActivityTest {
 
 <% } -%>
 <% for (const property of properties) { -%>
-<% if (property.name != 'heatmap-color') { -%>
+<% if (property['property-type'] !== 'color-ramp') { -%>
 <% if (property.transition) { -%>
 
   @Test

platform/android/src/style/layers/line_layer.cpp

@@ -236,6 +236,12 @@ namespace android {
         layer.as<mbgl::style::LineLayer>()->LineLayer::setLinePatternTransition(options);
     }
 
+    jni::Object<jni::ObjectTag> LineLayer::getLineGradient(jni::JNIEnv& env) {
+        using namespace mbgl::android::conversion;
+        Result<jni::jobject*> converted = convert<jni::jobject*>(env, layer.as<mbgl::style::LineLayer>()->LineLayer::getLineGradient());
+        return jni::Object<jni::ObjectTag>(*converted);
+    }
+
 
     jni::Class<LineLayer> LineLayer::javaClass;
 
@@ -287,7 +293,8 @@ namespace android {
             METHOD(&LineLayer::getLineDasharray, "nativeGetLineDasharray"),
             METHOD(&LineLayer::getLinePatternTransition, "nativeGetLinePatternTransition"),
             METHOD(&LineLayer::setLinePatternTransition, "nativeSetLinePatternTransition"),
-            METHOD(&LineLayer::getLinePattern, "nativeGetLinePattern"));
+            METHOD(&LineLayer::getLinePattern, "nativeGetLinePattern"),
+            METHOD(&LineLayer::getLineGradient, "nativeGetLineGradient"));
     }
 
 } // namespace android

platform/android/src/style/layers/line_layer.hpp

@@ -74,6 +74,8 @@ class LineLayer : public Layer {
     jni::Object<jni::ObjectTag> getLinePattern(jni::JNIEnv&);
     void setLinePatternTransition(jni::JNIEnv&, jlong duration, jlong delay);
     jni::Object<TransitionOptions> getLinePatternTransition(jni::JNIEnv&);
+
+    jni::Object<jni::ObjectTag> getLineGradient(jni::JNIEnv&);
     jni::jobject* createJavaPeer(jni::JNIEnv&);
 
 }; // class LineLayer

platform/darwin/scripts/generate-style-code.js

@@ -367,6 +367,8 @@ global.propertyReqs = function (property, propertiesByName, type) {
             return '`' + camelizeWithLeadingLowercase(req['!']) + '` is set to `nil`';
         } else {
             let name = Object.keys(req)[0];
+            if (name === 'source')
+                return 'the data source requirements are met';
             return '`' + camelizeWithLeadingLowercase(name) + '` is set to an expression that evaluates to ' + describeValue(req[name], propertiesByName[name], type);
         }
     }).join(', and ') + '. Otherwise, it is ignored.';

platform/darwin/src/MGLLineStyleLayer.h

@@ -366,6 +366,50 @@ MGL_EXPORT
 */
 @property (nonatomic) MGLTransition lineGapWidthTransition;
 
+#if TARGET_OS_IPHONE
+/**
+ Defines a gradient with which to color a line feature. Can only be used with
+ GeoJSON sources that specify `"lineMetrics": true`.
+ 
+ This property is only applied to the style if `lineDasharray` is set to `nil`,
+ and `linePattern` is set to `nil`, and the data source requirements are met.
+ Otherwise, it is ignored.
+ 
+ You can set this property to an expression containing any of the following:
+ 
+ * Constant `UIColor` values
+ * Predefined functions, including mathematical and string operators
+ * Conditional expressions
+ * Variable assignments and references to assigned variables
+ * Interpolation and step functions applied to the `$lineProgress` variable
+ 
+ This property does not support applying interpolation or step functions to
+ feature attributes.
+ */
+@property (nonatomic, null_resettable) NSExpression *lineGradient;
+#else
+/**
+ Defines a gradient with which to color a line feature. Can only be used with
+ GeoJSON sources that specify `"lineMetrics": true`.
+ 
+ This property is only applied to the style if `lineDasharray` is set to `nil`,
+ and `linePattern` is set to `nil`, and the data source requirements are met.
+ Otherwise, it is ignored.
+ 
+ You can set this property to an expression containing any of the following:
+ 
+ * Constant `NSColor` values
+ * Predefined functions, including mathematical and string operators
+ * Conditional expressions
+ * Variable assignments and references to assigned variables
+ * Interpolation and step functions applied to the `$lineProgress` variable
+ 
+ This property does not support applying interpolation or step functions to
+ feature attributes.
+ */
+@property (nonatomic, null_resettable) NSExpression *lineGradient;
+#endif
+
 /**
  The line's offset. For linear features, a positive value offsets the line to
  the right, relative to the direction of the line, and a negative value to the

platform/darwin/src/MGLLineStyleLayer.mm

@@ -306,6 +306,23 @@ - (MGLTransition)lineGapWidthTransition {
     return transition;
 }
 
+- (void)setLineGradient:(NSExpression *)lineGradient {
+    MGLAssertStyleLayerIsValid();
+
+    auto mbglValue = MGLStyleValueTransformer<mbgl::Color, MGLColor *>().toPropertyValue<mbgl::style::ColorRampPropertyValue>(lineGradient);
+    self.rawLayer->setLineGradient(mbglValue);
+}
+
+- (NSExpression *)lineGradient {
+    MGLAssertStyleLayerIsValid();
+
+    auto propertyValue = self.rawLayer->getLineGradient();
+    if (propertyValue.isUndefined()) {
+        propertyValue = self.rawLayer->getDefaultLineGradient();
+    }
+    return MGLStyleValueTransformer<mbgl::Color, MGLColor *>().toExpression(propertyValue);
+}
+
 - (void)setLineOffset:(NSExpression *)lineOffset {
     MGLAssertStyleLayerIsValid();
 

platform/darwin/src/MGLStyleLayer.mm.ejs

@@ -169,7 +169,7 @@ namespace mbgl {
 
 <% switch (property['property-type']) {
     case 'color-ramp': -%>
-    auto mbglValue = MGLStyleValueTransformer<mbgl::Color, MGLColor *>().toPropertyValue<mbgl::style::ColorRampPropertyValue>(heatmapColor);
+    auto mbglValue = MGLStyleValueTransformer<mbgl::Color, MGLColor *>().toPropertyValue<mbgl::style::ColorRampPropertyValue>(<%- objCName(property) %>);
 <%     break
     case 'data-driven':
     case 'cross-faded-data-driven': -%>

platform/node/test/ignores.json

@@ -43,8 +43,6 @@
   "render-tests/geojson/inline-polygon-symbol": "behavior needs reconciliation with gl-js",
   "render-tests/icon-rotate/with-offset": "https://github.com/mapbox/mapbox-gl-native/issues/11872",
   "render-tests/icon-no-cross-source-collision/default": "skip - gl-js only",
-  "render-tests/line-gradient/gradient": "https://github.com/mapbox/mapbox-gl-native/issues/11718",
-  "render-tests/line-gradient/translucent": "https://github.com/mapbox/mapbox-gl-native/issues/11718",
   "render-tests/mixed-zoom/z10-z11": "https://github.com/mapbox/mapbox-gl-native/issues/10397",
   "render-tests/raster-masking/overlapping-zoom": "https://github.com/mapbox/mapbox-gl-native/issues/10195",
   "render-tests/real-world/bangkok": "https://github.com/mapbox/mapbox-gl-native/issues/10412",

scripts/generate-shaders.js

@@ -8,8 +8,6 @@ const zlib = require('zlib');
 
 var shaders = require('../mapbox-gl-js/src/shaders');
 
-delete shaders.lineGradient;
-
 require('./style-code');
 
 let concatenated = '';

scripts/generate-style-code.js

@@ -114,7 +114,7 @@ global.defaultValue = function (property) {
     return '{}';
   }
 
-  if (property.name === 'heatmap-color') {
+  if (property['property-type'] === 'color-ramp') {
       return '{}';
   }
 

scripts/style-spec.js

@@ -1,4 +1,3 @@
 var spec = module.exports = require('../mapbox-gl-js/src/style-spec/reference/v8');
 
 // Make temporary modifications here when Native doesn't have all features that JS has.
-delete spec.paint_line['line-gradient'];

src/mbgl/programs/line_program.cpp

@@ -116,4 +116,18 @@ LinePatternProgram::uniformValues(const RenderLinePaintProperties::PossiblyEvalu
     );
 }
 
+LineGradientProgram::UniformValues
+LineGradientProgram::uniformValues(const RenderLinePaintProperties::PossiblyEvaluated& properties,
+                           const RenderTile& tile,
+                           const TransformState& state,
+                           const std::array<float, 2>& pixelsToGLUnits) {
+    return makeValues<LineGradientProgram::UniformValues>(
+        properties,
+        tile,
+        state,
+        pixelsToGLUnits,
+        uniforms::u_image::Value{ 0 }
+    );
+}
+
 } // namespace mbgl

src/mbgl/programs/line_program.hpp

@@ -4,6 +4,7 @@
 #include <mbgl/programs/attributes.hpp>
 #include <mbgl/programs/uniforms.hpp>
 #include <mbgl/shaders/line.hpp>
+#include <mbgl/shaders/line_gradient.hpp>
 #include <mbgl/shaders/line_pattern.hpp>
 #include <mbgl/shaders/line_sdf.hpp>
 #include <mbgl/util/geometry.hpp>
@@ -159,6 +160,26 @@ class LineSDFProgram : public Program<
                                        float atlasWidth);
 };
 
+class LineGradientProgram : public Program<
+    shaders::line_gradient,
+    gl::Triangle,
+    LineLayoutAttributes,
+    gl::Uniforms<
+        uniforms::u_matrix,
+        uniforms::u_ratio,
+        uniforms::u_gl_units_to_pixels,
+        uniforms::u_image>,
+    RenderLinePaintProperties>
+{
+public:
+    using Program::Program;
+
+    static UniformValues uniformValues(const RenderLinePaintProperties::PossiblyEvaluated&,
+                                       const RenderTile&,
+                                       const TransformState&,
+                                       const std::array<float, 2>& pixelsToGLUnits);
+};
+
 using LineLayoutVertex = LineProgram::LayoutVertex;
 using LineAttributes = LineProgram::Attributes;
 

src/mbgl/programs/programs.hpp

@@ -37,6 +37,7 @@ class Programs {
           hillshade(context, programParameters),
           hillshadePrepare(context, programParameters),
           line(context, programParameters),
+          lineGradient(context, programParameters),
           lineSDF(context, programParameters),
           linePattern(context, programParameters),
           raster(context, programParameters),
@@ -64,6 +65,7 @@ class Programs {
     HillshadeProgram hillshade;
     HillshadePrepareProgram hillshadePrepare;
     ProgramMap<LineProgram> line;
+    ProgramMap<LineGradientProgram> lineGradient;
     ProgramMap<LineSDFProgram> lineSDF;
     ProgramMap<LinePatternProgram> linePattern;
     RasterProgram raster;