Implement DDS for text-max-width property (#5067)

Implement DDS for `text-max-width` property

src/data/bucket/symbol_bucket.js

@@ -404,7 +404,6 @@ class SymbolBucket {
 
         const oneEm = 24;
         const lineHeight = layout['text-line-height'] * oneEm;
-        const maxWidth = layout['symbol-placement'] !== 'line' ? layout['text-max-width'] * oneEm : 0;
         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';
@@ -418,6 +417,9 @@ class SymbolBucket {
                 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);
+                const maxWidth = layout['symbol-placement'] !== 'line' ?
+                    this.layers[0].getLayoutValue('text-max-width', {zoom: this.zoom}, feature.properties) * oneEm :
+                    0;
 
                 shapedTextOrientations = {
                     [WritingMode.horizontal]: shapeText(feature.text, stacks[fontstack], maxWidth, lineHeight, textAnchor, textJustify, spacingIfAllowed, textOffset, oneEm, WritingMode.horizontal),

src/style-spec/reference/v8.json

@@ -1210,6 +1210,7 @@
       "units": "ems",
       "function": "interpolated",
       "zoom-function": true,
+      "property-function": true,
       "doc": "The maximum line width for text wrapping.",
       "requires": [
         "text-field"
@@ -1221,7 +1222,9 @@
           "ios": "2.0.0",
           "macos": "0.1.0"
         },
-        "data-driven styling": {}
+        "data-driven styling": {
+            "js": "0.40.0"
+        }
       }
     },
     "text-line-height": {

test/integration/render-tests/text-max-width/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": { "width": 12, "text": "Longer lines = fewer line wraps" },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ -50, 0 ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": { "width": 2, "text": "Shorter lines = more line wraps" },
+            "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-max-width": {
+          "type": "identity",
+          "property": "width"
+        },
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}

test/integration/render-tests/text-max-width/zoom-and-property-function/style.json

@@ -0,0 +1,75 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 128,
+      "width": 512
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 1.5,
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { 
+              "width": "varying",
+              "text": "These lines look the same a a a a a a a a a a a a a a a a a a a a a a a a a a a a" 
+            },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ -25, 0 ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": { 
+              "width": "fixed",
+              "text": "These lines look the same a a a a a a a a a a a a a a a a a a a a a a a a a a a a" 
+            },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 25, 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-max-width": {
+          "type": "categorical",
+          "property": "width",
+          "stops": [
+            [{"zoom": 0, "value": "varying"}, 1],
+            [{"zoom": 0, "value": "fixed"}, 7],
+            [{"zoom": 2, "value": "varying"}, 13],
+            [{"zoom": 2, "value": "fixed"}, 7]
+          ]
+        },
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}