Fix line distances breaking gradient across tile boundaries (mapbox#9220

)

* Fix line line distances breaking gradients
Ensure scaled line distance is computed at least once when calculating the entire line distance, otherwise we hit a corner case where the distance isn't updated. Specifically when the beginning of the line doesn't have a sharp corner.
Fixes mapbox#8969

* Add render test for line gradient across tile boundaries

* Address review comments

src/data/bucket/line_bucket.js

@@ -231,6 +231,7 @@ class LineBucket implements Bucket {
  for (let i = 0; i < vertices.length - 1; i++) {
  this.totalDistance += vertices[i].dist(vertices[i + 1]);
  }
+ this.updateScaledDistance();
  }
 
  const isPolygon = vectorTileFeatureTypes[feature.type] === 'Polygon';
@@ -526,9 +527,7 @@ class LineBucket implements Bucket {
  }
  }
 
- updateDistance(prev: Point, next: Point) {
- this.distance += prev.dist(next);
-
+ updateScaledDistance() {
  // Knowing the ratio of the full linestring covered by this tiled feature, as well
  // as the total distance (in tile units) of this tiled feature, and the distance
  // (in tile units) of the current vertex, we can determine the relative distance
@@ -537,6 +536,11 @@ class LineBucket implements Bucket {
  (this.clipStart + (this.clipEnd - this.clipStart) * this.distance / this.totalDistance) * (MAX_LINE_DISTANCE - 1) :
  this.distance;
  }
+
+ updateDistance(prev: Point, next: Point) {
+ this.distance += prev.dist(next);
+ this.updateScaledDistance();
+ }
 }
 
 register('LineBucket', LineBucket, {omit: ['layers', 'patternFeatures']});

test/integration/render-tests/line-gradient/gradient-tile-boundaries/style.json

@@ -0,0 +1,56 @@
+{
+ "version": 8,
+ "metadata": {
+ "test": {
+ "width": 64,
+ "height": 128
+ }
+ },
+ "center": [
+ -77.02803308586635,
+ 38.891047607560125
+ ],
+ "zoom": 18,
+ "sources": {
+ "gradient": {
+ "type": "geojson",
+ "data": {
+ "type": "Feature",
+ "properties": {},
+ "geometry": {
+ "type": "LineString",
+ "coordinates": [
+ [-77.028035, 38.890600 ],
+ [-77.028035, 38.891088 ]
+ ]
+ }
+ },
+ "lineMetrics": true
+ }
+ },
+ "layers": [
+ {
+ "id": "line",
+ "type": "line",
+ "source": "gradient",
+ "layout": {
+ "line-cap": "round",
+ "line-join": "round"
+ },
+ "paint": {
+ "line-width": 15,
+ "line-gradient": [
+ "interpolate",
+ ["linear"],
+ ["line-progress"],
+ 0, "rgba(0, 0, 255, 0)",
+ 0.1, "royalblue",
+ 0.3, "cyan",
+ 0.5, "lime",
+ 0.7, "yellow",
+ 1, "red"
+ ]
+ }
+ }
+ ]
+}