literyzjs-timeline/bbtimeline-canvas.js

class BBTimelineCanvas {
  constructor(parentEl, el) {
    const a = this;

    a.Parent = parentEl;
    a.Container = el;
    a.CTX = a.Container.getContext("2d");

    a.ClientRectangle = { X: 0, Y: 0, W: 0, H: 0 };

    a.initialiseComponents();
  }

  initialiseComponents() {
    const a = this;

    a.Container.style.width = a.Parent.Size.W + "px";
    a.Container.style.height = a.Parent.Size.H + "px";
    a.Container.style.position = 'absolute';
    a.Container.style.border = 'none';

    a.CTX.canvas.width = a.Parent.Size.W;
    a.CTX.canvas.height = a.Parent.Size.H;

    a.Clear();
  }


  Clear() {
    const a = this;

    a.CTX.clearRect(0, 0, a.CTX.canvas.width, a.CTX.canvas.height);
  }

  Invalidate() {
    // placeholder
  }


  drawText(x, y, label, font, foreColour, align) {
    const a = this;

    a.CTX.font = font;
    a.CTX.fillStyle = foreColour;

    const size = a.measureText(font, label);

    switch (align) {
      case "center":
        x = (x - size.OffsetLeft);
        break;
      case "right":
        x = (x - size.Width);
        break;
      case "left":
      default:
        // do nothing
        break;
    }

    a.CTX.fillText(label, x, (y + size.Height));

    return size;
  }

  drawRectangle(rectangle, colour) {
    const a = this;

    a.CTX.beginPath();
    a.CTX.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
    //a.ctx.fillStyle = 'yellow';
    //a.ctx.fill();
    a.CTX.lineWidth = 1;
    a.CTX.strokeStyle = colour;
    a.CTX.stroke();
  }

  half(value) {
    return (value / 2);
  }

  measureText(font, value) {
    const a = this;

    a.CTX.font = font;
    const size = a.CTX.measureText(value);

    return {
      Width: size.width,
      Height: size.fontBoundingBoxAscent,
      OffsetLeft: a.half(size.width),
      OffsetTop: a.half(size.fontBoundingBoxAscent)
    };
  }

}