diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js index b83bb2a92be..484cc74b5d1 100644 --- a/src/lib/svg_text_utils.js +++ b/src/lib/svg_text_utils.js @@ -259,7 +259,7 @@ var ZERO_WIDTH_SPACE = '\u200b'; */ var PROTOCOLS = ['http:', 'https:', 'mailto:', '', undefined, ':']; -var NEWLINES = /(\r\n?|\n)/g; +var NEWLINES = exports.NEWLINES = /(\r\n?|\n)/g; var SPLIT_TAGS = /(<[^<>]*>)/; diff --git a/src/traces/scattermapbox/convert.js b/src/traces/scattermapbox/convert.js index 9aa9c13b79c..564ac69a71c 100644 --- a/src/traces/scattermapbox/convert.js +++ b/src/traces/scattermapbox/convert.js @@ -20,6 +20,9 @@ var makeBubbleSizeFn = require('../scatter/make_bubble_size_func'); var subTypes = require('../scatter/subtypes'); var convertTextOpts = require('../../plots/mapbox/convert_text_opts'); +var NEWLINES = require('../../lib/svg_text_utils').NEWLINES; +var BR_TAG_ALL = require('../../lib/svg_text_utils').BR_TAG_ALL; + module.exports = function convert(gd, calcTrace) { var trace = calcTrace[0].trace; @@ -234,14 +237,13 @@ function makeSymbolGeoJSON(calcTrace, gd) { var marker = trace.marker || {}; var symbol = marker.symbol; - var text = trace.text; var fillSymbol = (symbol !== 'circle') ? getFillFunc(symbol) : blankFillFunc; var fillText = subTypes.hasText(trace) ? - getFillFunc(text) : + getFillFunc(trace.text) : blankFillFunc; var features = []; @@ -261,6 +263,9 @@ function makeSymbolGeoJSON(calcTrace, gd) { calcPt.txt = Lib.texttemplateString(txti, {}, gd._fullLayout._d3locale, calcPt, trace._meta || {}); } + var text = txt ? calcPt.txt : fillText(calcPt.tx); + if(text) text = text.replace(NEWLINES, '').replace(BR_TAG_ALL, '\n'); + features.push({ type: 'Feature', geometry: { @@ -269,7 +274,7 @@ function makeSymbolGeoJSON(calcTrace, gd) { }, properties: { symbol: fillSymbol(calcPt.mx), - text: txt ? calcPt.txt : fillText(calcPt.tx) + text: text } }); } diff --git a/test/image/baselines/mapbox_bubbles-text.png b/test/image/baselines/mapbox_bubbles-text.png index 39b7958b415..6dd6234575a 100644 Binary files a/test/image/baselines/mapbox_bubbles-text.png and b/test/image/baselines/mapbox_bubbles-text.png differ diff --git a/test/image/mocks/mapbox_bubbles-text.json b/test/image/mocks/mapbox_bubbles-text.json index 559e8f2676b..338936f01b4 100644 --- a/test/image/mocks/mapbox_bubbles-text.json +++ b/test/image/mocks/mapbox_bubbles-text.json @@ -27,8 +27,8 @@ }, "text": [ "A", - "B", - "C" + "B \n b", + "C
c" ], "textposition": "top left", "textfont": { diff --git a/test/jasmine/tests/scattermapbox_test.js b/test/jasmine/tests/scattermapbox_test.js index 51839f51af7..0b2de0ef307 100644 --- a/test/jasmine/tests/scattermapbox_test.js +++ b/test/jasmine/tests/scattermapbox_test.js @@ -493,6 +493,32 @@ describe('scattermapbox convert', function() { expect(actualText).toEqual(['A', 'B', 'C', 'F', '']); }); + it('should convert \\n to \'\' and
to \\n', function() { + var opts = _convert(Lib.extendFlat({}, base, { + mode: 'text', + text: ['one\nline', 'two
lines', 'three
lines
yep'] + })); + + var actualText = opts.symbol.geojson.features.map(function(f) { + return f.properties.text; + }); + + expect(actualText).toEqual(['oneline', 'two\nlines', 'three\nlines\nyep', undefined, undefined]); + }); + + it('should convert \\n to \'\' and
to \\n - texttemplate case', function() { + var opts = _convert(Lib.extendFlat({}, base, { + mode: 'text', + texttemplate: ['%{lon}\none\nline', '%{lat}
two
lines', '%{lon}\n%{lat}
more
lines'] + })); + + var actualText = opts.symbol.geojson.features.map(function(f) { + return f.properties.text; + }); + + expect(actualText).toEqual(['10oneline', '20\ntwo\nlines', '3010\nmore\nlines', '', '']); + }); + it('should generate correct output for texttemplate', function() { var mock = { 'type': 'scattermapbox',