diff --git a/packages/ag-charts-community/src/chart/baseManager.ts b/packages/ag-charts-community/src/chart/baseManager.ts index a457b044e0..d1cb6497e8 100644 --- a/packages/ag-charts-community/src/chart/baseManager.ts +++ b/packages/ag-charts-community/src/chart/baseManager.ts @@ -8,10 +8,6 @@ export abstract class BaseManager fn()); diff --git a/packages/ag-charts-community/src/chart/chart.ts b/packages/ag-charts-community/src/chart/chart.ts index 7649c59d5d..655c8d4be9 100644 --- a/packages/ag-charts-community/src/chart/chart.ts +++ b/packages/ag-charts-community/src/chart/chart.ts @@ -300,7 +300,10 @@ export abstract class Chart extends Observable { updateMutex: this.updateMutex, overrideDevicePixelRatio, })); - ctx.domManager.addListener('resize', (e) => this.parentResize(e.size)); + + this._destroyFns.push( + ctx.domManager.addListener('resize', () => this.parentResize(ctx.domManager.containerSize)) + ); this.overlays = new ChartOverlays(); this.overlays.loading.renderer ??= () => @@ -389,6 +392,8 @@ export abstract class Chart extends Observable { this.update(ChartUpdateType.PERFORM_LAYOUT, { forceNodeDataRefresh: true, skipAnimations }); }) ); + + this.parentResize(ctx.domManager.containerSize); } getModuleContext(): ModuleContext { @@ -878,8 +883,10 @@ export abstract class Chart extends Observable { }); } - private parentResize({ width, height }: { width: number; height: number }) { - if (this.width != null && this.height != null) return; + private parentResize(size: { width: number; height: number } | undefined) { + if (size == null || (this.width != null && this.height != null)) return; + + let { width, height } = size; width = Math.floor(width); height = Math.floor(height); diff --git a/packages/ag-charts-community/src/chart/dom/domManager.ts b/packages/ag-charts-community/src/chart/dom/domManager.ts index 5416a51e48..1b2ebac52f 100644 --- a/packages/ag-charts-community/src/chart/dom/domManager.ts +++ b/packages/ag-charts-community/src/chart/dom/domManager.ts @@ -41,7 +41,7 @@ function setupObserver(element: HTMLElement, cb: (intersectionRatio: number) => return observer; } -type Events = { type: 'hidden' } | { type: 'resize'; size: Size } | { type: 'container-changed' }; +type Events = { type: 'hidden' } | { type: 'resize' } | { type: 'container-changed' }; type LiveDOMElement = { element: HTMLElement; children: Map; @@ -52,7 +52,7 @@ export class DOMManager extends BaseManager { private readonly rootElements: Record; private readonly element: HTMLElement; private container?: HTMLElement; - private containerSize?: Size; + containerSize?: Size = undefined; public guardedElement?: GuardedElement; @@ -140,7 +140,7 @@ export class DOMManager extends BaseManager { this.sizeMonitor.observe(newContainer, (size) => { this.containerSize = size; this.updateContainerSize(); - this.listeners.dispatch('resize', { type: 'resize', size }); + this.listeners.dispatch('resize', { type: 'resize' }); }); this.container = newContainer; diff --git a/packages/ag-charts-community/src/util/listeners.ts b/packages/ag-charts-community/src/util/listeners.ts index 42a69f728e..ca4952e043 100644 --- a/packages/ag-charts-community/src/util/listeners.ts +++ b/packages/ag-charts-community/src/util/listeners.ts @@ -22,7 +22,7 @@ export class Listeners { return () => this.removeListener(record.symbol); } - public removeListener(eventSymbol: symbol) { + private removeListener(eventSymbol: symbol) { for (const [type, listeners] of this.registeredListeners.entries()) { const matchIndex = listeners.findIndex((listener) => listener.symbol === eventSymbol); if (matchIndex >= 0) {