From 51882007b3f23727a5910c1f14ddde3a69e3dcba Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Tue, 21 Jun 2022 13:28:56 +0300 Subject: [PATCH] RED-3837: fix annotation redraw --- .../file-preview-screen.component.ts | 29 +++++++++++-------- .../services/pdf-proxy.service.ts | 20 +++++++------ .../pdf-viewer/services/pdf-viewer.service.ts | 6 ++++ 3 files changed, 34 insertions(+), 21 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts index dfc07a124..95655f218 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts @@ -9,7 +9,6 @@ import { Debounce, ErrorService, FilterService, - List, LoadingService, NestedFilter, OnAttach, @@ -363,10 +362,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni }), ); - const currentPageAnnotations$ = combineLatest([this.pdf.currentPage$, this._fileDataService.annotations$]).pipe( - map(([, annotations]) => annotations), - startWith([] as List), + const annotations$ = this._fileDataService.annotations$.pipe( + startWith([] as AnnotationWrapper[]), pairwise(), + tap(annotations => this.deleteAnnotations(...annotations)), + ); + const currentPageAnnotations$ = combineLatest([this.pdf.currentPage$, annotations$]).pipe( + map(([, annotations]) => annotations), map(([oldAnnotations, newAnnotations]) => { const page = this.pdf.currentPage; return [oldAnnotations.filter(byPage(page)), newAnnotations.filter(byPage(page))] as const; @@ -378,7 +380,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni filter(([, loaded]) => loaded), tap(() => (start = new Date().getTime())), map(([annotations]) => annotations), - tap(annotations => this.deleteAnnotations(...annotations)), switchMap(annotations => this.drawChangedAnnotations(...annotations)), tap(([, newAnnotations]) => this.#highlightSelectedAnnotations(newAnnotations)), tap(() => this._logger.info(`[ANNOTATIONS] Processing time: ${new Date().getTime() - start}`)), @@ -387,26 +388,30 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni } deleteAnnotations(oldAnnotations: AnnotationWrapper[], newAnnotations: AnnotationWrapper[]) { - const annotationsToDelete = oldAnnotations.filter(oldAnnotation => !newAnnotations.some(byId(oldAnnotation.id))); + const annotationsToDelete = oldAnnotations.filter(oldAnnotation => { + const newAnnotation = newAnnotations.find(byId(oldAnnotation.id)); + if (!newAnnotation) { + return true; + } + return JSON.stringify(oldAnnotation) !== JSON.stringify(newAnnotation); + }); if (annotationsToDelete.length === 0) { return; } - const toDelete = annotationsToDelete.filter(byPage(this.pdf.currentPage)); - - this._logger.info('[ANNOTATIONS] To delete: ', toDelete); - this._annotationManager.delete(toDelete); + this._logger.info('[ANNOTATIONS] To delete: ', annotationsToDelete); + this._annotationManager.delete(annotationsToDelete); } async drawChangedAnnotations(oldAnnotations: AnnotationWrapper[], newAnnotations: AnnotationWrapper[]) { const annotationsToDraw = this.#getAnnotationsToDraw(oldAnnotations, newAnnotations); + this._logger.info('[ANNOTATIONS] To draw: ', annotationsToDraw); if (annotationsToDraw.length === 0) { return [oldAnnotations, newAnnotations]; } - this._logger.info('[ANNOTATIONS] To draw: ', annotationsToDraw); this._annotationManager.delete(annotationsToDraw); await this._cleanupAndRedrawAnnotations(annotationsToDraw); return [oldAnnotations, newAnnotations]; @@ -468,7 +473,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni #findAnnotationsToDraw(newAnnotations: AnnotationWrapper[], oldAnnotations: AnnotationWrapper[]) { return newAnnotations.filter(newAnnotation => { - const oldAnnotation = oldAnnotations.find(annotation => annotation.id === newAnnotation.id); + const oldAnnotation = oldAnnotations.find(byId(newAnnotation.id)); if (!oldAnnotation) { return true; } diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts index 8857208d6..5b4926cfe 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts @@ -7,7 +7,6 @@ import { ManualRedactionEntryTypes, ManualRedactionEntryWrapper, } from '../../../models/file/manual-redaction-entry.wrapper'; -import { AnnotationWrapper } from '../../../models/file/annotation.wrapper'; import { AnnotationDrawService } from '../../pdf-viewer/services/annotation-draw.service'; import { AnnotationActionsService } from './annotation-actions.service'; import { UserPreferenceService } from '../../../services/user-preference.service'; @@ -29,6 +28,7 @@ import { combineLatest, Observable, Subject } from 'rxjs'; import { ViewModeService } from './view-mode.service'; import { PermissionsService } from '../../../services/permissions.service'; import { AnnotationsListingService } from './annotations-listing.service'; +import { byPage } from '../../../utils'; import Annotation = Core.Annotations.Annotation; import Quad = Core.Math.Quad; @@ -38,6 +38,7 @@ export class PdfProxyService { readonly manualAnnotationRequested$ = new Subject(); readonly pageChanged$ = this._pdf.pageChanged$.pipe( tap(() => this._handleCustomActions()), + tap(() => this._pdf.resetAnnotationActions()), shareDistinctLast(), ); canPerformActions = true; @@ -107,18 +108,17 @@ export class PdfProxyService { #deactivateMultiSelect() { this._multiSelectService.deactivate(); this._annotationManager.deselect(); - console.log('deactivated multi select'); this.handleAnnotationSelected([]); } #processSelectedAnnotations(annotations: Annotation[], action) { - console.log('processSelectedAnnotations', annotations, action); let nextAnnotations: Annotation[]; if (action === 'deselected') { // Remove deselected annotations from selected list nextAnnotations = this._annotationManager.selected.filter(ann => !annotations.some(a => a.Id === ann.Id)); this._pdf.disable(TextPopups.ADD_RECTANGLE); + this.#configureAnnotationSpecificActions(nextAnnotations); return nextAnnotations.map(ann => ann.Id); } else if (!this._multiSelectService.isEnabled) { // Only choose the last selected annotation, to bypass viewer multi select @@ -149,14 +149,16 @@ export class PdfProxyService { #configureAnnotationSpecificActions(viewerAnnotations: Annotation[]) { if (!this.canPerformActions) { - if (this.instance.UI.annotationPopup.getItems().length) { - this.instance.UI.annotationPopup.update([]); - } - return; + return this._pdf.resetAnnotationActions(); } - const annotationWrappers: AnnotationWrapper[] = viewerAnnotations.map(va => this._fileDataService.find(va.Id)).filter(va => !!va); - this.instance.UI.annotationPopup.update([]); + const annotationWrappers = viewerAnnotations.map(va => this._fileDataService.find(va.Id)).filter(va => !!va); + this._pdf.resetAnnotationActions(); + const currentPageAnnotations = annotationWrappers.filter(byPage(this._pdf.currentPage)); + + if (currentPageAnnotations.length === 0) { + return this._pdf.resetAnnotationActions(); + } if (annotationWrappers.length === 0) { this._configureRectangleAnnotationPopup(viewerAnnotations[0]); diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts index b021c4f8e..8f4e2d850 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts @@ -104,6 +104,12 @@ export class PdfViewer { return page$.pipe(map(page => this.#adjustPage(page))); } + resetAnnotationActions() { + if (this.#instance.UI.annotationPopup.getItems().length) { + this.#instance.UI.annotationPopup.update([]); + } + } + navigateTo(page: string | number) { const parsedNumber = typeof page === 'string' ? parseInt(page, 10) : page; const paginationOffset = this.#paginationOffset;