FEAT #11362 TIME 3 fix dynamic ratio signature with real document size

src/app/document/controllers/DocumentController.php

@@ -440,7 +440,7 @@ class DocumentController
                             $signPosX = 0;
                             $signPosY = 0;
                         } else {
-                            $signWidth = $size['width'] / 4;
+                            $signWidth = ($signature['width'] * $size['width']) / 100;
                             $signPosX = ($signature['positionX'] * $size['width']) / 100;
                             $signPosY = ($signature['positionY'] * $size['height']) / 100;
                         }

src/frontend/app/documentSignList/document-sign-list.component.html

 <ng-container *ngFor="let signature of this.signaturesService.signaturesContent[this.signaturesService.currentPage];let i = index;">
-  <div [style.width.%]="25" (tap)="$event.preventDefault();" [position]="{'x': (signature.positionX*this.signaturesService.workingAreaWidth)/100, 'y': (signature.positionY*this.signaturesService.workingAreaHeight)/100}" id="signaturesContent" style="top:0;left:0;position: absolute;border: dashed 1px grey;background: rgba(255, 255, 255, 0.6) none repeat scroll 0% 0%;"
+  <div [style.width.%]="signature.width" (tap)="$event.preventDefault();" [position]="{'x': (signature.positionX*this.signaturesService.workingAreaWidth)/100, 'y': (signature.positionY*this.signaturesService.workingAreaHeight)/100}" id="signaturesContent" style="top:0;left:0;position: absolute;border: dashed 1px grey;background: rgba(255, 255, 255, 0.6) none repeat scroll 0% 0%;"
     ngDraggable preventDefaultEvent="true" [bounds]="page" inBounds="true" (started)="onDragBegin($event)" (endOffset)="moveSign($event,i)" [ngClass]="{
               'pdf-page-canvas':!signaturesService.renderingDoc,
               'pdf-page-canvas-loading-doc':signaturesService.renderingDoc

src/frontend/app/pad/pad.component.ts

@@ -38,8 +38,8 @@ export class SignaturePadPageComponent implements AfterViewInit {
         maxWidth: 2.5,
         // dotSize: 0,
         backgroundColor: 'rgba(255, 255, 255, 0)',
-        canvasWidth: 600,
-        canvasHeight: 315
+        canvasWidth: 1200,
+        canvasHeight: 630
     };
 
     constructor(private translate: TranslateService,

src/frontend/app/signatures/signatures.component.html

@@ -14,10 +14,10 @@
         <button mat-mini-fab color="warn" [title]="'lang.removeSignature' | translate" class="sign_icon remove_icon" (tap)="removeSignature(signature,i);">
           <mat-icon class="fa fa-times"></mat-icon>
         </button>
-        <button mat-mini-fab color="primary" [title]="'lang.selectSignature' | translate" class="sign_icon add_icon" (tap)="selectSignature(signature);">
+        <button mat-mini-fab color="primary" [title]="'lang.selectSignature' | translate" class="sign_icon add_icon" (tap)="selectSignature(signature,'imgSign_'+i);">
           <mat-icon class="fa fa-arrow-up"></mat-icon>
         </button>
-        <img [src]="sanitization.bypassSecurityTrustUrl('data:image/png;base64,' + signature.encodedSignature)"
+        <img id="imgSign_{{i}}" [src]="sanitization.bypassSecurityTrustUrl('data:image/png;base64,' + signature.encodedSignature)"
           style="width: 190px;">
       </div>
     </div>

src/frontend/app/signatures/signatures.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Renderer2 } from '@angular/core';
 import { MatBottomSheet, MatBottomSheetConfig } from '@angular/material';
 import { SignaturesContentService } from '../service/signatures.service';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -39,7 +39,8 @@ export class SignaturesComponent implements OnInit {
         private sanitization: DomSanitizer,
         public notificationService: NotificationService,
         public authService: AuthService,
-        private localStorage: LocalStorageService) {
+        private localStorage: LocalStorageService,
+        private renderer: Renderer2) {
     }
 
     ngOnInit() {
@@ -68,10 +69,14 @@ export class SignaturesComponent implements OnInit {
         this.signaturesService.newSign = {};
     }
 
-    selectSignature(signature: any) {
+    selectSignature(signature: any, img: any) {
+
         signature.positionX = 70;
         signature.positionY = 70;
-        signature.width = 25;
+
+        const percentWidth = (this.renderer.selectRootElement('#' + img).naturalWidth * 100) / this.renderer.selectRootElement('#snapshotPdf').naturalWidth;
+
+        signature.width = percentWidth;
 
         if (!this.signaturesService.signaturesContent[this.signaturesService.currentPage]) {
             this.signaturesService.signaturesContent[this.signaturesService.currentPage] = [];
@@ -114,7 +119,7 @@ export class SignaturesComponent implements OnInit {
                 this.count = 0;
             } else if (this.count > 1) {
                 this.count = 0;
-                this.selectSignature(signature);
+                this.selectSignature(signature, 'imgSign_' + i);
             }
         }, 250);
     }

src/frontend/core/styles.scss

@@ -222,4 +222,8 @@ mat-accordion mat-expansion-panel {
 
 .mat-paginator-navigation-previous {
   left: -20px;
+}
+
+.mat-bottom-sheet-container {
+  max-height: 90vh !important;
 }
\ No newline at end of file