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

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/SolrService.java

@@ -339 +339 @@
             DocumentSize documentSize = new DocumentSize(image.getHeight(), image.getWidth());
             textRegion.setDocumentSize(documentSize);
 
+            // generate random string id for response of given length
+            textRegion.setRandomId(Utils.generateRandomStringId(10));
+
             textRegions.add(textRegion);
         }
 

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/Utils.java

@@ +1 @@
+package cz.zcu.kiv.aswi.fulltextsearch;
+
+import java.nio.charset.StandardCharsets;
+import java.util.Random;
+
+public class Utils {
+
+    public static String generateRandomStringId(int length) {
+
+        // length is bounded by 256 Character
+        byte[] array = new byte[256];
+        new Random().nextBytes(array);
+
+        String randomString
+                = new String(array, StandardCharsets.UTF_8);
+
+        // Create a StringBuffer to store the result
+        StringBuffer r = new StringBuffer();
+
+        for (int k = 0; k < randomString.length(); k++) {
+
+            char ch = randomString.charAt(k);
+
+            if (((ch >= 'a' && ch <= 'z')
+                    || (ch >= 'A' && ch <= 'Z')
+                    || (ch >= '0' && ch <= '9'))
+                    && (length > 0)) {
+
+                r.append(ch);
+                length--;
+            }
+        }
+
+        return r.toString();
+    }
+}

be/fulltextsearch/src/main/java/cz/zcu/kiv/aswi/fulltextsearch/document/TextRegion.java

@@ -15 +15 @@
     private TextLine[] textLines;
     private String documentName;
     private DocumentSize documentSize;
+    private String randomId;
 
     @JsonIgnore
     private TextEquiv textEquiv;
@@ -77 +78 @@
     public void setDocumentSize(DocumentSize documentSize) {
         this.documentSize = documentSize;
     }
+
+    public String getRandomId() {
+        return randomId;
+    }
+
+    public void setRandomId(String randomId) {
+        this.randomId = randomId;
+    }
 }

fe/fulltextsearch/src/app/components/pages/search/search-paginator/search-paginator.component.html

@@ -8 +8 @@
             {{row.documentName}}
           </div>
           <div class="row image-div">
-            <img id="{{row.documentName + 'Img'}}"
+            <img id="{{row.randomId + 'Img'}}"
                  class="image" src="data:image/jpg;base64,{{row.imageCut}}"
-                 (load)="draw(row,row.documentName + 'Img' , row.documentName + 'Canvas' )"/>
-            <canvas id="{{row.documentName + 'Canvas'}}" style="position: absolute;" title="TEST">
+                 (load)="draw(row,row.randomId + 'Img' , row.randomId + 'Canvas' )"/>
+            <canvas id="{{row.randomId + 'Canvas'}}" style="position: absolute;" title="Result">
               Your browser does not support the HTML5 canvas tag.
             </canvas>
           </div>

fe/fulltextsearch/src/app/model/parts/TextRegion.ts

@@ -1 +1 @@
 import { Coords } from './Coords';
 import { TextLine } from './TextLine';
-import {DocumentSize} from './DocumentSize';
+import { DocumentSize } from './DocumentSize';
 
 export class TextRegion {
   public imageCut: string;
@@ -9 +9 @@
   public textLines: TextLine[];
   public documentName: string;
   public documentSize: DocumentSize;
+  public randomId: string;
 }

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;
+  }
 }