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

RED-8217: sync header layer button state with layer checkbox state.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-02-29 11:22:08 +02:00
parent 3a8bda0188
commit 6c9658bf29
3 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

15
apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
View File

@ -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',