From 80504a786a3bf3d2d8ea7e80f9dd88b9ead25fa6 Mon Sep 17 00:00:00 2001 From: Tom Bower Date: Sat, 31 Oct 2020 21:29:54 +0000 Subject: [PATCH 1/3] Fix autoResize functionality --- package-lock.json | 5 +++ package.json | 1 + .../src/lib/ngx-echarts.directive.ts | 45 +++---------------- projects/ngx-echarts/tsconfig.lib.json | 7 ++- 4 files changed, 19 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index d9bb354b..0c4035c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2529,6 +2529,11 @@ "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "dev": true }, + "@types/resize-observer-browser": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.4.tgz", + "integrity": "sha512-rPvqs+1hL/5hbES/0HTdUu4lvNmneiwKwccbWe7HGLWbnsLdqKnQHyWLg4Pj0AMO7PLHCwBM1Cs8orChdkDONg==" + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", diff --git a/package.json b/package.json index e980de1a..a0e7af9b 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@angular/platform-browser": "~9.1.7", "@angular/platform-browser-dynamic": "~9.1.7", "@angular/router": "~9.1.7", + "@types/resize-observer-browser": "^0.1.4", "echarts": "^4.7.0", "echarts-gl": "^1.1.1", "ng-zorro-antd": "^9.1.2", diff --git a/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts b/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts index 961f5750..906fb3f4 100644 --- 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,8 @@ import { Output, SimpleChanges, } from '@angular/core'; -import { fromEvent, Observable, Subscription } from 'rxjs'; -import { debounceTime, switchMap } from 'rxjs/operators'; +import { Observable } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; import { ChangeFilter } from './change-filter'; export interface NgxEchartsConfig { @@ -28,7 +27,7 @@ export const NGX_ECHARTS_CONFIG = new InjectionToken('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 +86,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 +105,15 @@ 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(); - } - }); + 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 +156,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) { diff --git a/projects/ngx-echarts/tsconfig.lib.json b/projects/ngx-echarts/tsconfig.lib.json index 4b5d4afd..d1088daa 100644 --- a/projects/ngx-echarts/tsconfig.lib.json +++ b/projects/ngx-echarts/tsconfig.lib.json @@ -5,7 +5,12 @@ "target": "es2015", "declaration": true, "inlineSources": true, - "types": [], + "typeRoots": [ + "node_modules/@types" + ], + "types": [ + "resize-observer-browser" + ], "lib": [ "dom", "es2018" From 219e5ea88e9b2b37aa0f6bf4f571bc6b7f20ecaf Mon Sep 17 00:00:00 2001 From: Tom Bower Date: Sat, 31 Oct 2020 21:36:51 +0000 Subject: [PATCH 2/3] Only initialise ResizeObserver when autoResize is `true` --- projects/ngx-echarts/src/lib/ngx-echarts.directive.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts b/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts index 906fb3f4..24b2be09 100644 --- a/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts +++ b/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts @@ -105,12 +105,16 @@ export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterV } ngOnInit() { - this.resizeSub = new ResizeObserver(() => this.resize()); - this.resizeSub.observe(this.el.nativeElement); + if (this.autoResize) { + this.resizeSub = new ResizeObserver(() => this.resize()); + this.resizeSub.observe(this.el.nativeElement); + } } ngOnDestroy() { - this.resizeSub.unobserve(this.el.nativeElement); + if (this.resizeSub) { + this.resizeSub.unobserve(this.el.nativeElement); + } this.dispose(); } From 6615dd2db7b2fd80fdfd894a1b2f480e0697eda1 Mon Sep 17 00:00:00 2001 From: Tom Bower Date: Sun, 1 Nov 2020 10:53:09 +0000 Subject: [PATCH 3/3] Use ResizeObserver polyfill --- package-lock.json | 5 ----- package.json | 2 +- projects/ngx-echarts/src/lib/ngx-echarts.directive.ts | 1 + projects/ngx-echarts/tsconfig.lib.json | 7 +------ 4 files changed, 3 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0c4035c7..d9bb354b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2529,11 +2529,6 @@ "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "dev": true }, - "@types/resize-observer-browser": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.4.tgz", - "integrity": "sha512-rPvqs+1hL/5hbES/0HTdUu4lvNmneiwKwccbWe7HGLWbnsLdqKnQHyWLg4Pj0AMO7PLHCwBM1Cs8orChdkDONg==" - }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", diff --git a/package.json b/package.json index a0e7af9b..1cf1ac54 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "@angular/platform-browser": "~9.1.7", "@angular/platform-browser-dynamic": "~9.1.7", "@angular/router": "~9.1.7", - "@types/resize-observer-browser": "^0.1.4", "echarts": "^4.7.0", "echarts-gl": "^1.1.1", "ng-zorro-antd": "^9.1.2", @@ -68,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 index 24b2be09..0affc306 100644 --- a/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts +++ b/projects/ngx-echarts/src/lib/ngx-echarts.directive.ts @@ -13,6 +13,7 @@ import { Output, SimpleChanges, } from '@angular/core'; +import ResizeObserver from 'resize-observer-polyfill'; import { Observable } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { ChangeFilter } from './change-filter'; diff --git a/projects/ngx-echarts/tsconfig.lib.json b/projects/ngx-echarts/tsconfig.lib.json index d1088daa..4b5d4afd 100644 --- a/projects/ngx-echarts/tsconfig.lib.json +++ b/projects/ngx-echarts/tsconfig.lib.json @@ -5,12 +5,7 @@ "target": "es2015", "declaration": true, "inlineSources": true, - "typeRoots": [ - "node_modules/@types" - ], - "types": [ - "resize-observer-browser" - ], + "types": [], "lib": [ "dom", "es2018"