Merge pull request #1855 from ag-grid/AG-11924

AG-11924 Ensure changing chart type preserves container size
ag-grid · Jun 25, 2024 · 0031aeb · 0031aeb
2 parents 6c1ba42 + 6077dd4
commit 0031aeb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git 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<EventType extends string = never, Event extend
  return this.listeners.addListener(type, handler);
  }
 
- public removeListener(listenerSymbol: symbol) {
- this.listeners.removeListener(listenerSymbol);
- }
-
  public destroy() {
  this.listeners.destroy();
  this.destroyFns.forEach((fn) => fn());

diff --git 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
@@ -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<string, HTMLElement>;
@@ -52,7 +52,7 @@ export class DOMManager extends BaseManager<Events['type'], Events> {
  private readonly rootElements: Record<DOMElementClass, LiveDOMElement>;
  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<Events['type'], Events> {
  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
@@ -22,7 +22,7 @@ export class Listeners<EventType extends string, EventHandler extends Handler> {
  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) {