fix: listen window-resize in chart instead of render (fix #4492) (#4549)

__tests__/unit/api/chart.spec.ts

@@ -504,3 +504,39 @@ it('chart.on({...}) should register chart event.', () => {
 
   chart.render();
 });
+
+it('chart should render after window resize.', (done) => {
+  const div = createDiv();
+
+  const chart = new Chart({
+    container: div,
+    autoFit: true,
+  });
+  chart.data([
+    { genre: 'Sports', sold: 275 },
+    { genre: 'Strategy', sold: 115 },
+    { genre: 'Action', sold: 120 },
+    { genre: 'Shooter', sold: 350 },
+    { genre: 'Other', sold: 150 },
+  ]);
+  chart
+    .interval()
+    .encode('x', 'genre')
+    .encode('y', 'sold')
+    .encode('color', 'genre');
+
+  const fn = jest.fn();
+  const render = chart.render.bind(chart);
+  chart.render = () => {
+    fn();
+    return render();
+  };
+  chart.render();
+  div.style.width = '100px';
+  div.style.height = '100px';
+  window.dispatchEvent(new Event('resize'));
+  setTimeout(() => {
+    expect(fn).toHaveBeenCalledTimes(2);
+    done();
+  }, 400);
+});

src/api/chart.ts

@@ -170,6 +170,7 @@ export class Chart extends Node<ChartOptions> {
     super(rest, 'view');
     this._container = normalizeContainer(container);
     this._context = { library };
+    this.bindAutoFit();
   }
 
   render(): Chart {
@@ -200,7 +201,6 @@ export class Chart extends Node<ChartOptions> {
         plugins,
       );
     }
-
     render(this.options(), this._context);
 
     return this;
@@ -222,6 +222,7 @@ export class Chart extends Node<ChartOptions> {
     const options = this.options();
     const { on } = options;
     emitEvent(on, CHART_LIFE_CIRCLE.BEFORE_DESTROY);
+    this.unbindAutoFit();
     destroy(options, this._context);
     // Remove the container.
     removeContainer(this._container);
@@ -237,29 +238,48 @@ export class Chart extends Node<ChartOptions> {
   }
 
   forceFit() {
-    const { width, height } = this.options();
+    const { width, height, autoFit } = this.options();
     const { width: adjustedWidth, height: adjustedHeight } = getChartSize(
       this._container,
-      true,
+      autoFit,
       width,
       height,
     );
-    this.changeSize(adjustedWidth, adjustedHeight);
+    if (adjustedHeight && adjustedWidth) {
+      this.changeSize(adjustedWidth, adjustedHeight);
+    }
   }
 
   changeSize(adjustedWidth: number, adjustedHeight: number) {
     const { width, height, on } = this.options();
-
     if (width === adjustedWidth && height === adjustedHeight) {
       return this;
     }
 
     emitEvent(on, CHART_LIFE_CIRCLE.BEFORE_CHANGE_SIZE);
-
     this.width(adjustedWidth);
     this.height(adjustedHeight);
     this.render();
-
     emitEvent(on, CHART_LIFE_CIRCLE.AFTER_CHANGE_SIZE);
   }
+
+  private onResize = debounce(() => {
+    this.forceFit();
+  }, 300);
+
+  private bindAutoFit() {
+    const options = this.options();
+    const { autoFit } = options;
+    if (autoFit) {
+      window.addEventListener('resize', this.onResize);
+    }
+  }
+
+  private unbindAutoFit() {
+    const options = this.options();
+    const { autoFit } = options;
+    if (autoFit) {
+      window.removeEventListener('resize', this.onResize);
+    }
+  }
 }

src/runtime/render.ts

@@ -1,11 +1,10 @@
 import { Canvas as GCanvas, DisplayObject, Group } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Plugin as DragAndDropPlugin } from '@antv/g-plugin-dragndrop';
-import { debounce, deepMix } from '@antv/util';
+import { deepMix } from '@antv/util';
 import { createLibrary } from '../stdlib';
 import { select } from '../utils/selection';
 import { emitEvent, CHART_LIFE_CIRCLE, offEvent } from '../utils/event';
-import { getChartSize } from '../utils/size';
 import { G2Context, G2ViewTree } from './types/options';
 import { plot } from './plot';
 
@@ -64,18 +63,11 @@ export function render<T extends G2ViewTree = G2ViewTree>(
   callback?: () => void,
 ): HTMLElement {
   // Initialize the context if it is not provided.
-  const { width = 640, height = 480, autoFit = false, on } = options;
+  const { width = 640, height = 480, on } = options;
   const keyed = inferKeys(options);
   const { canvas = Canvas(width, height), library = createLibrary() } = context;
   context.canvas = canvas;
   context.library = library;
-
-  if (autoFit && !context.bindAutoFit) {
-    // Bind the autoFit event once.
-    bindAutoFit(options, context);
-    context.bindAutoFit = true;
-  }
-
   canvas.resize(width, height);
 
   emitEvent(on, CHART_LIFE_CIRCLE.BEFORE_RENDER);
@@ -134,9 +126,6 @@ export function destroy<T extends G2ViewTree = G2ViewTree>(
   if (canvas) {
     canvas.destroy();
   }
-
-  // Unbind chart events.
-  unbindAutoFit(options, context);
   offEvent(on);
 }
 
@@ -145,46 +134,3 @@ function normalizeContainer(container: HTMLElement | string): HTMLElement {
     ? document.getElementById(container)
     : container;
 }
-
-const onResize = <T extends G2ViewTree = G2ViewTree>(
-  options: T,
-  context: G2Context = {},
-) =>
-  debounce(() => {
-    // Update size.
-    const { width, height, autoFit } = options;
-    const { canvas } = context;
-    const container = canvas.getConfig().container as HTMLElement;
-    const { width: adjustedWidth, height: adjustedHeight } = getChartSize(
-      container,
-      autoFit,
-      width,
-      height,
-    );
-    const newOptions = {
-      ...options,
-      width: adjustedWidth,
-      height: adjustedHeight,
-    };
-    if (newOptions.width && newOptions.height) render(newOptions, context);
-  }, 300);
-
-export function bindAutoFit<T extends G2ViewTree = G2ViewTree>(
-  options: T,
-  context: G2Context = {},
-) {
-  const { autoFit } = options;
-  if (autoFit) {
-    window.addEventListener('resize', onResize(options, context));
-  }
-}
-
-function unbindAutoFit<T extends G2ViewTree = G2ViewTree>(
-  options: T,
-  context: G2Context = {},
-) {
-  const { autoFit } = options;
-  if (autoFit) {
-    window.removeEventListener('resize', onResize(options, context));
-  }
-}