@vaadin-component-factory/vcf-pdf-viewer 3.0.2 → 3.2.0

package/src/vcf-pdf-viewer.js

@@ -12,13 +12,14 @@ import '@vaadin/tooltip';
 
 import * as pdfjsLib from '../pdfjs/dist/pdf';
 import * as pdfjsViewer from '../pdfjs/dist/pdf_viewer';
-import * as pdfUtils from '../pdfjs/dist/ui_utils'
+import * as pdfUtils from '../pdfjs/dist/ui_utils';
+import { EventBus } from "../pdfjs/dist/event_utils";
 import * as pdfjsLinkService from '../pdfjs/dist/pdf_link_service';
 import * as pdfjsThumbnailViewer from '../pdfjs/dist/pdf_thumbnail_viewer';
 import * as pdfjsRenderingQueue from '../pdfjs/dist/pdf_rendering_queue';
-import { NullL10n } from '../pdfjs/dist/l10n_utils';
-import * as pdfjsWorker from '../pdfjs/dist/worker';
-pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+import { GenericL10n } from "../pdfjs/dist/genericl10n";
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = "../pdfjs/dist/worker.js";
 
 /**
  * `<vcf-pdf-viewer>` is a Web Component for rendering PDF files without
@@ -45,7 +46,8 @@ class PdfViewerElement extends
                 display: flex;
                 flex-direction: column;
                 width: 100%;
-                height: 500px; 
+                height: 500px;
+                --pdf-viewer-link-hover-color: rgb(255 255 0);
             }
 
             :host([hidden]) {
@@ -119,7 +121,6 @@ class PdfViewerElement extends
 
             [part~="thumbnail-view"] {
                 position: absolute;
-                width: calc(100% - 60px);
                 top: 0;
                 bottom: 0;
                 padding: 10px 30px 0;
@@ -135,6 +136,14 @@ class PdfViewerElement extends
                 margin: 0 auto;
             }
 
+            .canvasWrapper {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+
             .textLayer {
                 position: absolute;
                 left: 0;
@@ -213,7 +222,8 @@ class PdfViewerElement extends
             }
 
             .thumbnail {
-                margin: 0 10px 5px;
+                margin: 5px;
+                padding: 7px 7px 3px 7px;
             }
 
             .thumbnailImage {
@@ -224,13 +234,8 @@ class PdfViewerElement extends
                 background-color: rgba(255, 255, 255, 1);
                 background-clip: content-box;
             }
-
-            .thumbnailSelectionRing {
-                border-radius: 2px;
-                padding: 7px;
-            }
-
-            .thumbnail.selected > .thumbnailSelectionRing {
+          
+            .thumbnail.selected {
                 background-color: rgba(0, 0, 0, 0.15);
             }
 
@@ -251,6 +256,133 @@ class PdfViewerElement extends
                 display: none;
             }
 
+            /* Annotation layer */
+
+            .annotationLayer {
+                --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+                --input-focus-border-color: Highlight;
+                --input-focus-outline: 1px solid Canvas;
+                --input-unfocused-border-color: transparent;
+                --input-disabled-border-color: transparent;
+                --input-hover-border-color: black;
+                --link-outline: none;
+                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 :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
+                position: absolute;
+                font-size: 1em;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover {
+                opacity: 0.2;
+                background-color: var(--pdf-viewer-link-hover-color);
+                box-shadow: 0 2px 10px var(--pdf-viewer-link-hover-color);
+            }
+
+            .annotationLayer .linkAnnotation.hasBorder:hover {
+                background-color: color-mix(in srgb, var(--pdf-viewer-link-hover-color) 20%, transparent);
+            }
+
+            .annotationLayer .hasBorder {
+                background-size: 100% 100%;
+            }
+
+            .annotationLayer .textWidgetAnnotation :is(input, textarea),
+            .annotationLayer .choiceWidgetAnnotation select,
+            .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+                background-image: var(--annotation-unfocused-field-background);
+                border: 2px solid var(--input-unfocused-border-color);
+                box-sizing: border-box;
+                font: calc(9px * var(--scale-factor)) sans-serif;
+                height: 100%;
+                margin: 0;
+                vertical-align: top;
+                width: 100%;
+            }
+
+            .annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
+            .annotationLayer .choiceWidgetAnnotation select:hover,
+            .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
+                border: 2px solid var(--input-hover-border-color);
+            }
+
+            .annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
+            .annotationLayer .choiceWidgetAnnotation select:focus {
+                background: none;
+                border: 2px solid var(--input-focus-border-color);
+                border-radius: 2px;
+                outline: var(--input-focus-outline);
+            }
+
+            .annotationLayer .buttonWidgetAnnotation.radioButton input {
+                border-radius: 50%;
+            }
+
+            .annotationLayer .textWidgetAnnotation textarea {
+                resize: none;
+            }
+
+            .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+                appearance: none;
+            }
+
+            .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: 25%;
+                top: 25%;
+                width: 50%;
+            }
+
+            .annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
+            .annotationLayer .choiceWidgetAnnotation select[disabled],
+            .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
+                background: none;
+                border: 2px solid var(--input-disabled-border-color);
+                cursor: not-allowed;
+            }
+
         </style>
 
     <div id="outerContainer" part="outer-container" >
