diff --git a/src/data/bucket/symbol_bucket.js b/src/data/bucket/symbol_bucket.js index 5490d70edf5..4c345264ba3 100644 --- a/src/data/bucket/symbol_bucket.js +++ b/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), diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json index 7062b240902..593c71b6d7f 100644 --- a/src/style-spec/reference/v8.json +++ b/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": { diff --git a/test/integration/render-tests/text-max-width/property-function/expected.png b/test/integration/render-tests/text-max-width/property-function/expected.png new file mode 100644 index 00000000000..3be4c11a844 Binary files /dev/null and b/test/integration/render-tests/text-max-width/property-function/expected.png differ diff --git a/test/integration/render-tests/text-max-width/property-function/style.json b/test/integration/render-tests/text-max-width/property-function/style.json new file mode 100644 index 00000000000..8b7b950b696 --- /dev/null +++ b/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" + ] + } + } + ] +} diff --git a/test/integration/render-tests/text-max-width/zoom-and-property-function/expected.png b/test/integration/render-tests/text-max-width/zoom-and-property-function/expected.png new file mode 100644 index 00000000000..4a664e568ea Binary files /dev/null and b/test/integration/render-tests/text-max-width/zoom-and-property-function/expected.png differ diff --git a/test/integration/render-tests/text-max-width/zoom-and-property-function/style.json b/test/integration/render-tests/text-max-width/zoom-and-property-function/style.json new file mode 100644 index 00000000000..647aee5d3f3 --- /dev/null +++ b/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" + ] + } + } + ] +}