literyzjs-timeline/src/timeline/background-canvas.js

import Canvas from '../references/canvas.js';


class BackgroundCanvas extends Canvas {
  Options = null;
  Debug = false;

  StartDate = new Date();
  // Duration = 30;
  // StartOfWeek = 1;
  // RowCount = 8;


  constructor(el) {
    super(el);
  }


  get ClientRectangle() {
    const a = this;

    return {
      X: a.Options.Padding.Left,
      Y: a.Options.Padding.Top,
      W: (a.Width - (a.Options.Padding.Left + a.Options.Padding.Right)),
      H: (a.Height - (a.Options.Padding.Top + a.Options.Padding.Bottom))
    };
  }


  // get HeaderRow1Rectangle() {
  //   return {
  //     X: 0,
  //     Y: 0,
  //     W: this.Width,
  //     H: (this.Options.HeaderRow.Height[0] - this.Options.BorderWidth)
  //   };
  // }

  // get HeaderRow2Rectangle() {
  //   const a = this;

  //   return {
  //     X: 0,
  //     Y: this.Options.HeaderRow.Height[0],
  //     W: this.Width,
  //     H: (this.Options.HeaderRow.Height[1] - this.Options.BorderWidth)
  //   };
  // }

  // get HeaderHeight() {
  //   const a = this;

  //   return a.Options.HeaderRow.Height[0] + a.Options.HeaderRow.Height[1];
  // }


  Load(startDate) {
    const a = this;

    a.StartDate = new Date(startDate);
  //   a.Duration = duration;
  //   a.StartOfWeek = startOfWeek;    // 1 = Monday
  //   a.RowCount = rowCount;
  }

  Invalidate() {
    const a = this;

    if (a.Options == null) {
      return;
    }

    if (a.Debug) {
      a.DrawRectangle(a.ClientRectangle, "red", {});
    }

    const y = Math.floor(a.ClientRectangle.Y + Math.half(a.ClientRectangle.H) + Math.half(a.Options.AxisLine.Width));

    a.DrawHorizontalLine(a.ClientRectangle.X, y, a.ClientRectangle.W, a.Options.AxisLine.Colour);

    const days = Math.floor(a.ClientRectangle.W / a.Options.XAxisLine.Spacing);

    for(var i=0; i<=days; i++) {
      const x = (a.ClientRectangle.X + (i * a.Options.XAxisLine.Spacing));

      if ((i % a.Options.XAxisLine.SegmentCount) == 0) {
        a.DrawVerticalLine(x, y, a.Options.XAxisLine.DayLineLength, a.Options.XAxisLine.DayLineColour, {
          LineWidth: a.Options.XAxisLine.DayLineWidth,
          Precise: true
        });
      } else {
        a.DrawVerticalLine(x, y, a.Options.XAxisLine.HourLineLength, a.Options.XAxisLine.HourLineColour, {
          LineWidth: a.Options.XAxisLine.HourLineWidth,
          Precise: true
        });
      }

    }

    // if (a.StartDate == null) {
    //   return;
    // }

    // a.#drawChartHeader();
    // a.#drawColumnLayout();
    // a.#drawRowLayout();
  }

  // #drawChartHeader() {
  //   const a = this;

  //   const displayDays = a.Duration + 2;

  //   if (a.Debug) {
  //     a.DrawRectangle(a.HeaderRow1Rectangle, "red", {});
  //     a.DrawRectangle(a.HeaderRow2Rectangle, "orange", {});
  //   }

  //   let startDate = new Date(a.StartDate);
  //   startDate.addDays(-1);

  //   // Draw horizontal line under months
  //   a.#drawHorizontalLine(a.Options.HeaderRow.Height[0]);

  //   // Draw vertical lines for dates
  //   for (let i=1; i<displayDays; i++) {
  //     a.DrawVerticalLine((a.Options.DayWidth * i), (a.Options.HeaderRow.Height[0] + a.Options.BorderWidth), (a.Options.HeaderRow.Height[1] - a.Options.BorderWidth), a.Options.BorderColour, {});
  //   }

