Chore: revert pngx pdf viewer to third party package (#6741)

This commit is contained in:
shamoon 2024-05-16 11:12:19 -07:00 committed by GitHub
parent 50a6181e48
commit 019a255753
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 40 additions and 1843 deletions

View File

@ -76,8 +76,7 @@
],
"scripts": [],
"allowedCommonJsDependencies": [
"pdfjs-dist",
"pdfjs-dist/web/pdf_viewer",
"ng2-pdf-viewer",
"filesize",
"file-saver"
],

View File

@ -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 }) => {

View File

@ -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',

View File

@ -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",

View File

@ -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",

View File

@ -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,

View File

@ -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">

View File

@ -2,7 +2,7 @@
background-color: gray;
height: 350px;
pngx-pdf-viewer {
pdf-viewer {
width: 100%;
height: 100%;
}

View File

@ -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()

View File

@ -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',

View File

@ -1,3 +0,0 @@
<div #pdfViewerContainer class="pngx-pdf-viewer-container">
<div class="pdfViewer"></div>
</div>

View File

@ -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()
})
})
}
}

View File

@ -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'

View File

@ -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)
})
}

View File

@ -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>
}
}
}

View File

@ -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', () => {

View File

@ -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>

View File

@ -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
}

View File

@ -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', () => {

View File

@ -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,