literyzjs-timeline/bbtimeline-background-canvas.js

class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
  constructor(parentEl, el) {
    super(parentEl, el);

    const a = this;

    a.GraphRectangle = { X: 0, Y: 0, W: 0, H: 0 };
    a.Margin = 0;
    a.StepHeight = 0;
    a.NoStep = 0;

    a.initialiseComponents();
  }

  initialiseComponents() {
    super.initialiseComponents();

    const a = this;

    a.ClientRectangle = {
      X: a.Parent.Padding.Left,
      Y: a.Parent.Padding.Top,
      W: (a.Parent.Size.W - (a.Parent.Padding.Left + a.Parent.Padding.Right)),
      H: (a.Parent.Size.H - (a.Parent.Padding.Top + a.Parent.Padding.Bottom))
    };

    a.GraphRectangle = {
      X: a.ClientRectangle.X,
      Y: a.ClientRectangle.Y,
      W: a.ClientRectangle.W,
      H: (a.ClientRectangle.H - a.XAxisHeight)
    };

    a.Margin = (a.Parent.Marker.BorderWidth * 2);
    a.StepHeight = a.Parent.Marker.Width + a.Margin;
    a.NoStep = Math.floor(a.GraphRectangle.H / a.StepHeight);

    a.Invalidate();
  }


  get XAxisHeight() {
    const a  = this;
    const labelSize = a.measureText(a.Parent.Axis.Font, "0");

    return labelSize.Height + a.Parent.Axis.LabelSpacing + (a.Parent.Axis.X.DayLineHeight * 2);
  }

  get XAxisPositions() {
    const a = this;
    const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);

    let result = [];
    let x = a.GraphRectangle.X;
    let date = a.Parent.ConvertToDate(a.Parent.ShowDate);

    // Rollback one day
    date.setDate(date.getDate() - 1);

    while (true) {
      if (x >= endPosX) {
        break;
      }

      result.push({
        Date: a.Parent.DateToInternalString(date),
        X: x
      });

      x += (a.Parent.Axis.X.HourLineSpace * a.Parent.Axis.X.NoPartPerDay);
      date.setDate(date.getDate() + 1);
    }

    return result;
  }


  Invalidate() {
    const a = this;

    a.Clear();

    a.drawAxis();
    a.drawXAxisTicks();
    a.drawXAxisLabels();

    if (a.Parent.Debug) a.drawRectangle(a.ClientRectangle, "red");
    if (a.Parent.Debug) a.drawRectangle(a.GraphRectangle, "red");
  }


  drawAxis() {
    const a = this;

    a.CTX.beginPath();
    a.CTX.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
    a.CTX.lineTo(a.GraphRectangle.X, (a.GraphRectangle.H + a.GraphRectangle.Y));
    a.CTX.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y));
    a.CTX.lineWidth = a.Parent.Axis.LineWidth;
    a.CTX.strokeStyle = a.Parent.Axis.LineColour1;
    a.CTX.stroke();
  }

  drawXAxisLabels() {
    const a = this;
    const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;

    a.XAxisPositions.forEach(function(e, i) {
      const date = a.Parent.ConvertToDate(e.Date);

      let writeLabel = false;
      if ((i == 0)) {
        // Don't label first entry if too close to the next month
        if (date.getDate() < 25) {
          writeLabel = true;
        }
      } else if (date.getDate() == 1) {
        writeLabel = true;
      }

      // if (i == 0) {
      //   return;
      // }

      const labelSize = a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight), a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center");

      // Write month on first of the month
      if (writeLabel) {
        a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight + labelSize.Height + a.Parent.Axis.LabelSpacing), a.Parent.DateToString(date, "MMMM yyyy"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left");
      }
    });
  }

  drawXAxisTicks() {
    const a = this;

    let startPosX = a.GraphRectangle.X;
    const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
    const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;

    let i = 0;

    while (true) {
      if (startPosX >= endPosX) {
        break;
      }

      a.CTX.beginPath();
      a.CTX.moveTo(startPosX, posY);

      if ((i % a.Parent.Axis.X.NoPartPerDay) == 0) {
        a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.DayLineHeight));
        a.CTX.strokeStyle = a.Parent.Axis.X.DayLineColour;
      } else {
        a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.HourLineHeight));
        a.CTX.strokeStyle = a.Parent.Axis.X.HourLineColour;
      }

      a.CTX.lineWidth = a.Parent.Axis.LineWidth;
      a.CTX.stroke();

      startPosX += a.Parent.Axis.X.HourLineSpace;

      i++;
    }
  }

}