mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-25 10:49:30 -05:00
Chore: revert pngx pdf viewer to third party package (#6741)
This commit is contained in:
shamoon
GitHub
parent
50a6181e48
commit
019a255753
@ -76,8 +76,7 @@
|
||||
],
|
||||
"scripts": [],
|
||||
"allowedCommonJsDependencies": [
|
||||
"pdfjs-dist",
|
||||
"pdfjs-dist/web/pdf_viewer",
|
||||
"ng2-pdf-viewer",
|
||||
"filesize",
|
||||
"file-saver"
|
||||
],
|
||||
|
||||
@ -71,7 +71,7 @@ test('should show a mobile preview', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 400, height: 1000 })
|
||||
await expect(page.getByRole('tab', { name: 'Preview' })).toBeVisible()
|
||||
await page.getByRole('tab', { name: 'Preview' }).click()
|
||||
await page.waitForSelector('pngx-pdf-viewer')
|
||||
await page.waitForSelector('pdf-viewer')
|
||||
})
|
||||
|
||||
test('should show a list of notes', async ({ page }) => {
|
||||
|
||||
@ -7,7 +7,6 @@ module.exports = {
|
||||
'abstract-name-filter-service',
|
||||
'abstract-paperless-service',
|
||||
],
|
||||
coveragePathIgnorePatterns: ['/src/app/components/common/pdf-viewer/*'],
|
||||
transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\.mjs$|lodash-es)`],
|
||||
moduleNameMapper: {
|
||||
'^src/(.*)': '<rootDir>/src/$1',
|
||||
|
||||
11
src-ui/package-lock.json
generated
11
src-ui/package-lock.json
generated
@ -25,13 +25,13 @@
|
||||
"bootstrap": "^5.3.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"mime-names": "^1.0.0",
|
||||
"ng2-pdf-viewer": "^10.2.1",
|
||||
"ngx-bootstrap-icons": "^1.9.3",
|
||||
"ngx-color": "^9.0.0",
|
||||
"ngx-cookie-service": "^17.1.0",
|
||||
"ngx-file-drop": "^16.0.0",
|
||||
"ngx-filesize": "^3.0.3",
|
||||
"ngx-ui-tour-ng-bootstrap": "^14.0.2",
|
||||
"pdfjs-dist": "^3.11.174",
|
||||
"rxjs": "^7.8.1",
|
||||
"tslib": "^2.6.2",
|
||||
"uuid": "^9.0.1",
|
||||
@ -14249,6 +14249,15 @@
|
||||
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ng2-pdf-viewer": {
|
||||
"version": "10.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-10.2.1.tgz",
|
||||
"integrity": "sha512-FaKuOmAfI9y/28m+iW9kZLVPQ9IOMRsv4t9NTp4wfXWcTpkL90Z3Ih9w/UcG9rF3dQwsYD00zvyOII7lMfCInQ==",
|
||||
"dependencies": {
|
||||
"pdfjs-dist": "^3.11.174",
|
||||
"tslib": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ngx-bootstrap-icons": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/ngx-bootstrap-icons/-/ngx-bootstrap-icons-1.9.3.tgz",
|
||||
|
||||
@ -27,13 +27,13 @@
|
||||
"bootstrap": "^5.3.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"mime-names": "^1.0.0",
|
||||
"ng2-pdf-viewer": "^10.2.1",
|
||||
"ngx-bootstrap-icons": "^1.9.3",
|
||||
"ngx-color": "^9.0.0",
|
||||
"ngx-cookie-service": "^17.1.0",
|
||||
"ngx-file-drop": "^16.0.0",
|
||||
"ngx-filesize": "^3.0.3",
|
||||
"ngx-ui-tour-ng-bootstrap": "^14.0.2",
|
||||
"pdfjs-dist": "^3.11.174",
|
||||
"rxjs": "^7.8.1",
|
||||
"tslib": "^2.6.2",
|
||||
"uuid": "^9.0.1",
|
||||
|
||||
@ -105,7 +105,7 @@ import { CustomFieldsComponent } from './components/manage/custom-fields/custom-
|
||||
import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
|
||||
import { CustomFieldsDropdownComponent } from './components/common/custom-fields-dropdown/custom-fields-dropdown.component'
|
||||
import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
|
||||
import { PdfViewerComponent } from './components/common/pdf-viewer/pdf-viewer.component'
|
||||
import { PdfViewerModule } from 'ng2-pdf-viewer'
|
||||
import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
|
||||
import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
|
||||
import { SwitchComponent } from './components/common/input/switch/switch.component'
|
||||
@ -475,7 +475,6 @@ function initializeApp(settings: SettingsService) {
|
||||
CustomFieldEditDialogComponent,
|
||||
CustomFieldsDropdownComponent,
|
||||
ProfileEditDialogComponent,
|
||||
PdfViewerComponent,
|
||||
DocumentLinkComponent,
|
||||
PreviewPopupComponent,
|
||||
SwitchComponent,
|
||||
@ -500,6 +499,7 @@ function initializeApp(settings: SettingsService) {
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
PdfViewerModule,
|
||||
NgxFileDropModule,
|
||||
NgSelectModule,
|
||||
ColorSliderModule,
|
||||
|
||||
@ -13,12 +13,12 @@
|
||||
<div class="input-group-text" i18n>of {{totalPages}}</div>
|
||||
</div>
|
||||
<div class="pdf-viewer-container w-100 mt-3">
|
||||
<pngx-pdf-viewer [src]="pdfSrc" [(page)]="page"
|
||||
<pdf-viewer [src]="pdfSrc" [(page)]="page"
|
||||
[original-size]="false"
|
||||
[zoom]="1"
|
||||
zoom-scale="page-fit"
|
||||
(after-load-complete)="pdfPreviewLoaded($event)">
|
||||
</pngx-pdf-viewer>
|
||||
</pdf-viewer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
background-color: gray;
|
||||
height: 350px;
|
||||
|
||||
pngx-pdf-viewer {
|
||||
pdf-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
|
||||
import { DocumentService } from 'src/app/services/rest/document.service'
|
||||
import { PdfViewerComponent } from '../../pdf-viewer/pdf-viewer.component'
|
||||
import { PdfViewerModule } from 'ng2-pdf-viewer'
|
||||
|
||||
describe('SplitConfirmDialogComponent', () => {
|
||||
let component: SplitConfirmDialogComponent
|
||||
@ -15,13 +15,14 @@ describe('SplitConfirmDialogComponent', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [SplitConfirmDialogComponent, PdfViewerComponent],
|
||||
declarations: [SplitConfirmDialogComponent],
|
||||
providers: [NgbActiveModal],
|
||||
imports: [
|
||||
HttpClientTestingModule,
|
||||
NgxBootstrapIconsModule.pick(allIcons),
|
||||
ReactiveFormsModule,
|
||||
FormsModule,
|
||||
PdfViewerModule,
|
||||
],
|
||||
}).compileComponents()
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { Component } from '@angular/core'
|
||||
import { ConfirmDialogComponent } from '../confirm-dialog.component'
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { DocumentService } from 'src/app/services/rest/document.service'
|
||||
import { PDFDocumentProxy } from '../../pdf-viewer/typings'
|
||||
import { PDFDocumentProxy } from 'ng2-pdf-viewer'
|
||||
|
||||
@Component({
|
||||
selector: 'pngx-split-confirm-dialog',
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
<div #pdfViewerContainer class="pngx-pdf-viewer-container">
|
||||
<div class="pdfViewer"></div>
|
||||
</div>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,600 +0,0 @@
|
||||
/**
|
||||
* This file is taken and modified from https://github.com/VadimDez/ng2-pdf-viewer/blob/10.0.0/src/app/pdf-viewer/pdf-viewer.component.ts
|
||||
* Created by vadimdez on 21/06/16.
|
||||
*/
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
Output,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
OnChanges,
|
||||
SimpleChanges,
|
||||
OnInit,
|
||||
OnDestroy,
|
||||
ViewChild,
|
||||
AfterViewChecked,
|
||||
NgZone,
|
||||
} from '@angular/core'
|
||||
import { from, fromEvent, Subject } from 'rxjs'
|
||||
import { debounceTime, filter, takeUntil } from 'rxjs/operators'
|
||||
import * as PDFJS from 'pdfjs-dist'
|
||||
import * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer'
|
||||
|
||||
import { createEventBus } from './utils/event-bus-utils'
|
||||
|
||||
import type {
|
||||
PDFSource,
|
||||
PDFPageProxy,
|
||||
PDFProgressData,
|
||||
PDFDocumentProxy,
|
||||
PDFDocumentLoadingTask,
|
||||
PDFViewerOptions,
|
||||
ZoomScale,
|
||||
} from './typings'
|
||||
import { PDFSinglePageViewer } from 'pdfjs-dist/web/pdf_viewer'
|
||||
|
||||
PDFJS['verbosity'] = PDFJS.VerbosityLevel.ERRORS
|
||||
|
||||
export enum RenderTextMode {
|
||||
DISABLED,
|
||||
ENABLED,
|
||||
ENHANCED,
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'pngx-pdf-viewer',
|
||||
templateUrl: './pdf-viewer.component.html',
|
||||
styleUrls: ['./pdf-viewer.component.scss'],
|
||||
})
|
||||
export class PdfViewerComponent
|
||||
implements OnChanges, OnInit, OnDestroy, AfterViewChecked
|
||||
{
|
||||
static CSS_UNITS = 96.0 / 72.0
|
||||
static BORDER_WIDTH = 9
|
||||
|
||||
@ViewChild('pdfViewerContainer')
|
||||
pdfViewerContainer!: ElementRef<HTMLDivElement>
|
||||
|
||||
public eventBus!: PDFJSViewer.EventBus
|
||||
public pdfLinkService!: PDFJSViewer.PDFLinkService
|
||||
public pdfViewer!: PDFJSViewer.PDFViewer | PDFSinglePageViewer
|
||||
|
||||
private isVisible = false
|
||||
|
||||
private _cMapsUrl =
|
||||
typeof PDFJS !== 'undefined'
|
||||
? `https://unpkg.com/pdfjs-dist@${(PDFJS as any).version}/cmaps/`
|
||||
: null
|
||||
private _imageResourcesPath =
|
||||
typeof PDFJS !== 'undefined'
|
||||
? `https://unpkg.com/pdfjs-dist@${(PDFJS as any).version}/web/images/`
|
||||
: undefined
|
||||
private _renderText = true
|
||||
private _renderTextMode: RenderTextMode = RenderTextMode.ENABLED
|
||||
private _stickToPage = false
|
||||
private _originalSize = true
|
||||
private _pdf: PDFDocumentProxy | undefined
|
||||
private _page = 1
|
||||
private _zoom = 1
|
||||
private _zoomScale: ZoomScale = 'page-width'
|
||||
private _rotation = 0
|
||||
private _showAll = true
|
||||
private _canAutoResize = true
|
||||
private _fitToPage = false
|
||||
private _externalLinkTarget = 'blank'
|
||||
private _showBorders = false
|
||||
private lastLoaded!: string | Uint8Array | PDFSource | null
|
||||
private _latestScrolledPage!: number
|
||||
|
||||
private resizeTimeout: number | null = null
|
||||
private pageScrollTimeout: number | null = null
|
||||
private isInitialized = false
|
||||
private loadingTask?: PDFDocumentLoadingTask | null
|
||||
private destroy$ = new Subject<void>()
|
||||
|
||||
@Output('after-load-complete') afterLoadComplete =
|
||||
new EventEmitter<PDFDocumentProxy>()
|
||||
@Output('page-rendered') pageRendered = new EventEmitter<CustomEvent>()
|
||||
@Output('pages-initialized') pageInitialized = new EventEmitter<CustomEvent>()
|
||||
@Output('text-layer-rendered') textLayerRendered =
|
||||
new EventEmitter<CustomEvent>()
|
||||
@Output('error') onError = new EventEmitter<any>()
|
||||
@Output('on-progress') onProgress = new EventEmitter<PDFProgressData>()
|
||||
@Output() pageChange: EventEmitter<number> = new EventEmitter<number>(true)
|
||||
@Input() src?: string | Uint8Array | PDFSource
|
||||
|
||||
@Input('c-maps-url')
|
||||
set cMapsUrl(cMapsUrl: string) {
|
||||
this._cMapsUrl = cMapsUrl
|
||||
}
|
||||
|
||||
@Input('page')
|
||||
set page(_page: number | string | any) {
|
||||
_page = parseInt(_page, 10) || 1
|
||||
const originalPage = _page
|
||||
|
||||
if (this._pdf) {
|
||||
_page = this.getValidPageNumber(_page)
|
||||
}
|
||||
|
||||
this._page = _page
|
||||
if (originalPage !== _page) {
|
||||
this.pageChange.emit(_page)
|
||||
}
|
||||
}
|
||||
|
||||
@Input('render-text')
|
||||
set renderText(renderText: boolean) {
|
||||
this._renderText = renderText
|
||||
}
|
||||
|
||||
@Input('render-text-mode')
|
||||
set renderTextMode(renderTextMode: RenderTextMode) {
|
||||
this._renderTextMode = renderTextMode
|
||||
}
|
||||
|
||||
@Input('original-size')
|
||||
set originalSize(originalSize: boolean) {
|
||||
this._originalSize = originalSize
|
||||
}
|
||||
|
||||
@Input('show-all')
|
||||
set showAll(value: boolean) {
|
||||
this._showAll = value
|
||||
}
|
||||
|
||||
@Input('stick-to-page')
|
||||
set stickToPage(value: boolean) {
|
||||
this._stickToPage = value
|
||||
}
|
||||
|
||||
@Input('zoom')
|
||||
set zoom(value: number) {
|
||||
if (value <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
this._zoom = value
|
||||
}
|
||||
|
||||
get zoom() {
|
||||
return this._zoom
|
||||
}
|
||||
|
||||
@Input('zoom-scale')
|
||||
set zoomScale(value: ZoomScale) {
|
||||
this._zoomScale = value
|
||||
}
|
||||
|
||||
get zoomScale() {
|
||||
return this._zoomScale
|
||||
}
|
||||
|
||||
@Input('rotation')
|
||||
set rotation(value: number) {
|
||||
if (!(typeof value === 'number' && value % 90 === 0)) {
|
||||
console.warn('Invalid pages rotation angle.')
|
||||
return
|
||||
}
|
||||
|
||||
this._rotation = value
|
||||
}
|
||||
|
||||
@Input('external-link-target')
|
||||
set externalLinkTarget(value: string) {
|
||||
this._externalLinkTarget = value
|
||||
}
|
||||
|
||||
@Input('autoresize')
|
||||
set autoresize(value: boolean) {
|
||||
this._canAutoResize = Boolean(value)
|
||||
}
|
||||
|
||||
@Input('fit-to-page')
|
||||
set fitToPage(value: boolean) {
|
||||
this._fitToPage = Boolean(value)
|
||||
}
|
||||
|
||||
@Input('show-borders')
|
||||
set showBorders(value: boolean) {
|
||||
this._showBorders = Boolean(value)
|
||||
}
|
||||
|
||||
static getLinkTarget(type: string) {
|
||||
switch (type) {
|
||||
case 'blank':
|
||||
return (PDFJSViewer as any).LinkTarget.BLANK
|
||||
case 'none':
|
||||
return (PDFJSViewer as any).LinkTarget.NONE
|
||||
case 'self':
|
||||
return (PDFJSViewer as any).LinkTarget.SELF
|
||||
case 'parent':
|
||||
return (PDFJSViewer as any).LinkTarget.PARENT
|
||||
case 'top':
|
||||
return (PDFJSViewer as any).LinkTarget.TOP
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
constructor(
|
||||
private element: ElementRef<HTMLElement>,
|
||||
private ngZone: NgZone
|
||||
) {
|
||||
PDFJS.GlobalWorkerOptions['workerSrc'] = 'assets/js/pdf.worker.min.js'
|
||||
}
|
||||
|
||||
ngAfterViewChecked(): void {
|
||||
if (this.isInitialized) {
|
||||
return
|
||||
}
|
||||
|
||||
const offset = this.pdfViewerContainer.nativeElement.offsetParent
|
||||
|
||||
if (this.isVisible === true && offset == null) {
|
||||
this.isVisible = false
|
||||
return
|
||||
}
|
||||
|
||||
if (this.isVisible === false && offset != null) {
|
||||
this.isVisible = true
|
||||
|
||||
setTimeout(() => {
|
||||
this.initialize()
|
||||
this.ngOnChanges({ src: this.src } as any)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initialize()
|
||||
this.setupResizeListener()
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.clear()
|
||||
this.destroy$.next()
|
||||
this.loadingTask = null
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (!this.isVisible) {
|
||||
return
|
||||
}
|
||||
|
||||
if ('src' in changes) {
|
||||
this.loadPDF()
|
||||
} else if (this._pdf) {
|
||||
if ('renderText' in changes || 'showAll' in changes) {
|
||||
this.setupViewer()
|
||||
this.resetPdfDocument()
|
||||
}
|
||||
if ('page' in changes) {
|
||||
const { page } = changes
|
||||
if (page.currentValue === this._latestScrolledPage) {
|
||||
return
|
||||
}
|
||||
|
||||
// New form of page changing: The viewer will now jump to the specified page when it is changed.
|
||||
// This behavior is introduced by using the PDFSinglePageViewer
|
||||
this.pdfViewer.scrollPageIntoView({ pageNumber: this._page })
|
||||
}
|
||||
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
|
||||
public updateSize() {
|
||||
from(
|
||||
this._pdf!.getPage(
|
||||
this.pdfViewer.currentPageNumber
|
||||
) as unknown as Promise<PDFPageProxy>
|
||||
)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (page: PDFPageProxy) => {
|
||||
const rotation = this._rotation + page.rotate
|
||||
const viewportWidth =
|
||||
(page as any).getViewport({
|
||||
scale: this._zoom,
|
||||
rotation,
|
||||
}).width * PdfViewerComponent.CSS_UNITS
|
||||
let scale = this._zoom
|
||||
let stickToPage = true
|
||||
|
||||
// Scale the document when it shouldn't be in original size or doesn't fit into the viewport
|
||||
if (
|
||||
!this._originalSize ||
|
||||
(this._fitToPage &&
|
||||
viewportWidth > this.pdfViewerContainer.nativeElement.clientWidth)
|
||||
) {
|
||||
const viewPort = (page as any).getViewport({ scale: 1, rotation })
|
||||
scale = this.getScale(viewPort.width, viewPort.height)
|
||||
stickToPage = !this._stickToPage
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.pdfViewer.currentScale = scale
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
public clear() {
|
||||
if (this.loadingTask && !this.loadingTask.destroyed) {
|
||||
this.loadingTask.destroy()
|
||||
}
|
||||
|
||||
if (this._pdf) {
|
||||
this._latestScrolledPage = 0
|
||||
this._pdf.destroy()
|
||||
this._pdf = undefined
|
||||
}
|
||||
}
|
||||
|
||||
private getPDFLinkServiceConfig() {
|
||||
const linkTarget = PdfViewerComponent.getLinkTarget(
|
||||
this._externalLinkTarget
|
||||
)
|
||||
|
||||
if (linkTarget) {
|
||||
return { externalLinkTarget: linkTarget }
|
||||
}
|
||||
|
||||
return {}
|
||||
}
|
||||
|
||||
private initEventBus() {
|
||||
this.eventBus = createEventBus(PDFJSViewer, this.destroy$)
|
||||
|
||||
fromEvent<CustomEvent>(this.eventBus, 'pagerendered')
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe((event) => {
|
||||
this.pageRendered.emit(event)
|
||||
})
|
||||
|
||||
fromEvent<CustomEvent>(this.eventBus, 'pagesinit')
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe((event) => {
|
||||
this.pageInitialized.emit(event)
|
||||
})
|
||||
|
||||
fromEvent(this.eventBus, 'pagechanging')
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(({ pageNumber }: any) => {
|
||||
if (this.pageScrollTimeout) {
|
||||
clearTimeout(this.pageScrollTimeout)
|
||||
}
|
||||
|
||||
this.pageScrollTimeout = window.setTimeout(() => {
|
||||
this._latestScrolledPage = pageNumber
|
||||
this.pageChange.emit(pageNumber)
|
||||
}, 100)
|
||||
})
|
||||
|
||||
fromEvent<CustomEvent>(this.eventBus, 'textlayerrendered')
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe((event) => {
|
||||
this.textLayerRendered.emit(event)
|
||||
})
|
||||
}
|
||||
|
||||
private initPDFServices() {
|
||||
this.pdfLinkService = new PDFJSViewer.PDFLinkService({
|
||||
eventBus: this.eventBus,
|
||||
...this.getPDFLinkServiceConfig(),
|
||||
})
|
||||
}
|
||||
|
||||
private getPDFOptions(): PDFViewerOptions {
|
||||
return {
|
||||
eventBus: this.eventBus,
|
||||
container: this.element.nativeElement.querySelector('div')!,
|
||||
removePageBorders: !this._showBorders,
|
||||
linkService: this.pdfLinkService,
|
||||
textLayerMode: this._renderText
|
||||
? this._renderTextMode
|
||||
: RenderTextMode.DISABLED,
|
||||
imageResourcesPath: this._imageResourcesPath,
|
||||
}
|
||||
}
|
||||
|
||||
private setupViewer() {
|
||||
PDFJS['disableTextLayer'] = !this._renderText
|
||||
|
||||
this.initPDFServices()
|
||||
|
||||
if (this._showAll) {
|
||||
this.pdfViewer = new PDFJSViewer.PDFViewer(this.getPDFOptions())
|
||||
} else {
|
||||
this.pdfViewer = new PDFJSViewer.PDFSinglePageViewer(this.getPDFOptions())
|
||||
}
|
||||
this.pdfLinkService.setViewer(this.pdfViewer)
|
||||
|
||||
this.pdfViewer._currentPageNumber = this._page
|
||||
}
|
||||
|
||||
private getValidPageNumber(page: number): number {
|
||||
if (page < 1) {
|
||||
return 1
|
||||
}
|
||||
|
||||
if (page > this._pdf!.numPages) {
|
||||
return this._pdf!.numPages
|
||||
}
|
||||
|
||||
return page
|
||||
}
|
||||
|
||||
private getDocumentParams() {
|
||||
const srcType = typeof this.src
|
||||
|
||||
if (!this._cMapsUrl) {
|
||||
return this.src
|
||||
}
|
||||
|
||||
const params: any = {
|
||||
cMapUrl: this._cMapsUrl,
|
||||
cMapPacked: true,
|
||||
enableXfa: true,
|
||||
}
|
||||
params.isEvalSupported = false
|
||||
|
||||
if (srcType === 'string') {
|
||||
params.url = this.src
|
||||
} else if (srcType === 'object') {
|
||||
if ((this.src as any).byteLength !== undefined) {
|
||||
params.data = this.src
|
||||
} else {
|
||||
Object.assign(params, this.src)
|
||||
}
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
|
||||
private loadPDF() {
|
||||
if (!this.src) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.lastLoaded === this.src) {
|
||||
this.update()
|
||||
return
|
||||
}
|
||||
|
||||
this.clear()
|
||||
|
||||
if (this.pdfViewer) {
|
||||
this.pdfViewer._resetView()
|
||||
this.pdfViewer = null
|
||||
}
|
||||
|
||||
this.setupViewer()
|
||||
|
||||
try {
|
||||
this.loadingTask = PDFJS.getDocument(this.getDocumentParams())
|
||||
|
||||
this.loadingTask!.onProgress = (progressData: PDFProgressData) => {
|
||||
this.onProgress.emit(progressData)
|
||||
}
|
||||
|
||||
const src = this.src
|
||||
|
||||
from(this.loadingTask!.promise as Promise<PDFDocumentProxy>)
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe({
|
||||
next: (pdf) => {
|
||||
this._pdf = pdf
|
||||
this.lastLoaded = src
|
||||
|
||||
this.afterLoadComplete.emit(pdf)
|
||||
this.resetPdfDocument()
|
||||
|
||||
this.update()
|
||||
},
|
||||
error: (error) => {
|
||||
this.lastLoaded = null
|
||||
this.onError.emit(error)
|
||||
},
|
||||
})
|
||||
} catch (e) {
|
||||
this.onError.emit(e)
|
||||
}
|
||||
}
|
||||
|
||||
private update() {
|
||||
this.page = this._page
|
||||
|
||||
this.render()
|
||||
}
|
||||
|
||||
private render() {
|
||||
this._page = this.getValidPageNumber(this._page)
|
||||
|
||||
if (
|
||||
this._rotation !== 0 ||
|
||||
this.pdfViewer.pagesRotation !== this._rotation
|
||||
) {
|
||||
setTimeout(() => {
|
||||
this.pdfViewer.pagesRotation = this._rotation
|
||||
})
|
||||
}
|
||||
|
||||
if (this._stickToPage) {
|
||||
setTimeout(() => {
|
||||
this.pdfViewer.currentPageNumber = this._page
|
||||
})
|
||||
}
|
||||
|
||||
this.updateSize()
|
||||
}
|
||||
|
||||
private getScale(viewportWidth: number, viewportHeight: number) {
|
||||
const borderSize = this._showBorders
|
||||
? 2 * PdfViewerComponent.BORDER_WIDTH
|
||||
: 0
|
||||
const pdfContainerWidth =
|
||||
this.pdfViewerContainer.nativeElement.clientWidth - borderSize
|
||||
const pdfContainerHeight =
|
||||
this.pdfViewerContainer.nativeElement.clientHeight - borderSize
|
||||
|
||||
if (
|
||||
pdfContainerHeight === 0 ||
|
||||
viewportHeight === 0 ||
|
||||
pdfContainerWidth === 0 ||
|
||||
viewportWidth === 0
|
||||
) {
|
||||
return 1
|
||||
}
|
||||
|
||||
let ratio = 1
|
||||
switch (this._zoomScale) {
|
||||
case 'page-fit':
|
||||
ratio = Math.min(
|
||||
pdfContainerHeight / viewportHeight,
|
||||
pdfContainerWidth / viewportWidth
|
||||
)
|
||||
break
|
||||
case 'page-height':
|
||||
ratio = pdfContainerHeight / viewportHeight
|
||||
break
|
||||
case 'page-width':
|
||||
default:
|
||||
ratio = pdfContainerWidth / viewportWidth
|
||||
break
|
||||
}
|
||||
|
||||
return (this._zoom * ratio) / PdfViewerComponent.CSS_UNITS
|
||||
}
|
||||
|
||||
private resetPdfDocument() {
|
||||
this.pdfLinkService.setDocument(this._pdf, null)
|
||||
this.pdfViewer.setDocument(this._pdf!)
|
||||
}
|
||||
|
||||
private initialize(): void {
|
||||
if (!this.isVisible) {
|
||||
return
|
||||
}
|
||||
|
||||
this.isInitialized = true
|
||||
this.initEventBus()
|
||||
this.setupViewer()
|
||||
}
|
||||
|
||||
private setupResizeListener(): void {
|
||||
this.ngZone.runOutsideAngular(() => {
|
||||
fromEvent(window, 'resize')
|
||||
.pipe(
|
||||
debounceTime(100),
|
||||
filter(() => this._canAutoResize && !!this._pdf),
|
||||
takeUntil(this.destroy$)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.updateSize()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
export type PDFPageProxy =
|
||||
import('pdfjs-dist/types/src/display/api').PDFPageProxy
|
||||
export type PDFSource =
|
||||
import('pdfjs-dist/types/src/display/api').DocumentInitParameters
|
||||
export type PDFDocumentProxy =
|
||||
import('pdfjs-dist/types/src/display/api').PDFDocumentProxy
|
||||
export type PDFDocumentLoadingTask =
|
||||
import('pdfjs-dist/types/src/display/api').PDFDocumentLoadingTask
|
||||
export type PDFViewerOptions =
|
||||
import('pdfjs-dist/types/web/pdf_viewer').PDFViewerOptions
|
||||
|
||||
export interface PDFProgressData {
|
||||
loaded: number
|
||||
total: number
|
||||
}
|
||||
|
||||
export type ZoomScale = 'page-height' | 'page-fit' | 'page-width'
|
||||
@ -1,182 +0,0 @@
|
||||
/**
|
||||
* This file is taken and modified from https://github.com/VadimDez/ng2-pdf-viewer/blob/10.0.0/src/app/pdf-viewer/utils/event-bus-utils.ts
|
||||
* Created by vadimdez on 21/06/16.
|
||||
*/
|
||||
import { fromEvent, Subject } from 'rxjs'
|
||||
import { takeUntil } from 'rxjs/operators'
|
||||
|
||||
import type { EventBus } from 'pdfjs-dist/web/pdf_viewer'
|
||||
|
||||
// interface EventBus {
|
||||
// on(eventName: string, listener: Function): void;
|
||||
// off(eventName: string, listener: Function): void;
|
||||
// _listeners: any;
|
||||
// dispatch(eventName: string, data: Object): void;
|
||||
// _on(eventName: any, listener: any, options?: null): void;
|
||||
// _off(eventName: any, listener: any, options?: null): void;
|
||||
// }
|
||||
|
||||
export function createEventBus(pdfJsViewer: any, destroy$: Subject<void>) {
|
||||
const globalEventBus: EventBus = new pdfJsViewer.EventBus()
|
||||
attachDOMEventsToEventBus(globalEventBus, destroy$)
|
||||
return globalEventBus
|
||||
}
|
||||
|
||||
function attachDOMEventsToEventBus(
|
||||
eventBus: EventBus,
|
||||
destroy$: Subject<void>
|
||||
): void {
|
||||
fromEvent(eventBus, 'documentload')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(() => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('documentload', true, true, {})
|
||||
window.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'pagerendered')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ pageNumber, cssTransform, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('pagerendered', true, true, {
|
||||
pageNumber,
|
||||
cssTransform,
|
||||
})
|
||||
source.div.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'textlayerrendered')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ pageNumber, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('textlayerrendered', true, true, { pageNumber })
|
||||
source.textLayerDiv?.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'pagechanging')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ pageNumber, source }: any) => {
|
||||
const event = document.createEvent('UIEvents') as any
|
||||
event.initEvent('pagechanging', true, true)
|
||||
/* tslint:disable:no-string-literal */
|
||||
event['pageNumber'] = pageNumber
|
||||
source.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'pagesinit')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('pagesinit', true, true, null)
|
||||
source.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'pagesloaded')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ pagesCount, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('pagesloaded', true, true, { pagesCount })
|
||||
source.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'scalechange')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ scale, presetValue, source }: any) => {
|
||||
const event = document.createEvent('UIEvents') as any
|
||||
event.initEvent('scalechange', true, true)
|
||||
/* tslint:disable:no-string-literal */
|
||||
event['scale'] = scale
|
||||
/* tslint:disable:no-string-literal */
|
||||
event['presetValue'] = presetValue
|
||||
source.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'updateviewarea')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ location, source }: any) => {
|
||||
const event = document.createEvent('UIEvents') as any
|
||||
event.initEvent('updateviewarea', true, true)
|
||||
event['location'] = location
|
||||
source.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'find')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(
|
||||
({
|
||||
source,
|
||||
type,
|
||||
query,
|
||||
phraseSearch,
|
||||
caseSensitive,
|
||||
highlightAll,
|
||||
findPrevious,
|
||||
}: any) => {
|
||||
if (source === window) {
|
||||
return // event comes from FirefoxCom, no need to replicate
|
||||
}
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('find' + type, true, true, {
|
||||
query,
|
||||
phraseSearch,
|
||||
caseSensitive,
|
||||
highlightAll,
|
||||
findPrevious,
|
||||
})
|
||||
window.dispatchEvent(event)
|
||||
}
|
||||
)
|
||||
|
||||
fromEvent(eventBus, 'attachmentsloaded')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ attachmentsCount, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('attachmentsloaded', true, true, {
|
||||
attachmentsCount,
|
||||
})
|
||||
source.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'sidebarviewchanged')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ view, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('sidebarviewchanged', true, true, { view })
|
||||
source.outerContainer.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'pagemode')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ mode, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('pagemode', true, true, { mode })
|
||||
source.pdfViewer.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'namedaction')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ action, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('namedaction', true, true, { action })
|
||||
source.pdfViewer.container.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'presentationmodechanged')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ active, switchInProgress }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('presentationmodechanged', true, true, {
|
||||
active,
|
||||
switchInProgress,
|
||||
})
|
||||
window.dispatchEvent(event)
|
||||
})
|
||||
|
||||
fromEvent(eventBus, 'outlineloaded')
|
||||
.pipe(takeUntil(destroy$))
|
||||
.subscribe(({ outlineCount, source }: any) => {
|
||||
const event = document.createEvent('CustomEvent')
|
||||
event.initCustomEvent('outlineloaded', true, true, { outlineCount })
|
||||
source.container.dispatchEvent(event)
|
||||
})
|
||||
}
|
||||
@ -13,13 +13,13 @@
|
||||
</div>
|
||||
}
|
||||
@if (!requiresPassword) {
|
||||
<pngx-pdf-viewer
|
||||
<pdf-viewer
|
||||
[src]="previewURL"
|
||||
[original-size]="false"
|
||||
[show-borders]="true"
|
||||
[show-all]="true"
|
||||
(error)="onError($event)">
|
||||
</pngx-pdf-viewer>
|
||||
</pdf-viewer>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing'
|
||||
|
||||
import { PreviewPopupComponent } from './preview-popup.component'
|
||||
import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
|
||||
import { By } from '@angular/platform-browser'
|
||||
import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
|
||||
import { SettingsService } from 'src/app/services/settings.service'
|
||||
@ -9,6 +8,7 @@ import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
|
||||
import { HttpClientTestingModule } from '@angular/common/http/testing'
|
||||
import { DocumentService } from 'src/app/services/rest/document.service'
|
||||
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
|
||||
import { PdfViewerModule } from 'ng2-pdf-viewer'
|
||||
|
||||
const doc = {
|
||||
id: 10,
|
||||
@ -25,10 +25,11 @@ describe('PreviewPopupComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [PreviewPopupComponent, PdfViewerComponent, SafeUrlPipe],
|
||||
declarations: [PreviewPopupComponent, SafeUrlPipe],
|
||||
imports: [
|
||||
HttpClientTestingModule,
|
||||
NgxBootstrapIconsModule.pick(allIcons),
|
||||
PdfViewerModule,
|
||||
],
|
||||
})
|
||||
settingsService = TestBed.inject(SettingsService)
|
||||
@ -69,7 +70,7 @@ describe('PreviewPopupComponent', () => {
|
||||
settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
|
||||
fixture.detectChanges()
|
||||
expect(fixture.debugElement.query(By.css('object'))).toBeNull()
|
||||
expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
|
||||
expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
|
||||
})
|
||||
|
||||
it('should show lock icon on password error', () => {
|
||||
|
||||
@ -347,7 +347,7 @@
|
||||
@case (ContentRenderType.PDF) {
|
||||
@if (!useNativePdfViewer) {
|
||||
<div class="preview-sticky pdf-viewer-container">
|
||||
<pngx-pdf-viewer
|
||||
<pdf-viewer
|
||||
[src]="{ url: previewUrl, password: password }"
|
||||
[original-size]="false"
|
||||
[show-borders]="true"
|
||||
@ -357,7 +357,7 @@
|
||||
[zoom]="previewZoomSetting"
|
||||
(error)="onError($event)"
|
||||
(after-load-complete)="pdfPreviewLoaded($event)">
|
||||
</pngx-pdf-viewer>
|
||||
</pdf-viewer>
|
||||
</div>
|
||||
} @else {
|
||||
<object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
|
||||
|
||||
@ -7,16 +7,20 @@
|
||||
.pdf-viewer-container {
|
||||
background-color: gray;
|
||||
|
||||
pngx-pdf-viewer {
|
||||
pdf-viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .pngx-pdf-viewer-container .page {
|
||||
::ng-deep .ng2-pdf-viewer-container .page {
|
||||
--page-margin: 10px auto;
|
||||
}
|
||||
|
||||
::ng-deep .ng2-pdf-viewer-container .page:last-child {
|
||||
--page-margin: 10px auto 20px;
|
||||
}
|
||||
|
||||
::ng-deep form .ng-select-taggable {
|
||||
max-width: calc(100% - 90px); // fudge factor for (2x) ng-select button width
|
||||
}
|
||||
|
||||
@ -76,11 +76,11 @@ import { ShareLinksDropdownComponent } from '../common/share-links-dropdown/shar
|
||||
import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
|
||||
import { CustomFieldDataType } from 'src/app/data/custom-field'
|
||||
import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
|
||||
import { PdfViewerComponent } from '../common/pdf-viewer/pdf-viewer.component'
|
||||
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
|
||||
import { environment } from 'src/environments/environment'
|
||||
import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
|
||||
import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
|
||||
import { PdfViewerModule } from 'ng2-pdf-viewer'
|
||||
|
||||
const doc: Document = {
|
||||
id: 3,
|
||||
@ -176,7 +176,6 @@ describe('DocumentDetailComponent', () => {
|
||||
SafeUrlPipe,
|
||||
ShareLinksDropdownComponent,
|
||||
CustomFieldsDropdownComponent,
|
||||
PdfViewerComponent,
|
||||
SplitConfirmDialogComponent,
|
||||
RotateConfirmDialogComponent,
|
||||
],
|
||||
@ -265,6 +264,7 @@ describe('DocumentDetailComponent', () => {
|
||||
ReactiveFormsModule,
|
||||
NgbModalModule,
|
||||
NgxBootstrapIconsModule.pick(allIcons),
|
||||
PdfViewerModule,
|
||||
],
|
||||
}).compileComponents()
|
||||
|
||||
@ -885,7 +885,7 @@ describe('DocumentDetailComponent', () => {
|
||||
jest.spyOn(settingsService, 'get').mockReturnValue(false)
|
||||
expect(component.useNativePdfViewer).toBeFalsy()
|
||||
fixture.detectChanges()
|
||||
expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
|
||||
expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
|
||||
})
|
||||
|
||||
it('should display native pdf viewer if enabled', () => {
|
||||
|
||||
@ -66,10 +66,10 @@ import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
|
||||
import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
|
||||
import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
|
||||
import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
|
||||
import { PDFDocumentProxy } from '../common/pdf-viewer/typings'
|
||||
import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
|
||||
import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
|
||||
import { HotKeyService } from 'src/app/services/hot-key.service'
|
||||
import { PDFDocumentProxy } from 'ng2-pdf-viewer'
|
||||
|
||||
enum DocumentDetailNavIDs {
|
||||
Details = 1,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user