From 0b64c221219221af64645ff7fb79a4604f09f120 Mon Sep 17 00:00:00 2001 From: Edi Cziszter Date: Thu, 17 Feb 2022 13:54:01 +0200 Subject: [PATCH] added rotation buttons and logic --- .../pdf-viewer/pdf-viewer.component.ts | 78 +++++++++++++++++++ .../file-management.service.ts | 5 ++ .../src/assets/icons/general/rotate-left.svg | 11 +++ .../src/assets/icons/general/rotate-right.svg | 11 +++ 4 files changed, 105 insertions(+) create mode 100644 apps/red-ui/src/assets/icons/general/rotate-left.svg create mode 100644 apps/red-ui/src/assets/icons/general/rotate-right.svg 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 f6a2a834a..252d8a003 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 @@ -38,10 +38,19 @@ import { ViewModeService } from '../../services/view-mode.service'; import { MultiSelectService } from '../../services/multi-select.service'; import { FilePreviewStateService } from '../../services/file-preview-state.service'; import { tap, withLatestFrom } from 'rxjs/operators'; +import { FileManagementService } from '../../../../../../services/entity-services/file-management.service'; +import { firstValueFrom } from 'rxjs'; import Tools = Core.Tools; import TextTool = Tools.TextTool; import Annotation = Core.Annotations.Annotation; +enum RotationTypes { + LEFT, + RIGHT, +} + +type RotationType = 0 | 1; + const ALLOWED_KEYBOARD_SHORTCUTS: readonly string[] = ['+', '-', 'p', 'r', 'Escape'] as const; const dataElements = { ADD_REDACTION: 'add-redaction', @@ -49,6 +58,8 @@ const dataElements = { ADD_RECTANGLE: 'add-rectangle', ADD_FALSE_POSITIVE: 'add-false-positive', SHAPE_TOOL_GROUP_BUTTON: 'shapeToolGroupButton', + ROTATE_LEFT_BUTTON: 'rotateLeftButton', + ROTATE_RIGHT_BUTTON: 'rotateRightButton', RECTANGLE_TOOL_DIVIDER: 'rectangleToolDivider', TOGGLE_TOOLTIPS: 'toggle-tooltips', TOGGLE_TOOLTIPS_DIVIDER: 'toggleTooltipsDivider', @@ -80,6 +91,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha documentViewer: Core.DocumentViewer; annotationManager: Core.AnnotationManager; utils: PdfViewerUtils; + rotations = new Map(); private _selectedText = ''; constructor( @@ -94,6 +106,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private readonly _annotationActionsService: AnnotationActionsService, private readonly _configService: ConfigService, private readonly _loadingService: LoadingService, + private readonly _fileManagementService: FileManagementService, readonly stateService: FilePreviewStateService, readonly viewModeService: ViewModeService, readonly multiSelectService: MultiSelectService, @@ -401,8 +414,66 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha img: this._convertPath('/assets/icons/general/rectangle.svg'), title: 'annotation.rectangle', }, + { + type: 'divider', + dataElement: dataElements.RECTANGLE_TOOL_DIVIDER, + }, + { + type: 'actionButton', + element: 'tooltips', + dataElement: dataElements.ROTATE_LEFT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-left.svg'), + onClick: () => { + this._addRotation(this.utils.currentPage, RotationTypes.LEFT); + }, + }, + { + type: 'actionButton', + element: 'tooltips', + dataElement: dataElements.ROTATE_RIGHT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-right.svg'), + onClick: () => { + this._addRotation(this.utils.currentPage, RotationTypes.RIGHT); + }, + }, ]; + const rotationValues = Array.from(this.rotations.values()); + + if (rotationValues.length > 0 && rotationValues.find(v => v !== 0)) { + headerItems.push( + { + type: 'actionButton', + element: 'tooltips', + dataElement: dataElements.ROTATE_RIGHT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-right.svg'), + onClick: async () => { + await firstValueFrom( + this._fileManagementService.rotatePage( + { pages: this.rotations }, + this.dossier.dossierId, + this.stateService.fileId, + ), + ); + }, + }, + { + type: 'actionButton', + element: 'tooltips', + dataElement: dataElements.ROTATE_RIGHT_BUTTON, + img: this._convertPath('/assets/icons/general/rotate-right.svg'), + onClick: () => { + this.rotations = new Map(); + }, + }, + ); + } + + headerItems.push({ + type: 'divider', + dataElement: dataElements.RECTANGLE_TOOL_DIVIDER, + }); + this.instance.UI.setHeaderItems(header => { const originalHeaderItems = header.getItems(); originalHeaderItems.splice(8, 0, ...headerItems); @@ -449,6 +520,13 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha }); } + private _addRotation(pageNumber: number, rotationType: RotationType): void { + const sum = rotationType === RotationTypes.LEFT ? 270 : 90; + const pageRotation = this.rotations.get(pageNumber); + + pageRotation ? this.rotations.set(pageNumber, (pageRotation + sum) % 360) : this.rotations.set(pageNumber, sum); + } + private _configureAnnotationSpecificActions(viewerAnnotations: Annotation[]) { if (!this.canPerformActions) { return; diff --git a/apps/red-ui/src/app/services/entity-services/file-management.service.ts b/apps/red-ui/src/app/services/entity-services/file-management.service.ts index a2187df9c..4b98589e4 100644 --- a/apps/red-ui/src/app/services/entity-services/file-management.service.ts +++ b/apps/red-ui/src/app/services/entity-services/file-management.service.ts @@ -36,6 +36,11 @@ export class FileManagementService extends GenericService { return this._post(body, `delete/restore/${dossierId}`).pipe(switchMap(() => this._filesService.loadAll(dossierId))); } + @Validate() + rotatePage(@RequiredParam() body: unknown, @RequiredParam() dossierId: string, @RequiredParam() fileId: string) { + return this._post(body, `rotate/${dossierId}/${fileId}`); + } + downloadOriginalFile(dossierId: string, fileId: string, observe?: 'body', indicator?: string): Observable; downloadOriginalFile(dossierId: string, fileId: string, observe?: 'response', indicator?: string): Observable>; @Validate() diff --git a/apps/red-ui/src/assets/icons/general/rotate-left.svg b/apps/red-ui/src/assets/icons/general/rotate-left.svg new file mode 100644 index 000000000..eadffe431 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/rotate-left.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/rotate-right.svg b/apps/red-ui/src/assets/icons/general/rotate-right.svg new file mode 100644 index 000000000..443557c05 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/rotate-right.svg @@ -0,0 +1,11 @@ + + + + + + + +