fix: fix background drawer optimization

devexperts · Nov 30, 2023 · 2da588a · 2da588a
1 parent 328dbba
commit 2da588a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/chart/components/chart/chart.component.ts b/src/chart/components/chart/chart.component.ts
@@ -117,7 +117,7 @@ export class ChartComponent extends ChartBaseElement {
 		//#region data series drawers
 		this.registerDefaultDataSeriesDrawers();
 		//#endregion
-		this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config);
+		this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config, this.canvasBoundsContainer);
 		drawingManager.addDrawer(this.backgroundDrawer, 'MAIN_BACKGROUND');
 		cursorHandler.setCursorForCanvasEl(CanvasElement.PANE_UUID(CHART_UUID), config.components.chart.cursor);
 

diff --git a/src/chart/drawers/chart-background.drawer.ts b/src/chart/drawers/chart-background.drawer.ts
@@ -9,20 +9,23 @@ import { ChartAreaTheme, FullChartConfig } from '../chart.config';
 import { getDPR } from '../utils/device/device-pixel-ratio.utils';
 import { deepEqual } from '../utils/object.utils';
 import { floor } from '../utils/math.utils';
+import { CanvasBoundsContainer } from '../canvas/canvas-bounds-container';
 
 export class BackgroundDrawer implements Drawer {
-	constructor(private canvasModel: CanvasModel, private config: FullChartConfig) {}
+	constructor(
+		private canvasModel: CanvasModel,
+		private config: FullChartConfig,
+		private canvasBoundsContainer: CanvasBoundsContainer,
+	) {}
 
 	// we need to save previous state to avoid unnecessary redraws
 	private prevState: Partial<ChartAreaTheme> = {};
-	private prevWidth = 0;
-	private prevHeight = 0;
+	private prevCanvasLocation = {};
 
 	draw(): void {
 		if (
 			deepEqual(this.config.colors.chartAreaTheme, this.prevState) &&
-			this.prevHeight === this.canvasModel.height &&
-			this.prevWidth === this.canvasModel.width
+			this.prevCanvasLocation === this.canvasBoundsContainer.canvasOnPageLocation
 		) {
 			return;
 		}
@@ -39,8 +42,7 @@ export class BackgroundDrawer implements Drawer {
 		ctx.fillRect(0, 0, this.canvasModel.width, this.canvasModel.height);
 		// save prev state
 		this.prevState = { ...this.config.colors.chartAreaTheme };
-		this.prevWidth = this.canvasModel.width;
-		this.prevHeight = this.canvasModel.height;
+		this.prevCanvasLocation = this.canvasBoundsContainer.canvasOnPageLocation;
 	}
 
 	getCanvasIds(): Array<string> {