Add support for numeric font weight

draftlogs/6990_add.md

@@ -0,0 +1 @@
+ - Add support for numeric text font `weight` [[#6990](https://github.com/plotly/plotly.js/pull/6990)]

src/lib/coerce.js

@@ -100,6 +100,8 @@ exports.valObjectMeta = {
         requiredOpts: [],
         otherOpts: ['dflt', 'min', 'max', 'arrayOk'],
         coerceFunction: function(v, propOut, dflt, opts) {
+            if(isTypedArraySpec(v)) v = decodeTypedArraySpec(v);
+
             if(!isNumeric(v) ||
                     (opts.min !== undefined && v < opts.min) ||
                     (opts.max !== undefined && v > opts.max)) {
@@ -114,8 +116,15 @@ exports.valObjectMeta = {
             'are coerced to the `dflt`.'
         ].join(' '),
         requiredOpts: [],
-        otherOpts: ['dflt', 'min', 'max', 'arrayOk'],
+        otherOpts: ['dflt', 'min', 'max', 'arrayOk', 'extras'],
         coerceFunction: function(v, propOut, dflt, opts) {
+            if((opts.extras || []).indexOf(v) !== -1) {
+                propOut.set(v);
+                return;
+            }
+
+            if(isTypedArraySpec(v)) v = decodeTypedArraySpec(v);
+
             if(v % 1 || !isNumeric(v) ||
                     (opts.min !== undefined && v < opts.min) ||
                     (opts.max !== undefined && v > opts.max)) {
@@ -156,6 +165,8 @@ exports.valObjectMeta = {
         requiredOpts: [],
         otherOpts: ['dflt', 'arrayOk'],
         coerceFunction: function(v, propOut, dflt) {
+            if(isTypedArraySpec(v)) v = decodeTypedArraySpec(v);
+
             if(tinycolor(v).isValid()) propOut.set(v);
             else propOut.set(dflt);
         }
@@ -198,6 +209,8 @@ exports.valObjectMeta = {
         requiredOpts: [],
         otherOpts: ['dflt', 'arrayOk'],
         coerceFunction: function(v, propOut, dflt) {
+            if(isTypedArraySpec(v)) v = decodeTypedArraySpec(v);
+
             if(v === 'auto') propOut.set('auto');
             else if(!isNumeric(v)) propOut.set(dflt);
             else propOut.set(modHalf(+v, 360));

src/plots/font_attributes.js

@@ -20,6 +20,27 @@ module.exports = function(opts) {
     var editType = opts.editType;
     var colorEditType = opts.colorEditType;
     if(colorEditType === undefined) colorEditType = editType;
+
+    var weight = {
+        editType: editType,
+        valType: 'integer',
+        min: 1,
+        max: 1000,
+        extras: ['normal', 'bold'],
+        dflt: 'normal',
+        description: [
+            'Sets the weight (or boldness) of the font.'
+        ].join(' ')
+    };
+
+    if(opts.noNumericWeightValues) {
+        weight.valType = 'enumerated';
+        weight.values = weight.extras;
+        weight.extras = undefined;
+        weight.min = undefined;
+        weight.max = undefined;
+    }
+
     var attrs = {
         family: {
             valType: 'string',
@@ -49,15 +70,7 @@ module.exports = function(opts) {
             editType: colorEditType
         },
 
-        weight: {
-            editType: editType,
-            valType: 'enumerated',
-            values: ['normal', 'bold'],
-            dflt: 'normal',
-            description: [
-                'Sets the weight (or boldness) of the font.'
-            ].join(' ')
-        },
+        weight: weight,
 
         style: {
             editType: editType,

src/snapshot/tosvg.js

@@ -107,7 +107,7 @@ module.exports = function toSVG(gd, format, scale) {
 
             // Drop normal font-weight, font-style and font-variant to reduce the size
             var fw = this.style.fontWeight;
-            if(fw && fw === 'normal') {
+            if(fw && (fw === 'normal' || fw === '400')) { // font-weight 400 is similar to normal
                 txt.style('font-weight', undefined);
             }
             var fs = this.style.fontStyle;

src/traces/scattergl/attributes.js

@@ -41,6 +41,7 @@ var attrs = module.exports = overrideAll({
         editType: 'calc',
         colorEditType: 'style',
         arrayOk: true,
+        noNumericWeightValues: true,
         variantValues: ['normal', 'small-caps'],
         description: 'Sets the text font.'
     }),

src/traces/scattergl/convert.js

@@ -190,7 +190,7 @@ function convertTextStyle(gd, trace) {
     if(
         isArrayOrTypedArray(tfs) ||
         Array.isArray(tff) ||
-        Array.isArray(tfw) ||
+        isArrayOrTypedArray(tfw) ||
         Array.isArray(tfy) ||
         Array.isArray(tfv)
     ) {
@@ -207,7 +207,7 @@ function convertTextStyle(gd, trace) {
             ) * plotGlPixelRatio;
 
             fonti.family = Array.isArray(tff) ? tff[i] : tff;
-            fonti.weight = Array.isArray(tfw) ? tfw[i] : tfw;
+            fonti.weight = weightFallBack(isArrayOrTypedArray(tfw) ? tfw[i] : tfw);
             fonti.style = Array.isArray(tfy) ? tfy[i] : tfy;
             fonti.variant = Array.isArray(tfv) ? tfv[i] : tfv;
         }
@@ -216,7 +216,7 @@ function convertTextStyle(gd, trace) {
         optsOut.font = {
             size: tfs * plotGlPixelRatio,
             family: tff,
-            weight: tfw,
+            weight: weightFallBack(tfw),
             style: tfy,
             variant: tfv
         };
@@ -225,6 +225,14 @@ function convertTextStyle(gd, trace) {
     return optsOut;
 }
 
+// scattergl rendering pipeline has limited support of numeric weight values
+// Here we map the numbers to be either bold or normal.
+function weightFallBack(w) {
+    if(w <= 1000) {
+        return w > 500 ? 'bold' : 'normal';
+    }
+    return w;
+}
 
 function convertMarkerStyle(gd, trace) {
     var count = trace._length;

src/traces/scattermapbox/constants.js

@@ -0,0 +1,45 @@
+'use strict';
+
+// Must use one of the following fonts as the family, else default to 'Open Sans Regular'
+// See https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json
+var supportedFonts = [
+    'Metropolis Black Italic',
+    'Metropolis Black',
+    'Metropolis Bold Italic',
+    'Metropolis Bold',
+    'Metropolis Extra Bold Italic',
+    'Metropolis Extra Bold',
+    'Metropolis Extra Light Italic',
+    'Metropolis Extra Light',
+    'Metropolis Light Italic',
+    'Metropolis Light',
+    'Metropolis Medium Italic',
+    'Metropolis Medium',
+    'Metropolis Regular Italic',
+    'Metropolis Regular',
+    'Metropolis Semi Bold Italic',
+    'Metropolis Semi Bold',
+    'Metropolis Thin Italic',
+    'Metropolis Thin',
+    'Open Sans Bold Italic',
+    'Open Sans Bold',
+    'Open Sans Extrabold Italic',
+    'Open Sans Extrabold',
+    'Open Sans Italic',
+    'Open Sans Light Italic',
+    'Open Sans Light',
+    'Open Sans Regular',
+    'Open Sans Semibold Italic',
+    'Open Sans Semibold',
+    'Klokantech Noto Sans Bold',
+    'Klokantech Noto Sans CJK Bold',
+    'Klokantech Noto Sans CJK Regular',
+    'Klokantech Noto Sans Italic',
+    'Klokantech Noto Sans Regular'
+];
+
+module.exports = {
+    isSupportedFont: function(a) {
+        return supportedFonts.indexOf(a) !== -1;
+    }
+};

src/traces/scattermapbox/convert.js

@@ -10,6 +10,7 @@ var Colorscale = require('../../components/colorscale');
 var Drawing = require('../../components/drawing');
 var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var subTypes = require('../scatter/subtypes');
+var isSupportedFont = require('./constants').isSupportedFont;
 var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
 var appendArrayPointValue = require('../../components/fx/helpers').appendArrayPointValue;
 
@@ -369,11 +370,58 @@ function arrayifyAttribute(values, step) {
 
 function getTextFont(trace) {
     var font = trace.textfont;
-    var str = '';
-    if(font.weight === 'bold') str += ' Bold';
-    if(font.style === 'italic') str += ' Italic';
-    var textFont = font.family;
-    if(str) textFont = textFont.replace(' Regular', str);
-    textFont = textFont.split(', ');
+    var family = font.family;
+    var style = font.style;
+    var weight = font.weight;
+
+    var parts = family.split(' ');
+    var isItalic = parts[parts.length - 1] === 'Italic';
+    if(isItalic) parts.pop();
+    isItalic = isItalic || style === 'italic';
+
+    var str = parts.join(' ');
+    if(weight === 'bold' && parts.indexOf('Bold') === -1) {
+        str += ' Bold';
+    } else if(weight <= 1000) { // numeric font-weight
+        // See supportedFonts
+
+        if(parts[0] === 'Metropolis') {
+            str = 'Metropolis';
+            if(weight > 850) str += ' Black';
+            else if(weight > 750) str += ' Extra Bold';
+            else if(weight > 650) str += ' Bold';
+            else if(weight > 550) str += ' Semi Bold';
+            else if(weight > 450) str += ' Medium';
+            else if(weight > 350) str += ' Regular';
+            else if(weight > 250) str += ' Light';
+            else if(weight > 150) str += ' Extra Light';
+            else str += ' Thin';
+        } else if(parts.slice(0, 2).join(' ') === 'Open Sans') {
+            str = 'Open Sans';
+            if(weight > 750) str += ' Extrabold';
+            else if(weight > 650) str += ' Bold';
+            else if(weight > 550) str += ' Semibold';
+            else if(weight > 350) str += ' Regular';
+            else str += ' Light';
+        } else if(parts.slice(0, 3).join(' ') === 'Klokantech Noto Sans') {
+            str = 'Klokantech Noto Sans';
+            if(parts[3] === 'CJK') str += ' CJK';
+            str += (weight > 500) ? ' Bold' : ' Regular';
+        }
+    }
+
+    if(isItalic) str += ' Italic';
+
+    if(str === 'Open Sans Regular Italic') str = 'Open Sans Italic';
+    else if(str === 'Open Sans Regular Bold') str = 'Open Sans Bold';
+    else if(str === 'Open Sans Regular Bold Italic') str = 'Open Sans Bold Italic';
+    else if(str === 'Klokantech Noto Sans Regular Italic') str = 'Klokantech Noto Sans Italic';
+
+    // Ensure the result is a supported font
+    if(!isSupportedFont(str)) {
+        str = family;
+    }
+
+    var textFont = str.split(', ');
     return textFont;
 }

src/traces/scattermapbox/defaults.js

@@ -8,44 +8,7 @@ var handleLineDefaults = require('../scatter/line_defaults');
 var handleTextDefaults = require('../scatter/text_defaults');
 var handleFillColorDefaults = require('../scatter/fillcolor_defaults');
 var attributes = require('./attributes');
-
-// Must use one of the following fonts as the family, else default to 'Open Sans Regular'
-// See https://github.com/openmaptiles/fonts/blob/gh-pages/fontstacks.json
-var supportedFonts = [
-    'Metropolis Black Italic',
-    'Metropolis Black',
-    'Metropolis Bold Italic',
-    'Metropolis Bold',
-    'Metropolis Extra Bold Italic',
-    'Metropolis Extra Bold',
-    'Metropolis Extra Light Italic',
-    'Metropolis Extra Light',
-    'Metropolis Light Italic',
-    'Metropolis Light',
-    'Metropolis Medium Italic',
-    'Metropolis Medium',
-    'Metropolis Regular Italic',
-    'Metropolis Regular',
-    'Metropolis Semi Bold Italic',
-    'Metropolis Semi Bold',
-    'Metropolis Thin Italic',
-    'Metropolis Thin',
-    'Open Sans Bold Italic',
-    'Open Sans Bold',
-    'Open Sans Extra Bold Italic',
-    'Open Sans Extra Bold',
-    'Open Sans Italic',
-    'Open Sans Light Italic',
-    'Open Sans Light',
-    'Open Sans Regular',
-    'Open Sans Semibold Italic',
-    'Open Sans Semibold',
-    'Klokantech Noto Sans Bold',
-    'Klokantech Noto Sans CJK Bold',
-    'Klokantech Noto Sans CJK Regular',
-    'Klokantech Noto Sans Italic',
-    'Klokantech Noto Sans Regular'
-];
+var isSupportedFont = require('./constants').isSupportedFont;
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
@@ -104,12 +67,14 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     var clusterEnabled = coerce('cluster.enabled', clusterEnabledDflt);
 
     if(clusterEnabled || subTypes.hasText(traceOut)) {
+        var layoutFontFamily = layout.font.family;
+
         handleTextDefaults(traceIn, traceOut, layout, coerce,
             {
                 noSelect: true,
                 noFontVariant: true,
                 font: {
-                    family: supportedFonts.indexOf(layout.font.family) !== -1 ? layout.font.family : 'Open Sans Regular',
+                    family: isSupportedFont(layoutFontFamily) ? layoutFontFamily : 'Open Sans Regular',
                     weight: layout.font.weight,
                     style: layout.font.style,
                     size: layout.font.size,