@vaadin-component-factory/vcf-pdf-viewer 4.0.2 → 4.1.0

package/src/vcf-pdf-viewer.js

@@ -15,13 +15,13 @@ 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 { 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";
+import { GenericL10n } from "../pdfjs/dist/genericl10n";
 
-pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+pdfjsLib.GlobalWorkerOptions.workerSrc = "../pdfjs/dist/worker.js";
 
 /**
  * `<vcf-pdf-viewer>` is a Web Component for rendering PDF files without
@@ -47,6 +47,7 @@ export class PdfViewerElement extends ResizeMixin(
         flex-direction: column;
         width: 100%;
         height: 500px;
+        --pdf-viewer-link-hover-color: rgb(255 255 0);
       }
 
       :host([hidden]) {
@@ -120,7 +121,6 @@ export class PdfViewerElement extends ResizeMixin(
 
       [part~="thumbnail-view"] {
         position: absolute;
-        width: calc(100% - 60px);
         top: 0;
         bottom: 0;
         padding: 10px 30px 0;
@@ -136,6 +136,14 @@ export class PdfViewerElement extends ResizeMixin(
         margin: 0 auto;
       }
 
+      .canvasWrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
       .textLayer {
         position: absolute;
         left: 0;
@@ -214,7 +222,8 @@ export class PdfViewerElement extends ResizeMixin(
       }
 
       .thumbnail {
-        margin: 0 10px 5px;
+        margin: 5px;
+        padding: 7px 7px 0px 7px;
       }
 
       .thumbnailImage {
@@ -228,18 +237,140 @@ export class PdfViewerElement extends ResizeMixin(
         background-clip: content-box;
       }
 
-      .thumbnailSelectionRing {
-        border-radius: 2px;
-        padding: 7px;
-      }
-
-      .thumbnail.selected > .thumbnailSelectionRing {
+      .thumbnail.selected {
         background-color: rgba(0, 0, 0, 0.15);
       }
 
       [part~="toolbar"].ready ::slotted(.toolbar-zoom.hide-zoom) {
         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;
+      }
     `;
   }
 
@@ -356,7 +487,7 @@ export class PdfViewerElement extends ResizeMixin(
   }
 
   static get version() {
-    return "4.0.2";
+    return "4.1.0";
   }
 
   static get properties() {
@@ -695,6 +826,10 @@ export class PdfViewerElement extends ResizeMixin(
   }
 
   firstUpdated() {
+    // 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._toolbar = this.shadowRoot.querySelector("#toolbar");
     this._viewerContainer = this.shadowRoot.querySelector("#viewerContainer");
     this._outerContainer = this.shadowRoot.querySelector("#outerContainer");
@@ -723,7 +858,7 @@ export class PdfViewerElement extends ResizeMixin(
     });
 
     // options
-    const eventBus = new pdfUtils.EventBus();
+    const eventBus = new EventBus();
     
     // Defer initialization of reactive controller properties to avoid immediate update request
     // that triggers "update scheduled after update" warning.
@@ -732,7 +867,7 @@ export class PdfViewerElement extends ResizeMixin(
         eventBus,
       });
       var pdfRenderingQueue = new pdfjsRenderingQueue.PDFRenderingQueue();
-      var l10n = NullL10n;
+      var l10n = new GenericL10n(navigator.language || 'en-US');
 
       // pdfViewer
       this.__viewer = new pdfjsViewer.PDFViewer({
@@ -743,7 +878,9 @@ export class PdfViewerElement extends ResizeMixin(
         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);
@@ -1002,7 +1139,7 @@ export class PdfViewerElement extends ResizeMixin(
     for (let i = 0; i < pagesCount; i++) {
       const pageView = this.__viewer.getPageView(i);
       if (
-        pageView.renderingState === pdfjsRenderingQueue.RenderingStates.FINISHED
+        pageView.renderingState === pdfUtils.RenderingStates.FINISHED
       ) {
         const thumbnailView = this.__thumbnailViewer.getThumbnail(i);
         thumbnailView.setImage(pageView);