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

antvis · Jan 5, 2023 · 6b0aad8 · 6b0aad8
1 parent bcf4028
commit 6b0aad8
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 54 deletions.
diff --git a/src/api/chart.ts b/src/api/chart.ts
@@ -200,7 +200,11 @@ export class Chart extends Node<ChartOptions> {
         plugins,
       );
     }
-
+    // Bind the autoFit event once.
+    if (!this._context.bindAutoFit) {
+      this.bindAutoFit();
+      this._context.bindAutoFit = true;
+    }
     render(this.options(), this._context);
 
     return this;
@@ -222,6 +226,8 @@ export class Chart extends Node<ChartOptions> {
     const options = this.options();
     const { on } = options;
     emitEvent(on, CHART_LIFE_CIRCLE.BEFORE_DESTROY);
+    this.unbindAutoFit();
+    this._context.bindAutoFit = false;
     destroy(options, this._context);
     // Remove the container.
     removeContainer(this._container);
@@ -262,4 +268,39 @@ export class Chart extends Node<ChartOptions> {
 
     emitEvent(on, CHART_LIFE_CIRCLE.AFTER_CHANGE_SIZE);
   }
+
+  private onResize = debounce(() => {
+    const options = this.options();
+    const { width, height, autoFit } = options;
+    const container = this._container;
+    const { width: adjustedWidth, height: adjustedHeight } = getChartSize(
+      container,
+      autoFit,
+      width,
+      height,
+    );
+    const newOptions = {
+      ...options,
+      width: adjustedWidth,
+      height: adjustedHeight,
+    };
+    if (newOptions.width && newOptions.height)
+      render(newOptions, this._context);
+  }, 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);
+    }
+  }
 }
diff --git a/src/runtime/render.ts b/src/runtime/render.ts
@@ -69,13 +69,6 @@ export function render<T extends G2ViewTree = G2ViewTree>(
   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 +127,6 @@ export function destroy<T extends G2ViewTree = G2ViewTree>(
   if (canvas) {
     canvas.destroy();
   }
-
-  // Unbind chart events.
-  unbindAutoFit(options, context);
   offEvent(on);
 }
 
@@ -145,46 +135,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));
-  }
-}