RED-5399 - Toggle in preview: Make redactions (un)readable

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._readableRedactionsService.setAnnotationsColor(redactions, 'annotationColor');
-                this._setAnnotationsOpacity(changeLogEntries, true);
+                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._readableRedactionsService.setPreviewAnnotationsOpacity(redactions);
-                    this._setAnnotationsOpacity(redactions, true);
+                this._readableRedactionsService.setPreviewAnnotationsColor(redactions);
-                    this._setAnnotationsColor(redactions, 'annotationColor');
-                } else {
-                    this._setAnnotationsOpacity(redactions);
-                    this._setAnnotationsColor(redactions, 'redactionColor');
-                }
-
                 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]);

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')));
-
+        this._readableRedactionsService.setPreviewAnnotationsOpacity(removeSuggestions);
-        removeSuggestions.forEach(suggestion => {
+        this._readableRedactionsService.setPreviewAnnotationsColor(removeSuggestions);
-            const color = this._annotationDrawService.convertColor(suggestion.getCustomData('redactionColor'));
-            suggestion['Opacity'] = 1;
-            suggestion['StrokeColor'] = color;
-            suggestion['FillColor'] = color;
-        });
-
         this._annotationManager.show(removeSuggestions);
     }
 }

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;

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<boolean>(false);
+    readonly #active$ = new BehaviorSubject<boolean>(true);
     readonly active$: Observable<boolean>;
 
     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);
+    }
 }