All files / scripts Box.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80x
40x
40x
40x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
/**
 * @author Antonio Raúl Guijarro Contreras <alu0101100494@ull.edu.es>
 * @file Declaración de la clase Box. hereda de Rectangle y simboliza un contenedor gráfico y estructural
 * @copyright Antonio Raúl Guijarro Contreras 2020
 * @since 01.05.2020
 */
 
'use stric'
 
import Rectangle from './Rectangle.js';
import Point from './Point.js';
 
/** 
 * Hereda de Rectangle y representa un contenedor. Contiene un identificador y un elemento.
 * Dicho elemento tiene que tener una función para poder ser dibujado en canvas con nombre draw. El elemento
 * se dibujará relativamente al Box.
 * @extends Shape
*/
class Box extends Rectangle {
  /**
   * Contructor de la clase Box
   * @param {*} id identificador del contenedor
   * @param {*} element Elemento a almacenar
   * @param {Point} start Punto del triángulo.  Por defecto está asignado a (0, 0)
   * @param {number} width Punto del triángulo Por defecto está asignado a 0
   * @param {number} height Punto del triángulo Por defecto está asignado a 0
   */
  constructor(id, element, start = new Point(0, 0), width = 0, height = 0) {
    super(start, width, height);
    this.id = id;
    this.element = element;
  }
 
  /* istanbul ignore next   */
  /**
   * Se encarga de dibujar la figura que representa la clase
   * @param {Context} ctx Contexto del canvas, preferiblemente '2d'
   */
  draw(ctx) {
    if (ctx != null) {
      super.draw(ctx);
      if (this.element != null) {
        ctx.save();
        ctx.translate(this.start.x, this.start.y);
        
        // Controlamos el tipo de elemento
        if (this.element instanceof Image) {
          let auxFun = function() {
            ctx.drawImage(this.element, 0, 0,
              this.width, this.height);
          };
          this.element.onload = auxFun.call(this);
        } else {
          this.element.draw(ctx);
        }
 
        ctx.restore();
      }
    }
  }
 
}
 
export default Box;