From 45bae71d4e0bc19ebf6484a026d47b082a822b4b Mon Sep 17 00:00:00 2001 From: Jacob Parker Date: Fri, 7 Feb 2025 10:01:54 +0000 Subject: [PATCH 1/2] AG-13951 Fix legend marker rendering when browser zooming --- .../src/chart/cartesianChart.ts | 15 +++++++++------ .../ag-charts-community/src/util/sizeMonitor.ts | 12 ++++++++++-- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/ag-charts-community/src/chart/cartesianChart.ts b/packages/ag-charts-community/src/chart/cartesianChart.ts index 30ea8a5ab9..053546d60b 100644 --- a/packages/ag-charts-community/src/chart/cartesianChart.ts +++ b/packages/ag-charts-community/src/chart/cartesianChart.ts @@ -48,8 +48,6 @@ export class CartesianChart extends Chart { super(options, resources); } - private firstSeriesTranslation = true; - override onAxisChange(newValue: ChartAxis[], oldValue?: ChartAxis[]) { super.onAxisChange(newValue, oldValue); @@ -61,7 +59,8 @@ export class CartesianChart extends Chart { override destroySeries(series: Series[]) { super.destroySeries(series); - this.firstSeriesTranslation = true; + this.lastLayoutWidth = NaN; + this.lastLayoutHeight = NaN; } override getChartType() { @@ -90,8 +89,10 @@ export class CartesianChart extends Chart { this.ctx.updateService.dispatchProcessData({ series: { shouldFlipXY: this.shouldFlipXY() } }); } + private lastLayoutWidth = NaN; + private lastLayoutHeight = NaN; protected performLayout(ctx: LayoutContext) { - const { firstSeriesTranslation, seriesRoot, annotationRoot } = this; + const { seriesRoot, annotationRoot } = this; const { clipSeries, seriesRect, visible } = this.updateAxes(ctx.layoutBox); this.seriesRoot.visible = visible; @@ -99,13 +100,12 @@ export class CartesianChart extends Chart { this.animationRect = ctx.layoutBox; const { x, y } = seriesRect; - if (firstSeriesTranslation) { + if (ctx.width !== this.lastLayoutWidth || ctx.height !== this.lastLayoutHeight) { // For initial rendering, don't animate. for (const group of [seriesRoot, annotationRoot]) { group.translationX = Math.floor(x); group.translationY = Math.floor(y); } - this.firstSeriesTranslation = false; } else { // Animate seriesRect movements - typically caused by axis size changes. const { translationX, translationY } = seriesRoot; @@ -120,6 +120,9 @@ export class CartesianChart extends Chart { ); } + this.lastLayoutWidth = ctx.width; + this.lastLayoutHeight = ctx.height; + // Recreate padding object to prevent issues with getters in `BBox.shrink()` const seriesPaddedRect = seriesRect.clone().grow(this.seriesArea.padding); diff --git a/packages/ag-charts-community/src/util/sizeMonitor.ts b/packages/ag-charts-community/src/util/sizeMonitor.ts index 3e6ac71620..27a6e8d66b 100644 --- a/packages/ag-charts-community/src/util/sizeMonitor.ts +++ b/packages/ag-charts-community/src/util/sizeMonitor.ts @@ -1,3 +1,5 @@ +import type { NodeBuilderFlags } from 'typescript'; + import { getDocument, getWindow } from '../core'; import { PixelRatioObserver } from './pixelRatioObserver'; @@ -32,8 +34,14 @@ export class SizeMonitor { }); } + // The resize observer should most pixel ratio changes + // with the exception of moving the browser to a monitor with a different scaling + // The resize observer will re-read the pixel ratio + // so make sure this fires after the resize observer to avoid double rendering + let animationFrame: NodeJS.Timeout | NodeBuilderFlags; this.pixelRatioObserver = new PixelRatioObserver(() => { - this.checkPixelRatio(); + clearTimeout(animationFrame); + animationFrame = setTimeout(() => this.checkPixelRatio(), 0); }); this.documentReady = getDocument('readyState') === 'complete'; @@ -84,7 +92,7 @@ export class SizeMonitor { if (!entry) return; if (width !== entry.size?.width || height !== entry.size?.height) { - const pixelRatio = entry.size?.pixelRatio ?? this.pixelRatioObserver?.pixelRatio ?? 1; + const pixelRatio = this.pixelRatioObserver?.pixelRatio ?? 1; entry.size = { width, height, pixelRatio }; entry.cb(entry.size, element); } From 1bef7f0fdda1efc56fcfd6fa229cd6ec7266091c Mon Sep 17 00:00:00 2001 From: Jacob Parker Date: Fri, 7 Feb 2025 10:10:17 +0000 Subject: [PATCH 2/2] lint --- packages/ag-charts-community/src/util/sizeMonitor.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/ag-charts-community/src/util/sizeMonitor.ts b/packages/ag-charts-community/src/util/sizeMonitor.ts index 27a6e8d66b..48530a6d3e 100644 --- a/packages/ag-charts-community/src/util/sizeMonitor.ts +++ b/packages/ag-charts-community/src/util/sizeMonitor.ts @@ -1,5 +1,3 @@ -import type { NodeBuilderFlags } from 'typescript'; - import { getDocument, getWindow } from '../core'; import { PixelRatioObserver } from './pixelRatioObserver'; @@ -38,7 +36,7 @@ export class SizeMonitor { // with the exception of moving the browser to a monitor with a different scaling // The resize observer will re-read the pixel ratio // so make sure this fires after the resize observer to avoid double rendering - let animationFrame: NodeJS.Timeout | NodeBuilderFlags; + let animationFrame: NodeJS.Timeout; this.pixelRatioObserver = new PixelRatioObserver(() => { clearTimeout(animationFrame); animationFrame = setTimeout(() => this.checkPixelRatio(), 0);