From: Jukka Kurkela Date: Mon, 3 Aug 2020 16:32:58 +0000 (+0300) Subject: Resolve fonts through options.font (#7674) X-Git-Tag: v3.0.0-beta.2~21 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e756fb93a3b8cb5a29de04d9bcf972295e38b21f;p=thirdparty%2FChart.js.git Resolve fonts through options.font (#7674) * Resolve fonts through options.font * Remove defaultRoutes from Tooltip fonts --- diff --git a/src/core/core.scale.js b/src/core/core.scale.js index d08ac4ffc..c8fc02bbc 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -142,12 +142,12 @@ function getTickMarkLength(options) { /** * @param {object} options */ -function getScaleLabelHeight(options) { +function getScaleLabelHeight(options, fallback) { if (!options.display) { return 0; } - const font = toFont(options.font); + const font = toFont(options.font, fallback); const padding = toPadding(options.padding); return font.lineHeight + padding.height; @@ -673,7 +673,7 @@ export default class Scale extends Element { if (maxLabelWidth + 6 > tickWidth) { tickWidth = maxWidth / (numTicks - (options.offset ? 0.5 : 1)); maxHeight = me.maxHeight - getTickMarkLength(options.gridLines) - - tickOpts.padding - getScaleLabelHeight(options.scaleLabel); + - tickOpts.padding - getScaleLabelHeight(options.scaleLabel, me.chart.options.font); maxLabelDiagonal = Math.sqrt(maxLabelWidth * maxLabelWidth + maxLabelHeight * maxLabelHeight); labelRotation = toDegrees(Math.min( Math.asin(Math.min((labelSizes.highest.height + 6) / tickWidth, 1)), @@ -709,19 +709,20 @@ export default class Scale extends Element { const display = me._isVisible(); const labelsBelowTicks = opts.position !== 'top' && me.axis === 'x'; const isHorizontal = me.isHorizontal(); + const scaleLabelHeight = display && getScaleLabelHeight(scaleLabelOpts, chart.options.font); // Width if (isHorizontal) { minSize.width = me.maxWidth; } else if (display) { - minSize.width = getTickMarkLength(gridLineOpts) + getScaleLabelHeight(scaleLabelOpts); + minSize.width = getTickMarkLength(gridLineOpts) + scaleLabelHeight; } // height if (!isHorizontal) { minSize.height = me.maxHeight; // fill all the height } else if (display) { - minSize.height = getTickMarkLength(gridLineOpts) + getScaleLabelHeight(scaleLabelOpts); + minSize.height = getTickMarkLength(gridLineOpts) + scaleLabelHeight; } // Don't bother fitting the ticks if we are not showing the labels @@ -1460,7 +1461,7 @@ export default class Scale extends Element { return; } - const scaleLabelFont = toFont(scaleLabel.font); + const scaleLabelFont = toFont(scaleLabel.font, me.chart.options.font); const scaleLabelPadding = toPadding(scaleLabel.padding); const halfLineHeight = scaleLabelFont.lineHeight / 2; const scaleLabelAlign = scaleLabel.align; @@ -1594,15 +1595,16 @@ export default class Scale extends Element { */ _resolveTickFontOptions(index) { const me = this; + const chart = me.chart; const options = me.options.ticks; const ticks = me.ticks || []; const context = { - chart: me.chart, + chart, scale: me, tick: ticks[index], index }; - return toFont(resolve([options.font], context)); + return toFont(resolve([options.font], context), chart.options.font); } } diff --git a/src/helpers/helpers.options.js b/src/helpers/helpers.options.js index c6dd6ef14..540f7c250 100644 --- a/src/helpers/helpers.options.js +++ b/src/helpers/helpers.options.js @@ -67,27 +67,29 @@ export function toPadding(value) { /** * Parses font options and returns the font object. * @param {object} options - A object that contains font options to be parsed. + * @param {object} [fallback] - A object that contains fallback font options. * @return {object} The font object. * @private */ -export function toFont(options) { - const defaultFont = defaults.font; +export function toFont(options, fallback) { options = options || {}; - let size = valueOrDefault(options.size, defaultFont.size); + fallback = fallback || defaults.font; + + let size = valueOrDefault(options.size, fallback.size); if (typeof size === 'string') { size = parseInt(size, 10); } const font = { - color: valueOrDefault(options.color, defaultFont.color), - family: valueOrDefault(options.family, defaultFont.family), - lineHeight: toLineHeight(valueOrDefault(options.lineHeight, defaultFont.lineHeight), size), - lineWidth: valueOrDefault(options.lineWidth, defaultFont.lineWidth), + color: valueOrDefault(options.color, fallback.color), + family: valueOrDefault(options.family, fallback.family), + lineHeight: toLineHeight(valueOrDefault(options.lineHeight, fallback.lineHeight), size), + lineWidth: valueOrDefault(options.lineWidth, fallback.lineWidth), size, - style: valueOrDefault(options.style, defaultFont.style), - weight: valueOrDefault(options.weight, defaultFont.weight), - strokeStyle: valueOrDefault(options.strokeStyle, defaultFont.strokeStyle), + style: valueOrDefault(options.style, fallback.style), + weight: valueOrDefault(options.weight, fallback.weight), + strokeStyle: valueOrDefault(options.strokeStyle, fallback.strokeStyle), string: '' }; diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index ad32e47c7..0bd8d1d1a 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -178,7 +178,7 @@ export class Legend extends Element { const display = opts.display; const ctx = me.ctx; - const labelFont = toFont(labelOpts.font); + const labelFont = toFont(labelOpts.font, me.chart.options.font); const fontSize = labelFont.size; const boxWidth = getBoxWidth(labelOpts, fontSize); const boxHeight = getBoxHeight(labelOpts, fontSize); @@ -304,7 +304,7 @@ export class Legend extends Element { me.drawTitle(); const rtlHelper = getRtlAdapter(opts.rtl, me.left, me._minSize.width); const ctx = me.ctx; - const labelFont = toFont(labelOpts.font); + const labelFont = toFont(labelOpts.font, me.chart.options.font); const fontColor = labelFont.color; const fontSize = labelFont.size; let cursor; @@ -469,7 +469,7 @@ export class Legend extends Element { const me = this; const opts = me.options; const titleOpts = opts.title; - const titleFont = toFont(titleOpts.font); + const titleFont = toFont(titleOpts.font, me.chart.options.font); const titlePadding = toPadding(titleOpts.padding); if (!titleOpts.display) { @@ -551,7 +551,7 @@ export class Legend extends Element { */ _computeTitleHeight() { const titleOpts = this.options.title; - const titleFont = toFont(titleOpts.font); + const titleFont = toFont(titleOpts.font, this.chart.options.font); const titlePadding = toPadding(titleOpts.padding); return titleOpts.display ? titleFont.lineHeight + titlePadding.height : 0; } diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js index 50d722f10..594615a9b 100644 --- a/src/plugins/plugin.title.js +++ b/src/plugins/plugin.title.js @@ -107,7 +107,7 @@ export class Title extends Element { const lineCount = isArray(opts.text) ? opts.text.length : 1; me._padding = toPadding(opts.padding); - const textSize = lineCount * toFont(opts.font).lineHeight + me._padding.height; + const textSize = lineCount * toFont(opts.font, me.chart.options.font).lineHeight + me._padding.height; me.width = minSize.width = isHorizontal ? me.maxWidth : textSize; me.height = minSize.height = isHorizontal ? textSize : me.maxHeight; } @@ -130,7 +130,7 @@ export class Title extends Element { return; } - const fontOpts = toFont(opts.font); + const fontOpts = toFont(opts.font, me.chart.options.font); const lineHeight = fontOpts.lineHeight; const offset = lineHeight / 2 + me._padding.top; let rotation = 0; diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index f0e03f9b1..67299892b 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -135,14 +135,15 @@ function createTooltipItem(chart, item) { /** * Helper to get the reset model for the tooltip * @param options {object} the tooltip options + * @param fallbackFont {object} the fallback font options */ -function resolveOptions(options) { +function resolveOptions(options, fallbackFont) { options = merge({}, [defaults.plugins.tooltip, options]); - options.bodyFont = toFont(options.bodyFont); - options.titleFont = toFont(options.titleFont); - options.footerFont = toFont(options.footerFont); + options.bodyFont = toFont(options.bodyFont, fallbackFont); + options.titleFont = toFont(options.titleFont, fallbackFont); + options.footerFont = toFont(options.footerFont, fallbackFont); options.boxHeight = valueOrDefault(options.boxHeight, options.bodyFont.size); options.boxWidth = valueOrDefault(options.boxWidth, options.bodyFont.size); @@ -388,7 +389,8 @@ export class Tooltip extends Element { initialize() { const me = this; - me.options = resolveOptions(me._chart.options.tooltips); + const chartOpts = me._chart.options; + me.options = resolveOptions(chartOpts.tooltips, chartOpts.font); } /** @@ -1114,5 +1116,5 @@ export default { footer: noop, afterFooter: noop } - } + }, }; diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index fa1f7caa4..93d60cfad 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -102,7 +102,7 @@ function fitWithPointLabels(scale) { index: i, label: scale.pointLabels[i] }; - const plFont = toFont(resolve([scale.options.pointLabels.font], context, i)); + const plFont = toFont(resolve([scale.options.pointLabels.font], context, i), scale.chart.options.font); scale.ctx.font = plFont.string; textSize = measureLabelSize(scale.ctx, plFont.lineHeight, scale.pointLabels[i]); scale._pointLabelSizes[i] = textSize; @@ -191,7 +191,7 @@ function drawPointLabels(scale) { index: i, label: scale.pointLabels[i], }; - const plFont = toFont(resolve([pointLabelOpts.font], context, i)); + const plFont = toFont(resolve([pointLabelOpts.font], context, i), scale.chart.options.font); ctx.font = plFont.string; ctx.fillStyle = plFont.color; diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js index 31fa3bbbb..69d592715 100644 --- a/test/specs/plugin.title.tests.js +++ b/test/specs/plugin.title.tests.js @@ -19,7 +19,9 @@ describe('Title block tests', function() { }); it('should update correctly', function() { - var chart = {}; + var chart = { + options: Chart.helpers.clone(Chart.defaults) + }; var options = Chart.helpers.clone(Chart.defaults.plugins.title); options.text = 'My title'; @@ -44,7 +46,9 @@ describe('Title block tests', function() { }); it('should update correctly when vertical', function() { - var chart = {}; + var chart = { + options: Chart.helpers.clone(Chart.defaults) + }; var options = Chart.helpers.clone(Chart.defaults.plugins.title); options.text = 'My title'; @@ -70,7 +74,9 @@ describe('Title block tests', function() { }); it('should have the correct size when there are multiple lines of text', function() { - var chart = {}; + var chart = { + options: Chart.helpers.clone(Chart.defaults) + }; var options = Chart.helpers.clone(Chart.defaults.plugins.title); options.text = ['line1', 'line2']; @@ -90,7 +96,9 @@ describe('Title block tests', function() { }); it('should draw correctly horizontally', function() { - var chart = {}; + var chart = { + options: Chart.helpers.clone(Chart.defaults) + }; var context = window.createMockContext(); var options = Chart.helpers.clone(Chart.defaults.plugins.title); @@ -142,7 +150,9 @@ describe('Title block tests', function() { }); it ('should draw correctly vertically', function() { - var chart = {}; + var chart = { + options: Chart.helpers.clone(Chart.defaults) + }; var context = window.createMockContext(); var options = Chart.helpers.clone(Chart.defaults.plugins.title);