FIX #11183 TIME 3 fix init working area

src/frontend/app/document/document.component.html

@@ -8,7 +8,7 @@
     <app-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-sidebar>
   </mat-sidenav>
   <mat-sidenav-content class="mainView">
-    <div *ngIf="loadingDoc"
+    <div *ngIf="signaturesService.mainLoading"
       style="position: absolute;z-index: 2;display: flex;background: #fffc;width: 100%;height: 100%;justify-content: center;align-items: center;">
       <mat-spinner></mat-spinner>
     </div>
@@ -63,9 +63,9 @@
         <app-document-note-list (tap)="addAnnotation($event)" *ngIf="currentDoc == 0">
         </app-document-note-list>
         <app-document-sign-list *ngIf="currentDoc == 0"></app-document-sign-list>
-        <img *ngIf="!loadingDoc && !freezeSidenavClose" (tap)="addAnnotation($event)" id="snapshotPdf"
+        <img *ngIf="!signaturesService.mainLoading && !freezeSidenavClose" (tap)="addAnnotation($event)" id="snapshotPdf"
           [src]="sanitizer.bypassSecurityTrustUrl('data:image/png;base64, '+docList[currentDoc].imgContent[pageNum])"
-          style="width:100%;" class="zoom" />
+          style="width:100%;" class="zoom" (load)="initWorkingArea()"/>
         <app-document-note-pad (triggerEvent)="zoomForView()" #appDocumentNotePad *ngIf="currentDoc == 0">
         </app-document-note-pad>
       </div>

src/frontend/app/document/document.component.ts

