diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 0bcdea0..1b2f6a0 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -23,7 +23,10 @@ export default defineConfig({ sidebar: [ { text: 'Examples', - items: [{ text: 'Basic', link: '/examples/' }], + items: [ + { text: 'Basic', link: '/examples/' }, + { text: 'Stroke', link: '/examples/stroke' }, + ], }, { text: 'API', diff --git a/docs/examples/basic.ts b/docs/examples/basic.ts index 502503a..23d90ff 100644 --- a/docs/examples/basic.ts +++ b/docs/examples/basic.ts @@ -225,3 +225,18 @@ export const config: ChartConfiguration<'wordCloud'> = { data, }; // #endregion config + +// #region stroke +export const stroke: ChartConfiguration<'wordCloud'> = { + type: 'wordCloud', + data, + options: { + elements: { + word: { + strokeStyle: 'red', + strokeWidth: 8, + }, + }, + }, +}; +// #endregion stroke diff --git a/docs/examples/stroke.md b/docs/examples/stroke.md new file mode 100644 index 0000000..59d5c15 --- /dev/null +++ b/docs/examples/stroke.md @@ -0,0 +1,28 @@ +--- +title: Stroke +--- + +# Stroke + + + +## Word Cloud + +
+ +
+ +### Code + +:::code-group + +<<< ./basic.ts#stroke [config] + +<<< ./basic.ts#data [data] + +::: diff --git a/package.json b/package.json index 2cc92f2..ea54589 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "chartjs-chart-wordcloud", "description": "Chart.js module for word clouds", - "version": "4.2.4", + "version": "4.3.0", "author": { "name": "Samuel Gratzl", "email": "sam@sgratzl.com", diff --git a/src/elements/WordElement.ts b/src/elements/WordElement.ts index 6817869..51bff34 100644 --- a/src/elements/WordElement.ts +++ b/src/elements/WordElement.ts @@ -2,12 +2,17 @@ import { Element, FontSpec, VisualElement, ScriptableAndArrayOptions, Scriptable import { toFont } from 'chart.js/helpers'; export interface IWordElementOptions extends FontSpec, Record { - color: string; + color: CanvasRenderingContext2D['fillStyle']; /** * CanvasContext2D.strokeStyle config for rendering a stroke around the text * @default undefined */ - strokeStyle: string; + strokeStyle: CanvasRenderingContext2D['strokeStyle']; + /** + * CanvasContext2D.lineWith for stroke + * @default undefined + */ + strokeWidth?: CanvasRenderingContext2D['lineWidth']; /** * rotation of the word * @default undefined then it will be randomly derived given the other constraints @@ -39,7 +44,7 @@ export interface IWordElementHoverOptions { /** * hover variant of color */ - hoverColor: string; + hoverColor: CanvasRenderingContext2D['fillStyle']; /** * hover variant of size */ @@ -56,7 +61,12 @@ export interface IWordElementHoverOptions { * hover variant of stroke style * @default undefined */ - hoverStrokeStyle: string; + hoverStrokeStyle: CanvasRenderingContext2D['strokeStyle']; + /** + * hover variant of stroke width + * @default undefined + */ + hoverStrokeWidth?: CanvasRenderingContext2D['lineWidth']; } export interface IWordElementProps { @@ -81,6 +91,7 @@ export class WordElement extends Element rotationSteps: 2, padding: 1, strokeStyle: undefined, + strokeWidth: undefined, size: (ctx) => { const v = (ctx.parsed as unknown as { y: number }).y; return v; @@ -174,6 +185,9 @@ export class WordElement extends Element // ctx.strokeRect(-props.width / 2, -props.height / 2, props.width, props.height); ctx.rotate((options.rotate / 180) * Math.PI); if (options.strokeStyle) { + if (options.strokeWidth != null) { + ctx.lineWidth = options.strokeWidth; + } ctx.strokeStyle = options.strokeStyle; ctx.strokeText(props.text, 0, 0); }