From e48950b2009e1e2bb01fe0d437a3b1cd7b2fa3c8 Mon Sep 17 00:00:00 2001 From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Date: Thu, 19 Feb 2026 09:41:59 +0100 Subject: [PATCH] [MNT-25123] Fixed incorrectly displayed some annotations (#11662) --- .../viewer/components/mock/pdfjs-lib.mock.ts | 31 ++++++++++--------- .../pdf-viewer/pdf-viewer-host.component.scss | 5 ++- .../pdf-viewer/pdf-viewer.component.spec.ts | 27 +++++++++++----- .../pdf-viewer/pdf-viewer.component.ts | 13 +++++--- 4 files changed, 48 insertions(+), 28 deletions(-) diff --git a/lib/core/src/lib/viewer/components/mock/pdfjs-lib.mock.ts b/lib/core/src/lib/viewer/components/mock/pdfjs-lib.mock.ts index 6c359ebeb3..633899ece1 100644 --- a/lib/core/src/lib/viewer/components/mock/pdfjs-lib.mock.ts +++ b/lib/core/src/lib/viewer/components/mock/pdfjs-lib.mock.ts @@ -15,6 +15,21 @@ * limitations under the License. */ +export const annotations = [ + { + subtype: 'Text', + name: 'NoIcon', + id: 'R13', + titleObj: { + str: 'Annotation title' + }, + contentsObj: { + str: 'Annotation contents' + }, + modificationDate: "D:20260202104106Z00'00", + popupRef: 'R1' + } +]; export default { GlobalWorkerOptions: {}, getDocument: jasmine.createSpy('getDocument').and.callFake(() => ({ @@ -26,21 +41,7 @@ export default { numPages: 6, getPage: () => Promise.resolve({ - getAnnotations: () => [ - { - subtype: 'Text', - name: 'NoIcon', - id: 'R13', - titleObj: { - str: 'Annotation title' - }, - contentsObj: { - str: 'Annotation contents' - }, - modificationDate: "D:20260202104106Z00'00", - popupRef: 'R1' - } - ] + getAnnotations: () => annotations }) }); }) diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer-host.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer-host.component.scss index 084304e5b7..825bc3e23f 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer-host.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer-host.component.scss @@ -189,7 +189,7 @@ outline-color: var(--adf-pdf-viewer-annotation-tooltip-color); background-color: color-mix(in srgb, var(--adf-pdf-viewer-annotation-tooltip-color) 30%, var(--theme-primary-color-default-contrast)); margin-left: 40px; - width: fit-content; + width: max-content; max-width: 300px; opacity: 0; pointer-events: none; @@ -202,6 +202,9 @@ .textAnnotation { &:hover, &:focus-within { + /* stylelint-disable-next-line declaration-no-important */ + z-index: 9999 !important; // important is required because pdfjs-dist adds style attribute to that tag + .adf-pdf-viewer-annotation-tooltip.popup { opacity: 1; pointer-events: auto; diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.spec.ts b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.spec.ts index 4280919d2a..b7220a8a83 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.spec.ts +++ b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.spec.ts @@ -27,7 +27,7 @@ import { UnitTestingUtils, provideCoreAuthTesting } from '../../../testing'; import { RenderingQueueServices } from '../../services/rendering-queue.services'; import { PdfThumbListComponent } from '../pdf-viewer-thumbnails/pdf-viewer-thumbnails.component'; import { PDFJS_MODULE, PDFJS_VIEWER_MODULE, PdfViewerComponent } from './pdf-viewer.component'; -import pdfjsLibraryMock from '../mock/pdfjs-lib.mock'; +import pdfjsLibraryMock, { annotations } from '../mock/pdfjs-lib.mock'; import { TranslateService } from '@ngx-translate/core'; declare const pdfjsLib: any; @@ -637,6 +637,12 @@ describe('Test PdfViewer - User interaction', () => { const getAnnotationPopupElement = (): HTMLElement => annotationElement.querySelector('.adf-pdf-viewer-annotation-tooltip'); + const getAnnotationTitle = (): string => annotationElement.querySelector('.title').textContent; + + const getAnnotationDate = (): string => annotationElement.querySelector('.popupDate')?.textContent; + + const getAnnotationContent = (): string => annotationElement.querySelector('.popupContent').textContent; + beforeEach(() => { documentContainer = document.createElement('div'); annotationImageElement = document.createElement('img'); @@ -659,13 +665,18 @@ describe('Test PdfViewer - User interaction', () => { it('should have corrected content in annotation popup', fakeAsync(() => { dispatchAnnotationLayerRenderedEvent(); - expect(annotationElement.querySelector('.title').textContent).toBe('Annotation title'); - // Date format can vary by locale, so we just check it contains the expected date components - const dateText = annotationElement.querySelector('.popupDate').textContent; - expect(dateText).toContain('2026'); - expect(dateText).toContain('02'); - expect(dateText).toContain('10:41:06'); - expect(annotationElement.querySelector('.popupContent').textContent).toBe('Annotation contents'); + expect(getAnnotationTitle()).toBe('Annotation title'); + expect(getAnnotationDate()).toBe('2/2/2026, 10:41:06 AM'); + expect(getAnnotationContent()).toBe('Annotation contents'); + expect(getAnnotationPopupElement()).toBeDefined(); + })); + + it('should have corrected content in annotation popup if there is no modification date', fakeAsync(() => { + annotations[0].modificationDate = null; + dispatchAnnotationLayerRenderedEvent(); + expect(getAnnotationTitle()).toBe('Annotation title'); + expect(getAnnotationDate()).toBeUndefined(); + expect(getAnnotationContent()).toBe('Annotation contents'); expect(getAnnotationPopupElement()).toBeDefined(); })); diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts index 591a28369d..7c92507802 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts +++ b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts @@ -697,13 +697,18 @@ export class PdfViewerComponent implements OnChanges, OnDestroy { private createAnnotationPopupHeader(annotation: any): HTMLSpanElement { const headerElement = document.createElement('span'); const titleElement = document.createElement('span'); - const dateElement = document.createElement('time'); + let dateElement: HTMLTimeElement; titleElement.innerText = annotation.titleObj.str; titleElement.classList.add('title'); - dateElement.innerText = PDFDateString.toDateObject(annotation.modificationDate).toLocaleString(); - dateElement.classList.add('popupDate'); headerElement.classList.add('header'); - headerElement.append(titleElement, dateElement); + if (annotation.modificationDate) { + dateElement = document.createElement('time'); + dateElement.innerText = PDFDateString.toDateObject(annotation.modificationDate).toLocaleString(); + dateElement.classList.add('popupDate'); + headerElement.append(titleElement, dateElement); + } else { + headerElement.append(titleElement); + } return headerElement; }