@@ -75,30 +75,29 @@ export class DocumentComponent implements OnInit {
     signaturesContent: any = [];
     totalPages: number;
     draggable: boolean;
-    loadingDoc: boolean = true;
     currentDoc: number = 0;
     docList: any = [];
     actionsList: any = [
         {
-            id : 2,
-            label : 'lang.reject',
-            color : '#e74c3c',
-            logo : 'fas fa-backspace',
-            event : 'refuseDocument'
+            id: 2,
+            label: 'lang.reject',
+            color: '#e74c3c',
+            logo: 'fas fa-backspace',
+            event: 'refuseDocument'
         },
         {
-            id : 3,
-            label : 'lang.signatures',
-            color : '#135F7F',
-            logo : '',
-            event : 'openDrawer'
+            id: 3,
+            label: 'lang.signatures',
+            color: '#135F7F',
+            logo: '',
+            event: 'openDrawer'
         },
         {
-            id : 1,
-            label : 'lang.validate',
-            color : '#2ecc71',
-            logo : 'fas fa-check-circle',
-            event : 'validateDocument'
+            id: 1,
+            label: 'lang.validate',
+            color: '#2ecc71',
+            logo: 'fas fa-check-circle',
+            event: 'validateDocument'
         },
     ];
     pdfDataArr: any;
@@ -110,8 +109,8 @@ export class DocumentComponent implements OnInit {
 
     mainDocument: any = {
         id: 0,
-        attachments : [],
-        workflow : [],
+        attachments: [],
+        workflow: [],
     };
 
     loadingUI: any = false;
@@ -157,7 +156,7 @@ export class DocumentComponent implements OnInit {
         }, 500);
         this.route.params.subscribe(params => {
             if (typeof params['id'] !== 'undefined') {
-                this.loadingDoc = true;
+                this.signaturesService.mainLoading = true;
                 this.signaturesService.renderingDoc = true;
                 this.http.get('../rest/documents/' + params['id'])
                     .subscribe((data: any) => {
@@ -194,13 +193,14 @@ export class DocumentComponent implements OnInit {
                 this.snav.open();
                 this.signaturesService.mainDocumentId = null;
                 this.freezeSidenavClose = true;
-                this.loadingDoc = false;
+                this.signaturesService.mainLoading = false;
             }
         });
     }
 
     /*ngDoCheck() {
         if (this.signaturesService.workingAreaHeight !== $('#snapshotPdf').height() || this.signaturesService.workingAreaWidth !== $('#snapshotPdf').width()) {
+            console.log('fuuu :' + this.signaturesService.workingAreaWidth);
             this.signaturesService.workingAreaHeight = $('#snapshotPdf').height();
             this.signaturesService.workingAreaWidth = $('#snapshotPdf').width();
         }
@@ -208,26 +208,26 @@ export class DocumentComponent implements OnInit {
 
     renderImage() {
         if (this.docList[this.currentDoc].imgContent[this.pageNum] === undefined) {
-            this.loadingDoc = true;
+            this.signaturesService.mainLoading = true;
             this.loadingUI = true;
             if (this.currentDoc === 0) {
                 this.http.get('../rest/documents/' + this.docList[this.currentDoc].id + '/thumbnails/' + this.pageNum)
-                .subscribe((data: any) => {
-                    this.docList[this.currentDoc].imgContent[this.pageNum] = data.fileContent;
-                    this.loadingDoc = false;
-                    setTimeout(() => {
-                        this.loadingUI = false;
-                    }, 400);
-                });
+                    .subscribe((data: any) => {
+                        this.docList[this.currentDoc].imgContent[this.pageNum] = data.fileContent;
+                        this.signaturesService.mainLoading = false;
+                        setTimeout(() => {
+                            this.loadingUI = false;
+                        }, 400);
+                    });
             } else {
                 this.http.get('../rest/attachments/' + this.docList[this.currentDoc].id + '/thumbnails/' + this.pageNum)
-                .subscribe((data: any) => {
-                    this.docList[this.currentDoc].imgContent[this.pageNum] = data.fileContent;
-                    this.loadingDoc = false;
-                    setTimeout(() => {
-                        this.loadingUI = false;
-                    }, 400);
-                });
+                    .subscribe((data: any) => {
+                        this.docList[this.currentDoc].imgContent[this.pageNum] = data.fileContent;
+                        this.signaturesService.mainLoading = false;
+                        setTimeout(() => {
+                            this.loadingUI = false;
+                        }, 400);
+                    });
             }
         }
     }
@@ -282,6 +282,7 @@ export class DocumentComponent implements OnInit {
     }
 
     zoomForView() {
+        this.signaturesService.mainLoading = true;
         // this.resetDragPosition();
         this.resetDragPos = true;
         this.widthDoc = '100%';
@@ -291,6 +292,7 @@ export class DocumentComponent implements OnInit {
         setTimeout(() => {
             this.signaturesService.workingAreaHeight = $('#snapshotPdf').height();
             this.signaturesService.workingAreaWidth = $('#snapshotPdf').width();
+            this.signaturesService.mainLoading = false;
         }, 400);
         this.signaturesService.scale = 1;
 
@@ -324,6 +326,14 @@ export class DocumentComponent implements OnInit {
         this.renderImage();
     }
 
+    initWorkingArea() {
+        if ((typeof this.signaturesService.workingAreaHeight !== 'number' || this.signaturesService.workingAreaHeight === 0) && (typeof this.signaturesService.workingAreaWidth !== 'number' || this.signaturesService.workingAreaWidth === 0)) {
+            this.img = document.querySelector('img.zoom');
+            const rect = this.img.getBoundingClientRect();
+            this.signaturesService.workingAreaHeight = rect.height;
+            this.signaturesService.workingAreaWidth = rect.width;
+        }
+    }
     addAnnotation(e: any) {
         e.preventDefault();
 
@@ -342,7 +352,6 @@ export class DocumentComponent implements OnInit {
             const posX = offsetX - this.signaturesService.x;
             const posY = offsetY - this.signaturesService.y;
 
-
             if (this.signaturesService.mobileMode) {
                 this.signaturesService.x = -posX;
             } else {
@@ -485,35 +494,35 @@ export class DocumentComponent implements OnInit {
     openVisaWorkflow() {
         this.snavRight.open();
         this.signaturesService.sideNavRigtDatas = {
-            mode : 'visaWorkflow',
-            width : '450px',
-            locked : false,
+            mode: 'visaWorkflow',
+            width: '450px',
+            locked: false,
         };
     }
 
     openDocumentList() {
         this.snavRight.open();
         this.signaturesService.sideNavRigtDatas = {
-            mode : 'documentList',
-            width : '450px',
-            locked : false,
+            mode: 'documentList',
+            width: '450px',
+            locked: false,
         };
     }
 
     openMainDocumentDetail() {
         this.snavRight.open();
         this.signaturesService.sideNavRigtDatas = {
-            mode : 'mainDocumentDetail',
-            width : '450px',
-            locked : false,
+            mode: 'mainDocumentDetail',
+            width: '450px',
+            locked: false,
         };
     }
 
     backToDetails() {
         this.signaturesService.sideNavRigtDatas = {
-            mode : 'mainDocumentDetail',
-            width : '450px',
-            locked : false,
+            mode: 'mainDocumentDetail',
+            width: '450px',
+            locked: false,
         };
     }
 
@@ -522,10 +531,10 @@ export class DocumentComponent implements OnInit {
 
         if (r) {
             this.http.put('../rest/users/' + this.authService.user.id + '/substitute', { substitute: null })
-            .subscribe(() => {
-                this.authService.updateUserInfoWithTokenRefresh();
-                this.notificationService.success('lang.substitutionDeleted');
-            });
+                .subscribe(() => {
+                    this.authService.updateUserInfoWithTokenRefresh();
+                    this.notificationService.success('lang.substitutionDeleted');
+                });
         }
     }
 }

src/frontend/app/documentNoteList/document-note-list.component.html

@@ -3,6 +3,6 @@
       'pdf-page-canvas':!signaturesService.renderingDoc,
       'pdf-page-canvas-loading-doc':signaturesService.renderingDoc
     }">
-      <img [style.width.px]="signaturesService.workingAreaWidth" [src]="sanitization.bypassSecurityTrustUrl(note.fullPath)">
+      <img [style.width.%]="100" [src]="sanitization.bypassSecurityTrustUrl(note.fullPath)">
     </div>
   </ng-container>
\ No newline at end of file

src/frontend/app/documentNotePad/document-note-pad.component.ts

@@ -22,14 +22,16 @@ export class DocumentNotePadComponent implements OnInit {
     ngOnInit(): void { }
 
     initPad() {
+        console.log(this.signaturesService.workingAreaHeight);
+        console.log(this.signaturesService.workingAreaWidth);
         setTimeout(() => {
             ($('#myCanvas') as any).sign({
                 mode: this.authService.user.preferences.writingMode, // direct or stylus
                 lineWidth: this.authService.user.preferences.writingSize,
                 changeColor: $('.radio'),
                 undo: $('.undo'),
-                height: this.signaturesService.workingAreaHeight * 2,
-                width: this.signaturesService.workingAreaWidth * 2,
+                height: this.signaturesService.workingAreaHeight,
+                width: this.signaturesService.workingAreaWidth,
                 fixHeight: this.signaturesService.y,
                 fixWidth: this.signaturesService.x,
                 mobileMode: this.signaturesService.mobileMode
@@ -39,15 +41,18 @@ export class DocumentNotePadComponent implements OnInit {
     }
 
     cancelAnnotation() {
+        this.signaturesService.mainLoading = true;
         setTimeout(() => {
             this.triggerEvent.emit();
             this.signaturesService.x = 0;
             this.signaturesService.y = 90;
             this.signaturesService.annotationMode = false;
+            this.signaturesService.mainLoading = false;
         }, 200);
     }
 
     validateAnnotation() {
+        this.signaturesService.mainLoading = true;
         if (!this.signaturesService.notesContent[this.signaturesService.currentPage]) {
             this.signaturesService.notesContent[this.signaturesService.currentPage] = [];
         }

src/frontend/app/service/signatures.service.ts

@@ -35,7 +35,8 @@ export class SignaturesContentService {
     mode = '';
     scale = 1;
     x = 0;
-    y = 0;
+    y = 90;
+    mainLoading = true;
 
     constructor() {
         if (window.screen.width <= 360) {

src/frontend/js/sign.js

@@ -37,13 +37,8 @@ jQuery(document).ready(function (e) {
 
         var fixFingerPosition = 15;
 
-        if (params.mobileMode === true) {
-            canvas.attr("width", params.width / 2);
-            canvas.attr("height", params.height / 2);
-        } else {
-            canvas.attr("width", params.width);
-            canvas.attr("height", params.height);
-        }
+        canvas.attr("width", params.width);
+        canvas.attr("height", params.height);
 
         var points = [];
         var last = {