From 89c4b738dbaca297f9a7ccd3f22d61a78f3d6c90 Mon Sep 17 00:00:00 2001 From: Nicoleta Panaghiu Date: Fri, 17 Feb 2023 18:37:04 +0200 Subject: [PATCH] RED-6168: Changed position of 'Load All Annotations' and added the display condition. --- .../file-preview-screen.component.ts | 2 + .../services/viewer-header.service.ts | 50 +++++++++++++++++-- .../src/app/modules/pdf-viewer/utils/types.ts | 5 ++ 3 files changed, 52 insertions(+), 5 deletions(-) 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 8e2644b5d..5f903121a 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 @@ -637,6 +637,8 @@ export class FilePreviewScreenComponent this._ngZone.run(() => this.#updateQueryParamsPage(page)), ); + this.addActiveScreenSubscription = this._viewerHeaderService.toggleLoadAnnotations$.subscribe(); + this.addActiveScreenSubscription = this.pdfProxyService.annotationSelected$.subscribe(); this.addActiveScreenSubscription = this._viewerHeaderService.events$ 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 9193f47e2..f4b0088be 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 @@ -10,10 +10,11 @@ import { ROTATION_ACTION_BUTTONS, ROTATION_BUTTONS, ViewerEvents } from '../util import { FilesMapService } from '@services/files/files-map.service'; import { REDDocumentViewer } from './document-viewer.service'; import { UserPreferenceService } from '@users/user-preference.service'; -import { Observable, Subject } from 'rxjs'; -import { ViewerEvent } from '../utils/types'; +import { fromEvent, Observable, Subject } from 'rxjs'; +import { ViewerEvent, VisibilityChangedEvent } from '../utils/types'; import { ReadableRedactionsService } from './readable-redactions.service'; import { ROLES } from '@users/roles'; +import { filter, map, tap } from 'rxjs/operators'; const divider: IHeaderElement = { type: 'divider', @@ -27,7 +28,7 @@ export class ViewerHeaderService { [HeaderElements.SHAPE_TOOL_GROUP_BUTTON, true], [HeaderElements.TOGGLE_TOOLTIPS, true], [HeaderElements.TOGGLE_READABLE_REDACTIONS, false], - [HeaderElements.LOAD_ALL_ANNOTATIONS, true], + [HeaderElements.LOAD_ALL_ANNOTATIONS, false], [HeaderElements.COMPARE_BUTTON, true], [HeaderElements.CLOSE_COMPARE_BUTTON, false], [HeaderElements.ROTATE_LEFT_BUTTON, false], @@ -37,6 +38,7 @@ export class ViewerHeaderService { ]); #docBeforeCompare: Blob; readonly #events$ = new Subject(); + toggleLoadAnnotations$: Observable; constructor( @Inject(BASE_HREF_FN) private readonly _convertPath: BaseHrefFn, @@ -200,6 +202,27 @@ export class ViewerHeaderService { }; } + private get _toggleLoadAnnotations$() { + return this._expandedPanelEvent$.pipe( + tap(isVisible => { + if (isVisible) { + this.enable([HeaderElements.LOAD_ALL_ANNOTATIONS]); + } else { + this.disable([HeaderElements.LOAD_ALL_ANNOTATIONS]); + } + }), + ); + } + + private get _expandedPanelEvent$() { + const visibilityEvent$ = fromEvent(this._pdf.instance?.UI, this._pdf.instance.UI?.Events.VISIBILITY_CHANGED); + return visibilityEvent$.pipe( + map(event => event.detail), + filter(event => event.element === 'thumbnailsPanel'), + map(event => event.isVisible), + ); + } + init(): void { this.#buttons = new Map([ [HeaderElements.SHAPE_TOOL_GROUP_BUTTON, this._rectangle], @@ -213,6 +236,7 @@ export class ViewerHeaderService { [HeaderElements.COMPARE_BUTTON, this._compare], [HeaderElements.CLOSE_COMPARE_BUTTON, this._closeCompare], ]); + this.toggleLoadAnnotations$ = this._toggleLoadAnnotations$; this.updateElements(); } @@ -233,7 +257,6 @@ export class ViewerHeaderService { [HeaderElements.TOGGLE_TOOLTIPS], [HeaderElements.TOGGLE_READABLE_REDACTIONS], [HeaderElements.SHAPE_TOOL_GROUP_BUTTON], - [HeaderElements.LOAD_ALL_ANNOTATIONS], [ HeaderElements.ROTATE_LEFT_BUTTON, HeaderElements.ROTATE_RIGHT_BUTTON, @@ -241,8 +264,25 @@ export class ViewerHeaderService { HeaderElements.DISCARD_ROTATION, ], ]; + + const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS); + const startLoadAnnotations = 3; + let startButtons = 10; + let deleteCount = 14; + groups.forEach(group => this._pushGroup(enabledItems, group)); - header.getItems().splice(10, header.getItems().length - 14, ...enabledItems); + + if (!header.getItems().includes(loadAllAnnotationsButton)) { + if (this._isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) { + header.getItems().splice(startLoadAnnotations, 0, loadAllAnnotationsButton); + startButtons = 11; + deleteCount = 15; + } + } else { + header.getItems().splice(startLoadAnnotations, 1); + } + + header.getItems().splice(startButtons, header.getItems().length - deleteCount, ...enabledItems); }); this._pdf.instance?.UI.updateElement('selectToolButton', { diff --git a/apps/red-ui/src/app/modules/pdf-viewer/utils/types.ts b/apps/red-ui/src/app/modules/pdf-viewer/utils/types.ts index fa6515774..07e73b850 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/utils/types.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/utils/types.ts @@ -19,3 +19,8 @@ export type AnnotationPredicate = (value: Annotation) => boolean; export interface ViewerEvent { readonly type: string; } + +export interface VisibilityChangedEvent { + readonly element: string; + readonly isVisible: boolean; +}