added rotation buttons and logic
This commit is contained in:
Edi Cziszter
Dan Percic
parent
342021753e
commit
0b64c22121
@ -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<number, number>();
|
||||
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<number, number>();
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@ -36,6 +36,11 @@ export class FileManagementService extends GenericService<unknown> {
|
||||
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<Blob>;
|
||||
downloadOriginalFile(dossierId: string, fileId: string, observe?: 'response', indicator?: string): Observable<HttpResponse<Blob>>;
|
||||
@Validate()
|
||||
|
||||
11
apps/red-ui/src/assets/icons/general/rotate-left.svg
Normal file
11
apps/red-ui/src/assets/icons/general/rotate-left.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="rotate-left" fill="#283241" fill-rule="nonzero">
|
||||
<path
|
||||
d="M57.2797203,13.986014 L53.0839161,13.986014 L62.5244755,4.54545455 L57.2797203,-2.84217094e-14 L39.7972028,17.4825175 L57.6293706,35.3146853 L62.5244755,30.4195804 L53.0839161,20.979021 L57.2797203,20.979021 C70.9160839,20.979021 81.7552448,31.8181818 81.7552448,45.4545455 L88.7482517,45.4545455 C88.7482517,28.3216783 74.7622378,13.986014 57.2797203,13.986014 Z M69.7972028,45.4545455 L15.2517483,45.4545455 L15.2517483,100 L69.7972028,100 L69.7972028,45.4545455 Z M60.7062937,90.9090909 L24.3426573,90.9090909 L24.3426573,54.5454545 L60.7062937,54.5454545 L60.7062937,90.9090909 Z"
|
||||
id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 989 B |
11
apps/red-ui/src/assets/icons/general/rotate-right.svg
Normal file
11
apps/red-ui/src/assets/icons/general/rotate-right.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="rotate-right" fill="#283241" fill-rule="nonzero">
|
||||
<path
|
||||
d="M52.2797203,13.986014 L48.0839161,13.986014 L57.5244755,4.54545455 L52.2797203,-4.97379915e-14 L34.7972028,17.4825175 L52.6293706,35.3146853 L57.5244755,30.4195804 L48.0839161,20.979021 L52.2797203,20.979021 C65.9160839,20.979021 76.7552448,31.8181818 76.7552448,45.4545455 L83.7482517,45.4545455 C83.7482517,28.3216783 69.7622378,13.986014 52.2797203,13.986014 Z M64.7972028,45.4545455 L10.2517483,45.4545455 L10.2517483,100 L64.7972028,100 L64.7972028,45.4545455 Z M55.7062937,90.9090909 L19.3426573,90.9090909 L19.3426573,54.5454545 L55.7062937,54.5454545 L55.7062937,90.9090909 Z"
|
||||
id="Combined-Shape" transform="translate(47.000000, 50.000000) scale(-1, 1) translate(-47.000000, -50.000000) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
x
Reference in New Issue
Block a user