@@ -287,7 +419,7 @@ class PdfViewerElement extends
     }
 
     static get version() {
-        return '3.0.2';
+        return '3.2.0';
     }
 
     static get properties() {
@@ -602,6 +734,10 @@ class PdfViewerElement extends
     ready() {
         super.ready();
 
+        // Required by PDF.js annotation editor: --freetext-line-height must match
+        // the LINE_FACTOR constant (1.35) defined in src/shared/util.js
+        document.documentElement.style.setProperty('--freetext-line-height', '1.35');
+
         this._addToolbarButtons();
 
         this.$.viewerContainer.addEventListener('focus', e => this.__setFocused(true), true);
@@ -616,12 +752,12 @@ class PdfViewerElement extends
         });
 
         // options
-        const eventBus = new pdfUtils.EventBus();
+        const eventBus = new EventBus();
         this.__linkService = new pdfjsLinkService.PDFLinkService({
             eventBus,
         });
         var pdfRenderingQueue = new pdfjsRenderingQueue.PDFRenderingQueue();
-        var l10n = NullL10n;
+        var l10n = new GenericL10n(navigator.language || 'en-US');
 
         // pdfViewer
         this.__viewer = new pdfjsViewer.PDFViewer({
@@ -632,7 +768,9 @@ class PdfViewerElement extends
             linkService: this.__linkService,
             renderingQueue: pdfRenderingQueue,
             l10n: l10n,
-            renderInteractiveForms: this.renderInteractiveForms
+            annotationMode: this.renderInteractiveForms
+                ? pdfjsLib.AnnotationMode.ENABLE_FORMS
+                : pdfjsLib.AnnotationMode.ENABLE,
         });
 
         this.__linkService.setViewer(this.__viewer);
@@ -888,7 +1026,7 @@ class PdfViewerElement extends
         const pagesCount = this.__totalPages;
         for (let i = 0; i < pagesCount; i++) {
             const pageView = this.__viewer.getPageView(i);
-            if (pageView.renderingState === pdfjsRenderingQueue.RenderingStates.FINISHED) {
+            if (pageView.renderingState === pdfUtils.RenderingStates.FINISHED) {
                 const thumbnailView = this.__thumbnailViewer.getThumbnail(i);
                 thumbnailView.setImage(pageView);
             } else {
@@ -914,6 +1052,24 @@ class PdfViewerElement extends
             this.__thumbnailViewer.scrollThumbnailIntoView(this.currentPage);
         }
     }
+
+    /**
+     * Rotates document clockwise.
+     */
+    rotateCw() {
+        let delta = 90;
+        this.__viewer.pagesRotation += delta;
+        this.__viewer.forceRendering();
+    }
+
+    /**
+     * Rotates document counterclockwise.
+     */
+    rotateCcw() {
+        let delta = -90;
+        this.__viewer.pagesRotation += delta;
+        this.__viewer.forceRendering();
+    }
 }
 
 customElements.define(PdfViewerElement.is, PdfViewerElement);