Skip to content

Commit f3c0356

Browse files
archmojarchmoj
committed
improve mapbox text weight and italic handling
1 parent 990fa8d commit f3c0356

File tree

5 files changed

+87
-57
lines changed

5 files changed

+87
-57
lines changed

‎src/traces/scattermapbox/constants.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use strict';
2+
3+
// Must use one of the following fonts as the family, else default to 'Open Sans Regular'
4+
// See https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json
5+
var supportedFonts = [
6+
'Metropolis Black Italic',
7+
'Metropolis Black',
8+
'Metropolis Bold Italic',
9+
'Metropolis Bold',
10+
'Metropolis Extra Bold Italic',
11+
'Metropolis Extra Bold',
12+
'Metropolis Extra Light Italic',
13+
'Metropolis Extra Light',
14+
'Metropolis Light Italic',
15+
'Metropolis Light',
16+
'Metropolis Medium Italic',
17+
'Metropolis Medium',
18+
'Metropolis Regular Italic',
19+
'Metropolis Regular',
20+
'Metropolis Semi Bold Italic',
21+
'Metropolis Semi Bold',
22+
'Metropolis Thin Italic',
23+
'Metropolis Thin',
24+
'Open Sans Bold Italic',
25+
'Open Sans Bold',
26+
'Open Sans Extra Bold Italic',
27+
'Open Sans Extra Bold',
28+
'Open Sans Italic',
29+
'Open Sans Light Italic',
30+
'Open Sans Light',
31+
'Open Sans Regular',
32+
'Open Sans Semibold Italic',
33+
'Open Sans Semibold',
34+
'Klokantech Noto Sans Bold',
35+
'Klokantech Noto Sans CJK Bold',
36+
'Klokantech Noto Sans CJK Regular',
37+
'Klokantech Noto Sans Italic',
38+
'Klokantech Noto Sans Regular'
39+
];
40+
41+
module.exports = {
42+
isSupportedFont: function(a) {
43+
return supportedFonts.indexOf(a) !== -1;
44+
}
45+
};

‎src/traces/scattermapbox/convert.js

+34-17
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var Colorscale = require('../../components/colorscale');
1010
var Drawing = require('../../components/drawing');
1111
var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
1212
var subTypes = require('../scatter/subtypes');
13+
var isSupportedFont = require('./constants').isSupportedFont;
1314
var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
1415
var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPointValue;
1516

