diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts index b283a4e07..e70b4537a 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts @@ -243,7 +243,7 @@ export class PdfProxyService { dataElement: TextPopups.ADD_RECTANGLE, img: this.#addRedactionIcon, title: this.#getTitle(ManualRedactionEntryTypes.REDACTION), - onClick: () => this._addRectangleManualRedaction(), + onClick: () => this._ngZone.run(() => this._addRectangleManualRedaction()), }; this._pdf.instance.UI.annotationPopup.add([addRectangleButton]); @@ -276,7 +276,7 @@ export class PdfProxyService { dataElement: TextPopups.ADD_FALSE_POSITIVE, img: this.#falsePositiveIcon, title: this.#getTitle(ManualRedactionEntryTypes.FALSE_POSITIVE), - onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.FALSE_POSITIVE), + onClick: () => this._ngZone.run(() => this._addManualRedactionOfType(ManualRedactionEntryTypes.FALSE_POSITIVE)), }); } @@ -286,7 +286,7 @@ export class PdfProxyService { dataElement: TextPopups.ADD_REDACTION, img: this.#addRedactionIcon, title: this.#getTitle(ManualRedactionEntryTypes.REDACTION), - onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.REDACTION), + onClick: () => this._ngZone.run(() => this._addManualRedactionOfType(ManualRedactionEntryTypes.REDACTION)), }); if (!this._iqserPermissionsService.has(ROLES.getRss)) { @@ -295,7 +295,7 @@ export class PdfProxyService { dataElement: TextPopups.ADD_DICTIONARY, img: this.#addDictIcon, title: this.#getTitle(ManualRedactionEntryTypes.DICTIONARY), - onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.DICTIONARY), + onClick: () => this._ngZone.run(() => this._addManualRedactionOfType(ManualRedactionEntryTypes.DICTIONARY)), }); } } diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts index 226bae523..8984fa880 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts @@ -1,4 +1,4 @@ -import { Inject, Injectable } from '@angular/core'; +import { Inject, Injectable, NgZone } from '@angular/core'; import { IHeaderElement, RotationTypes } from '@red/domain'; import { HeaderElements, HeaderElementType } from '../../file-preview/utils/constants'; import { TranslateService } from '@ngx-translate/core'; @@ -9,7 +9,6 @@ import { PdfViewer } from './pdf-viewer.service'; import { ROTATION_ACTION_BUTTONS, ROTATION_BUTTONS, ViewerEvents } from '../utils/constants'; import { FilesMapService } from '@services/files/files-map.service'; import { REDDocumentViewer } from './document-viewer.service'; -import { UserPreferenceService } from '@users/user-preference.service'; import { fromEvent, Observable, Subject } from 'rxjs'; import { ViewerEvent, VisibilityChangedEvent } from '../utils/types'; import { ReadableRedactionsService } from './readable-redactions.service'; @@ -48,7 +47,7 @@ export class ViewerHeaderService { private readonly _rotationService: PageRotationService, private readonly _tooltipsService: TooltipsService, private readonly _readableRedactionsService: ReadableRedactionsService, - private readonly _userPreferenceService: UserPreferenceService, + private readonly _ngZone: NgZone, ) { this.events$ = this.#events$.asObservable(); } @@ -70,9 +69,7 @@ export class ViewerHeaderService { dataElement: HeaderElements.TOGGLE_TOOLTIPS, title: this._tooltipsService.toggleTooltipsBtnTitle, img: this._tooltipsService.toggleTooltipsBtnIcon, - onClick: async () => { - await this._tooltipsService.toggleTooltips(); - }, + onClick: () => this._ngZone.run(() => this._tooltipsService.toggleTooltips()), }; } @@ -83,9 +80,7 @@ export class ViewerHeaderService { dataElement: HeaderElements.TOGGLE_READABLE_REDACTIONS, title: this._readableRedactionsService.toggleReadableRedactionsBtnTitle, img: this._readableRedactionsService.toggleReadableRedactionsBtnIcon, - onClick: () => { - this._readableRedactionsService.toggleReadableRedactions(); - }, + onClick: () => this._ngZone.run(() => this._readableRedactionsService.toggleReadableRedactions()), }; } @@ -94,7 +89,7 @@ export class ViewerHeaderService { type: 'actionButton', title: this._translateService.instant('viewer-header.load-all-annotations'), img: this._convertPath('/assets/icons/general/pdftron-action-load-all-annotations.svg'), - onClick: () => this.#events$.next({ type: ViewerEvents.LOAD_ALL_ANNOTATIONS }), + onClick: () => this._ngZone.run(() => this.#events$.next({ type: ViewerEvents.LOAD_ALL_ANNOTATIONS })), dataElement: HeaderElements.LOAD_ALL_ANNOTATIONS, }; } @@ -106,7 +101,7 @@ export class ViewerHeaderService { dataElement: HeaderElements.CLOSE_COMPARE_BUTTON, img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), title: 'Leave Compare Mode', - onClick: () => this._closeCompareMode(), + onClick: () => this._ngZone.run(() => this._closeCompareMode()), }; } @@ -117,10 +112,11 @@ export class ViewerHeaderService { dataElement: HeaderElements.ROTATE_LEFT_BUTTON, img: this._convertPath('/assets/icons/general/rotate-left.svg'), title: 'Rotate page left', - onClick: () => { - this._rotationService.addRotation(RotationTypes.LEFT); - this.#toggleRotationActionButtons(); - }, + onClick: () => + this._ngZone.run(() => { + this._rotationService.addRotation(RotationTypes.LEFT); + this.#toggleRotationActionButtons(); + }), }; } @@ -139,8 +135,10 @@ export class ViewerHeaderService { margin: 0 12px; `; paragraph.addEventListener('click', async () => { - await this._rotationService.applyRotation(); - this.disable(ROTATION_ACTION_BUTTONS); + await this._ngZone.run(async () => { + await this._rotationService.applyRotation(); + this.disable(ROTATION_ACTION_BUTTONS); + }); }); return paragraph; }, @@ -161,7 +159,7 @@ export class ViewerHeaderService { cursor: pointer; opacity: 0.7; `; - paragraph.addEventListener('click', () => this.#discardRotation()); + paragraph.addEventListener('click', () => this._ngZone.run(() => this.#discardRotation())); return paragraph; }, }; @@ -174,10 +172,11 @@ export class ViewerHeaderService { dataElement: HeaderElements.ROTATE_RIGHT_BUTTON, img: this._convertPath('/assets/icons/general/rotate-right.svg'), title: 'Rotate page right', - onClick: () => { - this._rotationService.addRotation(RotationTypes.RIGHT); - this.#toggleRotationActionButtons(); - }, + onClick: () => + this._ngZone.run(() => { + this._rotationService.addRotation(RotationTypes.RIGHT); + this.#toggleRotationActionButtons(); + }), }; } @@ -188,10 +187,11 @@ export class ViewerHeaderService { dataElement: HeaderElements.COMPARE_BUTTON, img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'), title: 'Compare', - onClick: async () => { - document.getElementById('compareFileInput').click(); - this.#docBeforeCompare = await this._documentViewer.blob(); - }, + onClick: () => + this._ngZone.run(async () => { + document.getElementById('compareFileInput').click(); + this.#docBeforeCompare = await this._documentViewer.blob(); + }), }; } @@ -293,7 +293,7 @@ export class ViewerHeaderService { enableLoadAllAnnotations(): void { this._pdf.instance.UI.updateElement(HeaderElements.LOAD_ALL_ANNOTATIONS, { img: this._convertPath('/assets/icons/general/pdftron-action-load-all-annotations.svg'), - onClick: () => this.#events$.next({ type: ViewerEvents.LOAD_ALL_ANNOTATIONS }), + onClick: () => this._ngZone.run(() => this.#events$.next({ type: ViewerEvents.LOAD_ALL_ANNOTATIONS })), }); }