Viewer header config service initial
This commit is contained in:
Adina Țeudan
parent
37108bf6cc
commit
8af6eb31af
@ -11,7 +11,7 @@ import {
|
||||
SimpleChanges,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { Dossier, File, IHeaderElement, IManualRedactionEntry, RotationTypes } from '@red/domain';
|
||||
import { Dossier, File, IHeaderElement, IManualRedactionEntry } from '@red/domain';
|
||||
import { Core, WebViewerInstance } from '@pdftron/webviewer';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import {
|
||||
@ -43,17 +43,11 @@ import { FilePreviewDialogService } from '../../services/file-preview-dialog.ser
|
||||
import { loadCompareDocumentWrapper } from '../../../dossier/utils/compare-mode.utils';
|
||||
import { from, fromEvent } from 'rxjs';
|
||||
import { FileDataService } from '../../services/file-data.service';
|
||||
import { ViewerHeaderConfigService } from '../../services/viewer-header-config.service';
|
||||
import Tools = Core.Tools;
|
||||
import TextTool = Tools.TextTool;
|
||||
import Annotation = Core.Annotations.Annotation;
|
||||
|
||||
function getDivider(hiddenOn?: readonly ('desktop' | 'mobile' | 'tablet')[]) {
|
||||
return {
|
||||
type: 'divider',
|
||||
hidden: hiddenOn,
|
||||
};
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'redaction-pdf-viewer',
|
||||
templateUrl: './pdf-viewer.component.html',
|
||||
@ -89,6 +83,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
||||
private readonly _fileManagementService: FileManagementService,
|
||||
private readonly _pageRotationService: PageRotationService,
|
||||
private readonly _fileDataService: FileDataService,
|
||||
private readonly _headerConfigService: ViewerHeaderConfigService,
|
||||
readonly stateService: FilePreviewStateService,
|
||||
readonly viewModeService: ViewModeService,
|
||||
readonly multiSelectService: MultiSelectService,
|
||||
@ -97,20 +92,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
||||
super();
|
||||
}
|
||||
|
||||
private get _toggleTooltipsBtnTitle(): string {
|
||||
return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), {
|
||||
active: this._userPreferenceService.getFilePreviewTooltipsPreference(),
|
||||
});
|
||||
}
|
||||
|
||||
private get _toggleTooltipsIcon(): string {
|
||||
return this._convertPath(
|
||||
this._userPreferenceService.getFilePreviewTooltipsPreference()
|
||||
? '/assets/icons/general/pdftron-action-enable-tooltips.svg'
|
||||
: '/assets/icons/general/pdftron-action-disable-tooltips.svg',
|
||||
);
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this);
|
||||
await this._loadViewer();
|
||||
@ -200,7 +181,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
||||
fileReader.readAsArrayBuffer(fileToCompare);
|
||||
}
|
||||
|
||||
async closeCompareMode() {
|
||||
private async _closeCompareMode() {
|
||||
this.viewModeService.compareMode = false;
|
||||
const pdfNet = this.instance.Core.PDFNet;
|
||||
await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null);
|
||||
@ -333,6 +314,12 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
||||
}
|
||||
}
|
||||
|
||||
private async _toggleTooltips(title: string, img: string): Promise<void> {
|
||||
await this._userPreferenceService.toggleFilePreviewTooltipsPreference();
|
||||
this._updateTooltipsVisibility();
|
||||
this.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, { title, img });
|
||||
}
|
||||
|
||||
private _configureElements() {
|
||||
this.instance.UI.disableElements([
|
||||
'pageNavOverlay',
|
||||
@ -357,107 +344,31 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
||||
'annotationGroupButton',
|
||||
]);
|
||||
|
||||
const applyRotation: IHeaderElement = {
|
||||
type: 'customElement',
|
||||
dataElement: HeaderElements.APPLY_ROTATION,
|
||||
render: () => {
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.innerText = this._translateService.instant('page-rotation.apply');
|
||||
paragraph.style.cssText = `
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #DD4D50;
|
||||
cursor: pointer;
|
||||
margin: 0 12px;
|
||||
`;
|
||||
paragraph.addEventListener('click', async () => {
|
||||
await this._pageRotationService.applyRotation();
|
||||
});
|
||||
return paragraph;
|
||||
},
|
||||
};
|
||||
const discardRotation: IHeaderElement = {
|
||||
type: 'customElement',
|
||||
dataElement: HeaderElements.DISCARD_ROTATION,
|
||||
render: () => {
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.innerText = this._translateService.instant('page-rotation.discard');
|
||||
paragraph.style.cssText = `
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #283241;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
`;
|
||||
paragraph.addEventListener('click', () => {
|
||||
this._pageRotationService.discardRotation();
|
||||
});
|
||||
return paragraph;
|
||||
},
|
||||
};
|
||||
const applyRotation: IHeaderElement = this._headerConfigService.applyRotation;
|
||||
const discardRotation: IHeaderElement = this._headerConfigService.discardRotation;
|
||||
const compare: IHeaderElement = this._headerConfigService.compare(this.compareFileInput);
|
||||
const closeCompare: IHeaderElement = this._headerConfigService.closeCompare(async () => {
|
||||
await this._closeCompareMode();
|
||||
});
|
||||
const toggleTooltips: IHeaderElement = this._headerConfigService.toggleTooltips(async (title: string, img: string) => {
|
||||
await this._toggleTooltips(title, img);
|
||||
});
|
||||
const rectangle = this._headerConfigService.rectangle;
|
||||
const rotateLeft = this._headerConfigService.rotateLeft;
|
||||
const rotateRight = this._headerConfigService.rotateRight;
|
||||
const divider = this._headerConfigService.divider;
|
||||
|
||||
const divider = getDivider();
|
||||
const headerItems: IHeaderElement[] = [
|
||||
divider,
|
||||
{
|
||||
type: 'actionButton',
|
||||
element: 'compare',
|
||||
dataElement: HeaderElements.COMPARE_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'),
|
||||
title: 'Compare',
|
||||
onClick: () => {
|
||||
this.compareFileInput.nativeElement.click();
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'actionButton',
|
||||
element: 'closeCompare',
|
||||
dataElement: HeaderElements.CLOSE_COMPARE_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'),
|
||||
title: 'Leave Compare Mode',
|
||||
onClick: async () => {
|
||||
await this.closeCompareMode();
|
||||
},
|
||||
},
|
||||
compare,
|
||||
closeCompare,
|
||||
divider,
|
||||
{
|
||||
type: 'actionButton',
|
||||
element: 'tooltips',
|
||||
dataElement: HeaderElements.TOGGLE_TOOLTIPS,
|
||||
img: this._toggleTooltipsIcon,
|
||||
title: this._toggleTooltipsBtnTitle,
|
||||
onClick: async () => {
|
||||
await this._userPreferenceService.toggleFilePreviewTooltipsPreference();
|
||||
this._updateTooltipsVisibility();
|
||||
this.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, {
|
||||
title: this._toggleTooltipsBtnTitle,
|
||||
img: this._toggleTooltipsIcon,
|
||||
});
|
||||
},
|
||||
},
|
||||
toggleTooltips,
|
||||
divider,
|
||||
{
|
||||
type: 'toolGroupButton',
|
||||
toolGroup: 'rectangleTools',
|
||||
dataElement: HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/rectangle.svg'),
|
||||
title: 'annotation.rectangle',
|
||||
},
|
||||
rectangle,
|
||||
divider,
|
||||
{
|
||||
type: 'actionButton',
|
||||
element: 'tooltips',
|
||||
dataElement: HeaderElements.ROTATE_LEFT_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/rotate-left.svg'),
|
||||
onClick: () => this._pageRotationService.addRotation(RotationTypes.LEFT),
|
||||
},
|
||||
{
|
||||
type: 'actionButton',
|
||||
element: 'tooltips',
|
||||
dataElement: HeaderElements.ROTATE_RIGHT_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/rotate-right.svg'),
|
||||
onClick: () => this._pageRotationService.addRotation(RotationTypes.RIGHT),
|
||||
},
|
||||
rotateLeft,
|
||||
rotateRight,
|
||||
applyRotation,
|
||||
discardRotation,
|
||||
divider,
|
||||
|
||||
@ -14,6 +14,7 @@ import { dossiersServiceProvider } from '@services/entity-services/dossiers.serv
|
||||
import { PageRotationService } from './services/page-rotation.service';
|
||||
import { PdfViewer } from './services/pdf-viewer.service';
|
||||
import { FileDataService } from './services/file-data.service';
|
||||
import { ViewerHeaderConfigService } from './services/viewer-header-config.service';
|
||||
|
||||
export const filePreviewScreenProviders = [
|
||||
FilterService,
|
||||
@ -32,4 +33,5 @@ export const filePreviewScreenProviders = [
|
||||
AnnotationProcessingService,
|
||||
FileDataService,
|
||||
dossiersServiceProvider,
|
||||
ViewerHeaderConfigService,
|
||||
];
|
||||
|
||||
@ -0,0 +1,153 @@
|
||||
import { ElementRef, Inject, Injectable } from '@angular/core';
|
||||
import { IHeaderElement, RotationTypes } from '@red/domain';
|
||||
import { HeaderElements } from '../shared/constants';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { PageRotationService } from './page-rotation.service';
|
||||
import { BASE_HREF } from '../../../tokens';
|
||||
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
|
||||
import { UserPreferenceService } from '@services/user-preference.service';
|
||||
|
||||
@Injectable()
|
||||
export class ViewerHeaderConfigService {
|
||||
constructor(
|
||||
@Inject(BASE_HREF) private readonly _baseHref: string,
|
||||
private readonly _translateService: TranslateService,
|
||||
private readonly _pageRotationService: PageRotationService,
|
||||
private readonly _userPreferenceService: UserPreferenceService,
|
||||
) {}
|
||||
|
||||
get applyRotation(): IHeaderElement {
|
||||
return {
|
||||
type: 'customElement',
|
||||
dataElement: HeaderElements.APPLY_ROTATION,
|
||||
render: () => {
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.innerText = this._translateService.instant('page-rotation.apply');
|
||||
paragraph.style.cssText = `
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #DD4D50;
|
||||
cursor: pointer;
|
||||
margin: 0 12px;
|
||||
`;
|
||||
paragraph.addEventListener('click', async () => {
|
||||
await this._pageRotationService.applyRotation();
|
||||
});
|
||||
return paragraph;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
get discardRotation(): IHeaderElement {
|
||||
return {
|
||||
type: 'customElement',
|
||||
dataElement: HeaderElements.DISCARD_ROTATION,
|
||||
render: () => {
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.innerText = this._translateService.instant('page-rotation.discard');
|
||||
paragraph.style.cssText = `
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #283241;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
`;
|
||||
paragraph.addEventListener('click', () => {
|
||||
this._pageRotationService.discardRotation();
|
||||
});
|
||||
return paragraph;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
get divider(): IHeaderElement {
|
||||
return {
|
||||
type: 'divider',
|
||||
};
|
||||
}
|
||||
|
||||
get rectangle(): IHeaderElement {
|
||||
return {
|
||||
type: 'toolGroupButton',
|
||||
toolGroup: 'rectangleTools',
|
||||
dataElement: HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/rectangle.svg'),
|
||||
title: 'annotation.rectangle',
|
||||
};
|
||||
}
|
||||
|
||||
get rotateLeft(): IHeaderElement {
|
||||
return {
|
||||
type: 'actionButton',
|
||||
element: 'tooltips',
|
||||
dataElement: HeaderElements.ROTATE_LEFT_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/rotate-left.svg'),
|
||||
onClick: () => this._pageRotationService.addRotation(RotationTypes.LEFT),
|
||||
};
|
||||
}
|
||||
|
||||
get rotateRight(): IHeaderElement {
|
||||
return {
|
||||
type: 'actionButton',
|
||||
element: 'tooltips',
|
||||
dataElement: HeaderElements.ROTATE_RIGHT_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/rotate-right.svg'),
|
||||
onClick: () => this._pageRotationService.addRotation(RotationTypes.RIGHT),
|
||||
};
|
||||
}
|
||||
|
||||
private get _toggleTooltipsBtnTitle(): string {
|
||||
return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), {
|
||||
active: this._userPreferenceService.getFilePreviewTooltipsPreference(),
|
||||
});
|
||||
}
|
||||
|
||||
private get _toggleTooltipsBtnIcon(): string {
|
||||
return this._convertPath(
|
||||
this._userPreferenceService.getFilePreviewTooltipsPreference()
|
||||
? '/assets/icons/general/pdftron-action-enable-tooltips.svg'
|
||||
: '/assets/icons/general/pdftron-action-disable-tooltips.svg',
|
||||
);
|
||||
}
|
||||
|
||||
toggleTooltips(toggleTooltips: (title: string, img: string) => Promise<void>): IHeaderElement {
|
||||
return {
|
||||
type: 'actionButton',
|
||||
element: 'tooltips',
|
||||
dataElement: HeaderElements.TOGGLE_TOOLTIPS,
|
||||
img: this._toggleTooltipsBtnIcon,
|
||||
title: this._toggleTooltipsBtnTitle,
|
||||
onClick: async () => {
|
||||
await toggleTooltips(this._toggleTooltipsBtnTitle, this._toggleTooltipsBtnIcon);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
closeCompare(closeCompareMode: () => Promise<void>): IHeaderElement {
|
||||
return {
|
||||
type: 'actionButton',
|
||||
element: 'closeCompare',
|
||||
dataElement: HeaderElements.CLOSE_COMPARE_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'),
|
||||
title: 'Leave Compare Mode',
|
||||
onClick: async () => {
|
||||
await closeCompareMode();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
compare(compareFileInput: ElementRef): IHeaderElement {
|
||||
return {
|
||||
type: 'actionButton',
|
||||
element: 'compare',
|
||||
dataElement: HeaderElements.COMPARE_BUTTON,
|
||||
img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'),
|
||||
title: 'Compare',
|
||||
onClick: () => compareFileInput.nativeElement.click(),
|
||||
};
|
||||
}
|
||||
|
||||
private _convertPath(path: string): string {
|
||||
return this._baseHref + path;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user