@@ -372,13 +373,20 @@ function getTextFont(trace) {
372373
var family = font.family;
373374
var style = font.style;
374375
var weight = font.weight;
375-
var str = '';
376376

377-
if(weight === 'bold') {
377+
var parts = family.split(' ');
378+
var isItalic = parts[parts.length - 1] === 'Italic';
379+
if(isItalic) parts.pop();
380+
isItalic = isItalic || style === 'italic';
381+
382+
var str = parts.join(' ');
383+
if(weight === 'bold' && parts.indexOf('Bold') === -1) {
378384
str += ' Bold';
379385
} else if(weight <= 1000) { // numeric font-weight
380386
// See supportedFonts
381-
if(family.slice(10) === 'Metropolis') {
387+
388+
if(parts[0] === 'Metropolis') {
389+
str = 'Metropolis';
382390
if(weight > 850) str += ' Black';
383391
else if(weight > 750) str += ' Extra Bold';
384392
else if(weight > 650) str += ' Bold';
@@ -387,26 +395,35 @@ function getTextFont(trace) {
387395
else if(weight > 350) str += ' Regular';
388396
else if(weight > 250) str += ' Light';
389397
else if(weight > 150) str += ' Extra Light';
390-
str += ' Thin';
391-
} else if(family.slice(9) === 'Open Sans') {
392-
if(weight > 750) str += ' Extra Bold';
393-
else if(weight > 650) str += ' Bold';
398+
else str += ' Thin';
399+
} else if(parts[0] === 'Open' && parts[1] === 'Sans') {
400+
str = 'Open Sans';
401+
402+
// N.B.Extra Bold is not supported although is listed as supported!
403+
/* if(weight > 750) str += ' Extra Bold';
404+
else */ if(weight > 650) str += ' Bold';
394405
else if(weight > 550) str += ' Semibold';
395-
else if(weight > 450) str += ' Medium';
396406
else if(weight > 350) str += ' Regular';
397-
else if(weight > 250) str += ' Light';
398-
else if(weight > 150) str += ' Extra Light';
399-
str += ' Thin';
407+
else str += ' Light';
400408
} else { // Other families
401-
if(weight > 500) str += ' Bold';
402-
str += ' Regular';
409+
str = 'Klokantech Noto Sans';
410+
if(parts[3] === 'CJK') str += ' CJK';
411+
str += (weight > 500) ? ' Bold' : ' Regular';
403412
}
404413
}
405414

406-
if(style === 'italic') str += ' Italic';
415+
if(isItalic) str += ' Italic';
416+
417+
if(str === 'Open Sans Regular Italic') str = 'Open Sans Italic';
418+
else if(str === 'Open Sans Regular Bold') str = 'Open Sans Bold';
419+
else if(str === 'Open Sans Regular Bold Italic') str = 'Open Sans Bold Italic';
420+
else if(str === 'Klokantech Noto Sans Regular Italic') str = 'Klokantech Noto Sans Italic';
421+
422+
// Ensure the result is a supported font
423+
if(!isSupportedFont(str)) {
424+
str = family;
425+
}
407426

408-
var textFont = family;
409-
if(str) textFont = textFont.replace(' Regular', str);
410-
textFont = textFont.split(', ');
427+
var textFont = str.split(', ');
411428
return textFont;
412429
}

‎src/traces/scattermapbox/defaults.js

+4-39
Original file line numberDiff line numberDiff line change
@@ -8,44 +8,7 @@ var handleLineDefaults = require('../scatter/line_defaults');
88
var handleTextDefaults = require('../scatter/text_defaults');
99
var handleFillColorDefaults = require('../scatter/fillcolor_defaults');
1010
var attributes = require('./attributes');
11-
12-
// Must use one of the following fonts as the family, else default to 'Open Sans Regular'
13-
// See https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json
14-
var supportedFonts = [
15-
'Metropolis Black Italic',
16-
'Metropolis Black',
17-
'Metropolis Bold Italic',
18-
'Metropolis Bold',
19-
'Metropolis Extra Bold Italic',
20-
'Metropolis Extra Bold',
21-
'Metropolis Extra Light Italic',
22-
'Metropolis Extra Light',
23-
'Metropolis Light Italic',
24-
'Metropolis Light',
25-
'Metropolis Medium Italic',
26-
'Metropolis Medium',
27-
'Metropolis Regular Italic',
28-
'Metropolis Regular',
29-
'Metropolis Semi Bold Italic',
30-
'Metropolis Semi Bold',
31-
'Metropolis Thin Italic',
32-
'Metropolis Thin',
33-
'Open Sans Bold Italic',
34-
'Open Sans Bold',
35-
'Open Sans Extra Bold Italic',
36-
'Open Sans Extra Bold',
37-
'Open Sans Italic',
38-
'Open Sans Light Italic',
39-
'Open Sans Light',
40-
'Open Sans Regular',
41-
'Open Sans Semibold Italic',
42-
'Open Sans Semibold',
43-
'Klokantech Noto Sans Bold',
44-
'Klokantech Noto Sans CJK Bold',
45-
'Klokantech Noto Sans CJK Regular',
46-
'Klokantech Noto Sans Italic',
47-
'Klokantech Noto Sans Regular'
48-
];
11+
var isSupportedFont = require('./constants').isSupportedFont;
4912

5013
module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
5114
function coerce(attr, dflt) {
@@ -104,12 +67,14 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
10467
var clusterEnabled = coerce('cluster.enabled', clusterEnabledDflt);
10568

10669
if(clusterEnabled || subTypes.hasText(traceOut)) {
70+
var layoutFontFamily = layout.font.family;
71+
10772
handleTextDefaults(traceIn, traceOut, layout, coerce,
10873
{
10974
noSelect: true,
11075
noFontVariant: true,
11176
font: {
112-
family: supportedFonts.indexOf(layout.font.family) !== -1 ? layout.font.family : 'Open Sans Regular',
77+
family: isSupportedFont(layoutFontFamily) ? layoutFontFamily : 'Open Sans Regular',
11378
weight: layout.font.weight,
11479
style: layout.font.style,
11580
size: layout.font.size,

‎test/image/baselines/mapbox_scattercluster.png

-800 Bytes
Loading

‎test/image/mocks/mapbox_scattercluster.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"data": [
33
{
4+
"textfont": { "weight": 200 },
45
"type": "scattermapbox",
56
"subplot": "mapbox",
67
"name": "20 (20)",
@@ -52,6 +53,7 @@
5253
]
5354
},
5455
{
56+
"textfont": { "weight": 400 },
5557
"type": "scattermapbox",
5658
"subplot": "mapbox2",
5759
"name": "20 (10)",
@@ -100,6 +102,7 @@
100102
]
101103
},
102104
{
105+
"textfont": { "weight": 600 },
103106
"type": "scattermapbox",
104107
"subplot": "mapbox3",
105108
"name": "10 (20)",
@@ -148,6 +151,7 @@
148151
]
149152
},
150153
{
154+
"textfont": { "weight": 800 },
151155
"type": "scattermapbox",
152156
"subplot": "mapbox4",
153157
"name": "10 (10)",
@@ -198,7 +202,6 @@
198202
],
199203
"layout": {
200204
"font": {
201-
"weight": "bold",
202205
"style": "italic"
203206
},
204207
"title": {

0 commit comments

Comments
 (0)