From 84999207ac796f2bebcfdff1e57fe910af547d62 Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Wed, 2 Nov 2022 11:26:31 -0500 Subject: [PATCH 1/9] fix #10836 - add publc getLabelItems() --- src/core/core.scale.js | 40 ++++++++++++++++++------------- test/specs/core.scale.tests.js | 4 ++-- types/helpers/helpers.canvas.d.ts | 34 +++++++++++++++++++++++++- types/index.d.ts | 9 +++++++ 4 files changed, 68 insertions(+), 19 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index cae728b4a6f..fd4dd9c2114 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -359,6 +359,14 @@ export default class Scale extends Element { return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels || []; } + /** + * @return {import('../types').LabelItem[]} + */ + getLabelItems(chartArea = this.chart.chartArea) { + const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea)); + return items; + } + // When a new layout is created, reset the data limits cache beforeLayout() { this._cache = {}; @@ -1292,17 +1300,20 @@ export default class Scale extends Element { } items.push({ - rotation, label, font, - color, - strokeColor, - strokeWidth, textOffset, - textAlign: tickTextAlign, - textBaseline, - translation: [x, y], - backdrop, + renderTextOptions: { + rotation, + color, + strokeColor, + strokeWidth, + textOffset, + textAlign: tickTextAlign, + textBaseline, + translation: [x, y], + backdrop, + } }); } @@ -1549,16 +1560,13 @@ export default class Scale extends Element { clipArea(ctx, area); } - const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea)); - let i, ilen; - - for (i = 0, ilen = items.length; i < ilen; ++i) { - const item = items[i]; + const items = this.getLabelItems(chartArea); + for (const item of items) { + const renderTextOptions = item.renderTextOptions; const tickFont = item.font; const label = item.label; - - let y = item.textOffset; - renderText(ctx, label, 0, y, tickFont, item); + const y = item.textOffset; + renderText(ctx, label, 0, y, tickFont, renderTextOptions); } if (area) { diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js index aedde2a145e..20927922ae8 100644 --- a/test/specs/core.scale.tests.js +++ b/test/specs/core.scale.tests.js @@ -720,9 +720,9 @@ describe('Core.scale', function() { } } }); - const mapper = item => parseFloat(item.translation[0].toFixed(2)); + const mapper = item => parseFloat(item.renderTextOptions.translation[0].toFixed(2)); const expected = [20.15, 113.6, 207.05, 300.5, 393.95, 487.4]; - const actual = chart.scales.x._labelItems.map(mapper); + const actual = chart.scales.x.getLabelItems().map(mapper); const len = expected.length; for (let i = 0; i < len; ++i) { const actualValue = actual[i]; diff --git a/types/helpers/helpers.canvas.d.ts b/types/helpers/helpers.canvas.d.ts index 4adb7ee63f2..c1747dbd1b1 100644 --- a/types/helpers/helpers.canvas.d.ts +++ b/types/helpers/helpers.canvas.d.ts @@ -1,4 +1,4 @@ -import { PointStyle } from '..'; +import { PointStyle, Scriptable, ScriptableScaleContext } from '..'; import { Color } from '../color'; import { ChartArea, RoundedRect } from '../geometric'; import { CanvasFontSpec } from './helpers.options'; @@ -89,6 +89,38 @@ export interface RenderTextOpts { * Underline the text */ underline?: boolean; + + /** + * Dimensions for drawing the label backdrop + */ + backdrop?: BackdropOptions; +} + +export interface BackdropOptions { + /** + * Left position of backdrop as pixel + */ + left: number; + + /** + * Top position of backdrop as pixel + */ + top: number; + + /** + * Width of backdrop in pixels + */ + width: number; + + /** + * Height of backdrop in pixels + */ + height: number; + + /** + * Color of label backdrops. + */ + color: Scriptable; } export function renderText( diff --git a/types/index.d.ts b/types/index.d.ts index 3c55cf0104d..624769a31c9 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -10,6 +10,8 @@ import { Color } from './color'; import Element from '../src/core/core.element'; import { ChartArea, Padding, Point } from './geometric'; import { LayoutItem, LayoutPosition } from './layout'; +import { RenderTextOpts } from './helpers/helpers.canvas'; +import { CanvasFontSpec } from './helpers'; export { EasingFunction } from '../src/helpers/helpers.easing'; export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; @@ -1312,6 +1314,7 @@ export interface Scale extends El getMinMax(canStack: boolean): { min: number; max: number }; getTicks(): Tick[]; getLabels(): string[]; + getLabelItems(chartArea?: ChartArea): LabelItem[]; beforeUpdate(): void; configure(): void; afterUpdate(): void; @@ -1355,6 +1358,12 @@ export interface ScriptableScalePointLabelContext { type: string; } +export interface LabelItem { + label: string | string[]; + font: CanvasFontSpec; + textOffset: number; + renderTextOptions: RenderTextOpts; +} export declare const Ticks: { formatters: { From 421ff522b77c51e26703cd452b92b3a496133cd3 Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Wed, 2 Nov 2022 13:30:23 -0500 Subject: [PATCH 2/9] textOffset not a render option --- src/core/core.scale.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index fd4dd9c2114..5552ffbd2c9 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1308,7 +1308,6 @@ export default class Scale extends Element { color, strokeColor, strokeWidth, - textOffset, textAlign: tickTextAlign, textBaseline, translation: [x, y], From 58cb9e63953d3aa155bf8026f343c27bbbcba392 Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Wed, 16 Nov 2022 10:17:25 -0600 Subject: [PATCH 3/9] rename renderTextOptions to options --- src/core/core.scale.js | 4 ++-- test/specs/core.scale.tests.js | 2 +- types/helpers/helpers.canvas.d.ts | 4 ++-- types/index.d.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 5552ffbd2c9..19010573829 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1303,7 +1303,7 @@ export default class Scale extends Element { label, font, textOffset, - renderTextOptions: { + options: { rotation, color, strokeColor, @@ -1561,7 +1561,7 @@ export default class Scale extends Element { const items = this.getLabelItems(chartArea); for (const item of items) { - const renderTextOptions = item.renderTextOptions; + const renderTextOptions = item.options; const tickFont = item.font; const label = item.label; const y = item.textOffset; diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js index 20927922ae8..d0aa77f60ad 100644 --- a/test/specs/core.scale.tests.js +++ b/test/specs/core.scale.tests.js @@ -720,7 +720,7 @@ describe('Core.scale', function() { } } }); - const mapper = item => parseFloat(item.renderTextOptions.translation[0].toFixed(2)); + const mapper = item => parseFloat(item.options.translation[0].toFixed(2)); const expected = [20.15, 113.6, 207.05, 300.5, 393.95, 487.4]; const actual = chart.scales.x.getLabelItems().map(mapper); const len = expected.length; diff --git a/types/helpers/helpers.canvas.d.ts b/types/helpers/helpers.canvas.d.ts index c1747dbd1b1..59a997e5c73 100644 --- a/types/helpers/helpers.canvas.d.ts +++ b/types/helpers/helpers.canvas.d.ts @@ -72,13 +72,13 @@ export interface RenderTextOpts { * The text alignment to use. If unset, the existing * textAlign property of the context is unchanged */ - textAlign: CanvasTextAlign; + textAlign?: CanvasTextAlign; /** * The text baseline to use. If unset, the existing * textBaseline property of the context is unchanged */ - textBaseline: CanvasTextBaseline; + textBaseline?: CanvasTextBaseline; /** * If specified, a translation to apply to the context diff --git a/types/index.d.ts b/types/index.d.ts index 624769a31c9..a4a5803d362 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1362,7 +1362,7 @@ export interface LabelItem { label: string | string[]; font: CanvasFontSpec; textOffset: number; - renderTextOptions: RenderTextOpts; + options: RenderTextOpts; } export declare const Ticks: { From 67d9a93aecfdaca1999511cea3e2443484a6fa78 Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Wed, 16 Nov 2022 10:24:43 -0600 Subject: [PATCH 4/9] fix import --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index a4a5803d362..9a9b74de046 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -11,7 +11,7 @@ import Element from '../src/core/core.element'; import { ChartArea, Padding, Point } from './geometric'; import { LayoutItem, LayoutPosition } from './layout'; import { RenderTextOpts } from './helpers/helpers.canvas'; -import { CanvasFontSpec } from './helpers'; +import { CanvasFontSpec } from './helpers/helpers.options'; export { EasingFunction } from '../src/helpers/helpers.easing'; export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; From 3dd774a4ecc8dc20a00b251ba72334c3e3b9e0b0 Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Wed, 16 Nov 2022 13:29:29 -0600 Subject: [PATCH 5/9] condense imports --- types/index.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 9a9b74de046..c4cf158a303 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -10,8 +10,7 @@ import { Color } from './color'; import Element from '../src/core/core.element'; import { ChartArea, Padding, Point } from './geometric'; import { LayoutItem, LayoutPosition } from './layout'; -import { RenderTextOpts } from './helpers/helpers.canvas'; -import { CanvasFontSpec } from './helpers/helpers.options'; +import { RenderTextOpts, CanvasFontSpec } from './helpers'; export { EasingFunction } from '../src/helpers/helpers.easing'; export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; From 71be6c3228a356d56fb65752aa303e19a047743f Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Wed, 16 Nov 2022 14:24:27 -0600 Subject: [PATCH 6/9] revert to known-passing imports --- types/index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index c4cf158a303..a4a5803d362 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -10,7 +10,8 @@ import { Color } from './color'; import Element from '../src/core/core.element'; import { ChartArea, Padding, Point } from './geometric'; import { LayoutItem, LayoutPosition } from './layout'; -import { RenderTextOpts, CanvasFontSpec } from './helpers'; +import { RenderTextOpts } from './helpers/helpers.canvas'; +import { CanvasFontSpec } from './helpers'; export { EasingFunction } from '../src/helpers/helpers.easing'; export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; From b2e06dec1e04a1ac43608a4a724b59aef46be082 Mon Sep 17 00:00:00 2001 From: Charles McNulty Date: Wed, 16 Nov 2022 14:32:52 -0600 Subject: [PATCH 7/9] try again - passing locally --- types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/index.d.ts b/types/index.d.ts index a4a5803d362..9a9b74de046 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -11,7 +11,7 @@ import Element from '../src/core/core.element'; import { ChartArea, Padding, Point } from './geometric'; import { LayoutItem, LayoutPosition } from './layout'; import { RenderTextOpts } from './helpers/helpers.canvas'; -import { CanvasFontSpec } from './helpers'; +import { CanvasFontSpec } from './helpers/helpers.options'; export { EasingFunction } from '../src/helpers/helpers.easing'; export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; From 159435cf7763540a2aed22f05267bd5ac1a4e3c0 Mon Sep 17 00:00:00 2001 From: Jacco van den Berg Date: Wed, 23 Nov 2022 00:55:24 +0100 Subject: [PATCH 8/9] merge conflict, update path to canvas font spec --- types/index.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/types/index.d.ts b/types/index.d.ts index 76d874b7223..d3aaec3da26 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,7 +1,6 @@ import { DeepPartial, DistributiveArray, UnionToIntersection } from './utils'; import { TimeUnit } from '../src/core/core.adapters'; -import ArcElement from '../src/elements/element.arc'; import PointElement from '../src/elements/element.point'; import { EasingFunction } from '../src/helpers/helpers.easing'; import { AnimationEvent } from './animation'; @@ -11,7 +10,7 @@ import Element from '../src/core/core.element'; import { ChartArea, Padding, Point } from './geometric'; import { LayoutItem, LayoutPosition } from './layout'; import { RenderTextOpts } from './helpers/helpers.canvas'; -import { CanvasFontSpec } from './helpers/helpers.options'; +import { CanvasFontSpec } from '../src/helpers/helpers.options'; export { EasingFunction } from '../src/helpers/helpers.easing'; export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; From acbe38a547493c2498fd660f815cebadd3581b8d Mon Sep 17 00:00:00 2001 From: dangreen Date: Tue, 13 Dec 2022 15:23:54 +0400 Subject: [PATCH 9/9] fix: restore extensions --- src/core/core.scale.js | 2 +- types/helpers/helpers.canvas.d.ts | 6 ++--- types/index.d.ts | 42 +++++++++++++++---------------- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 6f8a6cecd91..562ab21b654 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -360,7 +360,7 @@ export default class Scale extends Element { } /** - * @return {import('../types').LabelItem[]} + * @return {import('../types.js').LabelItem[]} */ getLabelItems(chartArea = this.chart.chartArea) { const items = this._labelItems || (this._labelItems = this._computeLabelItems(chartArea)); diff --git a/types/helpers/helpers.canvas.d.ts b/types/helpers/helpers.canvas.d.ts index 9b8d64ce4a0..6e7895adb54 100644 --- a/types/helpers/helpers.canvas.d.ts +++ b/types/helpers/helpers.canvas.d.ts @@ -1,7 +1,7 @@ import { PointStyle, Scriptable, ScriptableScaleContext } from '../index.js'; -import { Color } from '../color'; -import { ChartArea, RoundedRect } from '../geometric'; -import { CanvasFontSpec } from '../../src/helpers/helpers.options'; +import { Color } from '../color.js'; +import { ChartArea, RoundedRect } from '../geometric.js'; +import { CanvasFontSpec } from '../../src/helpers/helpers.options.js'; export function clearCanvas(canvas: HTMLCanvasElement, ctx?: CanvasRenderingContext2D): void; diff --git a/types/index.d.ts b/types/index.d.ts index ffbf28939dc..b6434b99529 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,24 +1,24 @@ -import { DeepPartial, DistributiveArray, UnionToIntersection } from './utils'; - -import { TimeUnit } from '../src/core/core.adapters'; -import PointElement from '../src/elements/element.point'; -import { EasingFunction } from '../src/helpers/helpers.easing'; -import { AnimationEvent } from './animation'; -import { AnyObject, EmptyObject } from './basic'; -import { Color } from './color'; -import Element from '../src/core/core.element'; -import { ChartArea, Padding, Point } from './geometric'; -import { LayoutItem, LayoutPosition } from './layout'; -import { RenderTextOpts } from './helpers/helpers.canvas'; -import { CanvasFontSpec } from '../src/helpers/helpers.options'; - -export { EasingFunction } from '../src/helpers/helpers.easing'; -export { default as ArcElement, ArcProps } from '../src/elements/element.arc'; -export { default as PointElement, PointProps } from '../src/elements/element.point'; -export { Animation, Animations, Animator, AnimationEvent } from './animation'; -export { Color } from './color'; -export { ChartArea, Point } from './geometric'; -export { LayoutItem, LayoutPosition } from './layout'; +import { DeepPartial, DistributiveArray, UnionToIntersection } from './utils.js'; + +import { TimeUnit } from '../src/core/core.adapters.js'; +import PointElement from '../src/elements/element.point.js'; +import { EasingFunction } from '../src/helpers/helpers.easing.js'; +import { AnimationEvent } from './animation.js'; +import { AnyObject, EmptyObject } from './basic.js'; +import { Color } from './color.js'; +import Element from '../src/core/core.element.js'; +import { ChartArea, Padding, Point } from './geometric.js'; +import { LayoutItem, LayoutPosition } from './layout.js'; +import { RenderTextOpts } from './helpers/helpers.canvas.js'; +import { CanvasFontSpec } from '../src/helpers/helpers.options.js'; + +export { EasingFunction } from '../src/helpers/helpers.easing.js'; +export { default as ArcElement, ArcProps } from '../src/elements/element.arc.js'; +export { default as PointElement, PointProps } from '../src/elements/element.point.js'; +export { Animation, Animations, Animator, AnimationEvent } from './animation.js'; +export { Color } from './color.js'; +export { ChartArea, Point } from './geometric.js'; +export { LayoutItem, LayoutPosition } from './layout.js'; export interface ScriptableContext { active: boolean;