inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update PDF viewer component imports and types for better compatibility (#11686)

Browse Source
This commit is contained in:
Denys Vuika
2026-02-24 12:17:06 +00:00
committed by GitHub
parent 2a0d5df2d5
commit 52ad50fbc7
5 changed files with 21 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/viewer/components/pdf-viewer-thumb/pdf-viewer-thumb.component.ts
+1 -2
View File
@@ -20,7 +20,6 @@ import { AsyncPipe, NgIf } from '@angular/common';
import { Component, ElementRef, Input, OnInit, ViewEncapsulation, inject } from '@angular/core'; import { Component, ElementRef, Input, OnInit, ViewEncapsulation, inject } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { TranslatePipe } from '@ngx-translate/core'; import { TranslatePipe } from '@ngx-translate/core';
import { PdfThumbnailPage } from '../pdf-viewer/pdf-viewer.component';
@Component({ @Component({
selector: 'adf-pdf-thumb', selector: 'adf-pdf-thumb',
@@ -34,7 +33,7 @@ export class PdfThumbComponent implements OnInit, FocusableOption {
private readonly element = inject(ElementRef); private readonly element = inject(ElementRef);
@Input() @Input()
page: PdfThumbnailPage = null; page: any;
image$: Promise<string>; image$: Promise<string>;
lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.html
+8 -6
View File
@@ -2,10 +2,12 @@
data-automation-id='adf-thumbnails-content' data-automation-id='adf-thumbnails-content'
[style.height.px]="virtualHeight" [style.height.px]="virtualHeight"
[style.transform]="'translate(-50%, ' + translateY + 'px)'"> [style.transform]="'translate(-50%, ' + translateY + 'px)'">
<adf-pdf-thumb *ngFor="let page of renderItems; trackBy: trackByFn" @for (page of renderItems; track page.id) {
class="adf-pdf-thumbnails__thumb" <adf-pdf-thumb
[id]="page.id" class="adf-pdf-thumbnails__thumb"
[ngClass]="{'adf-pdf-thumbnails__thumb--selected' : isSelected(page.id)}" [id]="page.id"
[page]="page" [ngClass]="{'adf-pdf-thumbnails__thumb--selected' : isSelected(page.id)}"
(click)="goTo(page.id)" /> [page]="page"
(click)="goTo(page.id)" />
}
</div> </div>
lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.spec.ts
+2 -3
View File
@@ -19,9 +19,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PdfThumbListComponent } from './pdf-viewer-thumbnails.component'; import { PdfThumbListComponent } from './pdf-viewer-thumbnails.component';
import { UnitTestingUtils } from '../../../testing'; import { UnitTestingUtils } from '../../../testing';
import { DOWN_ARROW, ESCAPE, UP_ARROW } from '@angular/cdk/keycodes'; import { DOWN_ARROW, ESCAPE, UP_ARROW } from '@angular/cdk/keycodes';
import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
declare const pdfjsViewer: { EventBus: new () => { dispatch: (event: string, data: unknown) => void } }; declare const pdfjsViewer: any;
describe('PdfThumbListComponent', () => { describe('PdfThumbListComponent', () => {
let fixture: ComponentFixture<PdfThumbListComponent>; let fixture: ComponentFixture<PdfThumbListComponent>;
@@ -78,7 +77,7 @@ describe('PdfThumbListComponent', () => {
fixture = TestBed.createComponent(PdfThumbListComponent); fixture = TestBed.createComponent(PdfThumbListComponent);
testingUtils = new UnitTestingUtils(fixture.debugElement); testingUtils = new UnitTestingUtils(fixture.debugElement);
component = fixture.componentInstance; component = fixture.componentInstance;
component.pdfViewer = viewerMock as unknown as PDFViewer; component.pdfViewer = viewerMock as any;
// provide scrollable container // provide scrollable container
fixture.nativeElement.style.display = 'block'; fixture.nativeElement.style.display = 'block';
lib/core/src/lib/viewer/components/pdf-viewer-thumbnails/pdf-viewer-thumbnails.component.ts
+8 -15
View File
@@ -17,7 +17,7 @@
import { FocusKeyManager } from '@angular/cdk/a11y'; import { FocusKeyManager } from '@angular/cdk/a11y';
import { DOWN_ARROW, ESCAPE, TAB, UP_ARROW } from '@angular/cdk/keycodes'; import { DOWN_ARROW, ESCAPE, TAB, UP_ARROW } from '@angular/cdk/keycodes';
import { DOCUMENT, NgClass, NgForOf } from '@angular/common'; import { DOCUMENT, NgClass } from '@angular/common';
import { import {
AfterViewInit, AfterViewInit,
Component, Component,
@@ -36,9 +36,6 @@ import {
inject inject
} from '@angular/core'; } from '@angular/core';
import { delay } from 'rxjs/operators'; import { delay } from 'rxjs/operators';
import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
import { PDFPageProxy } from 'pdfjs-dist/types/src/display/api';
import { PageChangingEvent, PdfThumbnailPage } from '../pdf-viewer/pdf-viewer.component';
import { PdfThumbComponent } from '../pdf-viewer-thumb/pdf-viewer-thumb.component'; import { PdfThumbComponent } from '../pdf-viewer-thumb/pdf-viewer-thumb.component';
@Component({ @Component({
@@ -46,25 +43,25 @@ import { PdfThumbComponent } from '../pdf-viewer-thumb/pdf-viewer-thumb.componen
templateUrl: './pdf-viewer-thumbnails.component.html', templateUrl: './pdf-viewer-thumbnails.component.html',
styleUrls: ['./pdf-viewer-thumbnails.component.scss'], styleUrls: ['./pdf-viewer-thumbnails.component.scss'],
host: { class: 'adf-pdf-thumbnails' }, host: { class: 'adf-pdf-thumbnails' },
imports: [PdfThumbComponent, NgClass, NgForOf], imports: [PdfThumbComponent, NgClass],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
private readonly element = inject(ElementRef); private readonly element = inject(ElementRef);
private readonly document = inject(DOCUMENT); private readonly document = inject(DOCUMENT);
@Input({ required: true }) pdfViewer: PDFViewer; @Input({ required: true }) pdfViewer: any;
@Output() @Output()
close = new EventEmitter<void>(); close = new EventEmitter<void>();
virtualHeight: number = 0; virtualHeight: number = 0;
translateY: number = 0; translateY: number = 0;
renderItems: PdfThumbnailPage[] = []; renderItems: any[] = [];
width: number = 91; width: number = 91;
currentHeight: number = 0; currentHeight: number = 0;
private items: PdfThumbnailPage[] = []; private items: any[] = [];
private readonly margin: number = 15; private readonly margin: number = 15;
private itemHeight: number = 114 + this.margin; private itemHeight: number = 114 + this.margin;
private previouslyFocusedElement: HTMLElement | null = null; private previouslyFocusedElement: HTMLElement | null = null;
@@ -148,10 +145,6 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
} }
} }
trackByFn(_: number, item: PdfThumbnailPage): number {
return item.id;
}
isSelected(pageNumber: number) { isSelected(pageNumber: number) {
return this.pdfViewer.currentPageNumber === pageNumber; return this.pdfViewer.currentPageNumber === pageNumber;
} }
@@ -174,7 +167,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
} }
} }
getPages(): PdfThumbnailPage[] { getPages(): any[] {
// eslint-disable-next-line no-underscore-dangle // eslint-disable-next-line no-underscore-dangle
return this.pdfViewer._pages.map((page) => ({ return this.pdfViewer._pages.map((page) => ({
id: page.id, id: page.id,
@@ -188,7 +181,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
return this.pdfViewer.pdfDocument.getPage(id).then((page) => this.calculateHeight(page)); return this.pdfViewer.pdfDocument.getPage(id).then((page) => this.calculateHeight(page));
} }
private calculateHeight(page: PDFPageProxy) { private calculateHeight(page) {
const viewport = page.getViewport({ scale: 1 }); const viewport = page.getViewport({ scale: 1 });
const pageRatio = viewport.width / viewport.height; const pageRatio = viewport.width / viewport.height;
const height = Math.floor(this.width / pageRatio); const height = Math.floor(this.width / pageRatio);
@@ -224,7 +217,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
}; };
} }
private onPageChange(event: PageChangingEvent) { private onPageChange(event: any) {
const index = this.renderItems.findIndex((element) => element.id === event.pageNumber); const index = this.renderItems.findIndex((element) => element.id === event.pageNumber);
if (index < 0) { if (index < 0) {
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts
+2 -2
View File
@@ -45,11 +45,11 @@ import { ToolbarComponent, ToolbarDividerComponent } from '../../../toolbar';
import { RenderingQueueServices } from '../../services/rendering-queue.services'; import { RenderingQueueServices } from '../../services/rendering-queue.services';
import { PdfPasswordDialogComponent } from '../pdf-viewer-password-dialog/pdf-viewer-password-dialog'; import { PdfPasswordDialogComponent } from '../pdf-viewer-password-dialog/pdf-viewer-password-dialog';
import { PdfThumbListComponent } from '../pdf-viewer-thumbnails/pdf-viewer-thumbnails.component'; import { PdfThumbListComponent } from '../pdf-viewer-thumbnails/pdf-viewer-thumbnails.component';
import * as pdfjsLib from 'pdfjs-dist'; import * as pdfjsLib from 'pdfjs-dist/build/pdf.min.mjs';
import { PDFDateString } from 'pdfjs-dist/build/pdf.min.mjs';
import { EventBus, PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs'; import { EventBus, PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
import { OnProgressParameters, PDFDocumentLoadingTask, PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist/types/src/display/api'; import { OnProgressParameters, PDFDocumentLoadingTask, PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist/types/src/display/api';
import { IconModule } from '../../../icon/icon.module'; import { IconModule } from '../../../icon/icon.module';
import { PDFDateString } from 'pdfjs-dist';
export type PdfScaleMode = 'init' | 'page-actual' | 'page-width' | 'page-height' | 'page-fit' | 'auto'; export type PdfScaleMode = 'init' | 'page-actual' | 'page-width' | 'page-height' | 'page-fit' | 'auto';