close #422

src/main/webapp/app/scanexam/annotate-template/paint/fabric-canvas/fabric-canvas.component.html

@@ -1,5 +1,5 @@
 <div class="flex-container">
-  <jhi-summary-template class="summary" [questions]="eventHandler.questions"></jhi-summary-template>
+  <jhi-summary-template (gotoQ)="goToQuestion($event)" class="summary" [questions]="eventHandler.questions"></jhi-summary-template>
   <div class="canvas-wrapper foo">
     <p-blockUI [blocked]="blocked">
       <!--<i class="pi pi-lock" style="font-size: 3rem"></i>-->
@@ -8,17 +8,16 @@
     <ngx-extended-pdf-viewer
       [src]="content"
       [useBrowserLocale]="true"
-      style="flex: 1 1 100%"
+      style="flex: 1 1 90%"
       #viewer
-      [height]="'90vh'"
+      [height]="'89vh'"
       [page]="1"
       [handTool]="false"
       [showHandToolButton]="false"
       [textLayer]="false"
       [(scrollMode)]="scrollMode"
       [handTool]="false"
       [showToolbar]="false"
-      [pageViewMode]="'infinite-scroll'"
       [showSecondaryToolbarButton]="false"
       [sidebarVisible]="false"
       (pageRender)="blocked = true"

src/main/webapp/app/scanexam/annotate-template/paint/fabric-canvas/fabric-canvas.component.scss

@@ -1,8 +1,8 @@
 .canvas-wrapper {
-  overflow-y: scroll;
+  overflow-y: hidden;
   overflow-x: hidden;
   width: 65vw;
-  height: 87vh;
+  height: 89vh;
 }
 
 .flex-container {

src/main/webapp/app/scanexam/annotate-template/paint/fabric-canvas/fabric-canvas.component.ts

@@ -62,7 +62,6 @@ export class FabricCanvasComponent implements OnInit {
 
   public ngOnInit(): void {
     this.eventHandler.reinit(this.exam, this.zones);
-
     this.activatedRoute.paramMap.subscribe(params => {
       this.examId = parseInt(params.get('examid') ?? '-1', 10);
 
@@ -178,13 +177,26 @@ export class FabricCanvasComponent implements OnInit {
           }
         });
       }
+
       if (this.pdfViewerService.isRenderQueueEmpty()) {
         this.loadingPdfMetadata(evt.source.scale);
+
         this.blocked = false;
       }
     }
   }
 
+  goToQuestion(q: Question): void {
+    if (q.zoneDTO?.pageNumber && q.zoneDTO?.yInit && this.eventHandler.pages?.[1]) {
+      const p = q.zoneDTO.pageNumber;
+      const y = (q.zoneDTO.yInit * this.eventHandler.pages[1].pageViewer.canvas.clientHeight) / 100000;
+      this.scrollPageandTop(p, y);
+    }
+  }
+  scrollPageandTop(page: number, top: number): void {
+    this.pdfViewerService.scrollPageIntoView(page, { top, left: 0 });
+  }
+
   public async loadingPdfMetadata(pdfScale: number): Promise<void> {
     const rects = await this.getCustomPdfProperties();
     const qs: Record<number, Array<Rect>> = {};

src/main/webapp/app/scanexam/annotate-template/summary/summary-template.component.html

@@ -2,7 +2,9 @@
   <h3 jhiTranslate="scanexam.resumebareme">Résumé du sujet</h3>
   <hr />
   <div *ngFor="let q of getSortedQuestions(); index as i">
-    <b>Q{{ q.numero }}</b>
+    <a (click)="goToQuestion(q)"
+      ><b>Q{{ q.numero }}</b></a
+    >
     <div *ngIf="isFollowingQuestion(i, q); then follow; else nofollow"></div>
     <ng-template #follow>( <span jhiTranslate="scanexam.suite"></span> )</ng-template>
     <ng-template #nofollow

src/main/webapp/app/scanexam/annotate-template/summary/summary-template.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Question } from 'app/entities/question/question.model';
 
 @Component({
@@ -10,6 +10,9 @@ export class SummaryTemplateComponent {
   @Input()
   questions: Map<number, Question> = new Map();
 
+  @Output()
+  gotoQ: EventEmitter<Question> = new EventEmitter<Question>();
+
   public getSortedQuestions(): Array<Question> {
     return [...this.questions.values()].sort((a, b) => a.numero! - b.numero!);
   }
@@ -31,4 +34,8 @@ export class SummaryTemplateComponent {
         .filter(q2 => q2.numero === q.numero).length > 0
     );
   }
+
+  public goToQuestion(q: Question): void {
+    this.gotoQ.emit(q);
+  }
 }