From 46319bf3c796e1570866e0ddf3f431dc7039421c Mon Sep 17 00:00:00 2001 From: Kirill Bobkov Date: Thu, 21 Dec 2023 17:17:29 +0400 Subject: [PATCH] feat: removed redrawBackgroundChartArea and improved performace with native ctx.rect // modev back for label description --- src/chart/bootstrap.ts | 1 + .../y_axis/price_labels/price-label.drawer.ts | 37 ++++++++----------- .../y-axis-price-labels.drawer.ts | 4 ++ 3 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/chart/bootstrap.ts b/src/chart/bootstrap.ts index ff531f44..a9478c1e 100755 --- a/src/chart/bootstrap.ts +++ b/src/chart/bootstrap.ts @@ -561,6 +561,7 @@ export default class ChartBootstrap { const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer( yAxisLabelsCanvasModel, + this.backgroundCanvasModel, this.canvasBoundsContainer, this.config, this.paneManager, diff --git a/src/chart/components/y_axis/price_labels/price-label.drawer.ts b/src/chart/components/y_axis/price_labels/price-label.drawer.ts index ee4c308f..01f7a2b2 100644 --- a/src/chart/components/y_axis/price_labels/price-label.drawer.ts +++ b/src/chart/components/y_axis/price_labels/price-label.drawer.ts @@ -9,8 +9,10 @@ import { FullChartColors, getFontFromConfig, YAxisAlign, - YAxisLabelAppearanceType, YAxisLabelMode, + YAxisLabelAppearanceType, + YAxisLabelMode, } from '../../../chart.config'; +import { redrawBackgroundArea } from '../../../drawers/chart-background.drawer'; import { Bounds } from '../../../model/bounds.model'; import { avoidAntialiasing, drawLine } from '../../../utils/canvas/canvas-drawing-functions.utils'; import { calculateSymbolHeight, calculateTextWidth } from '../../../utils/canvas/canvas-font-measure-tool.utils'; @@ -40,6 +42,7 @@ export const priceLabelDrawersMap: Record = { */ export function drawLabel( ctx: CanvasRenderingContext2D, + backgroundCtx: CanvasRenderingContext2D, bounds: Bounds, paneBounds: Bounds, visualLabel: VisualYAxisLabel, @@ -74,7 +77,7 @@ export function drawLabel( const showLine = isLineVisible(bounds, labelY, labelBoxHeight); const _drawDescription = () => - showDescription && drawDescription(ctx, paneBounds, visualLabel, config, colors); + showDescription && drawDescription(backgroundCtx, ctx, bounds, paneBounds, visualLabel, config); let lineXStart: number; let lineXEnd: number; @@ -97,24 +100,24 @@ export function drawLabel( const drawLineLabel = () => { _drawLine(); _drawDescription(); - } + }; const drawLineLabelLabel = () => { _drawLine(); _drawLabel(); _drawDescription(); - } + }; const drawLabelLabel = () => { _drawDescription(); _drawLabel(); - } + }; const labelDrawerByMode: Record, () => void> = { - 'line': drawLineLabel, + line: drawLineLabel, 'line-label': drawLineLabelLabel, - 'label': drawLabelLabel, - } + label: drawLabelLabel, + }; if (mode !== 'none' && checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) { labelDrawerByMode[mode](); @@ -127,11 +130,12 @@ const isLineVisible = (bounds: Bounds, labelY: number, labelBoxHeight: number) = labelY > bounds.y + labelBoxHeight / 2 && labelY < bounds.y + bounds.height - labelBoxHeight / 2; function drawDescription( + backgroundCtx: CanvasRenderingContext2D, ctx: CanvasRenderingContext2D, + labelBounds: Bounds, paneBounds: Bounds, visualLabel: VisualYAxisLabel, yAxisState: YAxisConfig, - colors: FullChartColors, ): void { const align: YAxisAlign = yAxisState.align || 'right'; const description = visualLabel.description; @@ -157,19 +161,8 @@ function drawDescription( const boundsEnd = paneBounds.x + paneBounds.width; const x = align === 'right' ? boundsEnd - rectWidth : paneBounds.x + descriptionPadding; - if (colors.chartAreaTheme.backgroundMode === 'gradient' && align === 'right') { - ctx.fillStyle = colors.chartAreaTheme.backgroundGradientBottomColor; - ctx.strokeStyle = colors.chartAreaTheme.backgroundGradientBottomColor; - } - if (colors.chartAreaTheme.backgroundMode === 'gradient' && align === 'left') { - ctx.fillStyle = colors.chartAreaTheme.backgroundGradientTopColor; - ctx.strokeStyle = colors.chartAreaTheme.backgroundGradientTopColor; - } - if (colors.chartAreaTheme.backgroundMode === 'regular') { - ctx.fillStyle = colors.chartAreaTheme.backgroundColor; - ctx.strokeStyle = colors.chartAreaTheme.backgroundColor; - } - ctx.fillRect(x, labelBoxY, width, labelBoxHeight); + redrawBackgroundArea(backgroundCtx, ctx, x, labelBoxY, width, labelBoxHeight, 0.8); + ctx.fillStyle = visualLabel.descColor ?? visualLabel.bgColor; ctx.font = textFont; const xTextBounds = diff --git a/src/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.ts b/src/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.ts index 79e91d27..49cc898c 100644 --- a/src/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.ts +++ b/src/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.ts @@ -20,6 +20,7 @@ import { LabelGroup, VisualYAxisLabel } from './y-axis-labels.model'; export class YAxisPriceLabelsDrawer implements Drawer { constructor( private yAxisLabelsCanvasModel: CanvasModel, + private backgroundCanvasModel: CanvasModel, private canvasBoundsContainer: CanvasBoundsContainer, private fullConfig: FullChartConfig, private paneManager: PaneManager, @@ -27,6 +28,7 @@ export class YAxisPriceLabelsDrawer implements Drawer { draw() { const ctx = this.yAxisLabelsCanvasModel.ctx; + const backgroundCtx = this.backgroundCanvasModel.ctx; this.paneManager.yExtents.forEach(extent => { if (extent.yAxis.state.visible) { @@ -39,6 +41,7 @@ export class YAxisPriceLabelsDrawer implements Drawer { l.labels.forEach(vl => drawLabel( ctx, + backgroundCtx, bounds, paneBounds, vl, @@ -52,6 +55,7 @@ export class YAxisPriceLabelsDrawer implements Drawer { Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel( ctx, + backgroundCtx, yAxisBounds, paneBounds, l,