From 1585d8cad9613d66e2f27d275458334e6585c6e7 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo@devplant.ro>
Date: Mon, 16 Nov 2020 11:09:34 +0200
Subject: [PATCH] fixed redacted viewer sync

---
 .../file-actions/file-actions.component.html  | 40 +++++------
 .../file/pdf-viewer/pdf-viewer.component.ts   | 71 ++++++++++---------
 2 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.html b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
index b3dcac44d..a6f1317ae 100644
--- a/apps/red-ui/src/app/common/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.html
@@ -16,26 +16,6 @@
         <mat-icon svgIcon="red:assign"></mat-icon>
     </button>
 
-    <button
-        (click)="openDeleteFileDialog($event, fileStatus)"
-        *ngIf="permissionsService.canDeleteFile(fileStatus)"
-        [matTooltipPosition]="tooltipPosition"
-        [matTooltip]="'project-overview.delete.action' | translate"
-        color="accent"
-        mat-icon-button
-    >
-        <mat-icon svgIcon="red:trash"></mat-icon>
-    </button>
-    <div
-        *ngIf="permissionsService.canShowRedactionReportDownloadBtn(fileStatus)"
-        [matTooltipPosition]="tooltipPosition"
-        [matTooltip]="(fileStatus.isApproved ? 'report.action' : 'report.unavailable-single') | translate"
-    >
-        <button (click)="downloadFileRedactionReport($event, fileStatus)" [disabled]="!fileStatus.isApproved" color="accent" mat-icon-button>
-            <mat-icon svgIcon="red:report"></mat-icon>
-        </button>
-    </div>
-
     <button
         #reanalyseTooltip="matTooltip"
         (click)="reanalyseFile($event, fileStatus)"
@@ -59,6 +39,26 @@
         <mat-icon svgIcon="red:refresh"></mat-icon>
     </button>
 
+    <button
+        (click)="openDeleteFileDialog($event, fileStatus)"
+        *ngIf="permissionsService.canDeleteFile(fileStatus)"
+        [matTooltipPosition]="tooltipPosition"
+        [matTooltip]="'project-overview.delete.action' | translate"
+        color="accent"
+        mat-icon-button
+    >
+        <mat-icon svgIcon="red:trash"></mat-icon>
+    </button>
+    <div
+        *ngIf="permissionsService.canShowRedactionReportDownloadBtn(fileStatus)"
+        [matTooltipPosition]="tooltipPosition"
+        [matTooltip]="(fileStatus.isApproved ? 'report.action' : 'report.unavailable-single') | translate"
+    >
+        <button (click)="downloadFileRedactionReport($event, fileStatus)" [disabled]="!fileStatus.isApproved" color="accent" mat-icon-button>
+            <mat-icon svgIcon="red:report"></mat-icon>
+        </button>
+    </div>
+
     <button
         (click)="setFileApproved($event, fileStatus)"
         *ngIf="permissionsService.canApprove(fileStatus)"
diff --git a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
index e61abb45d..ce25b6212 100644
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@@ -100,9 +100,6 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
 
             instance.docViewer.on('documentLoaded', this._documentLoaded);
 
-            // initialize state
-            this._restoreState(null, instance);
-
             this._loadDocument();
         });
     }
@@ -225,19 +222,25 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
 
     private _loadDocument() {
         if (this.fileData) {
+            // if it's not first load - save viewer state
+            if (this._viewerState) {
+                this._viewerState = this._getCurrentViewerState();
+            }
             this.instance.loadDocument(this.fileData, {
                 filename: this.fileStatus ? this.fileStatus.filename : 'document.pdf'
             });
-            if (!this._viewerState) {
-                this._restoreState(null, this.instance);
-            }
         }
     }
 
     private _documentLoaded() {
         this._ngZone.run(() => {
             this.viewerReady.emit(this.instance);
-            this._restoreState(this._viewerState, this.instance);
+            if (!this._viewerState) {
+                this.setInitialViewerState();
+                this._viewerState = this._getCurrentViewerState();
+            } else {
+                this._restoreState(this._viewerState);
+            }
         });
     }
 
@@ -259,34 +262,34 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
         return viewerState;
     }
 
-    private _restoreState(viewerState: ViewerState, instance: WebViewerInstance) {
-        if (viewerState) {
-            instance.docViewer.setCurrentPage(viewerState.pageNumber);
-            instance.setLayoutMode(viewerState.layoutMode);
-            const instanceDisplayMode = instance.docViewer.getDisplayModeManager().getDisplayMode();
-            instanceDisplayMode.mode = viewerState.displayMode;
-            instance.docViewer.getDisplayModeManager().setDisplayMode(instanceDisplayMode);
-            // Synchronize zoom - needs to be done before scrolling
-            if (viewerState.zoom === 0) {
-                this.instance.setFitMode('FitPage');
-            } else {
-                instance.docViewer.zoomTo(viewerState.zoom);
-            }
-            const viewerScrollElement = instance.docViewer.getScrollViewElement();
-            viewerScrollElement.scrollTo(viewerState.scrollLeft, viewerState.scrollTop);
-
-            if (viewerState.leftPanelState) {
-                instance.openElements(['leftPanel']);
-            } else {
-                instance.closeElements(['leftPanel']);
-            }
-            this._viewerState = viewerState;
-        } else {
-            // viewer init
+    private _restoreState(viewerState: ViewerState) {
+        this.instance.docViewer.setCurrentPage(viewerState.pageNumber);
+        this.instance.setLayoutMode(viewerState.layoutMode);
+        const instanceDisplayMode = this.instance.docViewer.getDisplayModeManager().getDisplayMode();
+        instanceDisplayMode.mode = viewerState.displayMode;
+        this.instance.docViewer.getDisplayModeManager().setDisplayMode(instanceDisplayMode);
+        // Synchronize zoom - needs to be done before scrolling
+        if (viewerState.zoom === 0) {
             this.instance.setFitMode('FitPage');
-            const instanceDisplayMode = instance.docViewer.getDisplayModeManager().getDisplayMode();
-            instanceDisplayMode.mode = 'Single';
-            instance.docViewer.getDisplayModeManager().setDisplayMode(instanceDisplayMode);
+        } else {
+            this.instance.docViewer.zoomTo(viewerState.zoom);
         }
+        const viewerScrollElement = this.instance.docViewer.getScrollViewElement();
+        viewerScrollElement.scrollTo(viewerState.scrollLeft, viewerState.scrollTop);
+
+        if (viewerState.leftPanelState) {
+            this.instance.openElements(['leftPanel']);
+        } else {
+            this.instance.closeElements(['leftPanel']);
+        }
+        this._viewerState = viewerState;
+    }
+
+    setInitialViewerState() {
+        // viewer init
+        this.instance.setFitMode('FitPage');
+        const instanceDisplayMode = this.instance.docViewer.getDisplayModeManager().getDisplayMode();
+        instanceDisplayMode.mode = 'Single';
+        this.instance.docViewer.getDisplayModeManager().setDisplayMode(instanceDisplayMode);
     }
 }