Enable property functions for text-field, text-transform (#4074)

* Enable property functions for text-field, text-transform

* Do not perform text-field token replacement on property functions

* Add test for text-field token replacement

* Skip text-{field,transform} property function tests on native

* Update resolve_text test

* Simplify render tests

js/data/bucket/symbol_bucket.js

@@ -119,11 +119,10 @@ class SymbolBucket {
 
     populate(features, options) {
         const layout = this.layers[0].layout;
-        const textField = layout['text-field'];
         const textFont = layout['text-font'];
         const iconImage = layout['icon-image'];
 
-        const hasText = textField && textFont;
+        const hasText = layout['text-field'] && textFont;
         const hasIcon = iconImage;
 
         this.features = [];
@@ -144,10 +143,9 @@ class SymbolBucket {
 
             let text;
             if (hasText) {
+                text = resolveText(this.layers[0], {zoom: this.zoom}, feature.properties);
                 if (rtlTextPlugin.applyArabicShaping) {
-                    text = rtlTextPlugin.applyArabicShaping(resolveText(feature, layout));
-                } else {
-                    text = resolveText(feature, layout);
+                    text = rtlTextPlugin.applyArabicShaping(text);
                 }
             }
 

js/style-spec/reference/v8.json

@@ -1082,9 +1082,10 @@
       "type": "string",
       "function": "piecewise-constant",
       "zoom-function": true,
+      "property-function": true,
       "default": "",
       "tokens": true,
-      "doc": "Value to use for a text label. Feature properties are specified using tokens like {field_name}.",
+      "doc": "Value to use for a text label. Feature properties are specified using tokens like {field_name}.  (Token replacement is only supported for literal text-field values--not for data-driven property functions.)",
       "sdk-support": {
         "basic functionality": {
           "js": "0.10.0",
@@ -1369,6 +1370,7 @@
       "type": "enum",
       "function": "piecewise-constant",
       "zoom-function": true,
+      "property-function": true,
       "values": {
         "none": {
             "doc": "The text is not altered."

js/symbol/resolve_text.js

@@ -2,14 +2,17 @@
 
 const resolveTokens = require('../util/token');
 
-module.exports = function resolveText(feature, layout) {
-    let text = resolveTokens(feature.properties, layout['text-field']);
+module.exports = function resolveText(layer, globalProperties, featureProperties) {
+    let text = layer.getLayoutValue('text-field', globalProperties, featureProperties);
+    if (layer.isLayoutValueFeatureConstant('text-field')) {
+        text = resolveTokens(featureProperties, text);
+    }
     if (!text) {
         return;
     }
     text = text.toString();
 
-    const transform = layout['text-transform'];
+    const transform = layer.getLayoutValue('text-transform', globalProperties, featureProperties);
     if (transform === 'uppercase') {
         text = text.toLocaleUpperCase();
     } else if (transform === 'lowercase') {

test/integration/render-tests/text-field/literal/style.json

@@ -0,0 +1,44 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 64,
+      "width": 64
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 0,
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, 0 ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "point",
+      "layout": {
+        "text-field": "Test",
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,62 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 64,
+      "width": 64,
+      "skipped": {
+        "native": "https://github.com/mapbox/mapbox-gl-native/issues/4860"
+      }
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 0,
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { "x": 1 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, -10 ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": { "x": 0 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, 10 ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "point",
+      "layout": {
+        "text-field": {
+          "type": "categorical",
+          "property": "x",
+          "stops": [
+            [0, "Zero"],
+            [1, "One"]
+          ]
+        },
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}

test/integration/render-tests/text-field/token/style.json

@@ -0,0 +1,52 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 64,
+      "width": 64
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 0,
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { "x": 1 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, -10 ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": { "x": 0 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, 10 ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "point",
+      "layout": {
+        "text-field": "Test {x}",
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,63 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 64,
+      "width": 64,
+      "skipped": {
+        "native": "https://github.com/mapbox/mapbox-gl-native/issues/4860"
+      }
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 0,
+  "sources": {
+    "point": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": { "x": 0 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, -10 ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": { "x": 1 },
+            "geometry": {
+              "type": "Point",
+              "coordinates": [ 0, 10 ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "text",
+      "type": "symbol",
+      "source": "point",
+      "layout": {
+        "text-field": "hello",
+        "text-transform": {
+          "type": "categorical",
+          "property": "x",
+          "stops": [
+            [0, "uppercase"],
+            [1, "lowercase"]
+          ]
+        },
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ]
+      }
+    }
+  ]
+}

test/js/symbol/resolve_text.test.js

@@ -1,58 +1,65 @@
 'use strict';
 
 const test = require('mapbox-gl-js-test').test;
+const StyleLayer = require('../../../js/style/style_layer');
 const resolveText = require('../../../js/symbol/resolve_text');
 
+function createLayer(layout) {
+    return new StyleLayer({
+        id: 'my-layer',
+        type: 'symbol',
+        layout: layout
+    });
+}
+
 test('resolveText', (t) => {
     // Basic.
     t.deepEqual(
-        resolveText({properties: {name: 'Test'}}, {'text-field': '{name}'}),
+        resolveText(createLayer({'text-field': '{name}'}), { zoom: 0 }, {name: 'Test'}),
         'Test');
     t.deepEqual(
-        resolveText({properties: {name: 'Test'}}, {'text-field': '{name}-suffix'}),
+        resolveText(createLayer({'text-field': '{name}-suffix'}), { zoom: 0 }, {name: 'Test'}),
         'Test-suffix');
 
     // Undefined property.
     t.deepEqual(
-        resolveText({properties: {}}, {'text-field': '{name}'}),
-        undefined);
+        resolveText(createLayer({'text-field': '{name}'}), { zoom: 0 }, {}), undefined);
     t.deepEqual(
-        resolveText({properties: {}}, {'text-field': '{name}-suffix'}),
-        '-suffix');
+        resolveText(createLayer({'text-field': '{name}-suffix'}), { zoom: 0 }, {}), '-suffix');
 
     // Non-latin.
     t.deepEqual(
-        resolveText({properties: {city: '서울특별시'}}, {'text-field': '{city}'}),
+        resolveText(createLayer({'text-field': '{city}'}), { zoom: 0 }, {city: '서울특별시'}),
         '서울특별시');
 
     // Unicode up to 65535.
     t.deepEqual(
-        resolveText({properties: {text: '\ufff0'}}, {'text-field': '{text}'}),
+        resolveText(createLayer({'text-field': '{text}'}), { zoom: 0 }, {text: '\ufff0'}),
         '\ufff0');
     t.deepEqual(
-        resolveText({properties: {text: '\uffff'}}, {'text-field': '{text}'}),
+        resolveText(createLayer({'text-field': '{text}'}), { zoom: 0 }, {text: '\uffff'}),
         '\uffff');
 
     // Non-string values cast to strings.
     t.deepEqual(
-        resolveText({properties: {name: 5000}}, {'text-field': '{name}'}),
+        resolveText(createLayer({'text-field': '{name}'}), { zoom: 0 }, {name: 5000}),
         '5000');
     t.deepEqual(
-        resolveText({properties: {name: -15.5}}, {'text-field': '{name}'}),
+        resolveText(createLayer({'text-field': '{name}'}), { zoom: 0 }, {name: -15.5}),
         '-15.5');
     t.deepEqual(
-        resolveText({properties: {name: true}}, {'text-field': '{name}'}),
+        resolveText(createLayer({'text-field': '{name}'}), { zoom: 0 }, {name: true}),
         'true');
 
     // Non-string values cast to strings, with token replacement.
     t.deepEqual(
-        resolveText({properties: {name: 5000}}, {'text-field': '{name}-suffix'}),
+        resolveText(createLayer({'text-field': '{name}-suffix'}), { zoom: 0 }, {name: 5000}),
         '5000-suffix');
     t.deepEqual(
-        resolveText({properties: {name: -15.5}}, {'text-field': '{name}-suffix'}),
+        resolveText(createLayer({'text-field': '{name}-suffix'}), { zoom: 0 }, {name: -15.5}),
         '-15.5-suffix');
     t.deepEqual(
-        resolveText({properties: {name: true}}, {'text-field': '{name}-suffix'}),
+        resolveText(createLayer({'text-field': '{name}-suffix'}), { zoom: 0 }, {name: true}),
         'true-suffix');
 
     t.end();