document.component.html

<div *ngIf="enterApp" class="enterApp" [@enterApp]>
  <mat-icon svgIcon="maarchLogo" class="maarchLogo"></mat-icon>
</div>
<mat-sidenav-container autosize>

  <mat-sidenav #snav mode="over" fixedInViewport="true" [disableClose]="freezeSidenavClose" [style.width.px]="350">
    <app-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight" ></app-sidebar>
  </mat-sidenav>
  <mat-sidenav-content>
    <!--<div class="swipe-panel-area" (swiperight)="this.snav.open();"></div>-->
    <header style="position: fixed;" class="header" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose && !loadingPage" [@slideDown]>
      <article class="header-infos">
        <section class="header-action">
          <button mat-icon-button (click)="this.snav.toggle();">
            <mat-icon fontSet="far" fontIcon="fa-folder-open"></mat-icon>
          </button>
        </section>
        <div class="header-info">
          <p class="c-active-color bold">Référence : </p>
          <p class="ellipsis">{{mainDocument.reference}}</p>
          <p class="c-active-color bold">Sujet : </p>
          <p class="ellipsis">{{mainDocument.subject}}</p>
        </div>
        <div class="header-info">
          <p class="c-active-color bold">Émis par : </p>
          <p class="ellipsis">{{mainDocument.sender}} ({{mainDocument.sender_entity}})</p>
          <p class="c-active-color bold">Pour : </p>
          <p class="ellipsis">{{mainDocument.recipient}}</p>
        </div>
        <div class="header-info">
          <p class="c-active-color bold">Date limite de traitement : </p>
          <p class="ellipsis">{{mainDocument.limit_date}} (<b>{{mainDocument.priority}}</b>)</p>
          <p class="c-active-color bold">À signer par : </p>
          <p class="ellipsis">{{mainDocument.processingUserDisplay}}</p>
        </div>
        <section class="header-action">
            <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon fontSet="fas" fontIcon="fa-ellipsis-v"></mat-icon></button>
            <mat-menu #menu="matMenu">
              <button [disabled]="this.signaturesService.signaturesContent.length == 0 && this.signaturesService.notesContent.length == 0" mat-menu-item (click)="removeTags();">Tout effacer</button>
              <button mat-menu-item (click)="undoTag();">Annuler la précedente note</button>
            </mat-menu>
        </section>
      </article>
    </header>
    <div *ngIf="signaturesService.lockNote">
      <span style="z-index:1;position: fixed;bottom: 10px;top: 10px;font-size: 25px;opacity: 0.4;"><i style="border-radius: 15px;background: white;right:10px;top:0px;color:black;"
          class="fas fa-arrow-left fa-2x" (tap)="cancelAnnotation(i);"></i></span>
      <span *ngIf="!lockSignaturePad" style="z-index:1;position: fixed;top: 10px;left: 50%;transform: translateX(-50%);font-size: 25px;opacity: 0.4;"><i
          style="border-radius: 15px;background: white;right:10px;top:0px;color:red;" class="fas fa-lock fa-2x" (tap)="test();"></i></span>
      <span *ngIf="lockSignaturePad" style="z-index:1;position: fixed;top: 10px;left: 50%;transform: translateX(-50%);font-size: 25px;opacity: 0.4;"><i
          style="border-radius: 15px;background: white;right:10px;top:0px;color:green;" class="fas fa-unlock fa-2x"
          (tap)="test();"></i></span>
      <span *ngIf="scale==1" style="z-index:1;position: fixed;top: 10px;right: 0;font-size: 25px;opacity: 0.4;"><i style="border-radius: 15px;background: white;right:10px;top:0px;color:black;"
          class="fas fa-plus fa-2x" (tap)="zoomPlus();"></i></span>
      <span *ngIf="scale==2" style="z-index:1;position: fixed;top: 10px;right: 0px;font-size: 25px;opacity: 0.4;"><i style="border-radius: 15px;background: white;right:10px;top:0px;color:black;"
          class="fas fa-minus fa-2x" (tap)="zoomMinus();"></i></span>
      <span style="z-index:1;position: fixed;bottom: 10px;left: 50%;transform: translateX(-50%);font-size: 25px;opacity: 0.4;"><i
          style="border-radius: 15px;background: white;right:10px;top:0px;color:green;" class="fas fa-check-circle fa-2x"
          (click)="$event.stopPropagation();validateAnnotation();"></i></span>
    </div>
    <article [style.width.px]="768*scale" style="margin-top: 120px;margin-left: auto;margin-right: auto;margin-bottom: 120px;"
      class="article" #article *ngIf="!freezeSidenavClose">
      <button class="btn-previous" (click)="prevPage()" *ngIf="pageNum > 1 && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-left fa-3x"></i></button>
      <button class="btn-previous" (click)="prevDoc()" *ngIf="currentDoc > 0 &&  pageNum === 1 && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-left fa-3x"></i><i class="fas fa-chevron-left fa-3x"></i></button>
      <button class="btn-next" (click)="nextPage()" *ngIf="pageNum < totalPages && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-right fa-3x"></i></button>
      <button class="btn-next" (click)="nextDoc()" *ngIf="pageNum == totalPages && docList.length > currentDoc+1 && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-right fa-3x"></i><i class="fas fa-chevron-right fa-3x"></i></button>
      <div [ngClass]="{'overlay': (annotation$ | async)}"></div>
      <section class="page-viewer" #pdfpage>
        <div [style.width.px]="768*scale" class="canvas-wrapper" #canvasWrapper (click)="addAnnotation($event)">
          <pdf-viewer [ngClass]="{
            'pdf-page-canvas':!renderingDoc,
            'pdf-page-canvas-loading-doc':renderingDoc
          }" [src]="pdfDataArr" [render-text]="false" [zoom]="scale" [show-all]="false" [(page)]="pageNum" [original-size]="true" style="display: block;" (after-load-complete)="pdfRendered($event)" (page-rendered)="pageRendered($event)"></pdf-viewer>

          <div *ngIf="loadingDoc" style="position: absolute;z-index: 1;display: flex;background: #fffc;width: 100%;height: 100%;justify-content: center;align-items: center;">
            <mat-spinner></mat-spinner>
          </div>
          <ng-container *ngIf="currentDoc == 0">
            <ng-container *ngFor="let note of this.signaturesService.notesContent[this.signaturesService.currentPage];let i = index;">
              <div style="top:0;left:0;position: absolute;" [ngClass]="{
                'pdf-page-canvas':!renderingDoc,
                'pdf-page-canvas-loading-doc':renderingDoc
              }">
                <img [style.width.px]="this.signaturesService.workingAreaWidth" [src]="sanitization.bypassSecurityTrustUrl(note.fullPath)">
              </div>
            </ng-container>
            <ng-container *ngFor="let signature of this.signaturesService.signaturesContent[this.signaturesService.currentPage];let i = index;">
              <div [position]="{'x': signature.positionX*scale, 'y': signature.positionY*scale}" id="signaturesContent"
                style="top:0;left:0;position: absolute;border: dashed 1px grey;" ngDraggable preventDefaultEvent="true" [bounds]="canvas"
                inBounds="true" (endOffset)="moveSign($event,i)" [ngClass]="{
                  'pdf-page-canvas':!renderingDoc,
                  'pdf-page-canvas-loading-doc':renderingDoc
                }">
                <span style="position: absolute;width: 100%;height: 100%;top:0;left:0;">
                  <span style="position: absolute;width: 100%;top: -15px;margin-left: -15px;margin-right: 15px;"><i
                      style="border-radius: 15px;background: white;left:0px;top:0px;color:red;" class="fa fa-times-circle fa-2x"
                      (tap)="deleteSignature(i);"></i></span>
                </span>
                <img [src]="sanitization.bypassSecurityTrustUrl('data:image/png;base64,' + signature.encodedSignature)"
                  [style.width.px]="this.signaturesService.signWidth">
              </div>
            </ng-container>

            <div *ngIf="signaturesService.lockNote" style="top:0;left:0;position: absolute;border: dashed 1px grey;" [ngClass]="{
              'pdf-page-canvas':!renderingDoc,
              'pdf-page-canvas-loading-doc':renderingDoc
            }">
              <div class="tool-content tool-content-left">     
                <input type="range" name="dot" min="1" max="10" step="1" value="1" (input)="onDotChange($event.target.value)"
              class="range">
              <i class="fas fa-pen-nib"></i>
            </div>
              <div class="tool-content tool-content-right">
                <ng-container *ngFor="let color of penColors" let idx="index">
                  <input type="radio" name="colors" [checked]="idx === 0" [value]="color.id" (change)="onColorChange(color)"
                    class="radio" [ngStyle]="{'border-color': color.id, 'background-color': color.id}">
                </ng-container>
                <hr>
                <i class="fa fa-undo fa-2x undo" (click)="undo()"></i>    
              </div>
              <signature-pad id="notePad" [options]="annotationPadOptions"></signature-pad>
              <div *ngIf="lockSignaturePad" style="background: #ffffffb3;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
            </div>
          </ng-container>
        </div>
      </section>
      <div class="page-under">
        <div class="page-under-fold"></div>
      </div>
      <section class="page-info" *ngIf="!this.signaturesService.annotationMode && docList[currentDoc]">
        <div class="page-info-doc">Doc {{currentDoc+1}}/{{docList.length}} : {{docList[currentDoc].subject}}</div>
        <div class="page-info-page">page {{ pageNum }} / {{ totalPages }}</div>
      </section>
    </article>
    <footer class="footer" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose && !loadingPage" [@slideUp]>
      <ng-container *ngFor="let action of actionsList;">
        <button [style.color]="action.color" [style.borderColor]="action.color" class="btn" (click)="launchEvent(action)"><i
            class="{{action.logo}} fa-2x"></i>{{action.label}}</button>
      </ng-container>
    </footer>
    <app-drawer></app-drawer>
  </mat-sidenav-content>
  <mat-sidenav #snavRight mode="over" fixedInViewport="true" [style.width.%]="80" position='end' disableClose='true'>
    <app-my-profile [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-my-profile>
  </mat-sidenav>
</mat-sidenav-container>