Skip to content

Commit 901bf3e

Browse files
archmojarchmoj
authored
Merge pull request #6956 from plotly/font-styles
Add "bold" `weight`, "italic" `style` and "small-caps" `variant` to fonts
2 parents 8b67ed6 + 35a025a commit 901bf3e

File tree

115 files changed

+13939
-389
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+13939
-389
lines changed

‎draftlogs/6956_add.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
- Add "bold" weight, "italic" style and "small-caps" variant options to fonts [[#6956](https://github.com/plotly/plotly.js/pull/6956)]

‎package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
"d3-time-format": "^2.2.3",
9696
"fast-isnumeric": "^1.1.4",
9797
"gl-mat4": "^1.2.0",
98-
"gl-text": "^1.3.1",
98+
"gl-text": "^1.4.0",
9999
"has-hover": "^1.0.1",
100100
"has-passive-events": "^1.0.0",
101101
"is-mobile": "^4.0.0",

‎src/components/annotations/common_defaults.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,12 @@ module.exports = function handleAnnotationCommonDefaults(annIn, annOut, fullLayo
5858
Color.contrast(hoverBG)
5959
);
6060

61-
Lib.coerceFont(coerce, 'hoverlabel.font', {
62-
family: globalHoverLabel.font.family,
63-
size: globalHoverLabel.font.size,
64-
color: globalHoverLabel.font.color || hoverBorder
65-
});
61+
var fontDflt = Lib.extendFlat({}, globalHoverLabel.font);
62+
if(!fontDflt.color) {
63+
fontDflt.color = hoverBorder;
64+
}
65+
66+
Lib.coerceFont(coerce, 'hoverlabel.font', fontDflt);
6667
}
6768

6869
coerce('captureevents', !!hoverText);

‎src/components/annotations/draw.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,10 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
195195
borderColor: hoverOptions.bordercolor,
196196
fontFamily: hoverFont.family,
197197
fontSize: hoverFont.size,
198-
fontColor: hoverFont.color
198+
fontColor: hoverFont.color,
199+
fontWeight: hoverFont.weight,
200+
fontStyle: hoverFont.style,
201+
fontVariant: hoverFont.variant
199202
}, {
200203
container: fullLayout._hoverlayer.node(),
201204
outerContainer: fullLayout._paper.node(),

‎src/components/colorbar/defaults.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,9 @@ module.exports = function colorbarDefaults(containerIn, containerOut, layout) {
125125

126126
var tickFont = colorbarOut.showticklabels ? colorbarOut.tickfont : font;
127127
var dfltTitleFont = Lib.extendFlat({}, tickFont, {
128+
weight: font.weight,
129+
style: font.style,
130+
variant: font.variant,
128131
color: font.color,
129132
size: Lib.bigFont(tickFont.size)
130133
});

‎src/components/drawing/index.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,23 @@ var drawing = module.exports = {};
2727
// styling functions for plot elements
2828
// -----------------------------------------------------
2929

30-
drawing.font = function(s, family, size, color) {
31-
// also allow the form font(s, {family, size, color})
30+
drawing.font = function(s, family, size, color, weight, style, variant) {
31+
// also allow the form font(s, {family, size, color, weight, style, variant})
3232
if(Lib.isPlainObject(family)) {
33+
variant = family.variant;
34+
style = family.style;
35+
weight = family.weight;
3336
color = family.color;
3437
size = family.size;
3538
family = family.family;
3639
}
3740
if(family) s.style('font-family', family);
3841
if(size + 1) s.style('font-size', size + 'px');
3942
if(color) s.call(Color.fill, color);
43+
44+
if(weight) s.style('font-weight', weight);
45+
if(style) s.style('font-style', style);
46+
if(variant) s.style('font-variant', variant);
4047
};
4148

4249
/*
@@ -1126,10 +1133,14 @@ drawing.textPointStyle = function(s, trace, gd) {
11261133
selectedTextColorFn(d) :
11271134
(d.tc || trace.textfont.color);
11281135

1129-
p.call(drawing.font,
1130-
d.tf || trace.textfont.family,
1131-
fontSize,
1132-
fontColor)
1136+
p.call(drawing.font, {
1137+
family: d.tf || trace.textfont.family,
1138+
weight: d.tw || trace.textfont.weight,
1139+
style: d.ty || trace.textfont.style,
1140+
variant: d.tv || trace.textfont.variant,
1141+
size: fontSize,
1142+
color: fontColor
1143+
})
11331144
.text(text)
11341145
.call(svgTextUtils.convertToTspans, gd)
11351146
.call(textPointPosition, pos, fontSize, d.mrc);

‎src/components/fx/calc.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ module.exports = function calc(gd) {
3535
fillFn(trace.hoverlabel.font.size, cd, 'hts');
3636
fillFn(trace.hoverlabel.font.color, cd, 'htc');
3737
fillFn(trace.hoverlabel.font.family, cd, 'htf');
38+
fillFn(trace.hoverlabel.font.weight, cd, 'htw');
39+
fillFn(trace.hoverlabel.font.style, cd, 'hty');
40+
fillFn(trace.hoverlabel.font.variant, cd, 'htv');
3841
fillFn(trace.hoverlabel.namelength, cd, 'hnl');
3942
fillFn(trace.hoverlabel.align, cd, 'hta');
4043
}

‎src/components/fx/hover.js

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,9 @@ exports.loneHover = function loneHover(hoverItems, opts) {
193193
fontFamily: hoverItem.fontFamily,
194194
fontSize: hoverItem.fontSize,
195195
fontColor: hoverItem.fontColor,
196+
fontWeight: hoverItem.fontWeight,
197+
fontStyle: hoverItem.fontStyle,
198+
fontVariant: hoverItem.fontVariant,
196199
nameLength: hoverItem.nameLength,
197200
textAlign: hoverItem.textAlign,
198201

@@ -955,6 +958,9 @@ function createHoverText(hoverData, opts) {
955958
// can override this.
956959
var fontFamily = opts.fontFamily || constants.HOVERFONT;
957960
var fontSize = opts.fontSize || constants.HOVERFONTSIZE;
961+
var fontWeight = opts.fontWeight || fullLayout.font.weight;
962+
var fontStyle = opts.fontStyle || fullLayout.font.style;
963+
var fontVariant = opts.fontVariant || fullLayout.font.variant;
958964

959965
var c0 = hoverData[0];
960966
var xa = c0.xa;
@@ -1036,6 +1042,9 @@ function createHoverText(hoverData, opts) {
10361042
var commonStroke = commonLabelOpts.bordercolor || Color.contrast(commonBgColor);
10371043
var contrastColor = Color.contrast(commonBgColor);
10381044
var commonLabelFont = {
1045+
weight: commonLabelOpts.font.weight || fontWeight,
1046+
style: commonLabelOpts.font.style || fontStyle,
1047+
variant: commonLabelOpts.font.variant || fontVariant,
10391048
family: commonLabelOpts.font.family || fontFamily,
10401049
size: commonLabelOpts.font.size || fontSize,
10411050
color: commonLabelOpts.font.color || contrastColor
@@ -1357,7 +1366,13 @@ function createHoverText(hoverData, opts) {
13571366
g.append('path')
13581367
.style('stroke-width', '1px');
13591368
g.append('text').classed('nums', true)
1360-
.call(Drawing.font, fontFamily, fontSize);
1369+
.call(Drawing.font, {
1370+
weight: fontWeight,
1371+
style: fontStyle,
1372+
variant: fontVariant,
1373+
family: fontFamily,
1374+
size: fontSize
1375+
});
13611376
});
13621377
hoverLabels.exit().remove();
13631378

@@ -1392,10 +1407,14 @@ function createHoverText(hoverData, opts) {
13921407

13931408
// main label
13941409
var tx = g.select('text.nums')
1395-
.call(Drawing.font,
1396-
d.fontFamily || fontFamily,
1397-
d.fontSize || fontSize,
1398-
d.fontColor || contrastColor)
1410+
.call(Drawing.font, {
1411+
family: d.fontFamily || fontFamily,
1412+
size: d.fontSize || fontSize,
1413+
color: d.fontColor || contrastColor,
1414+
weight: d.fontWeight || fontWeight,
1415+
style: d.fontStyle || fontStyle,
1416+
variant: d.fontVariant || fontVariant
1417+
})
13991418
.text(text)
14001419
.attr('data-notex', 1)
14011420
.call(svgTextUtils.positionText, 0, 0)
@@ -1407,11 +1426,14 @@ function createHoverText(hoverData, opts) {
14071426

14081427
// secondary label for non-empty 'name'
14091428
if(name && name !== text) {
1410-
tx2.call(Drawing.font,
1411-
d.fontFamily || fontFamily,
1412-
d.fontSize || fontSize,
1413-
nameColor)
1414-
.text(name)
1429+
tx2.call(Drawing.font, {
1430+
family: d.fontFamily || fontFamily,
1431+
size: d.fontSize || fontSize,
1432+
color: nameColor,
1433+
weight: d.fontWeight || fontWeight,
1434+
style: d.fontStyle || fontStyle,
1435+
variant: d.fontVariant || fontVariant
1436+
}).text(name)
14151437
.attr('data-notex', 1)
14161438
.call(svgTextUtils.positionText, 0, 0)
14171439
.call(svgTextUtils.convertToTspans, gd);
@@ -1954,6 +1976,9 @@ function cleanPoint(d, hovermode) {
19541976
fill('fontFamily', 'htf', 'hoverlabel.font.family');
19551977
fill('fontSize', 'hts', 'hoverlabel.font.size');
19561978
fill('fontColor', 'htc', 'hoverlabel.font.color');
1979+
fill('fontWeight', 'htw', 'hoverlabel.font.weight');
1980+
fill('fontStyle', 'hty', 'hoverlabel.font.style');
1981+
fill('fontVariant', 'htv', 'hoverlabel.font.variant');
19571982
fill('nameLength', 'hnl', 'hoverlabel.namelength');
19581983
fill('textAlign', 'hta', 'hoverlabel.align');
19591984

‎src/components/fx/hoverlabel_defaults.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ module.exports = function handleHoverLabelDefaults(contIn, contOut, coerce, opts
2121
inheritFontAttr('size');
2222
inheritFontAttr('family');
2323
inheritFontAttr('color');
24+
inheritFontAttr('weight');
25+
inheritFontAttr('style');
26+
inheritFontAttr('variant');
2427

2528
if(hasLegend) {
2629
if(!opts.bgcolor) opts.bgcolor = Color.combine(contOut.legend.bgcolor, contOut.paper_bgcolor);

‎src/components/legend/style.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,9 @@ module.exports = function style(s, gd, legend) {
244244
dEdit.ts = 10;
245245
dEdit.tc = boundVal('textfont.color', pickFirst);
246246
dEdit.tf = boundVal('textfont.family', pickFirst);
247+
dEdit.tw = boundVal('textfont.weight', pickFirst);
248+
dEdit.ty = boundVal('textfont.style', pickFirst);
249+
dEdit.tv = boundVal('textfont.variant', pickFirst);
247250
}
248251

249252
dMod = [Lib.minExtend(d0, dEdit)];

‎src/components/titles/index.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ function draw(gd, titleClass, options) {
6868
var fontFamily = font.family;
6969
var fontSize = font.size;
7070
var fontColor = font.color;
71+
var fontWeight = font.weight;
72+
var fontStyle = font.style;
73+
var fontVariant = font.variant;
7174

7275
// only make this title editable if we positively identify its property
7376
// as one that has editing enabled.
@@ -146,7 +149,9 @@ function draw(gd, titleClass, options) {
146149
'font-size': d3.round(fontSize, 2) + 'px',
147150
fill: Color.rgb(fontColor),
148151
opacity: opacity * Color.opacity(fontColor),
149-
'font-weight': Plots.fontWeight
152+
'font-weight': fontWeight,
153+
'font-style': fontStyle,
154+
'font-variant': fontVariant
150155
})
151156
.attr(attributes)
152157
.call(svgTextUtils.convertToTspans, gd);

‎src/lib/coerce.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -455,7 +455,9 @@ exports.coerce2 = function(containerIn, containerOut, attributes, attribute, dfl
455455
*
456456
* 'coerce' is a lib.coerce wrapper with implied first three arguments
457457
*/
458-
exports.coerceFont = function(coerce, attr, dfltObj) {
458+
exports.coerceFont = function(coerce, attr, dfltObj, opts) {
459+
if(!opts) opts = {};
460+
459461
var out = {};
460462

461463
dfltObj = dfltObj || {};
@@ -464,6 +466,10 @@ exports.coerceFont = function(coerce, attr, dfltObj) {
464466
out.size = coerce(attr + '.size', dfltObj.size);
465467
out.color = coerce(attr + '.color', dfltObj.color);
466468

469+
out.weight = coerce(attr + '.weight', dfltObj.weight);
470+
out.style = coerce(attr + '.style', dfltObj.style);
471+
if(!opts.noFontVariant) out.variant = coerce(attr + '.variant', dfltObj.variant);
472+
467473
return out;
468474
};
469475

‎src/plots/cartesian/axes.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1737,6 +1737,9 @@ function tickTextObj(ax, x, text) {
17371737
text: text || '',
17381738
fontSize: tf.size,
17391739
font: tf.family,
1740+
fontWeight: tf.weight,
1741+
fontStyle: tf.style,
1742+
fontVariant: tf.variant,
17401743
fontColor: tf.color
17411744
};
17421745
}
@@ -3498,7 +3501,14 @@ axes.drawLabels = function(gd, ax, opts) {
34983501

34993502
thisLabel
35003503
.call(svgTextUtils.positionText, labelFns.xFn(d), labelFns.yFn(d))
3501-
.call(Drawing.font, d.font, d.fontSize, d.fontColor)
3504+
.call(Drawing.font, {
3505+
family: d.font,
3506+
size: d.fontSize,
3507+
color: d.fontColor,
3508+
weight: d.fontWeight,
3509+
style: d.fontStyle,
3510+
variant: d.fontVariant
3511+
})
35023512
.text(d.text)
35033513
.call(svgTextUtils.convertToTspans, gd);
35043514

‎src/plots/cartesian/axis_defaults.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
113113
coerce('title.text', dfltTitle);
114114
Lib.coerceFont(coerce, 'title.font', {
115115
family: font.family,
116+
weight: font.weight,
117+
style: font.style,
118+
variant: font.variant,
116119
size: Lib.bigFont(font.size),
117120
color: dfltFontColor
118121
});

‎src/plots/cartesian/tick_label_defaults.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
2828

2929
Lib.coerceFont(coerce, 'tickfont', {
3030
family: font.family,
31+
weight: font.weight,
32+
style: font.style,
33+
variant: font.variant,
3134
size: font.size,
3235
color: dfltFontColor
3336
});

0 commit comments

Comments
 (0)