Merge pull request #271 from ThomasBower/fix-resizing

Fix autoResize functionality
xieziyu · Nov 7, 2020 · 714861e · 714861e
2 parents e0e6a92 + 6615dd2
commit 714861e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "prismjs": "^1.20.0",
     "protractor": "~5.4.3",
     "raw-loader": "^4.0.1",
+    "resize-observer-polyfill": "^1.5.1",
     "ts-node": "~8.3.0",
     "tslint": "~5.18.0",
     "typescript": "~3.8.3"

diff --git a/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts b/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts
@@ -1,7 +1,6 @@
 import {
   AfterViewInit,
   Directive,
-  DoCheck,
   ElementRef,
   EventEmitter,
   Inject,
@@ -14,8 +13,9 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import { fromEvent, Observable, Subscription } from 'rxjs';
-import { debounceTime, switchMap } from 'rxjs/operators';
+import ResizeObserver from 'resize-observer-polyfill';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 import { ChangeFilter } from './change-filter';
 
 export interface NgxEchartsConfig {
@@ -28,7 +28,7 @@ export const NGX_ECHARTS_CONFIG = new InjectionToken<NgxEchartsConfig>('NGX_ECHA
   selector: 'echarts, [echarts]',
   exportAs: 'echarts',
 })
-export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, DoCheck, AfterViewInit {
+export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
   @Input() options: any;
   @Input() theme: string;
   @Input() loading: boolean;
@@ -87,10 +87,7 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, DoChec
 
   private chart: any;
   private echarts: any;
-  private currentOffsetWidth = 0;
-  private currentOffsetHeight = 0;
-  private currentWindowWidth: number;
-  private resizeSub: Subscription;
+  private resizeSub: ResizeObserver;
 
   constructor(
     @Inject(NGX_ECHARTS_CONFIG) config: NgxEchartsConfig,
@@ -109,39 +106,19 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, DoChec
   }
 
   ngOnInit() {
-    this.resizeSub = fromEvent(window, 'resize')
-      .pipe(debounceTime(50))
-      .subscribe(() => {
-        if (this.autoResize && window.innerWidth !== this.currentWindowWidth) {
-          this.currentWindowWidth = window.innerWidth;
-          this.currentOffsetWidth = this.el.nativeElement.offsetWidth;
-          this.currentOffsetHeight = this.el.nativeElement.offsetHeight;
-          this.resize();
-        }
-      });
+    if (this.autoResize) {
+      this.resizeSub = new ResizeObserver(() => this.resize());
+      this.resizeSub.observe(this.el.nativeElement);
+    }
   }
 
   ngOnDestroy() {
     if (this.resizeSub) {
-      this.resizeSub.unsubscribe();
+      this.resizeSub.unobserve(this.el.nativeElement);
     }
     this.dispose();
   }
 
-  ngDoCheck() {
-    // No heavy work in DoCheck!
-    if (this.chart && this.autoResize) {
-      const offsetWidth = this.el.nativeElement.offsetWidth;
-      const offsetHeight = this.el.nativeElement.offsetHeight;
-
-      if (this.currentOffsetWidth !== offsetWidth || this.currentOffsetHeight !== offsetHeight) {
-        this.currentOffsetWidth = offsetWidth;
-        this.currentOffsetHeight = offsetHeight;
-        this.resize();
-      }
-    }
-  }
-
   ngAfterViewInit() {
     setTimeout(() => this.initChart());
   }
@@ -184,9 +161,6 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, DoChec
   }
 
   private createChart() {
-    this.currentWindowWidth = window.innerWidth;
-    this.currentOffsetWidth = this.el.nativeElement.offsetWidth;
-    this.currentOffsetHeight = this.el.nativeElement.offsetHeight;
     const dom = this.el.nativeElement;
 
     if (window && window.getComputedStyle) {