From 6c9658bf29057bd8e339ec02e0a36405bd4b29df Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Thu, 29 Feb 2024 11:22:08 +0200
Subject: [PATCH] RED-8217: sync header layer button state with layer checkbox
 state.

---
 .../file-preview-screen.component.ts          |  1 +
 .../pdf-viewer/services/layers.service.ts     | 28 +++++++++----------
 .../services/viewer-header.service.ts         | 15 ++++++++--
 3 files changed, 28 insertions(+), 16 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 99358859d..f52cb6fa0 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
@@ -699,6 +699,7 @@ export class FilePreviewScreenComponent
 
     #subscribeToFileUpdates(): void {
         this.addActiveScreenSubscription = this.loadAnnotations$().subscribe();
+        this.addActiveScreenSubscription = this._viewerHeaderService.layersUpdated.subscribe();
 
         this.addActiveScreenSubscription = this._dossiersService
             .getEntityDeleted$(this.dossierId)
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts
index 2cf725251..69ea61609 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/layers.service.ts
@@ -1,5 +1,4 @@
-import { inject, Injectable } from '@angular/core';
-import { UserPreferenceService } from '@users/user-preference.service';
+import { effect, inject, Injectable, signal } from '@angular/core';
 import { HeaderElements } from '../../file-preview/utils/constants';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
@@ -13,48 +12,49 @@ export class LayersService {
     readonly #enableIcon = this.#convertPath('/assets/icons/general/pdftron-action-disable-layers.svg');
     readonly #disableIcon = this.#convertPath('/assets/icons/general/pdftron-action-enable-layers.svg');
 
-    private _active = false;
-
+    readonly active = signal(false);
     constructor(
         private readonly _pdf: PdfViewer,
         private readonly _documentViewer: REDDocumentViewer,
-        private readonly _userPreferenceService: UserPreferenceService,
         private readonly _translateService: TranslateService,
-    ) {}
+    ) {
+        effect(() => {
+            this.active();
+            this.#updateButton();
+        });
+    }
 
     get toggleLayersBtnTitle(): string {
         return this._translateService.instant(_('pdf-viewer.toggle-layers'), {
-            active: this._active,
+            active: this.active(),
         });
     }
 
     get toggleLayersBtnIcon(): string {
-        const tooltipsDisabled = this._active;
+        const tooltipsDisabled = this.active();
         return tooltipsDisabled ? this.#enableIcon : this.#disableIcon;
     }
 
     resetLayers() {
-        this._active = false;
-        this.#updateButton();
+        this.active.set(false);
     }
 
     async toggleLayers(): Promise<void> {
         const layers = await this._documentViewer.document.getLayersArray();
         layers.forEach(layer => {
             if ('Layout grid' === layer.name) {
-                layer.visible = !this._active;
+                layer.visible = !this.active();
             }
         });
 
         this._documentViewer.document.setLayersArray(layers);
         this._documentViewer.refreshAndUpdateView();
 
-        this._active = !this._active;
-        this.#updateButton();
+        this.active.update(value => !value);
     }
 
     #updateButton() {
-        this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_LAYERS, {
+        this._pdf.instance?.UI.updateElement(HeaderElements.TOGGLE_LAYERS, {
             title: this.toggleLayersBtnTitle,
             img: this.toggleLayersBtnIcon,
         });
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 a49ae470f..1f1b9717e 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
@@ -4,8 +4,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { IHeaderElement, RotationTypes } from '@red/domain';
 import { FilesMapService } from '@services/files/files-map.service';
 import { Roles } from '@users/roles';
-import { fromEvent, merge, Observable, Subject } from 'rxjs';
-import { filter, map, tap } from 'rxjs/operators';
+import { fromEvent, merge, Observable, Subject, timer } from 'rxjs';
+import { filter, map, switchMap, tap } from 'rxjs/operators';
 import { HeaderElements, HeaderElementType } from '../../file-preview/utils/constants';
 import { ROTATION_ACTION_BUTTONS, ROTATION_BUTTONS, ViewerEvents } from '../utils/constants';
 import { ViewerEvent, VisibilityChangedEvent } from '../utils/types';
@@ -70,6 +70,17 @@ export class ViewerHeaderService {
         );
     }
 
+    get layersUpdated() {
+        const documentListener$ = timer(1000).pipe(switchMap(() => fromEvent(this._documentViewer.document, 'layersUpdated')));
+        return documentListener$.pipe(
+            tap(async () => {
+                const layers = await this._documentViewer.document.getLayersArray();
+                const layersVisible = layers.every(layer => layer.visible);
+                this._layersService.active.set(layersVisible);
+            }),
+        );
+    }
+
     get #rectangle(): IHeaderElement {
         return {
             type: 'toolGroupButton',