Revize 7b710808

Re #7820: Vykreslení rámečku do výřezu dokumentu

- posunutí koordinátů dle výpočtu (originální/zobrazená velikost)
- genererování náhodného id na BE
- přijmutí náhodného id na FE a nastaveno jako id pro výsledky

fe/fulltextsearch/src/app/services/drawer/drawer.service.ts

@@ -1 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {LoggerService} from '../logger/logger.service';
 import {TextRegion} from '../../model/parts/TextRegion';
 import {Point} from '../../model/parts/Point';
 import Utils from '../../../Utils';
+import {DocumentSize} from '../../model/parts/DocumentSize';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DrawerService {
 
+  resizeRation: number = null;
+
   constructor(private LOGGER: LoggerService) { }
 
   public drawResult(textRegion: TextRegion, imageId: string, canvasId: string) {
-    const canvasContext = this.initCanvas(imageId, canvasId);
-
-    if (textRegion !== null) {
-      if (Utils.isIterable(textRegion.textLines) && textRegion.textLines.length !== 0) {
-        for (const textLine of textRegion.textLines) {
-          if (Utils.isIterable(textLine.textWords) && textLine.textWords.length !== 0) {
-            for (const textWord of textLine.textWords) {
-              if (textWord !== null) {
-                // print words
-                this.draw(textWord.wordCoords.points, canvasContext);
-                this.LOGGER.info('printing words');
-              }
+    const canvasContext = this.initCanvas(imageId, canvasId, textRegion.documentSize);
+    if (Utils.isIterable(textRegion.textLines) && textRegion.textLines.length !== 0) {
+      for (const textLine of textRegion.textLines) {
+        if (Utils.isIterable(textLine.textWords) && textLine.textWords.length !== 0) {
+          for (const textWord of textLine.textWords) {
+            if (textWord !== null) {
+              // print words
+              this.draw(textWord.wordCoords.points, canvasContext);
+              this.LOGGER.info('printing words');
             }
-            return;
-          } else {
-            // print lines
-            this.draw(textLine.lineCoords.points, canvasContext);
-            this.LOGGER.info('Print lines');
           }
+          return;
+        } else {
+          // print lines
+          this.draw(textLine.lineCoords.points, canvasContext);
+          this.LOGGER.info('Print lines');
         }
-        return;
-      } else {
-        // all region
-        this.draw(textRegion.regionCoords.points, canvasContext);
-        this.LOGGER.info('Print region');
       }
+      return;
     } else {
-      // all document
-      // TODO : obarvit celý výřez
-      this.LOGGER.warn('Print all document');
+      // all region
+      this.draw(textRegion.regionCoords.points, canvasContext);
+      this.LOGGER.info('Print region');
     }
   }
 
-  private initCanvas(imageId: string, canvasId: string) {
+  private initCanvas(imageId: string, canvasId: string, originalImageSize: DocumentSize) {
     const img = document.getElementById(imageId);
     const canvasElement = document.getElementById(canvasId);
     const canvas = <HTMLCanvasElement> document.getElementById(canvasId);
@@ -60 +56 @@
     ctx.canvas.width = img.offsetWidth;
     ctx.canvas.height = img.offsetHeight;
 
+    this.countRatio(originalImageSize, new DocumentSize(img.offsetHeight, img.offsetWidth));
+
     return ctx;
   }
 
@@ -69 +67 @@
 
     for (const point of points) {
       if (firstPoint) {
-        context.moveTo(point.x / 1.676, point.y / 1.676);
+        context.moveTo(point.x / this.resizeRation, point.y / this.resizeRation);
         firstPoint = false;
       } else {
-        context.lineTo(point.x / 1.676, point.y / 1.676);
+        context.lineTo(point.x / this.resizeRation, point.y / this.resizeRation);
       }
     }
     context.closePath();
@@ -83 +81 @@
     context.fill();
     context.stroke();
   }
+
+  private countRatio(originalSize: DocumentSize, shownSize: DocumentSize) {
+    this.resizeRation = originalSize.width / shownSize.width;
+  }
 }