diff --git a/examples/playground/index.html b/examples/playground/index.html index ffceefb..bb61010 100644 --- a/examples/playground/index.html +++ b/examples/playground/index.html @@ -30,6 +30,7 @@
+
diff --git a/src/constants.js b/src/constants.js index cefb20d..b09e62b 100644 --- a/src/constants.js +++ b/src/constants.js @@ -37,6 +37,7 @@ export const Defaults = Object.freeze({ itemLabelBaselineOffset: 0, itemLabelColors: ['#000'], itemLabelFont: 'sans-serif', + itemLabelFontWeight: '', itemLabelFontSizeMax: baseCanvasSize, itemLabelRadius: 0.85, itemLabelRadiusMax: 0.2, diff --git a/src/wheel.js b/src/wheel.js index 2174d79..5706810 100644 --- a/src/wheel.js +++ b/src/wheel.js @@ -57,6 +57,7 @@ export class Wheel { this.itemLabelBaselineOffset = props.itemLabelBaselineOffset; this.itemLabelColors = props.itemLabelColors; this.itemLabelFont = props.itemLabelFont; + this.itemLabelFontWeight = props.itemLabelFontWeight; this.itemLabelFontSizeMax = props.itemLabelFontSizeMax; this.itemLabelRadius = props.itemLabelRadius; this.itemLabelRadiusMax = props.itemLabelRadiusMax; @@ -188,7 +189,7 @@ export class Wheel { // Set font: ctx.textBaseline = 'middle'; ctx.textAlign = this.itemLabelAlign; - ctx.font = this._itemLabelFontSize + 'px ' + this.itemLabelFont; + ctx.font = this.itemLabelFontWeight.concat(' ', this._itemLabelFontSize + 'px ' + this.itemLabelFont).trim(); // Build paths for each item: for (const [i, a] of angles.entries()) { @@ -986,6 +987,25 @@ export class Wheel { this.resize(); } + /** + * The [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) to use for all item labels. + * Example: `'bold'`. + */ + get itemLabelFontWeight() { + return this._itemLabelFontWeight; + } + set itemLabelFontWeight(val) { + this._itemLabelFontWeight = util.setProp({ + val, + isValid: typeof val === 'string', + errorMessage: 'Wheel.itemLabelFontWeight must be a string', + defaultValue: Defaults.wheel.itemLabelFontWeight, + }); + + this.resize(); + } + + /** * The maximum font size (in pixels) for all item labels. */ diff --git a/tests/__snapshots__/item.test.js.snap b/tests/__snapshots__/item.test.js.snap index 57c7b61..ff152a6 100644 --- a/tests/__snapshots__/item.test.js.snap +++ b/tests/__snapshots__/item.test.js.snap @@ -204,6 +204,7 @@ Item { "_itemLabelFont": "sans-serif", "_itemLabelFontSize": 500, "_itemLabelFontSizeMax": 500, + "_itemLabelFontWeight": "", "_itemLabelRadius": 0.85, "_itemLabelRadiusMax": 0.2, "_itemLabelRotation": 0, diff --git a/tests/__snapshots__/wheel.test.js.snap b/tests/__snapshots__/wheel.test.js.snap index f4df2e7..3e1e92c 100644 --- a/tests/__snapshots__/wheel.test.js.snap +++ b/tests/__snapshots__/wheel.test.js.snap @@ -193,6 +193,7 @@ Wheel { "_itemLabelFont": "sans-serif", "_itemLabelFontSize": 500, "_itemLabelFontSizeMax": 500, + "_itemLabelFontWeight": "", "_itemLabelRadius": 0.85, "_itemLabelRadiusMax": 0.2, "_itemLabelRotation": 0,