@hmcts/media-viewer 4.1.1 → 4.1.3

package/fesm2022/hmcts-media-viewer.mjs

@@ -2511,6 +2511,35 @@ const defaultUnsupportedOptions = {
     showPrint: true
 };
 
+/**
+ * Helper Class
+ * Used for dynamic templates manipulation
+ * */
+class HtmlTemplatesHelper {
+    static setDescribedBy(errorMessage, config) {
+        if (!errorMessage) {
+            return config.hint ? `${config.id}-hint` : null;
+        }
+        else if (errorMessage && errorMessage.isInvalid) {
+            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
+        }
+        else {
+            return config.hint ? `${config.id}-hint` : null;
+        }
+    }
+    static getAdjustedBoundingRect(element, log = true) {
+        const viewportX = window.visualViewport.offsetLeft;
+        const viewportY = window.visualViewport.offsetTop;
+        const viewportScale = window.visualViewport.scale;
+        const viewportPageX = window.visualViewport.pageLeft;
+        const viewportPageY = window.visualViewport.pageTop;
+        if (log && viewportX || viewportY || (viewportScale != 1) || viewportPageX || viewportPageY) {
+            console.log(`Element: ${element.id} Viewport X: ${viewportX}, Y: ${viewportY}, Scale: ${viewportScale}, PageX: ${viewportPageX}, PageY: ${viewportPageY}`);
+        }
+        return element.getBoundingClientRect();
+    }
+}
+
 const getTagsRootState = createSelector(getMVState, (state) => state.tags);
 const getTagEntities = createSelector(getTagsRootState, getTagNameEnt);
 const getTagFilters = createSelector(getTagsRootState, getFilters);
@@ -2872,7 +2901,7 @@ class RedactionSearchBarComponent {
                 const range = selection.getRangeAt(0).cloneRange();
                 const clientRects = range.getClientRects();
                 if (clientRects) {
-                    const parentRect = selectedHighLightedElements[0].parentElement.parentElement.getBoundingClientRect();
+                    const parentRect = HtmlTemplatesHelper.getAdjustedBoundingRect(selectedHighLightedElements[0]?.parentElement?.parentElement);
                     const selectionRectangles = [];
                     for (let i = 0; i < clientRects.length; i++) {
                         const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
@@ -2998,7 +3027,7 @@ class CommentSetRenderService {
         }
     }
     height(element) {
-        return element.form.nativeElement.getBoundingClientRect().height;
+        return HtmlTemplatesHelper.getAdjustedBoundingRect(element.form.nativeElement)?.height | 0;
     }
     difference(a, b) { return Math.abs(a - b); }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentSetRenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3314,7 +3343,7 @@ class CommentComponent {
         return this.totalPrevPagesHeight + (this.rectTop * this.zoom);
     }
     get height() {
-        return this.form.nativeElement.getBoundingClientRect().height / this.zoom;
+        return HtmlTemplatesHelper.getAdjustedBoundingRect(this.form.nativeElement).height / this.zoom;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: TagsServices }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentComponent, selector: "mv-anno-comment", inputs: { rotate: "rotate", zoom: "zoom", index: "index", page: "page", comment: "comment", annotation: "annotation" }, outputs: { commentClick: "commentClick", renderComments: "renderComments", delete: "delete", updated: "updated", changes: "changes" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "editableComment", first: true, predicate: ["editableComment"], descendants: true }], ngImport: i0, template: "<div\n  #form\n  (click)=\"onCommentClick()\"\n  class=\"aui-comment\"\n  [ngClass]=\"{ stylestoggle: (marginToComment$ | async) }\"\n  [style.top.px]=\"commentTop\"\n  [style.zIndex]=\"selected ? 100 : 0\"\n>\n  <div id=\"detailsWrapper {{ index }}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate : \"d MMMM y h:mm a\" }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\"\n  >\n  </mv-tags>\n  <textarea\n    *ngIf=\"selected && editable\"\n    #editableComment\n    mvTextAreaAutoExpand\n    type=\"text\"\n    required\n    name=\"content\"\n    [maxlength]=\"CHAR_LIMIT\"\n    class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n    [ngModel]=\"fullComment\"\n    (ngModelChange)=\"fullComment = $event; reRenderComments(); onCommentChange($event)\"\n    aria-label=\"comment\"\n  >\n  </textarea>\n  <p\n    *ngIf=\"!editable\"\n    mvTextHighlight\n    class=\"commentText\"\n    [textToHighlight]=\"searchString\"\n  >\n    {{ fullComment }}\n  </p>\n  <div\n    *ngIf=\"\n      selected ||\n      this.editable ||\n      (!fullComment.length && tagItems && !tagItems.length)\n    \"\n    class=\"aui-comment__footer commentBtns\"\n  >\n    <button\n      class=\"govuk-button\"\n      type=\"button\"\n      role=\"button\"\n      (click)=\"editOrSave()\"\n    >\n      {{ !editable ? (\"Edit\" | rpxTranslate) : (\"Save\" | rpxTranslate) }}\n    </button>\n    <button\n      type=\"button\"\n      role=\"button\"\n      class=\"govuk-button govuk-button--secondary\"\n      (click)=\"deleteOrCancel()\"\n    >\n      {{ !editable ? (\"Delete\" | rpxTranslate) : (\"Cancel\" | rpxTranslate) }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">{{ \"private\" | rpxTranslate }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: ["textToHighlight"] }, { kind: "directive", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]" }, { kind: "component", type: TagsComponent, selector: "mv-tags", inputs: ["tagItems", "userId", "editable", "annoId"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: MomentDatePipe, name: "momentDate" }] }); }
@@ -3807,7 +3836,7 @@ class BoxHighlightCreateComponent {
             this.highlightPage();
             return;
         }
