Skip to content

Commit 57f340f

Browse files
cipchkcipchk
authoredAug 14, 2022
feat(abc:pdf): add eventBus property (#1492)
·
19.1.014.0.0
1 parent f734260 commit 57f340f

File tree

6 files changed

+112
-60
lines changed

6 files changed

+112
-60
lines changed
 

‎packages/abc/pdf/demo/basic.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,21 @@ Simplest of usage.
1616
```ts
1717
import { Component } from '@angular/core';
1818

19+
import type { PdfChangeEvent } from '@delon/abc/pdf';
20+
1921
@Component({
2022
selector: 'app-demo',
2123
template: `
2224
<button nz-button nzType="primary" (click)="src = src === one ? two : one">Change File</button>
2325
<pdf [src]="src" style="height: 300px" (change)="handle($event)"></pdf>
24-
`,
26+
`
2527
})
2628
export class DemoComponent {
2729
one = `https://raw.githubusercontent.com/mozilla/pdf.js/master/web/compressed.tracemonkey-pldi-09.pdf`;
2830
two = `https://raw.githubusercontent.com/mozilla/pdf.js/master/examples/learning/helloworld.pdf`;
2931
src = this.one;
30-
handle(ev: any): void {
32+
33+
handle(ev: PdfChangeEvent): void {
3134
console.log(ev);
3235
}
3336
}

‎packages/abc/pdf/demo/design.md

+29-17
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ Provide rich interfaces for customization.
1515

1616
```ts
1717
import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
18+
import { Subject } from 'rxjs';
19+
1820
import { PdfChangeEvent, PdfComponent, PdfZoomScale } from '@delon/abc/pdf';
21+
import type { NzSafeAny } from 'ng-zorro-antd/core/types';
1922
import { NzUploadFile } from 'ng-zorro-antd/upload';
20-
import { Subject } from 'rxjs';
2123

2224
@Component({
2325
selector: 'components-pdf-design',
@@ -71,21 +73,31 @@ import { Subject } from 'rxjs';
7173
<nz-switch [(ngModel)]="outline"></nz-switch>
7274
</se>
7375
<se *ngIf="outline" [label]="null">
74-
<nz-empty *ngIf="outlineList == null"></nz-empty>
76+
<nz-empty *ngIf="outlineList === null"></nz-empty>
7577
<ng-template #outlineTpl let-ls let-level="level">
7678
<li *ngFor="let i of ls" [style.paddingLeft.px]="level * 16">
7779
<a (click)="navigateTo(i.dest)">{{ i.title }}</a>
7880
<ul *ngIf="i.items && i.items.length > 0">
79-
<ng-container *ngTemplateOutlet="outlineTpl; context: { $implicit: i.items, level: level + 1 }"></ng-container>
81+
<ng-container
82+
*ngTemplateOutlet="outlineTpl; context: { $implicit: i.items, level: level + 1 }"
83+
></ng-container>
8084
</ul>
8185
</li>
8286
</ng-template>
8387
<ul *ngIf="outlineList">
84-
<ng-container *ngTemplateOutlet="outlineTpl; context: { $implicit: outlineList, level: 0 }"></ng-container>
88+
<ng-container
89+
*ngTemplateOutlet="outlineTpl; context: { $implicit: outlineList, level: 0 }"
90+
></ng-container>
8591
</ul>
8692
</se>
8793
<se label="Search pdf">
88-
<input #qIpt nz-input placeholder="Search..." (input)="search$.next(qIpt.value)" (keyup.enter)="search$.next(qIpt.value)" />
94+
<input
95+
#qIpt
96+
nz-input
97+
placeholder="Search..."
98+
(input)="search$.next(qIpt.value)"
99+
(keyup.enter)="search$.next(qIpt.value)"
100+
/>
89101
</se>
90102
</div>
91103
</div>
@@ -108,7 +120,7 @@ import { Subject } from 'rxjs';
108120
></pdf>
109121
</div>
110122
</div>
111-
`,
123+
`
112124
})
113125
export class DemoComponent implements OnInit {
114126
@ViewChild('pdf') private comp!: PdfComponent;
@@ -125,7 +137,7 @@ export class DemoComponent implements OnInit {
125137
zoom = 1;
126138
autoReSize = true;
127139
outline = false;
128-
outlineList: any;
140+
outlineList: NzSafeAny = null;
129141
q = '';
130142
search$ = new Subject<string>();
131143

@@ -135,14 +147,14 @@ export class DemoComponent implements OnInit {
135147
this.search$.subscribe((q: string) => {
136148
if (q !== this.q) {
137149
this.q = q;
138-
this.comp.findController.executeCommand('find', {
150+
this.comp.eventBus?.dispatch('find', {
139151
query: this.q,
140-
highlightAll: true,
152+
highlightAll: true
141153
});
142154
} else {
143-
this.comp.findController.executeCommand('findagain', {
155+
this.comp.eventBus?.dispatch('findagain', {
144156
query: this.q,
145-
highlightAll: true,
157+
highlightAll: true
146158
});
147159
}
148160
});
@@ -172,22 +184,22 @@ export class DemoComponent implements OnInit {
172184

173185
beforeUpload = (file: NzUploadFile): boolean => {
174186
const reader = new FileReader();
175-
reader.onload = (e: any) => {
176-
this.src = e.target.result;
187+
reader.onload = (e: ProgressEvent<FileReader>) => {
188+
this.src = e.target!.result as string;
177189
this.cdr.detectChanges();
178190
};
179-
reader.readAsArrayBuffer(file as any);
191+
reader.readAsArrayBuffer(file as unknown as Blob);
180192
return false;
181193
};
182194

183195
loadOutline(): void {
184-
this.comp.pdf.getOutline().then((outline: any[]) => {
196+
this.comp.pdf?.getOutline().then(outline => {
185197
this.outlineList = outline;
186198
});
187199
}
188200

189-
navigateTo(dest: any): void {
190-
this.comp.linkService.navigateTo(dest);
201+
navigateTo(dest: string): void {
202+
this.comp.linkService?.goToDestination(dest);
191203
}
192204
}
193205
```

‎packages/abc/pdf/index.en-US.md

+12
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,18 @@ const alainConfig: AlainConfig = {
5757
| `[delay]` | Delayed rendering, unit: ms | `number` | `0` | - |
5858
| `(change)` | change event | `EventEmitter<PdfChangeEvent>` | - | - |
5959

60+
### Component properties
61+
62+
Used API interfaces.
63+
64+
| Name | Description |
65+
| --- | ---- |
66+
| `pdf` | Current PDF instance |
67+
| `eventBus` | Event bus for PDF files, eg: find document, etc. |
68+
| `findController` | Find controller, now instead by `eventBus` |
69+
| `pageViewer` | View Controls |
70+
| `linkService` | Navigation Service |
71+
6072
## FAQ
6173

6274
### Why need to specify the height of the pdf component

‎packages/abc/pdf/index.zh-CN.md

+12
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,18 @@ const alainConfig: AlainConfig = {
5757
| `[delay]` | 延迟初始化，单位：毫秒 | `number` | - | - |
5858
| `(change)` | 变更时回调 | `EventEmitter<PdfChangeEvent>` | - | - |
5959

60+
### 组件属性
61+
62+
提供一些常用的API接口。
63+
64+
| 名称 | 说明 |
65+
| --- | ---- |
66+
| `pdf` | 当前 PDF 实例 |
67+
| `eventBus` | PDF 文件的事件总线，例如：查找文档等 |
68+
| `findController` | 查找控制器，不够新版本已经被 `eventBus` 替代 |
69+
| `pageViewer` | 查看控件 |
70+
| `linkService` | 导航服务 |
71+
6072
## 常见问题
6173

6274
### 为什么有时需要指定高度

‎packages/abc/pdf/pdf.component.ts

+51-40
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ import {
1919
} from '@angular/core';
2020
import { fromEvent, Subject, timer, debounceTime, filter, takeUntil } from 'rxjs';
2121

22+
import type { PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdfjs-dist';
23+
import type { EventBus } from 'pdfjs-dist/types/web/interfaces';
24+
import type { PDFFindController } from 'pdfjs-dist/types/web/pdf_find_controller';
25+
import type { PDFLinkService } from 'pdfjs-dist/types/web/pdf_link_service';
26+
import type { PDFViewer } from 'pdfjs-dist/types/web/pdf_viewer';
27+
2228
import { AlainConfigService } from '@delon/util/config';
2329
import { BooleanInput, InputBoolean, InputNumber, NumberInput, ZoneOutside } from '@delon/util/decorator';
2430
import { LazyService } from '@delon/util/other';
@@ -59,10 +65,10 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
5965
inited = false;
6066
private destroy$ = new Subject<void>();
6167
private lib: string = '';
62-
private _pdf: NzSafeAny;
63-
private loadingTask: NzSafeAny;
68+
private _pdf?: PDFDocumentProxy | null;
69+
private loadingTask?: PDFDocumentLoadingTask;
6470
private _src: NzSafeAny;
65-
private lastSrc?: string;
71+
private lastSrc?: NzSafeAny;
6672
private _pi = 1;
6773
private _total = 0;
6874
private _showAll = true;
@@ -71,12 +77,13 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
7177
private _renderText = true;
7278
private _loading = false;
7379

74-
private multiPageViewer: NzSafeAny;
75-
private multiPageLinkService: NzSafeAny;
76-
private multiPageFindController: NzSafeAny;
77-
private singlePageViewer: NzSafeAny;
78-
private singlePageLinkService: NzSafeAny;
79-
private singlePageFindController: NzSafeAny;
80+
private multiPageViewer?: PDFViewer;
81+
private multiPageLinkService?: PDFLinkService;
82+
private multiPageFindController?: PDFFindController;
83+
private singlePageViewer?: PDFViewer;
84+
private singlePageLinkService?: PDFLinkService;
85+
private singlePageFindController?: PDFFindController;
86+
private _eventBus?: EventBus;
8087

8188
@Input() set src(dataOrBuffer: NzSafeAny) {
8289
this._src = dataOrBuffer;
@@ -86,7 +93,7 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
8693
@InputNumber()
8794
set pi(val: number) {
8895
this._pi = this.getValidPi(val);
89-
if (this._pdf) {
96+
if (this.pageViewer) {
9097
this.pageViewer.scrollPageIntoView({ pageNumber: this._pi });
9198
}
9299
}
@@ -96,12 +103,12 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
96103
}
97104
@Input() @InputBoolean() set renderText(val: boolean) {
98105
this._renderText = val;
99-
if (this._pdf) {
106+
if (this.pageViewer) {
100107
this.pageViewer.textLayerMode = this._textLayerMode;
101108
this.resetDoc();
102109
}
103110
}
104-
@Input() textLayerMode: PdfTextLayerMode = PdfTextLayerMode.ENABLE;
111+
@Input() textLayerMode = PdfTextLayerMode.ENABLE;
105112
@Input() @InputBoolean() showBorders = false;
106113
@Input() @InputBoolean() stickToPage = false;
107114
@Input() @InputBoolean() originalSize = true;
@@ -119,30 +126,34 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
119126
this._rotation = val;
120127
}
121128
@Input() @InputBoolean() autoReSize = true;
122-
@Input() externalLinkTarget: PdfExternalLinkTarget = PdfExternalLinkTarget.BLANK;
129+
@Input() externalLinkTarget = PdfExternalLinkTarget.BLANK;
123130
@Input() @InputNumber() delay?: number;
124131
@Output() readonly change = new EventEmitter<PdfChangeEvent>();
125132

126133
get loading(): boolean {
127134
return this._loading;
128135
}
129136

130-
get pdf(): NzSafeAny {
137+
get pdf(): PDFDocumentProxy | undefined | null {
131138
return this._pdf;
132139
}
133140

134-
get findController(): NzSafeAny {
141+
get findController(): PDFFindController | undefined {
135142
return this._showAll ? this.multiPageFindController : this.singlePageFindController;
136143
}
137144

138-
get pageViewer(): NzSafeAny {
145+
get pageViewer(): PDFViewer | undefined {
139146
return this._showAll ? this.multiPageViewer : this.singlePageViewer;
140147
}
141148

142-
get linkService(): NzSafeAny {
149+
get linkService(): PDFLinkService | undefined {
143150
return this._showAll ? this.multiPageLinkService : this.singlePageLinkService;
144151
}
145152

153+
get eventBus(): EventBus | undefined {
154+
return this._eventBus;
155+
}
156+
146157
private get _textLayerMode(): PdfTextLayerMode {
147158
return this._renderText ? this.textLayerMode : PdfTextLayerMode.DISABLE;
148159
}
@@ -231,11 +242,11 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
231242
this.cdr.detectChanges();
232243
});
233244
this.setLoading(true);
234-
const loadingTask = (this.loadingTask = this.win.pdfjsLib.getDocument(_src));
245+
const loadingTask: PDFDocumentLoadingTask = (this.loadingTask = this.win.pdfjsLib.getDocument(_src));
235246
loadingTask.onProgress = (progress: { loaded: number; total: number }) => this.emit('load-progress', { progress });
236-
(loadingTask.promise as PromiseLike<void>)
247+
(loadingTask.promise as PromiseLike<PDFDocumentProxy>)
237248
.then(
238-
(pdf: NzSafeAny) => {
249+
pdf => {
239250
this._pdf = pdf;
240251
this.lastSrc = _src;
241252
this._total = pdf.numPages;
@@ -249,7 +260,7 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
249260
this.resetDoc();
250261
this.render();
251262
},
252-
(error: NzSafeAny) => this.emit('error', { error })
263+
error => this.emit('error', { error })
253264
)
254265
.then(() => this.setLoading(false));
255266
}
@@ -262,20 +273,20 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
262273
}
263274
this.cleanDoc();
264275

265-
this.findController.setDocument(pdf);
266-
this.pageViewer.setDocument(pdf);
267-
this.linkService.setDocument(pdf, null);
276+
this.findController!.setDocument(pdf);
277+
this.pageViewer!.setDocument(pdf);
278+
this.linkService!.setDocument(pdf, null);
268279
}
269280

270281
private cleanDoc(): void {
271-
this.multiPageViewer.setDocument(null);
272-
this.singlePageViewer.setDocument(null);
282+
this.multiPageViewer!.setDocument(null as NzSafeAny);
283+
this.singlePageViewer!.setDocument(null as NzSafeAny);
273284

274-
this.multiPageLinkService.setDocument(null, null);
275-
this.singlePageLinkService.setDocument(null, null);
285+
this.multiPageLinkService!.setDocument(null, null);
286+
this.singlePageLinkService!.setDocument(null, null);
276287

277-
this.multiPageFindController.setDocument(null);
278-
this.singlePageFindController.setDocument(null);
288+
this.multiPageFindController!.setDocument(null as NzSafeAny);
289+
this.singlePageFindController!.setDocument(null as NzSafeAny);
279290
}
280291

281292
private render(): void {
@@ -312,7 +323,7 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
312323
const currentViewer = this.pageViewer;
313324
if (!currentViewer) return;
314325

315-
this._pdf.getPage(currentViewer.currentPageNumber).then((page: NzSafeAny) => {
326+
this._pdf!.getPage(currentViewer.currentPageNumber).then(page => {
316327
const { _rotation, _zoom } = this;
317328
const rotation = _rotation || page.rotate;
318329
const viewportWidth =
@@ -382,8 +393,8 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
382393
this.setupSinglePageViewer();
383394
}
384395

385-
private createEventBus(): NzSafeAny {
386-
const eventBus = new this.win.pdfjsViewer.EventBus();
396+
private createEventBus(): EventBus {
397+
const eventBus: EventBus = new this.win.pdfjsViewer.EventBus();
387398
eventBus.on(`pagesinit`, (ev: NzSafeAny) => {
388399
this.emit('pages-init', { ev });
389400
});
@@ -406,16 +417,16 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
406417
private setupMultiPageViewer(): void {
407418
const VIEWER = this.win.pdfjsViewer;
408419

409-
const eventBus = this.createEventBus();
410-
const linkService = (this.multiPageLinkService = new VIEWER.PDFLinkService({
420+
const eventBus = (this._eventBus = this.createEventBus());
421+
const linkService: PDFLinkService = (this.multiPageLinkService = new VIEWER.PDFLinkService({
411422
eventBus
412423
}));
413-
const findController = (this.multiPageFindController = new VIEWER.PDFFindController({
424+
const findController: PDFFindController = (this.multiPageFindController = new VIEWER.PDFFindController({
414425
eventBus,
415426
linkService
416427
}));
417428

418-
const viewer = (this.multiPageViewer = new VIEWER.PDFViewer({
429+
const viewer: PDFViewer = (this.multiPageViewer = new VIEWER.PDFViewer({
419430
eventBus,
420431
container: this.el,
421432
removePageBorders: !this.showBorders,
@@ -430,10 +441,10 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
430441
const VIEWER = this.win.pdfjsViewer;
431442

432443
const eventBus = this.createEventBus();
433-
const linkService = (this.singlePageLinkService = new VIEWER.PDFLinkService({
444+
const linkService: PDFLinkService = (this.singlePageLinkService = new VIEWER.PDFLinkService({
434445
eventBus
435446
}));
436-
const findController = (this.singlePageFindController = new VIEWER.PDFFindController({
447+
const findController: PDFFindController = (this.singlePageFindController = new VIEWER.PDFFindController({
437448
eventBus,
438449
linkService
439450
}));
@@ -471,7 +482,7 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
471482
fromEvent(this.win, 'resize')
472483
.pipe(
473484
debounceTime(100),
474-
filter(() => this.autoReSize && this._pdf),
485+
filter(() => this.autoReSize && this._pdf != null),
475486
takeUntil(this.destroy$)
476487
)
477488
.subscribe(() => this.updateSize());

‎packages/abc/pdf/pdf.types.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { PDFDocumentProxy } from 'pdfjs-dist';
2+
13
import type { NzSafeAny } from 'ng-zorro-antd/core/types';
24

35
export type PdfChangeEventType =
@@ -14,7 +16,7 @@ export interface PdfChangeEvent {
1416
type?: PdfChangeEventType;
1517
pi?: number;
1618
total?: number;
17-
pdf?: NzSafeAny;
19+
pdf?: PDFDocumentProxy | null;
1820
ev?: NzSafeAny;
1921
progress?: { loaded: number; total: number };
2022
error?: NzSafeAny;

0 commit comments

Comments
 (0)
Please sign in to comment.