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

Sort to selected annotation in sidebar + fixes

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-10 03:14:48 +03:00
parent e9b5f0d10e
commit f7bcdf8bc6
4 changed files with 54 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -48,9 +48,10 @@
Info
</div>
</div>
<div class="tab-content" *ngIf="selectedTab === 'ANNOTATIONS'">
<div class="tab-content" #annotationsContainer *ngIf="selectedTab === 'ANNOTATIONS'">
<div *ngFor="let annotation of annotations"
class="annotation" (click)="selectAnnotation(annotation)"
class="annotation" [id]="'ann-' + annotation.Id"
(click)="selectAnnotation(annotation)"
[ngClass]="{ active: selectedAnnotation === annotation }">
<div>{{annotation.Id}}</div>
<div>Page {{annotation.getPageNumber()}}</div>

66
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -1,14 +1,15 @@
import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {FileUploadControllerService, ProjectControllerService, StatusControllerService} from '@redaction/red-ui-http';
import {TranslateService} from '@ngx-translate/core';
import {NotificationService} from '../../../notification/notification.service';
import {MatDialog} from '@angular/material/dialog';
import {AppStateService} from '../../../state/app-state.service';
import {FileDetailsDialogComponent} from './file-details-dialog/file-details-dialog.component';
import {ViewerSyncService} from '../service/viwer-sync.service';
import {Annotations} from "@pdftron/webviewer";
import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FileUploadControllerService, ProjectControllerService, StatusControllerService } from '@redaction/red-ui-http';
import { TranslateService } from '@ngx-translate/core';
import { NotificationService } from '../../../notification/notification.service';
import { MatDialog } from '@angular/material/dialog';
import { AppStateService } from '../../../state/app-state.service';
import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component';
import { ViewerSyncService } from '../service/viwer-sync.service';
import { Annotations } from '@pdftron/webviewer';
import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
import { AnnotationUtils } from '../../../utils/annotation-utils';
@Component({
selector: 'redaction-file-preview-screen',
@ -16,17 +17,20 @@ import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
styleUrls: ['./file-preview-screen.component.scss']
})
export class FilePreviewScreenComponent implements OnInit {
projectId: string;
fileId: string;
public annotations: Annotations.Annotation[] = [];
public selectedTab: 'ANNOTATIONS' | 'INFO' = 'ANNOTATIONS';
private _readyViewers: string[] = [];
public selectedAnnotation: Annotations.Annotation;
private _clickedAnnotationInSidebar = false;
private projectId: string;
@ViewChild(PdfViewerComponent)
private _viewerComponent: PdfViewerComponent;
@ViewChild('annotationsContainer')
private _annotationsContainer: ElementRef;
public fileId: string;
public annotations: Annotations.Annotation[] = [];
public selectedTab: 'ANNOTATIONS' | 'INFO' = 'ANNOTATIONS';
public selectedAnnotation: Annotations.Annotation;
constructor(
public readonly appStateService: AppStateService,
@ -84,18 +88,44 @@ export class FilePreviewScreenComponent implements OnInit {
handleAnnotationsAdded(annotations: Annotations.Annotation[]) {
this._changeDetectorRef.detectChanges();
for(const annotation of annotations){
if(annotation.Id.indexOf(':')>=0){
for (const annotation of annotations) {
if (annotation.Id.indexOf(':') >= 0) {
this.annotations.push(annotation);
}
}
this.annotations = AnnotationUtils.sortAnnotations(this.annotations);
}
public handleAnnotationSelected(annotation: Annotations.Annotation) {
this.selectedAnnotation = annotation;
this.scrollToAnnotation(annotation);
}
public selectAnnotation(annotation: Annotations.Annotation) {
this._clickedAnnotationInSidebar = true;
setTimeout(() => {
this._clickedAnnotationInSidebar = false;
}, 100);
this._viewerComponent.selectAnnotation(annotation);
}
private scrollToAnnotation(annotation: Annotations.Annotation) {
if (!annotation || this._clickedAnnotationInSidebar) {
return;
}
const el = document.getElementById('ann-' + annotation.Id);
if (!el) {
console.error(`Annotation with id ${annotation.Id} does not exist!`);
return;
}
const { top, height } = el.getBoundingClientRect();
const headerHeight = window.innerHeight - this._annotationsContainer.nativeElement.getBoundingClientRect().height;
if (top < headerHeight || top > window.innerHeight - height - 30) {
const scrollTop = this._annotationsContainer.nativeElement.scrollTop - 30;
this._annotationsContainer.nativeElement.scroll({ top: scrollTop + top - headerHeight, behavior: 'smooth' });
}
}
}

2
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -85,7 +85,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
this._configureHeader();
instance.annotManager.on('annotationChanged', (annotations, action) => {
if(action === 'add'){
this.annotationsAdded.emit(AnnotationUtils.sortAnnotations(annotations));
this.annotationsAdded.emit(annotations);
}
});

4
apps/red-ui/src/app/utils/annotation-utils.ts
View File

@ -1,7 +1,7 @@
import { Annotations } from '@pdftron/webviewer';
export class AnnotationUtils {
public static sortAnnotations(annotations: Annotations.Annotation[]): Annotations.Annotation[] {
public static sortAnnotations(annotations: Annotations.Annotation[]): Annotations.Annotation[] {
return annotations.sort((ann1, ann2) => {
if (ann1.getPageNumber() === ann2.getPageNumber()) {
if (ann1.getY() === ann2.getY()) {
@ -13,6 +13,6 @@ export class AnnotationUtils {
return ann1.getY() < ann2.getY() ? -1 : 1;
}
return ann1.getPageNumber() < ann2.getPageNumber() ? -1 : 1;
})
});
}
}