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

Hide/show image annotations

Browse Source
This commit is contained in:
Adina Țeudan 2021-02-05 23:30:30 +02:00
parent 8a9f68b9dd
commit f12ff21d5e
9 changed files with 79 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/red-ui/src/app/icons/icons.module.ts
View File

@ -15,17 +15,18 @@ export class IconsModule {
'analyse',
'approved',
'arrow-down',
'arrow-up',
'arrow-right',
'arrow-up',
'assign',
'assign-me',
'calendar',
'case-sensitive',
'check',
'check-alt',
'close',
'collapse',
'color-picker',
'comment',
'case-sensitive',
'comment-fill',
'dictionary',
'document',
@ -44,8 +45,9 @@ export class IconsModule {
'logout',
'menu',
'needs-work',
'notification',
'new-tab',
'notification',
'page',
'pages',
'plus',
'preview',
@ -59,15 +61,15 @@ export class IconsModule {
'sort-asc',
'sort-desc',
'status',
'trash',
'thumb-down',
'template',
'user',
'check-alt',
'page',
'upload',
'thumb-down',
'trash',
'under-construction',
'undo',
'under-construction'
'upload',
'user',
'visibility',
'visibility-off'
];
for (const icon of icons) {

20
apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.html
View File

@ -29,6 +29,26 @@
>
</redaction-circle-button>
<redaction-circle-button
(action)="hideAnnotation($event)"
*ngIf="annotation.isImage && viewerAnnotation?.isVisible()"
type="dark-bg"
icon="red:visibility-off"
tooltipPosition="before"
tooltip="annotation-actions.hide"
>
</redaction-circle-button>
<redaction-circle-button
(action)="showAnnotation($event)"
*ngIf="annotation.isImage && !viewerAnnotation?.isVisible()"
type="dark-bg"
icon="red:visibility"
tooltipPosition="before"
tooltip="annotation-actions.show"
>
</redaction-circle-button>
<redaction-circle-button
(action)="annotationActionsService.rejectSuggestion($event, annotation, annotationsChanged)"
type="dark-bg"

16
apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts
View File

@ -4,6 +4,7 @@ import { AppStateService } from '../../../state/app-state.service';
import { PermissionsService } from '../../../common/service/permissions.service';
import { AnnotationPermissions } from '../model/annotation.permissions';
import { AnnotationActionsService } from '../../../common/service/annotation-actions.service';
import { WebViewerInstance, Annotations } from '@pdftron/webviewer';
@Component({
selector: 'redaction-annotation-actions',
@ -13,6 +14,7 @@ import { AnnotationActionsService } from '../../../common/service/annotation-act
export class AnnotationActionsComponent implements OnInit {
@Input() annotation: AnnotationWrapper;
@Input() canPerformAnnotationActions: boolean;
@Input() viewer: WebViewerInstance;
@Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
@ -29,6 +31,20 @@ export class AnnotationActionsComponent implements OnInit {
this.annotationPermissions = AnnotationPermissions.forUser(this._permissionsService.currentUser, this.annotation);
}
public get viewerAnnotation(): Annotations.Annotation {
return this.viewer.annotManager.getAnnotationById(this.annotation.id);
}
public hideAnnotation($event: MouseEvent) {
$event.stopPropagation();
this.viewer.annotManager.hideAnnotation(this.viewerAnnotation);
}
public showAnnotation($event: MouseEvent) {
$event.stopPropagation();
this.viewer.annotManager.showAnnotation(this.viewerAnnotation);
}
public openMenu($event: MouseEvent) {
$event.preventDefault();
this.menuOpen = true;

1
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -257,6 +257,7 @@
(annotationsChanged)="annotationsChangedByReviewAction($event)"
[annotation]="annotation"
[canPerformAnnotationActions]="canPerformAnnotationActions"
[viewer]="activeViewer"
></redaction-annotation-actions>
</div>
<redaction-comments [annotation]="annotation"></redaction-comments>

18
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -40,7 +40,7 @@ const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'f', 'F',
export class FilePreviewScreenComponent implements OnInit, OnDestroy {
private projectId: string;
private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED';
private instance: WebViewerInstance;
private _instance: WebViewerInstance;
private _dialogRef: MatDialogRef<any>;
public fullScreen = false;
public editingReviewer = false;
@ -103,19 +103,19 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
set redactedView(value: boolean) {
this._activeViewer = value ? 'REDACTED' : 'ANNOTATED';
const allAnnotations = this.instance.annotManager.getAnnotationsList();
const allAnnotations = this._instance.annotManager.getAnnotationsList();
const redactions = allAnnotations.filter((a) => a.getCustomData('redaction'));
if (this._activeViewer === 'ANNOTATED') {
redactions.forEach((redaction) => {
redaction['StrokeColor'] = redaction.getCustomData('annotationColor');
});
this.instance.annotManager.showAnnotations(allAnnotations);
this._instance.annotManager.showAnnotations(allAnnotations);
} else {
const other = allAnnotations.filter((a) => !a.getCustomData('redaction'));
redactions.forEach((redaction) => {
redaction['StrokeColor'] = redaction.getCustomData('redactionColor');
});
this.instance.annotManager.hideAnnotations(other);
this._instance.annotManager.hideAnnotations(other);
}
this._updateCanPerformActions();
}
@ -125,7 +125,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
}
get activeViewer() {
return this.instance;
return this._instance;
}
get displayedPages(): number[] {
@ -133,7 +133,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
}
get activeViewerPage() {
return this.instance?.docViewer?.getCurrentPage();
return this._instance?.docViewer?.getCurrentPage();
}
get canNotSwitchToRedactedView() {
@ -472,7 +472,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
}
viewerReady($event: WebViewerInstance) {
this.instance = $event;
this._instance = $event;
this.viewReady = true;
this._cleanupAndRedrawManualAnnotations();
// Go to initial page from query params
@ -497,7 +497,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
this._fileDownloadService.loadActiveFileManualAnnotations().subscribe((manualRedactions) => {
this.fileData.manualRedactions = manualRedactions;
this._rebuildFilters();
this._annotationDrawService.drawAnnotations(this.instance, this.annotations, this.redactedView);
this._annotationDrawService.drawAnnotations(this._instance, this.annotations, this.redactedView);
});
}
@ -515,7 +515,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
});
const newPageAnnotations = this.annotations.filter((item) => item.pageNumber === page);
this._handleDeltaAnnotationFilters(currentPageAnnotations, newPageAnnotations);
this._annotationDrawService.drawAnnotations(this.instance, newPageAnnotations);
this._annotationDrawService.drawAnnotations(this._instance, newPageAnnotations);
}
});
}

16
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -222,6 +222,22 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
return;
}
// Add hide action as last item
if (annotation.isImage) {
this.instance.annotationPopup.add([
{
type: 'actionButton',
img: '/assets/icons/general/visibility-off.svg',
title: this._translateService.instant('annotation-actions.hide'),
onClick: () => {
this._ngZone.run(() => {
this.instance.annotManager.hideAnnotation(viewerAnnotation);
});
}
}
]);
}
this.instance.annotationPopup.add(this._annotationActionsService.getViewerAvailableActions(annotation, this.annotationsChanged));
}
}

4
apps/red-ui/src/assets/i18n/en.json
View File

@ -384,7 +384,9 @@
},
"remove": "Remove",
"undo": "Undo",
"reject": "Reject"
"reject": "Reject",
"hide": "Hide",
"show": "Show"
},
"initials-avatar": {
"unassigned": "Unassigned"

1
apps/red-ui/src/assets/icons/general/visibility-off.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 682 B

1
apps/red-ui/src/assets/icons/general/visibility.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 347 B