Merge branch 'RED-3573'
This commit is contained in:
commit
07bf551479
@ -54,8 +54,6 @@ export const loadCompareDocumentWrapper = async (
|
|||||||
instance.UI.loadDocument(mergedDocumentBuffer, {
|
instance.UI.loadDocument(mergedDocumentBuffer, {
|
||||||
filename: file?.filename ?? 'document.pdf',
|
filename: file?.filename ?? 'document.pdf',
|
||||||
});
|
});
|
||||||
instance.UI.disableElements(['compareButton']);
|
|
||||||
instance.UI.enableElements(['closeCompareButton']);
|
|
||||||
|
|
||||||
navigateToPage();
|
navigateToPage();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import {
|
|||||||
SimpleChanges,
|
SimpleChanges,
|
||||||
ViewChild,
|
ViewChild,
|
||||||
} from '@angular/core';
|
} 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 { Core, WebViewerInstance } from '@pdftron/webviewer';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
import { TranslateService } from '@ngx-translate/core';
|
||||||
import {
|
import {
|
||||||
@ -43,17 +43,11 @@ import { FilePreviewDialogService } from '../../services/file-preview-dialog.ser
|
|||||||
import { loadCompareDocumentWrapper } from '../../../dossier/utils/compare-mode.utils';
|
import { loadCompareDocumentWrapper } from '../../../dossier/utils/compare-mode.utils';
|
||||||
import { from, fromEvent } from 'rxjs';
|
import { from, fromEvent } from 'rxjs';
|
||||||
import { FileDataService } from '../../services/file-data.service';
|
import { FileDataService } from '../../services/file-data.service';
|
||||||
|
import { ViewerHeaderConfigService } from '../../services/viewer-header-config.service';
|
||||||
import Tools = Core.Tools;
|
import Tools = Core.Tools;
|
||||||
import TextTool = Tools.TextTool;
|
import TextTool = Tools.TextTool;
|
||||||
import Annotation = Core.Annotations.Annotation;
|
import Annotation = Core.Annotations.Annotation;
|
||||||
|
|
||||||
function getDivider(hiddenOn?: readonly ('desktop' | 'mobile' | 'tablet')[]) {
|
|
||||||
return {
|
|
||||||
type: 'divider',
|
|
||||||
hidden: hiddenOn,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'redaction-pdf-viewer',
|
selector: 'redaction-pdf-viewer',
|
||||||
templateUrl: './pdf-viewer.component.html',
|
templateUrl: './pdf-viewer.component.html',
|
||||||
@ -89,6 +83,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
private readonly _fileManagementService: FileManagementService,
|
private readonly _fileManagementService: FileManagementService,
|
||||||
private readonly _pageRotationService: PageRotationService,
|
private readonly _pageRotationService: PageRotationService,
|
||||||
private readonly _fileDataService: FileDataService,
|
private readonly _fileDataService: FileDataService,
|
||||||
|
private readonly _headerConfigService: ViewerHeaderConfigService,
|
||||||
readonly stateService: FilePreviewStateService,
|
readonly stateService: FilePreviewStateService,
|
||||||
readonly viewModeService: ViewModeService,
|
readonly viewModeService: ViewModeService,
|
||||||
readonly multiSelectService: MultiSelectService,
|
readonly multiSelectService: MultiSelectService,
|
||||||
@ -97,20 +92,6 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
super();
|
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() {
|
async ngOnInit() {
|
||||||
this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this);
|
this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this);
|
||||||
await this._loadViewer();
|
await this._loadViewer();
|
||||||
@ -171,6 +152,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
},
|
},
|
||||||
this.instance.Core.PDFNet,
|
this.instance.Core.PDFNet,
|
||||||
);
|
);
|
||||||
|
this._headerConfigService.disable([HeaderElements.COMPARE_BUTTON]);
|
||||||
|
this._headerConfigService.enable([HeaderElements.CLOSE_COMPARE_BUTTON]);
|
||||||
this._loadingService.stop();
|
this._loadingService.stop();
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -200,7 +183,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
fileReader.readAsArrayBuffer(fileToCompare);
|
fileReader.readAsArrayBuffer(fileToCompare);
|
||||||
}
|
}
|
||||||
|
|
||||||
async closeCompareMode() {
|
private async _closeCompareMode() {
|
||||||
this.viewModeService.compareMode = false;
|
this.viewModeService.compareMode = false;
|
||||||
const pdfNet = this.instance.Core.PDFNet;
|
const pdfNet = this.instance.Core.PDFNet;
|
||||||
await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null);
|
await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null);
|
||||||
@ -210,8 +193,9 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
const filename = (await this.stateService.file).filename ?? 'document.pdf';
|
const filename = (await this.stateService.file).filename ?? 'document.pdf';
|
||||||
this.instance.UI.loadDocument(currentDocument, { filename });
|
this.instance.UI.loadDocument(currentDocument, { filename });
|
||||||
|
|
||||||
this.instance.UI.disableElements([HeaderElements.CLOSE_COMPARE_BUTTON]);
|
this._headerConfigService.disable([HeaderElements.CLOSE_COMPARE_BUTTON]);
|
||||||
this.instance.UI.enableElements([HeaderElements.COMPARE_BUTTON]);
|
this._headerConfigService.enable([HeaderElements.COMPARE_BUTTON]);
|
||||||
|
|
||||||
this.pdf.navigateToPage(1);
|
this.pdf.navigateToPage(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -333,6 +317,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() {
|
private _configureElements() {
|
||||||
this.instance.UI.disableElements([
|
this.instance.UI.disableElements([
|
||||||
'pageNavOverlay',
|
'pageNavOverlay',
|
||||||
@ -357,121 +347,14 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
'annotationGroupButton',
|
'annotationGroupButton',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const applyRotation: IHeaderElement = {
|
const toggleTooltipsFn = async (title: string, img: string) => {
|
||||||
type: 'customElement',
|
await this._toggleTooltips(title, img);
|
||||||
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 = {
|
const closeCompareFn = async () => {
|
||||||
type: 'customElement',
|
await this._closeCompareMode();
|
||||||
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 divider = getDivider();
|
this._headerConfigService.initialize(toggleTooltipsFn, this.compareFileInput, closeCompareFn);
|
||||||
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();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
divider,
|
|
||||||
{
|
|
||||||
type: 'toolGroupButton',
|
|
||||||
toolGroup: 'rectangleTools',
|
|
||||||
dataElement: HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
|
|
||||||
img: this._convertPath('/assets/icons/general/rectangle.svg'),
|
|
||||||
title: 'annotation.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),
|
|
||||||
},
|
|
||||||
applyRotation,
|
|
||||||
discardRotation,
|
|
||||||
divider,
|
|
||||||
];
|
|
||||||
|
|
||||||
this.instance.UI.setHeaderItems(header => {
|
|
||||||
header.getItems().splice(8, 0, ...headerItems);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.instance.UI.disableElements([
|
|
||||||
HeaderElements.CLOSE_COMPARE_BUTTON,
|
|
||||||
HeaderElements.APPLY_ROTATION,
|
|
||||||
HeaderElements.DISCARD_ROTATION,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const dossierTemplateId = this.dossier.dossierTemplateId;
|
const dossierTemplateId = this.dossier.dossierTemplateId;
|
||||||
|
|
||||||
@ -556,10 +439,9 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
}
|
}
|
||||||
|
|
||||||
private _cleanUpSelectionAndButtonState() {
|
private _cleanUpSelectionAndButtonState() {
|
||||||
const rectangleElements = [HeaderElements.SHAPE_TOOL_GROUP_BUTTON];
|
|
||||||
this.pdf.deselectAllAnnotations();
|
this.pdf.deselectAllAnnotations();
|
||||||
this.instance.UI.disableElements(rectangleElements);
|
this._headerConfigService.disable([HeaderElements.SHAPE_TOOL_GROUP_BUTTON]);
|
||||||
this.instance.UI.enableElements(rectangleElements);
|
this._headerConfigService.enable([HeaderElements.SHAPE_TOOL_GROUP_BUTTON]);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _configureTextPopup() {
|
private _configureTextPopup() {
|
||||||
@ -627,11 +509,11 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
|
|
||||||
private async _handleCustomActions() {
|
private async _handleCustomActions() {
|
||||||
this.instance.UI.setToolMode('AnnotationEdit');
|
this.instance.UI.setToolMode('AnnotationEdit');
|
||||||
const elementsToToggle = [
|
const textPopupsToToggle = [TextPopups.ADD_REDACTION, TextPopups.ADD_RECTANGLE, TextPopups.ADD_FALSE_POSITIVE];
|
||||||
TextPopups.ADD_REDACTION,
|
const headerItemsToToggle = [
|
||||||
TextPopups.ADD_RECTANGLE,
|
|
||||||
TextPopups.ADD_FALSE_POSITIVE,
|
|
||||||
HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
|
HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
|
||||||
|
HeaderElements.ROTATE_LEFT_BUTTON,
|
||||||
|
HeaderElements.ROTATE_RIGHT_BUTTON,
|
||||||
HeaderElements.ANNOTATION_POPUP,
|
HeaderElements.ANNOTATION_POPUP,
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -643,7 +525,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
// happens
|
// happens
|
||||||
}
|
}
|
||||||
this.instance.UI.enableElements(elementsToToggle);
|
this.instance.UI.enableElements(textPopupsToToggle);
|
||||||
|
this._headerConfigService.enable(headerItemsToToggle);
|
||||||
|
|
||||||
if (this._selectedText.length > 2) {
|
if (this._selectedText.length > 2) {
|
||||||
this.instance.UI.enableElements([TextPopups.ADD_DICTIONARY, TextPopups.ADD_FALSE_POSITIVE]);
|
this.instance.UI.enableElements([TextPopups.ADD_DICTIONARY, TextPopups.ADD_FALSE_POSITIVE]);
|
||||||
@ -652,7 +535,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let elementsToDisable = [...elementsToToggle, TextPopups.ADD_RECTANGLE];
|
let textPopupElementsToDisable = [...textPopupsToToggle];
|
||||||
|
let headerElementsToDisable = [...headerItemsToToggle];
|
||||||
|
|
||||||
if (isCurrentPageExcluded) {
|
if (isCurrentPageExcluded) {
|
||||||
const allowedActionsWhenPageExcluded: string[] = [
|
const allowedActionsWhenPageExcluded: string[] = [
|
||||||
@ -661,12 +545,14 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
|
|||||||
TextPopups.ADD_REDACTION,
|
TextPopups.ADD_REDACTION,
|
||||||
HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
|
HeaderElements.SHAPE_TOOL_GROUP_BUTTON,
|
||||||
];
|
];
|
||||||
elementsToDisable = elementsToDisable.filter(element => !allowedActionsWhenPageExcluded.includes(element));
|
textPopupElementsToDisable = textPopupElementsToDisable.filter(element => !allowedActionsWhenPageExcluded.includes(element));
|
||||||
|
headerElementsToDisable = headerElementsToDisable.filter(element => !allowedActionsWhenPageExcluded.includes(element));
|
||||||
} else {
|
} else {
|
||||||
this.instance.UI.disableTools(['AnnotationCreateRectangle']);
|
this.instance.UI.disableTools(['AnnotationCreateRectangle']);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.instance.UI.disableElements(elementsToDisable);
|
this.instance.UI.disableElements(textPopupElementsToDisable);
|
||||||
|
this._headerConfigService.disable(headerElementsToDisable);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _getManualRedaction(
|
private _getManualRedaction(
|
||||||
|
|||||||
@ -14,6 +14,7 @@ import { dossiersServiceProvider } from '@services/entity-services/dossiers.serv
|
|||||||
import { PageRotationService } from './services/page-rotation.service';
|
import { PageRotationService } from './services/page-rotation.service';
|
||||||
import { PdfViewer } from './services/pdf-viewer.service';
|
import { PdfViewer } from './services/pdf-viewer.service';
|
||||||
import { FileDataService } from './services/file-data.service';
|
import { FileDataService } from './services/file-data.service';
|
||||||
|
import { ViewerHeaderConfigService } from './services/viewer-header-config.service';
|
||||||
|
|
||||||
export const filePreviewScreenProviders = [
|
export const filePreviewScreenProviders = [
|
||||||
FilterService,
|
FilterService,
|
||||||
@ -32,4 +33,5 @@ export const filePreviewScreenProviders = [
|
|||||||
AnnotationProcessingService,
|
AnnotationProcessingService,
|
||||||
FileDataService,
|
FileDataService,
|
||||||
dossiersServiceProvider,
|
dossiersServiceProvider,
|
||||||
|
ViewerHeaderConfigService,
|
||||||
];
|
];
|
||||||
|
|||||||
@ -116,6 +116,9 @@ export class PageRotationService {
|
|||||||
return this.hasRotations() ? this.showConfirmationDialog() : of(ConfirmOptions.DISCARD_CHANGES);
|
return this.hasRotations() ? this.showConfirmationDialog() : of(ConfirmOptions.DISCARD_CHANGES);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: Ideally, enabling/disabling buttons should be done through ViewerHeaderConfigService, not through _pdf.UI,
|
||||||
|
// but circular dependencies =D
|
||||||
|
|
||||||
#showActionButtons() {
|
#showActionButtons() {
|
||||||
this._pdf.UI.enableElements(actionButtons);
|
this._pdf.UI.enableElements(actionButtons);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,233 @@
|
|||||||
|
import { ElementRef, Inject, Injectable } from '@angular/core';
|
||||||
|
import { IHeaderElement, RotationTypes } from '@red/domain';
|
||||||
|
import { HeaderElements, HeaderElementType } 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';
|
||||||
|
import { PdfViewer } from './pdf-viewer.service';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class ViewerHeaderConfigService {
|
||||||
|
private _divider: IHeaderElement = {
|
||||||
|
type: 'divider',
|
||||||
|
};
|
||||||
|
private _buttons: Map<HeaderElementType, IHeaderElement>;
|
||||||
|
private _config: Map<HeaderElementType, boolean> = new Map<HeaderElementType, boolean>([
|
||||||
|
[HeaderElements.SHAPE_TOOL_GROUP_BUTTON, true],
|
||||||
|
[HeaderElements.ROTATE_LEFT_BUTTON, true],
|
||||||
|
[HeaderElements.ROTATE_RIGHT_BUTTON, true],
|
||||||
|
[HeaderElements.APPLY_ROTATION, true],
|
||||||
|
[HeaderElements.DISCARD_ROTATION, true],
|
||||||
|
[HeaderElements.TOGGLE_TOOLTIPS, true],
|
||||||
|
[HeaderElements.ANNOTATION_POPUP, true],
|
||||||
|
[HeaderElements.COMPARE_BUTTON, true],
|
||||||
|
[HeaderElements.CLOSE_COMPARE_BUTTON, false],
|
||||||
|
]);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
@Inject(BASE_HREF) private readonly _baseHref: string,
|
||||||
|
private readonly _translateService: TranslateService,
|
||||||
|
private readonly _pageRotationService: PageRotationService,
|
||||||
|
private readonly _userPreferenceService: UserPreferenceService,
|
||||||
|
private readonly _pdfViewer: PdfViewer,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
private 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;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private 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;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private 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',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private 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),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private 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',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize(
|
||||||
|
toggleTooltips: (title: string, img: string) => Promise<void>,
|
||||||
|
compareFileInput: ElementRef,
|
||||||
|
closeCompareMode: () => Promise<void>,
|
||||||
|
): void {
|
||||||
|
if (this._buttons) {
|
||||||
|
console.error('ERROR: ViewerHeaderConfigService can only be initialized once!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._buttons = new Map([
|
||||||
|
[HeaderElements.SHAPE_TOOL_GROUP_BUTTON, this._rectangle],
|
||||||
|
[HeaderElements.ROTATE_LEFT_BUTTON, this._rotateLeft],
|
||||||
|
[HeaderElements.ROTATE_RIGHT_BUTTON, this._rotateRight],
|
||||||
|
[HeaderElements.APPLY_ROTATION, this._applyRotation],
|
||||||
|
[HeaderElements.DISCARD_ROTATION, this._discardRotation],
|
||||||
|
[HeaderElements.TOGGLE_TOOLTIPS, this._toggleTooltips(toggleTooltips)],
|
||||||
|
[HeaderElements.COMPARE_BUTTON, this._compare(compareFileInput)],
|
||||||
|
[HeaderElements.CLOSE_COMPARE_BUTTON, this._closeCompare(closeCompareMode)],
|
||||||
|
]);
|
||||||
|
|
||||||
|
this._updateElements();
|
||||||
|
}
|
||||||
|
|
||||||
|
enable(elements: HeaderElementType[]): void {
|
||||||
|
this._updateState(elements, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
disable(elements: HeaderElementType[]): void {
|
||||||
|
this._updateState(elements, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _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);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private _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();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private _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 _pushGroup(items: IHeaderElement[], group: HeaderElementType[]): void {
|
||||||
|
const enabledItems = group.filter(item => this._isEnabled(item));
|
||||||
|
if (enabledItems.length) {
|
||||||
|
items.push(this._divider);
|
||||||
|
enabledItems.forEach(item => items.push(this._buttons.get(item)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _updateElements(): void {
|
||||||
|
this._pdfViewer.instance.UI.setHeaderItems(header => {
|
||||||
|
const enabledItems: IHeaderElement[] = [];
|
||||||
|
const groups: HeaderElementType[][] = [
|
||||||
|
[HeaderElements.COMPARE_BUTTON, HeaderElements.CLOSE_COMPARE_BUTTON],
|
||||||
|
[HeaderElements.TOGGLE_TOOLTIPS],
|
||||||
|
[HeaderElements.SHAPE_TOOL_GROUP_BUTTON],
|
||||||
|
[
|
||||||
|
HeaderElements.ROTATE_LEFT_BUTTON,
|
||||||
|
HeaderElements.ROTATE_RIGHT_BUTTON,
|
||||||
|
HeaderElements.APPLY_ROTATION,
|
||||||
|
HeaderElements.DISCARD_ROTATION,
|
||||||
|
],
|
||||||
|
];
|
||||||
|
groups.forEach(group => this._pushGroup(enabledItems, group));
|
||||||
|
header.getItems().splice(8, header.getItems().length - 13, ...enabledItems);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _updateState(elements: HeaderElementType[], value: boolean): void {
|
||||||
|
elements.forEach(element => this._config.set(element, value));
|
||||||
|
this._updateElements();
|
||||||
|
}
|
||||||
|
|
||||||
|
private _isEnabled(key: HeaderElementType): boolean {
|
||||||
|
return this._config.get(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _convertPath(path: string): string {
|
||||||
|
return this._baseHref + path;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,16 +2,27 @@ export const ALLOWED_KEYBOARD_SHORTCUTS: readonly string[] = ['+', '-', 'p', 'r'
|
|||||||
|
|
||||||
export const ALL_HOTKEYS = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown'];
|
export const ALL_HOTKEYS = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown'];
|
||||||
|
|
||||||
export const HeaderElements = {
|
export type HeaderElementType =
|
||||||
SHAPE_TOOL_GROUP_BUTTON: 'shapeToolGroupButton',
|
| 'SHAPE_TOOL_GROUP_BUTTON'
|
||||||
ROTATE_LEFT_BUTTON: 'rotateLeftButton',
|
| 'ROTATE_LEFT_BUTTON'
|
||||||
ROTATE_RIGHT_BUTTON: 'rotateRightButton',
|
| 'ROTATE_RIGHT_BUTTON'
|
||||||
APPLY_ROTATION: 'applyRotation',
|
| 'APPLY_ROTATION'
|
||||||
DISCARD_ROTATION: 'discardRotation',
|
| 'DISCARD_ROTATION'
|
||||||
TOGGLE_TOOLTIPS: 'toggle-tooltips',
|
| 'TOGGLE_TOOLTIPS'
|
||||||
ANNOTATION_POPUP: 'annotationPopup',
|
| 'ANNOTATION_POPUP'
|
||||||
COMPARE_BUTTON: 'compareButton',
|
| 'COMPARE_BUTTON'
|
||||||
CLOSE_COMPARE_BUTTON: 'closeCompareButton',
|
| 'CLOSE_COMPARE_BUTTON';
|
||||||
|
|
||||||
|
export const HeaderElements: Record<HeaderElementType, HeaderElementType> = {
|
||||||
|
SHAPE_TOOL_GROUP_BUTTON: 'SHAPE_TOOL_GROUP_BUTTON',
|
||||||
|
ROTATE_LEFT_BUTTON: 'ROTATE_LEFT_BUTTON',
|
||||||
|
ROTATE_RIGHT_BUTTON: 'ROTATE_RIGHT_BUTTON',
|
||||||
|
APPLY_ROTATION: 'APPLY_ROTATION',
|
||||||
|
DISCARD_ROTATION: 'DISCARD_ROTATION',
|
||||||
|
TOGGLE_TOOLTIPS: 'TOGGLE_TOOLTIPS',
|
||||||
|
ANNOTATION_POPUP: 'ANNOTATION_POPUP',
|
||||||
|
COMPARE_BUTTON: 'COMPARE_BUTTON',
|
||||||
|
CLOSE_COMPARE_BUTTON: 'CLOSE_COMPARE_BUTTON',
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export const TextPopups = {
|
export const TextPopups = {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"ADMIN_CONTACT_NAME": null,
|
"ADMIN_CONTACT_NAME": null,
|
||||||
"ADMIN_CONTACT_URL": null,
|
"ADMIN_CONTACT_URL": null,
|
||||||
"API_URL": "https://dev-05.iqser.cloud/redaction-gateway-v1",
|
"API_URL": "https://dev-08.iqser.cloud/redaction-gateway-v1",
|
||||||
"APP_NAME": "RedactManager",
|
"APP_NAME": "RedactManager",
|
||||||
"AUTO_READ_TIME": 3,
|
"AUTO_READ_TIME": 3,
|
||||||
"BACKEND_APP_VERSION": "4.4.40",
|
"BACKEND_APP_VERSION": "4.4.40",
|
||||||
@ -17,7 +17,7 @@
|
|||||||
"MAX_RETRIES_ON_SERVER_ERROR": 3,
|
"MAX_RETRIES_ON_SERVER_ERROR": 3,
|
||||||
"OAUTH_CLIENT_ID": "redaction",
|
"OAUTH_CLIENT_ID": "redaction",
|
||||||
"OAUTH_IDP_HINT": null,
|
"OAUTH_IDP_HINT": null,
|
||||||
"OAUTH_URL": "https://dev-05.iqser.cloud/auth/realms/redaction",
|
"OAUTH_URL": "https://dev-08.iqser.cloud/auth/realms/redaction",
|
||||||
"RECENT_PERIOD_IN_HOURS": 24,
|
"RECENT_PERIOD_IN_HOURS": 24,
|
||||||
"SELECTION_MODE": "structural",
|
"SELECTION_MODE": "structural",
|
||||||
"MANUAL_BASE_URL": "https://docs.redactmanager.com/preview"
|
"MANUAL_BASE_URL": "https://docs.redactmanager.com/preview"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user