-        const rect = event.target.getBoundingClientRect(), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
+        const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
         console.log(`initHighlight: rect=${JSON.stringify(rect)}, clientX=${event.clientX}, clientY=${event.clientY}, offsetX=${offsetX}, offsetY=${offsetY}`);
         this.position = 'absolute';
         this.backgroundColor = 'yellow';
@@ -3832,8 +3861,7 @@ class BoxHighlightCreateComponent {
         }
     }
     updateHighlight(event) {
-        const rect = event.target.getBoundingClientRect(), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
-        console.log(`updateHighlight: rect=${JSON.stringify(rect)}, clientX=${event.clientX}, clientY=${event.clientY}, offsetX=${offsetX}, offsetY=${offsetY}`);
+        const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target, false), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
         if (this.drawStartX > 0 && this.drawStartY > 0) {
             this.height = Math.abs(offsetY - this.drawStartY);
             this.width = Math.abs(offsetX - this.drawStartX);
@@ -3846,6 +3874,7 @@ class BoxHighlightCreateComponent {
             let rectangle = this.highlightService
                 .applyRotation(this.pageHeight, this.pageWidth, this.height, this.width, this.top, this.left, this.rotate, this.zoom);
             rectangle = { id: v4(), ...rectangle };
+            console.log(`createHighlight: rectangle=${JSON.stringify(rectangle)}`);
             this.saveSelection.emit({ rectangles: [rectangle], page: this.page });
             this.resetHighlight();
         }
@@ -4035,10 +4064,11 @@ class CtxToolbarComponent {
     addOrEditComment() {
         this.addOrEditCommentEvent.emit();
         setTimeout(() => {
+            // This hack to wait until the element is rendered seems to be unreliable,
             if (!location.hash) {
-                document.getElementById('viewerContainer').scrollBy(0, 1);
+                document.getElementById('viewerContainer')?.scrollBy(0, 1);
             }
-        }, 10);
+        }, 20);
     }
     createBookmark() {
         this.createBookmarkEvent.emit(this.rectangle);
@@ -4740,7 +4770,9 @@ class SideBarComponent {
             this.sidebarOpen = toggle;
         }));
         this.subscriptions.push(this.store.pipe(select(getScrollTop)).subscribe(scrollTopValue => {
-            this.sidebarDiv.nativeElement.scrollTop = scrollTopValue;
+            if (this.sidebarDiv?.nativeElement) {
+                this.sidebarDiv.nativeElement.scrollTop = scrollTopValue;
+            }
         }));
     }
     ngOnChanges(changes) {
@@ -4917,7 +4949,8 @@ class HighlightCreateDirective {
                 const range = selection.getRangeAt(0).cloneRange();
                 const clientRects = range.getClientRects();
                 if (clientRects) {
-                    const parentRect = localElement.closest(".textLayer").getBoundingClientRect();
+                    const parentRect = HtmlTemplatesHelper
+                        .getAdjustedBoundingRect(localElement.closest(".textLayer"));
                     const selectionRectangles = [];
                     for (let i = 0; i < clientRects.length; i++) {
                         const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
@@ -5756,8 +5789,8 @@ class MainToolbarComponent {
         }
     }
     ngAfterViewInit() {
-        Array.from(this.mvToolbarMain.nativeElement.children).forEach(button => {
-            this.allButtonsWidth += button.getBoundingClientRect().width;
+        Array.from(this.mvToolbarMain.nativeElement.children).forEach((button) => {
+            this.allButtonsWidth += HtmlTemplatesHelper.getAdjustedBoundingRect(button).width;
             this.widthRequiredForBtn[button.id] = this.allButtonsWidth;
         });
         this.cdr.detectChanges();
@@ -6058,24 +6091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-/**
- * Helper Class
- * Used for dynamic templates manipulation
- * */
-class HtmlTemplatesHelper {
-    static setDescribedBy(errorMessage, config) {
-        if (!errorMessage) {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-        else if (errorMessage && errorMessage.isInvalid) {
-            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
-        }
-        else {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-    }
-}
-
 /*
 * Gov Uk Fieldset Component
 * Used to wrap group fieldset elements
@@ -6558,7 +6573,7 @@ class MediaViewerComponent {
             return;
         }
         if (!this.height) {
-            const compOffsetTop = this.elRef.nativeElement.getBoundingClientRect().top;
+            const compOffsetTop = HtmlTemplatesHelper.getAdjustedBoundingRect(this.elRef.nativeElement).top;
             const viewerOffsetTop = this.viewerRef.nativeElement.offsetTop;
             const offset = compOffsetTop + viewerOffsetTop;
             if (this.prevOffset !== offset) {