inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-04-23 22:30:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MNT-25123] Fixed incorrectly displayed some annotations (#11662)

Browse Source
This commit is contained in:
AleksanderSklorz
2026-02-19 09:41:59 +01:00
committed by GitHub
parent 4581f714d7
commit e48950b200
4 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
lib/core/src/lib/viewer/components/mock/pdfjs-lib.mock.ts
View File

@@ -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
})
});
})

5
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer-host.component.scss
View File

@@ -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;

27
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.spec.ts
View File

@@ -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();
}));

13
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts
View File

@@ -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;
}