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