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

little cleanup

Browse Source
This commit is contained in:
Dan Percic 2022-03-04 21:25:05 +02:00
parent a80f54cdbb
commit e7806dda94
1 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts
View File

@ -27,7 +27,7 @@ import { AnnotationActionsService } from '../../services/annotation-actions.serv
import { UserPreferenceService } from '@services/user-preference.service';
import { BASE_HREF } from '../../../../../../tokens';
import { ConfigService } from '@services/config.service';
import { AutoUnsubscribe, ConfirmationDialogInput, LoadingService, log } from '@iqser/common-ui';
import { AutoUnsubscribe, ConfirmationDialogInput, LoadingService } from '@iqser/common-ui';
import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
import { loadCompareDocumentWrapper } from '../../../../utils/compare-mode.utils';
import { PdfViewerUtils } from '../../../../utils/pdf-viewer.utils';
@ -45,11 +45,7 @@ import TextTool = Tools.TextTool;
import Annotation = Core.Annotations.Annotation;
const ALLOWED_KEYBOARD_SHORTCUTS: readonly string[] = ['+', '-', 'p', 'r', 'Escape'] as const;
const elements = {
ADD_REDACTION: 'add-redaction',
ADD_DICTIONARY: 'add-dictionary',
ADD_RECTANGLE: 'add-rectangle',
ADD_FALSE_POSITIVE: 'add-false-positive',
const headerElements = {
SHAPE_TOOL_GROUP_BUTTON: 'shapeToolGroupButton',
ROTATE_LEFT_BUTTON: 'rotateLeftButton',
ROTATE_RIGHT_BUTTON: 'rotateRightButton',
@ -61,6 +57,13 @@ const elements = {
CLOSE_COMPARE_BUTTON: 'closeCompareButton',
} as const;
const textPopups = {
ADD_REDACTION: 'add-redaction',
ADD_DICTIONARY: 'add-dictionary',
ADD_RECTANGLE: 'add-rectangle',
ADD_FALSE_POSITIVE: 'add-false-positive',
} as const;
function getDivider(hiddenOn?: readonly ('desktop' | 'mobile' | 'tablet')[]) {
return {
type: 'divider',
@ -226,8 +229,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
const filename = (await this.stateService.file).filename ?? 'document.pdf';
this.instance.UI.loadDocument(currentDocument, { filename });
this.instance.UI.disableElements([elements.CLOSE_COMPARE_BUTTON]);
this.instance.UI.enableElements([elements.COMPARE_BUTTON]);
this.instance.UI.disableElements([headerElements.CLOSE_COMPARE_BUTTON]);
this.instance.UI.enableElements([headerElements.COMPARE_BUTTON]);
this.utils.navigateToPage(1);
}
@ -248,7 +251,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
this.utils = new PdfViewerUtils(this.instance, this.viewModeService);
this._setSelectionMode();
await this._configureElements();
this._configureElements();
this.utils.disableHotkeys();
await this._configureTextPopup();
@ -302,7 +305,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
this.documentViewer.addEventListener('textSelected', async (quads, selectedText, pageNumber: number) => {
this._selectedText = selectedText;
const textActions = [elements.ADD_DICTIONARY, elements.ADD_FALSE_POSITIVE];
const textActions = [textPopups.ADD_DICTIONARY, textPopups.ADD_FALSE_POSITIVE];
const file = await this.stateService.file;
@ -350,13 +353,13 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
private _toggleRectangleAnnotationAction(readonly = false) {
if (!readonly) {
this.instance.UI.enableElements([elements.ADD_RECTANGLE]);
this.instance.UI.enableElements([textPopups.ADD_RECTANGLE]);
} else {
this.instance.UI.disableElements([elements.ADD_RECTANGLE]);
this.instance.UI.disableElements([textPopups.ADD_RECTANGLE]);
}
}
private async _configureElements() {
private _configureElements() {
this.instance.UI.disableElements([
'pageNavOverlay',
'menuButton',
@ -382,7 +385,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
const applyRotation: IHeaderElement = {
type: 'customElement',
dataElement: elements.APPLY_ROTATION,
dataElement: headerElements.APPLY_ROTATION,
render: () => {
const paragraph = document.createElement('p');
paragraph.innerText = 'APPLY';
@ -402,7 +405,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
};
const discardRotation: IHeaderElement = {
type: 'customElement',
dataElement: elements.DISCARD_ROTATION,
dataElement: headerElements.DISCARD_ROTATION,
render: () => {
const paragraph = document.createElement('p');
paragraph.innerText = 'DISCARD';
@ -423,17 +426,38 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
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();
},
},
divider,
{
type: 'actionButton',
element: 'tooltips',
dataElement: elements.TOGGLE_TOOLTIPS,
dataElement: headerElements.TOGGLE_TOOLTIPS,
img: this._toggleTooltipsIcon,
title: this._toggleTooltipsBtnTitle,
onClick: async () => {
await this._userPreferenceService.toggleFilePreviewTooltipsPreference();
this._updateTooltipsVisibility();
this.instance.UI.updateElement(elements.TOGGLE_TOOLTIPS, {
this.instance.UI.updateElement(headerElements.TOGGLE_TOOLTIPS, {
title: this._toggleTooltipsBtnTitle,
img: this._toggleTooltipsIcon,
});
@ -443,7 +467,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
{
type: 'toolGroupButton',
toolGroup: 'rectangleTools',
dataElement: elements.SHAPE_TOOL_GROUP_BUTTON,
dataElement: headerElements.SHAPE_TOOL_GROUP_BUTTON,
img: this._convertPath('/assets/icons/general/rectangle.svg'),
title: 'annotation.rectangle',
},
@ -451,7 +475,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
{
type: 'actionButton',
element: 'tooltips',
dataElement: elements.ROTATE_LEFT_BUTTON,
dataElement: headerElements.ROTATE_LEFT_BUTTON,
img: this._convertPath('/assets/icons/general/rotate-left.svg'),
onClick: () => {
this._pageRotationService.addRotation(this.utils.currentPage, RotationTypes.LEFT);
@ -462,7 +486,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
{
type: 'actionButton',
element: 'tooltips',
dataElement: elements.ROTATE_RIGHT_BUTTON,
dataElement: headerElements.ROTATE_RIGHT_BUTTON,
img: this._convertPath('/assets/icons/general/rotate-right.svg'),
onClick: () => {
this._pageRotationService.addRotation(this.utils.currentPage, RotationTypes.RIGHT);
@ -476,37 +500,14 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
];
this.instance.UI.setHeaderItems(header => {
const originalHeaderItems = header.getItems() as IHeaderElement[];
originalHeaderItems.splice(8, 0, ...headerItems);
const compareHeaderItems: IHeaderElement[] = [
{
type: 'actionButton',
element: 'compare',
dataElement: elements.COMPARE_BUTTON,
img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'),
title: 'Compare',
onClick: () => {
this.compareFileInput.nativeElement.click();
},
},
{
type: 'actionButton',
element: 'closeCompare',
dataElement: elements.CLOSE_COMPARE_BUTTON,
img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'),
title: 'Leave Compare Mode',
onClick: async () => {
await this.closeCompareMode();
},
},
divider,
];
originalHeaderItems.splice(9, 0, ...compareHeaderItems);
header.getItems().splice(8, 0, ...headerItems);
});
this.instance.UI.disableElements([elements.CLOSE_COMPARE_BUTTON, elements.APPLY_ROTATION, elements.DISCARD_ROTATION]);
this.instance.UI.disableElements([
headerElements.CLOSE_COMPARE_BUTTON,
headerElements.APPLY_ROTATION,
headerElements.DISCARD_ROTATION,
]);
const dossierTemplateId = this.dossier.dossierTemplateId;
@ -519,7 +520,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
}
private _showRotationConfirmationButtons() {
const rotationElements = [elements.APPLY_ROTATION, elements.DISCARD_ROTATION];
const rotationElements = [headerElements.APPLY_ROTATION, headerElements.DISCARD_ROTATION];
if (this._pageRotationService.hasRotations()) {
this.instance.UI.enableElements(rotationElements);
@ -582,7 +583,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
this.instance.UI.annotationPopup.add([
{
type: 'actionButton',
dataElement: elements.ADD_RECTANGLE,
dataElement: textPopups.ADD_RECTANGLE,
img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'),
title: this.#getTitle(ManualRedactionEntryTypes.REDACTION),
onClick: () => this._addRectangleManualRedaction(),
@ -602,7 +603,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
}
private _cleanUpSelectionAndButtonState() {
const rectangleElements = [elements.SHAPE_TOOL_GROUP_BUTTON];
const rectangleElements = [headerElements.SHAPE_TOOL_GROUP_BUTTON];
this.utils.deselectAllAnnotations();
this.instance.UI.disableElements(rectangleElements);
this.instance.UI.enableElements(rectangleElements);
@ -627,35 +628,35 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
setTimeout(() => this.instance.UI.searchTextFull(text, searchOptions), 250);
},
};
const textPopups: IHeaderElement[] = [searchButton];
const popups: IHeaderElement[] = [searchButton];
// Adding directly to the false-positive dict is only available in dev-mode
if (this._userPreferenceService.areDevFeaturesEnabled) {
textPopups.push({
popups.push({
type: 'actionButton',
dataElement: 'add-false-positive',
dataElement: textPopups.ADD_FALSE_POSITIVE,
img: this._convertPath('/assets/icons/general/pdftron-action-false-positive.svg'),
title: this.#getTitle(ManualRedactionEntryTypes.FALSE_POSITIVE),
onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.FALSE_POSITIVE),
});
}
textPopups.push({
popups.push({
type: 'actionButton',
dataElement: elements.ADD_REDACTION,
dataElement: textPopups.ADD_REDACTION,
img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'),
title: this.#getTitle(ManualRedactionEntryTypes.REDACTION),
onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.REDACTION),
});
textPopups.push({
popups.push({
type: 'actionButton',
dataElement: elements.ADD_DICTIONARY,
dataElement: textPopups.ADD_DICTIONARY,
img: this._convertPath('/assets/icons/general/pdftron-action-add-dict.svg'),
title: this.#getTitle(ManualRedactionEntryTypes.DICTIONARY),
onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.DICTIONARY),
});
this.instance.UI.textPopup.add(textPopups);
this.instance.UI.textPopup.add(popups);
return this._handleCustomActions();
}
@ -674,14 +675,13 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
private async _handleCustomActions() {
this.instance.UI.setToolMode('AnnotationEdit');
const elementsToToggle = [
elements.ADD_REDACTION,
elements.ADD_RECTANGLE,
'add-false-positive',
elements.SHAPE_TOOL_GROUP_BUTTON,
'rectangleToolDivider',
elements.ANNOTATION_POPUP,
elements.ROTATE_LEFT_BUTTON,
elements.ROTATE_RIGHT_BUTTON,
textPopups.ADD_REDACTION,
textPopups.ADD_RECTANGLE,
textPopups.ADD_FALSE_POSITIVE,
headerElements.SHAPE_TOOL_GROUP_BUTTON,
headerElements.ANNOTATION_POPUP,
headerElements.ROTATE_LEFT_BUTTON,
headerElements.ROTATE_RIGHT_BUTTON,
];
const isCurrentPageExcluded = this.utils.isCurrentPageExcluded(await this.stateService.file);
@ -695,20 +695,20 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha
this.instance.UI.enableElements(elementsToToggle);
if (this._selectedText.length > 2) {
this.instance.UI.enableElements([elements.ADD_DICTIONARY, elements.ADD_FALSE_POSITIVE]);
this.instance.UI.enableElements([textPopups.ADD_DICTIONARY, textPopups.ADD_FALSE_POSITIVE]);
}
return;
}
let elementsToDisable = [...elementsToToggle, elements.ADD_RECTANGLE];
let elementsToDisable = [...elementsToToggle, textPopups.ADD_RECTANGLE];
if (isCurrentPageExcluded) {
const allowedActionsWhenPageExcluded: string[] = [
elements.ANNOTATION_POPUP,
elements.ADD_RECTANGLE,
elements.ADD_REDACTION,
elements.SHAPE_TOOL_GROUP_BUTTON,
headerElements.ANNOTATION_POPUP,
textPopups.ADD_RECTANGLE,
textPopups.ADD_REDACTION,
headerElements.SHAPE_TOOL_GROUP_BUTTON,
];
elementsToDisable = elementsToDisable.filter(element => !allowedActionsWhenPageExcluded.includes(element));
} else {