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

Pull request #147: Bugfix/RED-1240 rect select after drawing

Browse Source 
Merge in RED/ui from bugfix/RED-1240-rect-select-after-drawing to master

* commit '9732fa3e314220af92c1d39692a083505e936418':
  pdf-viewer little refactor
  auto select rectangle after drawing
  fix undefined errors when adding a new rectangle annotation
This commit is contained in:
Timo Bejan 2021-04-13 15:04:43 +02:00
commit 437b50a48e
2 changed files with 24 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts
View File

@ -64,7 +64,7 @@ export class FileWorkloadComponent {
} }
public annotationIsSelected(annotation: AnnotationWrapper) { public annotationIsSelected(annotation: AnnotationWrapper) {
return this.selectedAnnotations?.find((a) => a.id === annotation.id); return this.selectedAnnotations?.find((a) => a?.id === annotation.id);
} }
public logAnnotation(annotation: AnnotationWrapper) { public logAnnotation(annotation: AnnotationWrapper) {
@ -140,7 +140,7 @@ export class FileWorkloadComponent {
if (!this.selectedAnnotations || this.selectedAnnotations.length === 0) { if (!this.selectedAnnotations || this.selectedAnnotations.length === 0) {
return; return;
} }
const elements: any[] = this._annotationsElement.nativeElement.querySelectorAll(`div[annotation-id="${this.firstSelectedAnnotation.id}"].active`); const elements: any[] = this._annotationsElement.nativeElement.querySelectorAll(`div[annotation-id="${this.firstSelectedAnnotation?.id}"].active`);
FileWorkloadComponent._scrollToFirstElement(elements); FileWorkloadComponent._scrollToFirstElement(elements);
} }

57
apps/red-ui/src/app/modules/projects/components/pdf-viewer/pdf-viewer.component.ts
View File

@ -1,27 +1,11 @@
import { import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
NgZone,
OnChanges,
OnInit,
Output,
SimpleChanges,
ViewChild
} from '@angular/core';
import { AppConfigService } from '../../../app-config/app-config.service';
import { ManualRedactionEntry, Rectangle } from '@redaction/red-ui-http'; import { ManualRedactionEntry, Rectangle } from '@redaction/red-ui-http';
import WebViewer, { Annotations, Tools, WebViewerInstance } from '@pdftron/webviewer'; import WebViewer, { Annotations, Tools, WebViewerInstance } from '@pdftron/webviewer';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { ManualRedactionEntryWrapper } from '../../../../models/file/manual-redaction-entry.wrapper'; import { ManualRedactionEntryWrapper } from '../../../../models/file/manual-redaction-entry.wrapper';
import { AppStateService } from '../../../../state/app-state.service';
import { AnnotationWrapper } from '../../../../models/file/annotation.wrapper'; import { AnnotationWrapper } from '../../../../models/file/annotation.wrapper';
import { ManualAnnotationService } from '../../services/manual-annotation.service'; import { ManualAnnotationService } from '../../services/manual-annotation.service';
import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper'; import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper';
import { KeycloakService } from 'keycloak-angular';
import { environment } from '../../../../../environments/environment'; import { environment } from '../../../../../environments/environment';
import { AnnotationDrawService } from '../../services/annotation-draw.service'; import { AnnotationDrawService } from '../../services/annotation-draw.service';
import { AnnotationActionsService } from '../../services/annotation-actions.service'; import { AnnotationActionsService } from '../../services/annotation-actions.service';
@ -36,6 +20,8 @@ import Tool = Tools.Tool;
}) })
export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges { export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
private _selectedText = ''; private _selectedText = '';
private _defaultTool: Tool;
private readonly _allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape'];
@Input() fileData: Blob; @Input() fileData: Blob;
@Input() fileStatus: FileStatusWrapper; @Input() fileStatus: FileStatusWrapper;
@ -54,20 +40,13 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
@ViewChild('viewer', { static: true }) viewer: ElementRef; @ViewChild('viewer', { static: true }) viewer: ElementRef;
instance: WebViewerInstance; instance: WebViewerInstance;
private readonly _allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape'];
private _defaultTool: Tool;
constructor( constructor(
private readonly kc: KeycloakService,
private readonly _appStateService: AppStateService,
private readonly _translateService: TranslateService, private readonly _translateService: TranslateService,
private readonly _appConfigService: AppConfigService,
private readonly _manualAnnotationService: ManualAnnotationService, private readonly _manualAnnotationService: ManualAnnotationService,
private readonly _ngZone: NgZone, private readonly _ngZone: NgZone,
private readonly _userPreferenceService: UserPreferenceService, private readonly _userPreferenceService: UserPreferenceService,
private readonly _annotationDrawService: AnnotationDrawService, private readonly _annotationDrawService: AnnotationDrawService,
private readonly _annotationActionsService: AnnotationActionsService, private readonly _annotationActionsService: AnnotationActionsService
private readonly _changeDetectorRef: ChangeDetectorRef
) {} ) {}
ngOnInit() { ngOnInit() {
@ -103,22 +82,30 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
this._disableHotkeys(); this._disableHotkeys();
this._configureTextPopup(); this._configureTextPopup();
instance.annotManager.on('annotationSelected', (annotationList, action) => { instance.annotManager.on('annotationSelected', (annotations, action) => {
if (action === 'deselected') { if (action === 'deselected') {
this.annotationSelected.emit([]); this.annotationSelected.emit([]);
this._toggleRectangleAnnotationAction(true); this._toggleRectangleAnnotationAction(true);
} else { } else {
this._configureAnnotationSpecificActions(annotationList); this._configureAnnotationSpecificActions(annotations);
this._toggleRectangleAnnotationAction(annotationList.length === 1 && annotationList[0].ReadOnly); this._toggleRectangleAnnotationAction(annotations.length === 1 && annotations[0].ReadOnly);
this.annotationSelected.emit(annotationList.map((a) => a.Id)); this.annotationSelected.emit(annotations.map((a) => a.Id));
} }
}); });
instance.docViewer.on('pageNumberUpdated', (p) => { instance.annotManager.on('annotationChanged', (annotations) => {
// when a rectangle is drawn, it returns one annotation with tool name 'AnnotationCreateRectangle;
// this will auto select rectangle after drawing
if (annotations.length === 1 && annotations[0].ToolName === 'AnnotationCreateRectangle') {
instance.annotManager.selectAnnotations(annotations);
}
});
instance.docViewer.on('pageNumberUpdated', (pageNumber) => {
if (this.shouldDeselectAnnotationsOnPageChange) { if (this.shouldDeselectAnnotationsOnPageChange) {
this.instance.annotManager.deselectAllAnnotations(); this.instance.annotManager.deselectAllAnnotations();
} }
this._ngZone.run(() => this.pageChanged.emit(p)); this._ngZone.run(() => this.pageChanged.emit(pageNumber));
}); });
instance.docViewer.on('documentLoaded', this._documentLoaded); instance.docViewer.on('documentLoaded', this._documentLoaded);
@ -141,7 +128,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
} }
}); });
instance.docViewer.on('textSelected', (quads, selectedText, pageNumber) => { instance.docViewer.on('textSelected', (quads, selectedText) => {
this._selectedText = selectedText; this._selectedText = selectedText;
if (selectedText.length > 2 && this.canPerformActions) { if (selectedText.length > 2 && this.canPerformActions) {
this.instance.enableElements(['add-dictionary', 'add-false-positive']); this.instance.enableElements(['add-dictionary', 'add-false-positive']);
@ -212,7 +199,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
}); });
}); });
this.instance.docViewer.getTool('AnnotationCreateRectangle').setStyles((currentStyle) => ({ this.instance.docViewer.getTool('AnnotationCreateRectangle').setStyles(() => ({
StrokeThickness: 2, StrokeThickness: 2,
StrokeColor: this._annotationDrawService.getColor(this.instance, 'manual'), StrokeColor: this._annotationDrawService.getColor(this.instance, 'manual'),
FillColor: this._annotationDrawService.getColor(this.instance, 'manual'), FillColor: this._annotationDrawService.getColor(this.instance, 'manual'),
@ -368,7 +355,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
for (const key of Object.keys(quads)) { for (const key of Object.keys(quads)) {
for (const quad of quads[key]) { for (const quad of quads[key]) {
const page = parseInt(key, 10); const page = parseInt(key, 10);
entry.positions.push(this.toPosition(page, convertQuads ? this._translateQuads(page, quad) : quad)); entry.positions.push(this._toPosition(page, convertQuads ? this._translateQuads(page, quad) : quad));
} }
} }
entry.value = text; entry.value = text;
@ -380,7 +367,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
return translateQuads(page, rotation, quads); return translateQuads(page, rotation, quads);
} }
private toPosition(page: number, selectedQuad: any): Rectangle { private _toPosition(page: number, selectedQuad: any): Rectangle {
const pageHeight = this.instance.docViewer.getPageHeight(page); const pageHeight = this.instance.docViewer.getPageHeight(page);
const height = selectedQuad.y2 - selectedQuad.y4; const height = selectedQuad.y2 - selectedQuad.y4;
return { return {