  //   // Draw horizontal line under dates
  //   a.#drawHorizontalLine(a.HeaderHeight);

  //   // Write dates
  //   for (let i=0; i<displayDays; i++) {
  //     const date = Date.addDays(startDate, i);
  //     const x = (a.Options.DayWidth * i);

  //     // Draw month
  //     if (date.getDate() == 1) {
  //       const size = a.MeasureText(a.Options.DateFont, "#");
  //       const monthPoint = {
  //         X: (x + 2),
  //         Y: Math.half(a.Options.HeaderRow.Height[0] - size.H)
  //       };

  //       a.DrawText(monthPoint.X, monthPoint.Y, date.toCString("MMMM"), a.Options.DateFont, a.Options.DateForeColour);
  //     }

  //     // Draw day
  //     const dateRectangle = {
  //       X: x,
  //       Y: a.Options.HeaderRow.Height[0],
  //       W: a.Options.DayWidth - a.Options.BorderWidth,
  //       H: (a.Options.HeaderRow.Height[1] - a.Options.BorderWidth)
  //     };

  //     a.FillText(dateRectangle, date.getDate(), a.Options.DateFont, a.Options.DateForeColour);

  //     if (a.Debug) {
  //       a.DrawRectangle(dateRectangle, "red", {});
  //     }

  //   }
  // }

  // #drawColumnLayout() {
  //   const a = this;

  //   const height = a.Height;
  //   const displayDays = a.Duration + 2;

  //   let startDate = new Date(a.StartDate);
  //   startDate.addDays(-1);

  //   // Write dates
  //   for (let i=0; i<displayDays; i++) {
  //     const date = Date.addDays(startDate, i);
  //     const x = (a.Options.DayWidth * i);

  //     const dateRectangle = {
  //       X: x,
  //       Y: a.HeaderHeight,
  //       W: a.Options.DayWidth - a.Options.BorderWidth,
  //       H: height - a.Options.BorderWidth
  //     };

  //     // Fill background for Saturday and Sunday
  //     if (date.getDay() == 6) {
  //       a.DrawRectangle(dateRectangle, a.Options.Column.SatColour, { FillColour: a.Options.Column.SatColour });
  //     } else if (date.getDay() == 0) {
  //       a.DrawRectangle(dateRectangle, a.Options.Column.SunColour, { FillColour: a.Options.Column.SunColour });
  //     }

  //     // Draw vertical date lines
  //     if (a.StartOfWeek == date.getDay()) {
  //       if (a.Options.ShowStartDayOfWeekLine) {
  //         a.DrawVerticalLine(dateRectangle.X, a.HeaderHeight, dateRectangle.H, a.Options.BorderColour, {});
  //       }
  //     } else {
  //       if (a.Options.ShowDateLines) {
  //         a.DrawVerticalLine(dateRectangle.X, a.HeaderHeight, dateRectangle.H, a.Options.BorderColour, { LineDash: a.Options.BorderDashPattern });
  //       }
  //     }

  //   }
  // }

  // #drawRowLayout() {
  //   const a = this;

  //   for (let i=0; i<a.RowCount; i++) {
  //     const rowRectangle = {
  //       X: 0,
  //       Y: (a.HeaderHeight + (a.Options.Row.Height * i)),
  //       W: a.Width,
  //       H: (a.Options.Row.Height - a.Options.BorderWidth)
  //     };

  //     if (a.Options.ShowRowStripes) {
  //       if ((i % 2) == 1) {
  //         a.DrawRectangle(rowRectangle, a.Options.Row.BackColour, { FillColour: a.Options.Row.BackColour });
  //       }
  //     }

  //     if (a.Options.ShowRowLines) {
  //       a.DrawHorizontalLine(0, (rowRectangle.Y + a.Options.Row.Height), rowRectangle.W, a.Options.BorderColour, { LineDash: a.Options.BorderDashPattern });
  //     }

  //   }
  // }

  // #drawHorizontalLine(y) {
  //   const a = this;
  //   const width = a.Width;

  //   a.DrawHorizontalLine(0, y, width, this.Options.BorderColour);
  // }

}


export default BackgroundCanvas;