Merge pull request #3505 from ag-grid/AG-13951-5

AG-13951 Fix legend marker rendering when browser zooming
ag-grid · Feb 7, 2025 · 5796c13 · 5796c13
2 parents 1e46e30 + 1bef7f0
commit 5796c13
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git 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<unknown, any, any>[]) {
         super.destroySeries(series);
 
-        this.firstSeriesTranslation = true;
+        this.lastLayoutWidth = NaN;
+        this.lastLayoutHeight = NaN;
     }
 
     override getChartType() {
@@ -90,22 +89,23 @@ 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;
         this.seriesRect = seriesRect;
         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
@@ -32,8 +32,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;
         this.pixelRatioObserver = new PixelRatioObserver(() => {
-            this.checkPixelRatio();
+            clearTimeout(animationFrame);
+            animationFrame = setTimeout(() => this.checkPixelRatio(), 0);
         });
 
         this.documentReady = getDocument('readyState') === 'complete';
@@ -84,7 +90,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);
         }