fix(abc:pdf): fix container must be absolutely positioned error (#1448

)

packages/abc/pdf/pdf.component.ts

@@ -17,7 +17,7 @@ import {
   SimpleChange,
   ViewEncapsulation
 } from '@angular/core';
-import { fromEvent, Subject } from 'rxjs';
+import { fromEvent, Subject, timer } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 
 import { AlainConfigService } from '@delon/util/config';
@@ -191,11 +191,20 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
   }
 
   private initDelay(): void {
+    if (!this.win.pdfjsLib) {
+      throw new Error(
+        `No window.pdfjsLib found, please make sure that cdn or local path exists, the current referenced path is: ${JSON.stringify(
+          this.lib
+        )}`
+      );
+    }
     this.inited = true;
     this.cdr.detectChanges();
     this.win.pdfjsLib.GlobalWorkerOptions.workerSrc = `${this.lib}build/pdf.worker.min.js`;
 
-    setTimeout(() => this.load(), this.delay);
+    timer(this.delay ?? 0)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => this.load());
   }
 
   setLoading(status: boolean): void {
@@ -277,23 +286,33 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
     }
 
     if (this._rotation !== 0 || currentViewer.pagesRotation !== this._rotation) {
-      setTimeout(() => {
+      this.timeExec(() => {
         currentViewer.pagesRotation = this._rotation;
       });
     }
 
     if (this.stickToPage) {
-      setTimeout(() => {
+      this.timeExec(() => {
         currentViewer.currentPageNumber = this._pi;
       });
     }
 
     this.updateSize();
   }
 
+  private timeExec(fn: () => void): void {
+    this.ngZone.runOutsideAngular(() => {
+      timer(0)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(() => this.ngZone.runOutsideAngular(() => fn()));
+    });
+  }
+
   @ZoneOutside()
   private updateSize(): void {
     const currentViewer = this.pageViewer;
+    if (!currentViewer) return;
+
     this._pdf.getPage(currentViewer.currentPageNumber).then((page: NzSafeAny) => {
       const { _rotation, _zoom } = this;
       const rotation = _rotation || page.rotate;

packages/abc/pdf/pdf.spec.ts

@@ -0,0 +1,55 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+
+import { createTestContext } from '@delon/testing';
+import { LazyService } from '@delon/util/other';
+import { NzSafeAny } from 'ng-zorro-antd/core/types/any';
+
+import { PdfComponent } from './pdf.component';
+import { PdfModule } from './pdf.module';
+
+describe('abc: pdf', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let page: PageObject;
+  let lazySrv: LazyService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [PdfModule],
+      declarations: [TestComponent]
+    });
+    ({ fixture } = createTestContext(TestComponent));
+    page = new PageObject();
+    lazySrv = TestBed.inject(LazyService);
+    spyOn(lazySrv, 'load').and.returnValue(Promise.resolve([]));
+  });
+
+  it('should be throw error when not found pdfjsViewer in window', fakeAsync(() => {
+    expect(() => page.cd().end()).toThrow();
+  }));
+
+  class PageObject {
+    cd(time: number = 0): this {
+      fixture.detectChanges();
+      tick(time);
+      fixture.detectChanges();
+      return this;
+    }
+
+    end(): void {
+      discardPeriodicTasks();
+      flush();
+    }
+  }
+});
+
+@Component({
+  template: ` <pdf #comp [src]="src" [options]="options" [delay]="delay" (change)="change()"></pdf> `
+})
+class TestComponent {
+  @ViewChild('comp') comp!: PdfComponent;
+  options: NzSafeAny;
+  src = '';
+  delay = 0;
+  change(): void {}
+}

packages/abc/pdf/style/index.less

@@ -3,8 +3,8 @@
 
 @{pdf-prefix} {
   &-container {
-    position: relative;
-    display: block;
+    position: absolute;
+    width: 100%;
     height: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;