From 019a2557532205a2f21e270b8186b9046dc78ac0 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Thu, 16 May 2024 11:12:19 -0700 Subject: [PATCH] Chore: revert pngx pdf viewer to third party package (#6741) --- src-ui/angular.json | 3 +- .../document-detail/document-detail.spec.ts | 2 +- src-ui/jest.config.js | 1 - src-ui/package-lock.json | 11 +- src-ui/package.json | 2 +- src-ui/src/app/app.module.ts | 4 +- .../split-confirm-dialog.component.html | 4 +- .../split-confirm-dialog.component.scss | 2 +- .../split-confirm-dialog.component.spec.ts | 5 +- .../split-confirm-dialog.component.ts | 2 +- .../pdf-viewer/pdf-viewer.component.html | 3 - .../pdf-viewer/pdf-viewer.component.scss | 1014 ----------------- .../common/pdf-viewer/pdf-viewer.component.ts | 600 ---------- .../components/common/pdf-viewer/typings.ts | 17 - .../pdf-viewer/utils/event-bus-utils.ts | 182 --- .../preview-popup.component.html | 4 +- .../preview-popup.component.spec.ts | 7 +- .../document-detail.component.html | 4 +- .../document-detail.component.scss | 8 +- .../document-detail.component.spec.ts | 6 +- .../document-detail.component.ts | 2 +- 21 files changed, 40 insertions(+), 1843 deletions(-) delete mode 100644 src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.html delete mode 100644 src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss delete mode 100644 src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts delete mode 100644 src-ui/src/app/components/common/pdf-viewer/typings.ts delete mode 100644 src-ui/src/app/components/common/pdf-viewer/utils/event-bus-utils.ts diff --git a/src-ui/angular.json b/src-ui/angular.json index 49e419879..4b1848953 100644 --- a/src-ui/angular.json +++ b/src-ui/angular.json @@ -76,8 +76,7 @@ ], "scripts": [], "allowedCommonJsDependencies": [ - "pdfjs-dist", - "pdfjs-dist/web/pdf_viewer", + "ng2-pdf-viewer", "filesize", "file-saver" ], diff --git a/src-ui/e2e/document-detail/document-detail.spec.ts b/src-ui/e2e/document-detail/document-detail.spec.ts index 0cd45a058..7f5b28c47 100644 --- a/src-ui/e2e/document-detail/document-detail.spec.ts +++ b/src-ui/e2e/document-detail/document-detail.spec.ts @@ -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 }) => { diff --git a/src-ui/jest.config.js b/src-ui/jest.config.js index b544a4767..78edc0822 100644 --- a/src-ui/jest.config.js +++ b/src-ui/jest.config.js @@ -7,7 +7,6 @@ module.exports = { 'abstract-name-filter-service', 'abstract-paperless-service', ], - coveragePathIgnorePatterns: ['/src/app/components/common/pdf-viewer/*'], transformIgnorePatterns: [`/node_modules/(?!.*\\.mjs$|lodash-es)`], moduleNameMapper: { '^src/(.*)': '/src/$1', diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json index 1f202938c..34549a35a 100644 --- a/src-ui/package-lock.json +++ b/src-ui/package-lock.json @@ -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", diff --git a/src-ui/package.json b/src-ui/package.json index af8187877..340180765 100644 --- a/src-ui/package.json +++ b/src-ui/package.json @@ -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", diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 24d63ed11..bb5a62249 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -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, diff --git a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html index a0f7795ff..d73e97817 100644 --- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html +++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html @@ -13,12 +13,12 @@
of {{totalPages}}
- - +
diff --git a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss index 0f9feacc1..e9d62c42b 100644 --- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss +++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss @@ -2,7 +2,7 @@ background-color: gray; height: 350px; - pngx-pdf-viewer { + pdf-viewer { width: 100%; height: 100%; } diff --git a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts index b88835895..27f458537 100644 --- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts @@ -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() diff --git a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts index 42b574b93..47261afa2 100644 --- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts +++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.ts @@ -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', diff --git a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.html b/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.html deleted file mode 100644 index cd2c85af5..000000000 --- a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
diff --git a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss b/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss deleted file mode 100644 index 408bbb0a0..000000000 --- a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss +++ /dev/null @@ -1,1014 +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.scss - * Created by vadimdez on 21/06/16. - */ -.pngx-pdf-viewer-container { - overflow-x: auto; - position: absolute; - height: 100%; - width: 100%; - -webkit-overflow-scrolling: touch; - } - - :host { - display: block; - position: relative; - } - - :host ::ng-deep { - /* Copyright 2014 Mozilla Foundation - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - --pdfViewer-padding-bottom: 0; - --page-margin: 1px auto -8px; - --page-border: none; - --spreadHorizontalWrapped-margin-LR: -3.5px; - --viewer-container-height: 0; - --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); - --xfa-unfocused-field-background: var( - --annotation-unfocused-field-background - ); - --page-border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAA1ElEQVQ4jbWUWw6EIAxFy2NFs/8NzR4UJhpqLsdi5mOmSSMUOfYWqv3S0gMr4XlYH/64gZa/gN3ANYA7KAXALt4ktoQ5MI9YxqaG8bWmsIysMuT6piSQCa4whZThCu8CM4zP9YJaKci9jicPq3NcBWYoPMGUlhG7ivtkB+gVyFY75wXghOvh8t5mto1Mdim6e+MBqH6XsY+YAwjpq3vGF7weTWQptLEDVCZvPTMl5JZZsdh47FHW6qFMyvLYqjcnmdFfY9Xk/KDOlzCusX2mi/ofM7MPkzBcSp4Q1/wAAAAASUVORK5CYII=') - 9 9 repeat; - --scale-factor: 1; - - --focus-outline: solid 2px blue; - --hover-outline: dashed 2px blue; - --freetext-line-height: 1.35; - --freetext-padding: 2px; - --editorInk-editing-cursor: pointer; - - @media screen and (forced-colors: active) { - --pdfViewer-padding-bottom: 9px; - --page-margin: 8px auto -1px; - --page-border: 1px solid CanvasText; - --page-border-image: none; - --spreadHorizontalWrapped-margin-LR: 3.5px; - } - - @media (forced-colors: active) { - --focus-outline: solid 3px ButtonText; - --hover-outline: dashed 3px ButtonText; - } - - .textLayer { - position: absolute; - text-align: initial; - left: 0; - top: 0; - right: 0; - bottom: 0; - overflow: hidden; - opacity: 0.2; - line-height: 1; - -webkit-text-size-adjust: none; - -moz-text-size-adjust: none; - text-size-adjust: none; - forced-color-adjust: none; - } - - .textLayer span, - .textLayer br { - color: transparent; - position: absolute; - white-space: pre; - cursor: text; - transform-origin: 0% 0%; - } - - /* Only necessary in Google Chrome, see issue 14205, and most unfortunately - * the problem doesn't show up in "text" reference tests. */ - .textLayer span.markedContent { - top: 0; - height: 0; - } - - .textLayer .highlight { - margin: -1px; - padding: 1px; - background-color: rgba(180, 0, 170, 1); - border-radius: 4px; - } - - .textLayer .highlight.appended { - position: initial; - } - - .textLayer .highlight.begin { - border-radius: 4px 0 0 4px; - } - - .textLayer .highlight.end { - border-radius: 0 4px 4px 0; - } - - .textLayer .highlight.middle { - border-radius: 0; - } - - .textLayer .highlight.selected { - background-color: rgba(0, 100, 0, 1); - } - - .textLayer ::-moz-selection { - background: rgba(0, 0, 255, 1); - } - - .textLayer ::selection { - background: rgba(0, 0, 255, 1); - } - - /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */ - .textLayer br::-moz-selection { - background: transparent; - } - - .textLayer br::selection { - background: transparent; - } - - .textLayer .endOfContent { - display: block; - position: absolute; - left: 0; - top: 100%; - right: 0; - bottom: 0; - z-index: -1; - cursor: default; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - } - - .textLayer .endOfContent.active { - top: 0; - } - - @media (forced-colors: active) { - .annotationLayer .textWidgetAnnotation input:required, - .annotationLayer .textWidgetAnnotation textarea:required, - .annotationLayer .choiceWidgetAnnotation select:required, - .annotationLayer .buttonWidgetAnnotation.checkBox input:required, - .annotationLayer .buttonWidgetAnnotation.radioButton input:required { - outline: 1.5px solid selectedItem; - } - } - - .annotationLayer { - position: absolute; - top: 0; - left: 0; - pointer-events: none; - transform-origin: 0 0; - } - - .annotationLayer section { - position: absolute; - text-align: initial; - pointer-events: auto; - box-sizing: border-box; - transform-origin: 0 0; - } - - .annotationLayer .linkAnnotation > a, - .annotationLayer .buttonWidgetAnnotation.pushButton > a { - position: absolute; - font-size: 1em; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .annotationLayer .buttonWidgetAnnotation.pushButton > canvas { - width: 100%; - height: 100%; - } - - .annotationLayer .linkAnnotation > a:hover, - .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover { - opacity: 0.2; - background: rgba(255, 255, 0, 1); - box-shadow: 0 2px 10px rgba(255, 255, 0, 1); - } - - .annotationLayer .textAnnotation img { - position: absolute; - cursor: pointer; - width: 100%; - height: 100%; - } - - .annotationLayer .textWidgetAnnotation input, - .annotationLayer .textWidgetAnnotation textarea, - .annotationLayer .choiceWidgetAnnotation select, - .annotationLayer .buttonWidgetAnnotation.checkBox input, - .annotationLayer .buttonWidgetAnnotation.radioButton input { - background-image: var(--annotation-unfocused-field-background); - border: 1px solid transparent; - box-sizing: border-box; - font: calc(9px * var(--scale-factor)) sans-serif; - height: 100%; - margin: 0; - vertical-align: top; - width: 100%; - } - - .annotationLayer .textWidgetAnnotation input:required, - .annotationLayer .textWidgetAnnotation textarea:required, - .annotationLayer .choiceWidgetAnnotation select:required, - .annotationLayer .buttonWidgetAnnotation.checkBox input:required, - .annotationLayer .buttonWidgetAnnotation.radioButton input:required { - outline: 1.5px solid red; - } - - .annotationLayer .choiceWidgetAnnotation select option { - padding: 0; - } - - .annotationLayer .buttonWidgetAnnotation.radioButton input { - border-radius: 50%; - } - - .annotationLayer .textWidgetAnnotation textarea { - resize: none; - } - - .annotationLayer .textWidgetAnnotation input[disabled], - .annotationLayer .textWidgetAnnotation textarea[disabled], - .annotationLayer .choiceWidgetAnnotation select[disabled], - .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled], - .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] { - background: none; - border: 1px solid transparent; - cursor: not-allowed; - } - - .annotationLayer .textWidgetAnnotation input:hover, - .annotationLayer .textWidgetAnnotation textarea:hover, - .annotationLayer .choiceWidgetAnnotation select:hover, - .annotationLayer .buttonWidgetAnnotation.checkBox input:hover, - .annotationLayer .buttonWidgetAnnotation.radioButton input:hover { - border: 1px solid rgba(0, 0, 0, 1); - } - - .annotationLayer .textWidgetAnnotation input:focus, - .annotationLayer .textWidgetAnnotation textarea:focus, - .annotationLayer .choiceWidgetAnnotation select:focus { - background: none; - border: 1px solid transparent; - } - - .annotationLayer .textWidgetAnnotation input :focus, - .annotationLayer .textWidgetAnnotation textarea :focus, - .annotationLayer .choiceWidgetAnnotation select :focus, - .annotationLayer .buttonWidgetAnnotation.checkBox :focus, - .annotationLayer .buttonWidgetAnnotation.radioButton :focus { - background-image: none; - background-color: transparent; - outline: auto; - } - - .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before, - .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after, - .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before { - background-color: CanvasText; - content: ''; - display: block; - position: absolute; - } - - .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before, - .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after { - height: 80%; - left: 45%; - width: 1px; - } - - .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before { - transform: rotate(45deg); - } - - .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after { - transform: rotate(-45deg); - } - - .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before { - border-radius: 50%; - height: 50%; - left: 30%; - top: 20%; - width: 50%; - } - - .annotationLayer .textWidgetAnnotation input.comb { - font-family: monospace; - padding-left: 2px; - padding-right: 0; - } - - .annotationLayer .textWidgetAnnotation input.comb:focus { - /* - * Letter spacing is placed on the right side of each character. Hence, the - * letter spacing of the last character may be placed outside the visible - * area, causing horizontal scrolling. We avoid this by extending the width - * when the element has focus and revert this when it loses focus. - */ - width: 103%; - } - - .annotationLayer .buttonWidgetAnnotation.checkBox input, - .annotationLayer .buttonWidgetAnnotation.radioButton input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - - .annotationLayer .popupTriggerArea { - height: 100%; - width: 100%; - } - - .annotationLayer .popupWrapper { - position: absolute; - font-size: calc(9px * var(--scale-factor)); - width: 100%; - min-width: calc(180px * var(--scale-factor)); - pointer-events: none; - } - - .annotationLayer .popup { - position: absolute; - max-width: calc(180px * var(--scale-factor)); - background-color: rgba(255, 255, 153, 1); - box-shadow: 0 calc(2px * var(--scale-factor)) - calc(5px * var(--scale-factor)) rgba(136, 136, 136, 1); - border-radius: calc(2px * var(--scale-factor)); - padding: calc(6px * var(--scale-factor)); - margin-left: calc(5px * var(--scale-factor)); - cursor: pointer; - font: message-box; - white-space: normal; - word-wrap: break-word; - pointer-events: auto; - } - - .annotationLayer .popup > * { - font-size: calc(9px * var(--scale-factor)); - } - - .annotationLayer .popup h1 { - display: inline-block; - } - - .annotationLayer .popupDate { - display: inline-block; - margin-left: calc(5px * var(--scale-factor)); - } - - .annotationLayer .popupContent { - border-top: 1px solid rgba(51, 51, 51, 1); - margin-top: calc(2px * var(--scale-factor)); - padding-top: calc(2px * var(--scale-factor)); - } - - .annotationLayer .richText > * { - white-space: pre-wrap; - font-size: calc(9px * var(--scale-factor)); - } - - .annotationLayer .highlightAnnotation, - .annotationLayer .underlineAnnotation, - .annotationLayer .squigglyAnnotation, - .annotationLayer .strikeoutAnnotation, - .annotationLayer .freeTextAnnotation, - .annotationLayer .lineAnnotation svg line, - .annotationLayer .squareAnnotation svg rect, - .annotationLayer .circleAnnotation svg ellipse, - .annotationLayer .polylineAnnotation svg polyline, - .annotationLayer .polygonAnnotation svg polygon, - .annotationLayer .caretAnnotation, - .annotationLayer .inkAnnotation svg polyline, - .annotationLayer .stampAnnotation, - .annotationLayer .fileAttachmentAnnotation { - cursor: pointer; - } - - .annotationLayer section svg { - position: absolute; - width: 100%; - height: 100%; - } - - .annotationLayer .annotationTextContent { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - color: transparent; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - pointer-events: none; - } - - .annotationLayer .annotationTextContent span { - width: 100%; - display: inline-block; - } - - @media (forced-colors: active) { - .xfaLayer *:required { - outline: 1.5px solid selectedItem; - } - } - - .xfaLayer .highlight { - margin: -1px; - padding: 1px; - background-color: rgba(239, 203, 237, 1); - border-radius: 4px; - } - - .xfaLayer .highlight.appended { - position: initial; - } - - .xfaLayer .highlight.begin { - border-radius: 4px 0 0 4px; - } - - .xfaLayer .highlight.end { - border-radius: 0 4px 4px 0; - } - - .xfaLayer .highlight.middle { - border-radius: 0; - } - - .xfaLayer .highlight.selected { - background-color: rgba(203, 223, 203, 1); - } - - .xfaLayer ::-moz-selection { - background: rgba(0, 0, 255, 1); - } - - .xfaLayer ::selection { - background: rgba(0, 0, 255, 1); - } - - .xfaPage { - overflow: hidden; - position: relative; - } - - .xfaContentarea { - position: absolute; - } - - .xfaPrintOnly { - display: none; - } - - .xfaLayer { - position: absolute; - text-align: initial; - top: 0; - left: 0; - transform-origin: 0 0; - line-height: 1.2; - } - - .xfaLayer * { - color: inherit; - font: inherit; - font-style: inherit; - font-weight: inherit; - font-kerning: inherit; - letter-spacing: -0.01px; - text-align: inherit; - text-decoration: inherit; - box-sizing: border-box; - background-color: transparent; - padding: 0; - margin: 0; - pointer-events: auto; - line-height: inherit; - } - - .xfaLayer *:required { - outline: 1.5px solid red; - } - - .xfaLayer div { - pointer-events: none; - } - - .xfaLayer svg { - pointer-events: none; - } - - .xfaLayer svg * { - pointer-events: none; - } - - .xfaLayer a { - color: blue; - } - - .xfaRich li { - margin-left: 3em; - } - - .xfaFont { - color: black; - font-weight: normal; - font-kerning: none; - font-size: 10px; - font-style: normal; - letter-spacing: 0; - text-decoration: none; - vertical-align: 0; - } - - .xfaCaption { - overflow: hidden; - flex: 0 0 auto; - } - - .xfaCaptionForCheckButton { - overflow: hidden; - flex: 1 1 auto; - } - - .xfaLabel { - height: 100%; - width: 100%; - } - - .xfaLeft { - display: flex; - flex-direction: row; - align-items: center; - } - - .xfaRight { - display: flex; - flex-direction: row-reverse; - align-items: center; - } - - .xfaLeft > .xfaCaption, - .xfaLeft > .xfaCaptionForCheckButton, - .xfaRight > .xfaCaption, - .xfaRight > .xfaCaptionForCheckButton { - max-height: 100%; - } - - .xfaTop { - display: flex; - flex-direction: column; - align-items: flex-start; - } - - .xfaBottom { - display: flex; - flex-direction: column-reverse; - align-items: flex-start; - } - - .xfaTop > .xfaCaption, - .xfaTop > .xfaCaptionForCheckButton, - .xfaBottom > .xfaCaption, - .xfaBottom > .xfaCaptionForCheckButton { - width: 100%; - } - - .xfaBorder { - background-color: transparent; - position: absolute; - pointer-events: none; - } - - .xfaWrapped { - width: 100%; - height: 100%; - } - - .xfaTextfield:focus, - .xfaSelect:focus { - background-image: none; - background-color: transparent; - outline: auto; - outline-offset: -1px; - } - - .xfaCheckbox:focus, - .xfaRadio:focus { - outline: auto; - } - - .xfaTextfield, - .xfaSelect { - height: 100%; - width: 100%; - flex: 1 1 auto; - border: none; - resize: none; - background-image: var(--xfa-unfocused-field-background); - } - - .xfaTop > .xfaTextfield, - .xfaTop > .xfaSelect, - .xfaBottom > .xfaTextfield, - .xfaBottom > .xfaSelect { - flex: 0 1 auto; - } - - .xfaButton { - cursor: pointer; - width: 100%; - height: 100%; - border: none; - text-align: center; - } - - .xfaLink { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - } - - .xfaCheckbox, - .xfaRadio { - width: 100%; - height: 100%; - flex: 0 0 auto; - border: none; - } - - .xfaRich { - white-space: pre-wrap; - width: 100%; - height: 100%; - } - - .xfaImage { - -o-object-position: left top; - object-position: left top; - -o-object-fit: contain; - object-fit: contain; - width: 100%; - height: 100%; - } - - .xfaLrTb, - .xfaRlTb, - .xfaTb { - display: flex; - flex-direction: column; - align-items: stretch; - } - - .xfaLr { - display: flex; - flex-direction: row; - align-items: stretch; - } - - .xfaRl { - display: flex; - flex-direction: row-reverse; - align-items: stretch; - } - - .xfaTb > div { - justify-content: left; - } - - .xfaPosition { - position: relative; - } - - .xfaArea { - position: relative; - } - - .xfaValignMiddle { - display: flex; - align-items: center; - } - - .xfaTable { - display: flex; - flex-direction: column; - align-items: stretch; - } - - .xfaTable .xfaRow { - display: flex; - flex-direction: row; - align-items: stretch; - } - - .xfaTable .xfaRlRow { - display: flex; - flex-direction: row-reverse; - align-items: stretch; - flex: 1; - } - - .xfaTable .xfaRlRow > div { - flex: 1; - } - - .xfaNonInteractive input, - .xfaNonInteractive textarea, - .xfaDisabled input, - .xfaDisabled textarea, - .xfaReadOnly input, - .xfaReadOnly textarea { - background: initial; - } - - @media print { - .xfaTextfield, - .xfaSelect { - background: transparent; - } - - .xfaSelect { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - text-indent: 1px; - text-overflow: ''; - } - } - - [data-editor-rotation='90'] { - transform: rotate(90deg); - } - [data-editor-rotation='180'] { - transform: rotate(180deg); - } - [data-editor-rotation='270'] { - transform: rotate(270deg); - } - - .annotationEditorLayer { - background: transparent; - position: absolute; - top: 0; - left: 0; - font-size: calc(100px * var(--scale-factor)); - transform-origin: 0 0; - } - - .annotationEditorLayer .selectedEditor { - outline: var(--focus-outline); - resize: none; - } - - .annotationEditorLayer .freeTextEditor { - position: absolute; - background: transparent; - border-radius: 3px; - padding: calc(var(--freetext-padding) * var(--scale-factor)); - resize: none; - width: auto; - height: auto; - z-index: 1; - transform-origin: 0 0; - touch-action: none; - } - - .annotationEditorLayer .freeTextEditor .internal { - background: transparent; - border: none; - top: 0; - left: 0; - overflow: visible; - white-space: nowrap; - resize: none; - font: 10px sans-serif; - line-height: var(--freetext-line-height); - } - - .annotationEditorLayer .freeTextEditor .overlay { - position: absolute; - display: none; - background: transparent; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .annotationEditorLayer .freeTextEditor .overlay.enabled { - display: block; - } - - .annotationEditorLayer .freeTextEditor .internal:empty::before { - content: attr(default-content); - color: gray; - } - - .annotationEditorLayer .freeTextEditor .internal:focus { - outline: none; - } - - .annotationEditorLayer .inkEditor.disabled { - resize: none; - } - - .annotationEditorLayer .inkEditor.disabled.selectedEditor { - resize: horizontal; - } - - .annotationEditorLayer .freeTextEditor:hover:not(.selectedEditor), - .annotationEditorLayer .inkEditor:hover:not(.selectedEditor) { - outline: var(--hover-outline); - } - - .annotationEditorLayer .inkEditor { - position: absolute; - background: transparent; - border-radius: 3px; - overflow: auto; - width: 100%; - height: 100%; - z-index: 1; - transform-origin: 0 0; - cursor: auto; - } - - .annotationEditorLayer .inkEditor.editing { - resize: none; - cursor: var(--editorInk-editing-cursor), pointer; - } - - .annotationEditorLayer .inkEditor .inkEditorCanvas { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - touch-action: none; - } - - [data-main-rotation='90'] { - transform: rotate(90deg) translateY(-100%); - } - [data-main-rotation='180'] { - transform: rotate(180deg) translate(-100%, -100%); - } - [data-main-rotation='270'] { - transform: rotate(270deg) translateX(-100%); - } - - .pdfViewer { - padding-bottom: var(--pdfViewer-padding-bottom); - } - - .pdfViewer .canvasWrapper { - overflow: hidden; - } - - .pdfViewer .page { - direction: ltr; - width: 816px; - height: 1056px; - margin: var(--page-margin); - position: relative; - overflow: visible; - border: var(--page-border); - -o-border-image: var(--page-border-image); - border-image: var(--page-border-image); - background-clip: content-box; - background-color: rgba(255, 255, 255, 1); - } - - .pdfViewer .dummyPage { - position: relative; - width: 0; - height: var(--viewer-container-height); - } - - .pdfViewer.removePageBorders .page { - margin: 0 auto 10px; - border: none; - } - - .pdfViewer.singlePageView { - display: inline-block; - } - - .pdfViewer.singlePageView .page { - margin: 0; - border: none; - } - - .pdfViewer.scrollHorizontal, - .pdfViewer.scrollWrapped, - .spread { - margin-left: 3.5px; - margin-right: 3.5px; - text-align: center; - } - - .pdfViewer.scrollHorizontal, - .spread { - white-space: nowrap; - } - - .pdfViewer.removePageBorders, - .pdfViewer.scrollHorizontal .spread, - .pdfViewer.scrollWrapped .spread { - margin-left: 0; - margin-right: 0; - } - - .spread .page, - .spread .dummyPage, - .pdfViewer.scrollHorizontal .page, - .pdfViewer.scrollWrapped .page, - .pdfViewer.scrollHorizontal .spread, - .pdfViewer.scrollWrapped .spread { - display: inline-block; - vertical-align: middle; - } - - .spread .page, - .pdfViewer.scrollHorizontal .page, - .pdfViewer.scrollWrapped .page { - margin-left: var(--spreadHorizontalWrapped-margin-LR); - margin-right: var(--spreadHorizontalWrapped-margin-LR); - } - - .pdfViewer.removePageBorders .spread .page, - .pdfViewer.removePageBorders.scrollHorizontal .page, - .pdfViewer.removePageBorders.scrollWrapped .page { - margin-left: 5px; - margin-right: 5px; - } - - .pdfViewer .page canvas { - margin: 0; - display: block; - } - - .pdfViewer .page canvas[hidden] { - display: none; - } - - .pdfViewer .page .loadingIcon { - position: absolute; - display: block; - left: 0; - top: 0; - right: 0; - bottom: 0; - background: url('data:image/gif;base64,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') - center no-repeat; - } - - .pdfViewer .page .loadingIcon.notVisible { - background: none; - } - - .pdfViewer.enablePermissions .textLayer span { - -webkit-user-select: none !important; - -moz-user-select: none !important; - user-select: none !important; - cursor: not-allowed; - } - - .pdfPresentationMode .pdfViewer { - padding-bottom: 0; - } - - .pdfPresentationMode .spread { - margin: 0; - } - - .pdfPresentationMode .pdfViewer .page { - margin: 0 auto; - border: 2px solid transparent; - } - } diff --git a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts b/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts deleted file mode 100644 index 0c84521c6..000000000 --- a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts +++ /dev/null @@ -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 - - 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() - - @Output('after-load-complete') afterLoadComplete = - new EventEmitter() - @Output('page-rendered') pageRendered = new EventEmitter() - @Output('pages-initialized') pageInitialized = new EventEmitter() - @Output('text-layer-rendered') textLayerRendered = - new EventEmitter() - @Output('error') onError = new EventEmitter() - @Output('on-progress') onProgress = new EventEmitter() - @Output() pageChange: EventEmitter = new EventEmitter(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, - 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 - ) - .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(this.eventBus, 'pagerendered') - .pipe(takeUntil(this.destroy$)) - .subscribe((event) => { - this.pageRendered.emit(event) - }) - - fromEvent(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(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) - .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() - }) - }) - } -} diff --git a/src-ui/src/app/components/common/pdf-viewer/typings.ts b/src-ui/src/app/components/common/pdf-viewer/typings.ts deleted file mode 100644 index 8dad45f30..000000000 --- a/src-ui/src/app/components/common/pdf-viewer/typings.ts +++ /dev/null @@ -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' diff --git a/src-ui/src/app/components/common/pdf-viewer/utils/event-bus-utils.ts b/src-ui/src/app/components/common/pdf-viewer/utils/event-bus-utils.ts deleted file mode 100644 index 8ae501169..000000000 --- a/src-ui/src/app/components/common/pdf-viewer/utils/event-bus-utils.ts +++ /dev/null @@ -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) { - const globalEventBus: EventBus = new pdfJsViewer.EventBus() - attachDOMEventsToEventBus(globalEventBus, destroy$) - return globalEventBus -} - -function attachDOMEventsToEventBus( - eventBus: EventBus, - destroy$: Subject -): 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) - }) -} diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html index 124d13af8..af745cba2 100644 --- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html +++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html @@ -13,13 +13,13 @@
} @if (!requiresPassword) { - - + } } } diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts index 42a97c743..6f638bb89 100644 --- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts +++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts @@ -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', () => { diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html index 6e2d47e2b..b226e97a2 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.html +++ b/src-ui/src/app/components/document-detail/document-detail.component.html @@ -347,7 +347,7 @@ @case (ContentRenderType.PDF) { @if (!useNativePdfViewer) {
- - +
} @else { diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss index 1f6729784..2e9e63e6e 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.scss +++ b/src-ui/src/app/components/document-detail/document-detail.component.scss @@ -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 } diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts index a0c02a688..d27c13ef1 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts @@ -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', () => { diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts index c530921c7..820d7fbd5 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.ts @@ -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,