diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts index ba4ee0ed4..650c363fe 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts @@ -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 {