Implement DDS for text-letter-spacing property (#5071)

src/data/bucket/symbol_bucket.js

@@ -404,7 +404,6 @@ class SymbolBucket {
 
         const oneEm = 24;
         const lineHeight = layout['text-line-height'] * oneEm;
-        const spacing = layout['text-letter-spacing'] * oneEm;
         const fontstack = this.fontstack = layout['text-font'].join(',');
         const textAlongLine = layout['text-rotation-alignment'] === 'map' && layout['symbol-placement'] === 'line';
 
@@ -414,6 +413,7 @@ class SymbolBucket {
             if (feature.text) {
                 const allowsVerticalWritingMode = scriptDetection.allowsVerticalWritingMode(feature.text);
                 const textOffset = this.layers[0].getLayoutValue('text-offset', {zoom: this.zoom}, feature.properties).map((t)=> t * oneEm);
+                const spacing = this.layers[0].getLayoutValue('text-letter-spacing', {zoom: this.zoom}, feature.properties) * oneEm;
                 const spacingIfAllowed = scriptDetection.allowsLetterSpacing(feature.text) ? spacing : 0;
                 const textAnchor = this.layers[0].getLayoutValue('text-anchor', {zoom: this.zoom}, feature.properties);
                 const textJustify = this.layers[0].getLayoutValue('text-justify', {zoom: this.zoom}, feature.properties);

src/style-spec/reference/v8.json

@@ -1253,6 +1253,7 @@
       "units": "ems",
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "doc": "Text tracking amount.",
       "requires": [
         "text-field"
@@ -1264,7 +1265,9 @@
           "ios": "2.0.0",
           "macos": "0.1.0"
         },
-        "data-driven styling": {}
+        "data-driven styling": {
+            "js": "0.40.0"
+        }
       }
     },
     "text-justify": {

test/integration/render-tests/text-letter-spacing/property-function/style.json

@@ -0,0 +1,63 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 128,
+      "width": 512
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 0,
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { "spacing": -0.15, "text": "Very tight letter spacing" },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ -100, 0 ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": { "spacing": 2, "text": "Very loose letter spacing" },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 75, 0 ]
+            }
+          }  
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "point",
+      "layout": {
+        "text-field": "{text}",
+        "text-letter-spacing": {
+          "type": "identity",
+          "property": "spacing"
+        },
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}

test/integration/render-tests/text-letter-spacing/zoom-and-property-function/style.json

@@ -0,0 +1,69 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 1.5,
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { "spacing": "varying" },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, 15 ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": { "spacing": "fixed" },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, -15 ]
+            }
+          }  
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "point",
+      "layout": {
+        "text-field": "These lines have the same letter spacing",
+        "text-letter-spacing": {
+          "type": "categorical",
+          "property": "spacing",
+          "stops": [
+            [{"zoom": 0, "value": "varying"}, 0],
+            [{"zoom": 0, "value": "fixed"}, 0.8],
+            [{"zoom": 2, "value": "varying"}, 1.6],
+            [{"zoom": 2, "value": "fixed"}, 0.8]
+          ]
+        },
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}