From 46c54b7083b4167d63848b74250f9e46f1d16207 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Wed, 29 Jan 2020 07:47:57 +0000 Subject: [PATCH] fix destroy worker and internalize css pdfjs (#5415) --- .stylelintignore | 1 + .../viewer/components/pdfViewer.component.ts | 16 +- .../components/pdfViewerHost.component.scss | 384 +++++++++++++++++- 3 files changed, 392 insertions(+), 9 deletions(-) diff --git a/.stylelintignore b/.stylelintignore index 0f5d45806d..795f3a3a3d 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1,2 @@ _theming.scss +pdfViewerHost.component.scss diff --git a/lib/core/viewer/components/pdfViewer.component.ts b/lib/core/viewer/components/pdfViewer.component.ts index b6a323ea7f..815ef9db60 100644 --- a/lib/core/viewer/components/pdfViewer.component.ts +++ b/lib/core/viewer/components/pdfViewer.component.ts @@ -77,7 +77,6 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { @Output() close = new EventEmitter(); - pdfDocument: PDFDocumentProxy; page: number; displayPage: number; totalPages: number; @@ -91,6 +90,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { MIN_SCALE: number = 0.25; MAX_SCALE: number = 10.0; + loadingTask: any; isPanelDisabled = true; showThumbnails: boolean = false; pdfThumbnailsContext: { viewer: any } = { viewer: null }; @@ -164,18 +164,18 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { executePdf(pdfOptions: PDFSource) { pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js'; - const loadingTask = pdfjsLib.getDocument(pdfOptions); + this.loadingTask = pdfjsLib.getDocument(pdfOptions); - loadingTask.onPassword = (callback, reason) => { + this.loadingTask.onPassword = (callback, reason) => { this.onPdfPassword(callback, reason); }; - loadingTask.onProgress = (progressData) => { + this.loadingTask.onProgress = (progressData) => { const level = progressData.loaded / progressData.total; this.loadingPercent = Math.round(level * 100); }; - loadingTask.promise.then((pdfDocument: PDFDocumentProxy) => { + this.loadingTask.promise.then((pdfDocument: PDFDocumentProxy) => { this.totalPages = pdfDocument.numPages; this.page = 1; this.displayPage = 1; @@ -226,13 +226,13 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { this.pdfViewer.eventBus.off('textlayerrendered'); } - if (this.pdfDocument) { + if (this.loadingTask) { try { - this.pdfDocument.destroy(); + this.loadingTask.destroy(); } catch { } - this.pdfDocument = null; + this.loadingTask = null; } } diff --git a/lib/core/viewer/components/pdfViewerHost.component.scss b/lib/core/viewer/components/pdfViewerHost.component.scss index 05eb4ee612..da98fd456c 100644 --- a/lib/core/viewer/components/pdfViewerHost.component.scss +++ b/lib/core/viewer/components/pdfViewerHost.component.scss @@ -1,5 +1,387 @@ .adf-pdf-viewer { - @import url('~pdfjs-dist/web/pdf_viewer.css'); + + .textLayer { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + opacity: 0.2; + line-height: 1; + } + + .textLayer > span { + color: transparent; + position: absolute; + white-space: pre; + cursor: text; + transform-origin: 0% 0%; + } + + .textLayer .highlight { + margin: -1px; + padding: 1px; + + background-color: rgb(180, 0, 170); + border-radius: 4px; + } + + .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: rgb(0, 100, 0); + } + + .textLayer ::-moz-selection { background: rgb(0, 0, 255); } + + .textLayer ::selection { background: rgb(0, 0, 255); } + + .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; + -ms-user-select: none; + user-select: none; + } + + .textLayer .endOfContent.active { + top: 0; + } + + + .annotationLayer section { + position: absolute; + } + + .annotationLayer .linkAnnotation > a, + .annotationLayer .buttonWidgetAnnotation.pushButton > a { + position: absolute; + font-size: 1em; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + .annotationLayer .linkAnnotation > a:hover, + .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover { + opacity: 0.2; + background: #ff0; + box-shadow: 0 2px 10px #ff0; + } + + .annotationLayer .textAnnotation img { + position: absolute; + cursor: pointer; + } + + .annotationLayer .textWidgetAnnotation input, + .annotationLayer .textWidgetAnnotation textarea, + .annotationLayer .choiceWidgetAnnotation select, + .annotationLayer .buttonWidgetAnnotation.checkBox input, + .annotationLayer .buttonWidgetAnnotation.radioButton input { + background-color: rgba(0, 54, 255, 0.13); + border: 1px solid transparent; + box-sizing: border-box; + font-size: 9px; + height: 100%; + margin: 0; + padding: 0 3px; + vertical-align: top; + width: 100%; + } + + .annotationLayer .choiceWidgetAnnotation select option { + padding: 0; + } + + .annotationLayer .buttonWidgetAnnotation.radioButton input { + border-radius: 50%; + } + + .annotationLayer .textWidgetAnnotation textarea { + font: message-box; + font-size: 9px; + 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 #000; + } + + .annotationLayer .textWidgetAnnotation input:focus, + .annotationLayer .textWidgetAnnotation textarea:focus, + .annotationLayer .choiceWidgetAnnotation select:focus { + background: none; + border: 1px solid transparent; + } + + .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, + .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after, + .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { + background-color: #000; + 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: 115%; + } + + .annotationLayer .buttonWidgetAnnotation.checkBox input, + .annotationLayer .buttonWidgetAnnotation.radioButton input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + } + + .annotationLayer .popupWrapper { + position: absolute; + width: 20em; + } + + .annotationLayer .popup { + position: absolute; + z-index: 200; + max-width: 20em; + background-color: #ffff99; + box-shadow: 0 2px 5px #888; + border-radius: 2px; + padding: 6px; + margin-left: 5px; + cursor: pointer; + font: message-box; + font-size: 9px; + word-wrap: break-word; + } + + .annotationLayer .popup > * { + font-size: 9px; + } + + .annotationLayer .popup h1 { + display: inline-block; + } + + .annotationLayer .popup span { + display: inline-block; + margin-left: 5px; + } + + .annotationLayer .popup p { + border-top: 1px solid #333; + margin-top: 2px; + padding-top: 2px; + } + + .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; + } + + .pdfViewer .canvasWrapper { + overflow: hidden; + } + + .pdfViewer .page { + direction: ltr; + width: 816px; + height: 1056px; + margin: 1px auto -8px; + position: relative; + overflow: visible; + border: 9px solid transparent; + background-clip: content-box; + background-color: white; + } + + .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, + .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: -3.5px; + margin-right: -3.5px; + } + + .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; + } + + .pdfPresentationMode .pdfViewer { + margin-left: 0; + margin-right: 0; + } + + .pdfPresentationMode .pdfViewer .page, + .pdfPresentationMode .pdfViewer .spread { + display: block; + } + + .pdfPresentationMode .pdfViewer .page, + .pdfPresentationMode .pdfViewer.removePageBorders .page { + margin-left: auto; + margin-right: auto; + } + + .pdfPresentationMode:-ms-fullscreen .pdfViewer .page { + margin-bottom: 100% !important; + } + + .pdfPresentationMode:-webkit-full-screen .pdfViewer .page { + margin-bottom: 100%; + border: 0; + } + + .pdfPresentationMode:-moz-full-screen .pdfViewer .page { + margin-bottom: 100%; + border: 0; + } + + .pdfPresentationMode:fullscreen .pdfViewer .page { + margin-bottom: 100%; + border: 0; + } .textLayer { position: absolute;