Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

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

Browse Source
This commit is contained in:
Valentin Mihai 2022-12-12 17:08:29 +02:00
parent 04aa63d0cb
commit 781819e1cf
4 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
View File

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

12
apps/red-ui/src/app/modules/file-preview/services/suggestions.service.ts
View File

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

2
apps/red-ui/src/app/modules/pdf-viewer/services/annotation-draw.service.ts
View File

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

28
apps/red-ui/src/app/modules/pdf-viewer/services/readable-redactions.service.ts
View File

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