diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts index 8cf05afde..0dbb75e5c 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts @@ -220,7 +220,7 @@ export class FilePreviewScreenComponent switch (this._viewModeService.viewMode) { case ViewModes.STANDARD: { - this._setAnnotationsColor(redactions, 'annotationColor'); + this._readableRedactionsService.setAnnotationsColor(redactions, 'annotationColor'); const wrappers = await this._fileDataService.annotations; const ocrAnnotationIds = wrappers.filter(a => a.isOCR).map(a => a.id); const standardEntries = annotations @@ -229,7 +229,7 @@ export class FilePreviewScreenComponent const nonStandardEntries = annotations.filter( a => bool(a.getCustomData('changeLogRemoved')) || this._annotationManager.isHidden(a.Id), ); - this._setAnnotationsOpacity(standardEntries, true); + this._readableRedactionsService.setAnnotationsOpacity(standardEntries, true); this._annotationManager.show(standardEntries); this._annotationManager.hide(nonStandardEntries); break; @@ -237,8 +237,8 @@ export class FilePreviewScreenComponent case ViewModes.DELTA: { const changeLogEntries = annotations.filter(a => bool(a.getCustomData('changeLog'))); const nonChangeLogEntries = annotations.filter(a => !bool(a.getCustomData('changeLog'))); - this._setAnnotationsColor(redactions, 'annotationColor'); - this._setAnnotationsOpacity(changeLogEntries, true); + this._readableRedactionsService.setAnnotationsColor(redactions, 'annotationColor'); + this._readableRedactionsService.setAnnotationsOpacity(changeLogEntries, true); this._annotationManager.show(changeLogEntries); this._annotationManager.hide(nonChangeLogEntries); break; @@ -247,14 +247,8 @@ export class FilePreviewScreenComponent const nonRedactionEntries = annotations.filter( a => !bool(a.getCustomData('redaction')) || bool(a.getCustomData('changeLogRemoved')), ); - if (this._readableRedactionsService.active) { - this._setAnnotationsOpacity(redactions, true); - this._setAnnotationsColor(redactions, 'annotationColor'); - } else { - this._setAnnotationsOpacity(redactions); - this._setAnnotationsColor(redactions, 'redactionColor'); - } - + this._readableRedactionsService.setPreviewAnnotationsOpacity(redactions); + this._readableRedactionsService.setPreviewAnnotationsColor(redactions); this._annotationManager.show(redactions); this._annotationManager.hide(nonRedactionEntries); this._suggestionsService.hideSuggestionsInPreview(redactions); @@ -759,20 +753,6 @@ export class FilePreviewScreenComponent } } - private _setAnnotationsOpacity(annotations: Annotation[], restoreToOriginal = false) { - annotations.forEach(annotation => { - annotation['Opacity'] = restoreToOriginal ? parseFloat(annotation.getCustomData('opacity')) : 0.5; - }); - } - - private _setAnnotationsColor(annotations: Annotation[], customData: string) { - annotations.forEach(annotation => { - const color = this._annotationDrawService.convertColor(annotation.getCustomData(customData)); - annotation['StrokeColor'] = color; - annotation['FillColor'] = color; - }); - } - private _navigateToDossier() { this._logger.info('Navigating to ', this.state.dossier.dossierName); return this._router.navigate([this.state.dossier.routerLink]); diff --git a/apps/red-ui/src/app/modules/file-preview/services/suggestions.service.ts b/apps/red-ui/src/app/modules/file-preview/services/suggestions.service.ts index 988f22ca0..429a4d2bd 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/suggestions.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/suggestions.service.ts @@ -6,6 +6,7 @@ import Annotation = Core.Annotations.Annotation; import { REDAnnotationManager } from '../../pdf-viewer/services/annotation-manager.service'; import { UserPreferenceService } from '@users/user-preference.service'; import { AnnotationDrawService } from '../../pdf-viewer/services/annotation-draw.service'; +import { ReadableRedactionsService } from '../../pdf-viewer/services/readable-redactions.service'; @Injectable() export class SuggestionsService { @@ -15,6 +16,7 @@ export class SuggestionsService { private readonly _annotationManager: REDAnnotationManager, private readonly _userPreferenceService: UserPreferenceService, private readonly _annotationDrawService: AnnotationDrawService, + private readonly _readableRedactionsService: ReadableRedactionsService, ) {} set removedRedactions(removedRedactions: AnnotationWrapper[]) { @@ -39,14 +41,8 @@ export class SuggestionsService { #convertRemoveSuggestionsToRedactions(suggestions: Annotation[]): void { const removeSuggestions = suggestions.filter(a => bool(a.getCustomData('suggestionRemove'))); - - removeSuggestions.forEach(suggestion => { - const color = this._annotationDrawService.convertColor(suggestion.getCustomData('redactionColor')); - suggestion['Opacity'] = 1; - suggestion['StrokeColor'] = color; - suggestion['FillColor'] = color; - }); - + this._readableRedactionsService.setPreviewAnnotationsOpacity(removeSuggestions); + this._readableRedactionsService.setPreviewAnnotationsColor(removeSuggestions); this._annotationManager.show(removeSuggestions); } } diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-draw.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-draw.service.ts index 0cd30eccc..4833ce1e4 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-draw.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-draw.service.ts @@ -19,6 +19,7 @@ import Quad = Core.Math.Quad; const DEFAULT_TEXT_ANNOTATION_OPACITY = 1; const DEFAULT_REMOVED_ANNOTATION_OPACITY = 0.2; +const FINAL_REDACTION_COLOR = '#000000'; @Injectable() export class AnnotationDrawService { @@ -164,6 +165,7 @@ export class AnnotationDrawService { ? this._defaultColorsService.getColor(dossierTemplateId, 'requestAddColor') : this._defaultColorsService.getColor(dossierTemplateId, 'previewColor'); annotation.setCustomData('redactionColor', String(redactionColor)); + annotation.setCustomData('finalRedactionColor', FINAL_REDACTION_COLOR); annotation.setCustomData('annotationColor', String(annotationWrapper.color)); return annotation; diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts index dbdf893b1..9c7b49ded 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts @@ -7,12 +7,14 @@ import { PdfViewer } from './pdf-viewer.service'; import { REDAnnotationManager } from './annotation-manager.service'; import { AnnotationDrawService } from './annotation-draw.service'; import { BehaviorSubject, Observable } from 'rxjs'; +import { Core } from '@pdftron/webviewer'; +import Annotation = Core.Annotations.Annotation; @Injectable() export class ReadableRedactionsService { readonly #enableIcon = this._convertPath('/assets/icons/general/pdftron-action-enable-tooltips.svg'); readonly #disableIcon = this._convertPath('/assets/icons/general/pdftron-action-disable-tooltips.svg'); - readonly #active$ = new BehaviorSubject(false); + readonly #active$ = new BehaviorSubject(true); readonly active$: Observable; constructor( @@ -47,4 +49,28 @@ export class ReadableRedactionsService { img: this.toggleReadableRedactionsBtnIcon, }); } + + setAnnotationsOpacity(annotations: Annotation[], restoreToOriginal = false) { + annotations.forEach(annotation => { + console.log(parseFloat(annotation.getCustomData('opacity'))); + annotation['Opacity'] = restoreToOriginal ? parseFloat(annotation.getCustomData('opacity')) : 0.5; + }); + } + + setAnnotationsColor(annotations: Annotation[], customData: string) { + annotations.forEach(annotation => { + const color = this._annotationDrawService.convertColor(annotation.getCustomData(customData)); + annotation['StrokeColor'] = color; + annotation['FillColor'] = color; + }); + } + + setPreviewAnnotationsOpacity(annotations: Annotation[]) { + this.setAnnotationsOpacity(annotations, !this.active); + } + + setPreviewAnnotationsColor(annotations: Annotation[]) { + const color = this.active ? 'redactionColor' : 'finalRedactionColor'; + this.setAnnotationsColor(annotations, color); + } }