aswi2020anonymous-gitlab/fe/fulltextsearch/src/app/services/drawer/drawer.service.ts @ 9508f0fa

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';

@Injectable({
  providedIn: 'root'
})
export class DrawerService {

  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');
              }
            }
            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');
      }
    } else {
      // all document
      // TODO : obarvit celý výřez
      this.LOGGER.warn('Print all document');
    }
  }

  private initCanvas(imageId: string, canvasId: string) {
    const img = document.getElementById(imageId);
    const canvasElement = document.getElementById(canvasId);
    const canvas = <HTMLCanvasElement> document.getElementById(canvasId);

    const absolutePosition = Utils.getAbsolutePositionOfElement(document.getElementById(imageId));

    canvasElement.style.display = 'block';
    canvasElement.style.left = absolutePosition.left + 'px';
    canvasElement.style.top = absolutePosition.top + 'px';

    const ctx = canvas.getContext('2d');
    ctx.canvas.width = img.offsetWidth;
    ctx.canvas.height = img.offsetHeight;

    return ctx;
  }

  private draw(points: Point[], context: CanvasRenderingContext2D) {
    let firstPoint = true;
    context.beginPath();

    for (const point of points) {
      if (firstPoint) {
        context.moveTo(point.x / 1.676, point.y / 1.676);
        firstPoint = false;
      } else {
        context.lineTo(point.x / 1.676, point.y / 1.676);
      }
    }
    context.closePath();

    context.lineWidth = 2;
    context.strokeStyle = '#ff253b';
    context.fillStyle = 'hsla(14, 100%, 53%, 0.3)';
    context.fill();
    context.stroke();
  }
}