From 0bdf27c88f5db0fe9043c4cce825d49233b8691f Mon Sep 17 00:00:00 2001
From: George <george.balanesc@gmail.com>
Date: Mon, 6 Mar 2023 17:03:17 +0200
Subject: [PATCH] RED-6305, fix image hints not being shown after button click.

---
 .../annotation-actions.component.html           |  4 ++--
 .../annotation-actions.component.ts             | 15 +++++++++------
 .../file-preview/services/pdf-proxy.service.ts  |  4 ++--
 .../services/annotation-manager.service.ts      | 17 +++++++++++++++--
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html
index f27d6f526..7ac04139c 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html
@@ -134,7 +134,7 @@
 
         <iqser-circle-button
             (action)="hideAnnotation($event)"
-            *ngIf="isImage && isVisible"
+            *ngIf="isImage && (isVisible$ | async)"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.hide' | translate"
             [type]="buttonType"
@@ -143,7 +143,7 @@
 
         <iqser-circle-button
             (action)="showAnnotation($event)"
-            *ngIf="isImage && !isVisible"
+            *ngIf="isImage && (isVisible$ | async) === false"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.show' | translate"
             [type]="buttonType"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
index 5fde363d9..c37e48979 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
@@ -6,10 +6,11 @@ import { AnnotationActionsService } from '../../services/annotation-actions.serv
 import { AnnotationReferencesService } from '../../services/annotation-references.service';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
-import { HelpModeService, IqserPermissionsService } from '@iqser/common-ui';
+import { HelpModeService, IqserPermissionsService, shareLast } from '@iqser/common-ui';
 import { ViewModeService } from '../../services/view-mode.service';
 import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
 import { ROLES } from '@users/roles';
+import { map } from 'rxjs';
 
 export const AnnotationButtonTypes = {
     dark: 'dark',
@@ -31,9 +32,13 @@ export class AnnotationActionsComponent implements OnChanges {
     annotationPermissions: AnnotationPermissions;
     readonly roles = ROLES;
 
-    isVisible = true;
     isImage = true;
 
+    readonly isVisible$ = this._annotationManager.hidden$.pipe(
+        map(hidden => this._annotations.reduce((acc, annotation) => !hidden.has(annotation.id) && acc, true)),
+        shareLast(),
+    );
+
     constructor(
         readonly viewModeService: ViewModeService,
         readonly helpModeService: HelpModeService,
@@ -55,8 +60,6 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input()
     set annotations(annotations: AnnotationWrapper[]) {
         this._annotations = annotations.filter(a => a !== undefined);
-        const viewerAnnotations = this.viewerAnnotations ?? [];
-        this.isVisible = viewerAnnotations.reduce((acc, annotation) => annotation?.isVisible() && acc, true);
         this.isImage = this._annotations?.reduce((accumulator, annotation) => annotation.isImage && accumulator, true);
     }
 
@@ -89,14 +92,14 @@ export class AnnotationActionsComponent implements OnChanges {
         $event.stopPropagation();
         this._annotationManager.hide(this.viewerAnnotations);
         this._annotationManager.deselect();
-        this._annotationManager.hidden.add(this.viewerAnnotations[0].Id);
+        this._annotationManager.addToHidden(this.viewerAnnotations[0].Id);
     }
 
     showAnnotation($event: MouseEvent) {
         $event.stopPropagation();
         this._annotationManager.show(this.viewerAnnotations);
         this._annotationManager.deselect();
-        this._annotationManager.hidden.delete(this.viewerAnnotations[0].Id);
+        this._annotationManager.removeFromHidden(this.viewerAnnotations[0].Id);
     }
 
     resize($event: MouseEvent) {
diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
index 8592c8b3d..de217e6a3 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
@@ -213,10 +213,10 @@ export class PdfProxyService {
                         this._ngZone.run(() => {
                             if (allAreVisible) {
                                 this._annotationManager.hide(viewerAnnotations);
-                                this._annotationManager.hidden.add(viewerAnnotations[0].Id);
+                                this._annotationManager.addToHidden(viewerAnnotations[0].Id);
                             } else {
                                 this._annotationManager.show(viewerAnnotations);
-                                this._annotationManager.hidden.delete(viewerAnnotations[0].Id);
+                                this._annotationManager.removeFromHidden(viewerAnnotations[0].Id);
                             }
                             this._annotationManager.deselect();
                         });
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
index 74cff5ed2..da2f81069 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
@@ -3,7 +3,7 @@ import { Core } from '@pdftron/webviewer';
 import type { List } from '@iqser/common-ui';
 import { AnnotationPredicate, DeleteAnnotationsOptions } from '../utils/types';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { fromEvent, Observable } from 'rxjs';
+import { BehaviorSubject, fromEvent, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { asList, getId, isStringOrWrapper } from '../utils/functions';
 import { getLast } from '@utils/functions';
@@ -14,8 +14,9 @@ import Annotation = Core.Annotations.Annotation;
 @Injectable()
 export class REDAnnotationManager {
     annotationSelected$: Observable<[Annotation[], string]>;
-    readonly hidden = new Set<string>();
     resizingAnnotationId?: string = undefined;
+    readonly #hidden$ = new BehaviorSubject<Set<string>>(new Set<string>());
+    readonly hidden$ = this.#hidden$.asObservable();
 
     #manager: AnnotationManager;
 
@@ -27,6 +28,18 @@ export class REDAnnotationManager {
         return this.#get();
     }
 
+    get hidden() {
+        return this.#hidden$.value;
+    }
+
+    addToHidden(value: string) {
+        this.#hidden$.next(new Set([...this.hidden, value]));
+    }
+
+    removeFromHidden(value: string) {
+        this.#hidden$.next(new Set([...this.hidden].filter(v => v !== value)));
+    }
+
     get #annotationSelected$() {
         const onSelect$ = fromEvent<[Annotation[], string]>(this.#manager, 'annotationSelected');
         return onSelect$.pipe(tap(value => console.log('Annotation selected: ', value)));