Nightly

demo.html

@@ -10,15 +10,7 @@
   <!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
   <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
-  <script src="dist//timeline.min.js"></script>
-
-  <!-- <script src="bbtimeline.js"></script> -->
-  <!-- <script src="bbtimeline-canvas.js"></script> -->
-  <!-- <script src="bbtimeline-background-canvas.js"></script> -->
-  <!-- <script src="bbtimeline-flourish-canvas.js"></script> -->
-  <!-- <script src="bbtimeline-foreground-canvas.js"></script> -->
-
-  <!-- <script src="bbtimeline.min.js"></script> -->
+  <script src="dist/timeline.dist.js"></script>
 
   <title></title>
 </head>
@@ -134,46 +126,47 @@ textarea {
 
 
 #myCanvas {
-  border-style: solid;
+  /* border-style: solid;
   border-width: 1px;
-  border-color: #000000;
+  border-color: #000000; */
   width: 100%;
   height: 300px;
-  padding: 0;
-  margin: 0;
+  /* padding: 0; */
+  /* margin: 0; */
 }
 
+
   </style>
 
   <script>
 
-var timeline1 = new LiteRyzJS.Timeline("myCanvas");
-timeline1.OnMouseDown = function(sender, e, event) {
-  LogInfo("");
-  LogInfo("OnMouseDown");
-  LogInfo(JSON.stringify(sender));
-  LogInfo(JSON.stringify(e));
-  LogInfo(JSON.stringify(event));
-  LogInfo("");
-}
-timeline1.OnClick = function(sender, e, event) {
-  LogInfo("");
-  LogInfo("OnClick");
-  LogInfo(JSON.stringify(sender));
-  LogInfo(JSON.stringify(e));
-  LogInfo(JSON.stringify(event));
-  LogInfo("");
-}
-timeline1.OnDblClick = function(sender, e, event) {
-  LogInfo("");
-  LogInfo("OnDblClick");
-  LogInfo(JSON.stringify(sender));
-  LogInfo(JSON.stringify(e));
-  LogInfo(JSON.stringify(event));
-  LogInfo("");
-}
+var timeline1 = new LiteRyzJS.Timeline(document.getElementById("myCanvas"), {});
+// timeline1.OnMouseDown = function(sender, e, event) {
+//   LogInfo("");
+//   LogInfo("OnMouseDown");
+//   LogInfo(JSON.stringify(sender));
+//   LogInfo(JSON.stringify(e));
+//   LogInfo(JSON.stringify(event));
+//   LogInfo("");
+// }
+// timeline1.OnClick = function(sender, e, event) {
+//   LogInfo("");
+//   LogInfo("OnClick");
+//   LogInfo(JSON.stringify(sender));
+//   LogInfo(JSON.stringify(e));
+//   LogInfo(JSON.stringify(event));
+//   LogInfo("");
+// }
+// timeline1.OnDblClick = function(sender, e, event) {
+//   LogInfo("");
+//   LogInfo("OnDblClick");
+//   LogInfo(JSON.stringify(sender));
+//   LogInfo(JSON.stringify(e));
+//   LogInfo(JSON.stringify(event));
+//   LogInfo("");
+// }
 
-SetToday();
+// SetToday();
 
 
 

package.json

@@ -2,10 +2,15 @@
   "name": "LiteRyzJS/Timeline",
   "version": "0.2.0.121",
   "devDependencies": {
+    "css-loader": "^7.1.2",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.0",
+    "style-loader": "^4.0.0",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4"
   },
   "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "watch": "webpack --watch"
   }
 }

src/references/canvas-container.js

@@ -0,0 +1,229 @@
+class CanvasContainer {
+
+  constructor(el) {
+    const a = this;
+
+    a.el = el;
+
+    a.Layer = [];
+    a.BorderWidth = 2;
+    a.ScrollbarWidth = 11;
+    a.Padding = {
+      Top: 0,
+      Right: 0,
+      Bottom: 0,
+      Left: 0
+    };
+    a.EnableDock = true;
+
+    a.#initialiseComponents();
+  }
+
+  #initialiseComponents() {
+    const a = this;
+
+    a.ClearLayers();
+
+    // a.Invalidate();
+    // a.Clear();
+  }
+
+
+  get FlowContainer() {
+    return this.el.getElementsByTagName("div")[0];
+  }
+
+  get Height() {
+    const a = this;
+
+    if (a.Layer.length <= 0) {
+      return 0;
+    }
+
+    return Document.getHeight(a.Layer[0].el);
+  }
+
+  set Height(value) {
+    const a = this;
+
+    // if (a.el != null) {
+    //   a.el.style.height = value + "px";
+    // }
+
+    if (a.FlowContainer != null) {
+      a.FlowContainer.style.height = value + "px";
+    }
+
+    // if (a.CanvasContainer != null) {
+    //   a.CanvasContainer.style.height = value + "px";
+    // }
+
+    // if (a.CanvasContext != null) {
+    //   a.CanvasContext.canvas.height = value;
+    // }
+
+    a.Layer.forEach((e, i) => {
+      e.Height = value;
+    });
+  }
+
+  get Width() {
+    const a = this;
+
+    if (a.Layer.length <= 0) {
+      return 0;
+    }
+
+    return Document.getWidth(a.Layer[0].el);
+  }
+
+  set Width(value) {
+    const a = this;
+
+    // if (a.el != null) {
+    //   a.el.style.width = value + "px";
+    // }
+
+    if (a.FlowContainer != null) {
+      a.FlowContainer.style.width = value + "px";
+    }
+
+    // if (a.CanvasContainer != null) {
+    //   a.CanvasContainer.style.width = value + "px";
+    // }
+
+    // if (a.CanvasContext != null) {
+    //   a.CanvasContext.canvas.width = value;
+    // }
+
+    a.Layer.forEach((e, i) => {
+      e.Width = value;
+    });
+  }
+
+  get Size() {
+    return {
+      W: this.Width,
+      H: this.Height
+    };
+  }
+
+  set Size(value) {
+    this.Width = value.W;
+    this.Height = value.H;
+  }
+
+  get ClientRectangle() {
+    const a = this;
+
+    return {
+      X: a.Padding.Left,
+      Y: a.Padding.Top,
+      W: (a.Width - (a.Padding.Left + a.Padding.Right)),
+      H: (a.Height - (a.Padding.Top + a.Padding.Bottom))
+    };
+  }
+
+  get Rectangle() {
+    const a = this;
+
+    return {
+      X: 0,
+      Y: 0,
+      W: a.Width,
+      H: a.Height
+    };
+  }
+
+
+  Clear() {
+    const a = this;
+
+    // if (a.CanvasContext == null) {
+    //   return;
+    // }
+
+    // a.CanvasContext.clearRect(0, 0, a.CanvasContext.canvas.width, a.CanvasContext.canvas.height);
+
+    a.Layer.forEach((e, i) => {
+      e.Clear();
+    });
+  }
+
+  ClearLayers() {
+    const a = this;
+
+    if (a.el != null) {
+      a.el.innerHTML = "<div class='border'></div>";
+    }
+
+    a.Layer = [];
+
+    a.Invalidate();
+  }
+
+  AddLayer() {
+    const a = this;
+
+    if (a.el == null) {
+      return;
+    }
+
+    const divList = a.el.getElementsByTagName("div");
+    if (divList.length <= 0) {
+      return;
+    }
+
+    // Add another canvas element
+    Document.appendHtml(divList[0], "canvas");
+
+    const canvasList = a.el.getElementsByTagName("canvas");
+    const result = canvasList[(canvasList.length - 1)];
+
+    return result;
+  }
+
+  Invalidate() {
+    const a = this;
+
+    if (a.EnableDock) {
+      a.FlowContainer.style.width = "100%";
+    }
+
+    const w = (a.Layer.length <= 0 ? 0 : Document.getWidth(a.Layer[0].el));
+    const h = (a.Layer.length <= 0 ? 0 : Document.getHeight(a.Layer[0].el));
+
+    if (w > (Document.getWidth(a.FlowContainer) + (a.BorderWidth * 2))) {
+      a.FlowContainer.classList.add("scroll-x");
+      a.FlowContainer.style.height = (h + a.ScrollbarWidth) + "px";
+    } else {
+      a.FlowContainer.classList.remove("scroll-x");
+      a.FlowContainer.style.height = h + "px";
+    }
+
+    a.Layer.forEach(e => {
+      if (typeof(e.Invalidate) != "undefined") {
+        e.Invalidate();
+      }
+    });
+
+    let offsetTop = 0;
+
+    a.Layer.forEach((e, i) => {
+      if (i <= 0) {
+        return;
+      }
+
+      // Correct positon because of position-relative to keep container overflow working
+      const h = Document.getHeight(a.Layer[(i - 1)].el);
+
+      offsetTop += h;
+
+      a.Layer[i].el.style.top = "-" + offsetTop + "px";
+    });
+  }
+
+}
+
+
+export default CanvasContainer;

src/references/canvas.js

@@ -0,0 +1,446 @@
+class Canvas {
+  constructor(el) {
+    const a = this;
+
+    a.el = el;
+
+    a.BorderWidth = 2;
+
+    a.#initialiseComponents();
+  }
+
+  #initialiseComponents() {
+    const a = this;
+
+    if (a.el == null) {
+      return;
+    }
+
+    a.Clear();
+    a.Invalidate();
+  }
+
+
+  get CanvasContext() {
+    return this.el.getContext("2d");
+  }
+
+  get Height() {
+    const a = this;
+
+    if (a.el == null) {
+      return 0;
+    }
+
+    return Document.getHeight(a.el);
+  }
+
+  set Height(value) {
+    const a = this;
+
+    if (a.el != null) {
+      a.el.style.height = value + "px";
+    }
+
+    if (a.CanvasContext != null) {
+      a.CanvasContext.canvas.height = value;
+    }
+  }
+
+  get Width() {
+    const a = this;
+
+    if (a.el == null) {
+      return 0;
+    }
+
+    return Document.getWidth(a.el);
+  }
+
+  set Width(value) {
+    const a = this;
+
+    if (a.el != null) {
+      a.el.style.width = value + "px";
+    }
+
+    if (a.CanvasContext != null) {
+      a.CanvasContext.canvas.width = value;
+    }
+  }
+
+  get Size() {
+    return {
+      W: this.Width,
+      H: this.Height
+    };
+  }
+
+  set Size(value) {
+    this.Width = value.W;
+    this.Height = value.H;
+  }
+
+  get Rectangle() {
+    const a = this;
+
+    return {
+      X: 0,
+      Y: 0,
+      W: a.Width,
+      H: a.Height
+    };
+  }
+
+
+  Clear() {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    a.CanvasContext.clearRect(0, 0, a.CanvasContext.canvas.width, a.CanvasContext.canvas.height);
+  }
+
+  DrawArrowS(rectangle, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= opt.LineWidth;
+    rectangle.H -= opt.LineWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.moveTo(rectangle.X, rectangle.Y);
+    a.CanvasContext.lineTo((rectangle.X + rectangle.W), rectangle.Y);
+    a.CanvasContext.lineTo((rectangle.X + Math.half(rectangle.W)), (rectangle.Y + rectangle.H));
+
+    a.CanvasContext.closePath();
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawCircle(x, y, width, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    let rectangle = {
+      X: x + Math.half(width),
+      Y: y + Math.half(width),
+      W: Math.half(width),
+      H: Math.half(width)
+    };
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= Math.half(opt.LineWidth);
+    rectangle.H -= Math.half(opt.LineWidth);
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.arc(rectangle.X, rectangle.Y, rectangle.W, 0, 2 * Math.PI, false);
+
+    a.CanvasContext.closePath();
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawDiamond(rectangle, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= opt.LineWidth;
+    rectangle.H -= opt.LineWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.moveTo((rectangle.X + Math.half(rectangle.W)), rectangle.Y);
+    a.CanvasContext.lineTo((rectangle.X + rectangle.W), (rectangle.Y + Math.half(rectangle.H)));
+    a.CanvasContext.lineTo((rectangle.X + Math.half(rectangle.W)), (rectangle.Y + rectangle.H));
+    a.CanvasContext.lineTo(rectangle.X, (rectangle.Y + Math.half(rectangle.H)));
+
+    a.CanvasContext.closePath();
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawRectangle(rectangle, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      FillColour: null
+    }, options);
+
+    // Adjust for pen discrepancy
+    rectangle.X += 0.5;
+    rectangle.Y += 0.5;
+    rectangle.W -= opt.LineWidth;
+    rectangle.H -= opt.LineWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
+
+    if (opt.FillColour != null) {
+      a.CanvasContext.fillStyle = opt.FillColour;
+      a.CanvasContext.fill();
+    }
+
+    a.CanvasContext.closePath();
+    a.CanvasContext.stroke();
+  }
+
+  DrawLine(startX, startY, finishX, finishY, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: []
+    }, options);
+
+    startY -= 0.5;
+    // y -= penWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.moveTo(startX, startY);
+    a.CanvasContext.lineTo(finishX, finishY);
+    a.CanvasContext.stroke();
+  }
+
+  DrawLines(points, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    if (points == null) {
+      return;
+    }
+
+    if (points.length <= 0) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: []
+    }, options);
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+
+    a.CanvasContext.moveTo(points[0].X, points[0].Y);
+
+    for (let i=1; i<points.length; i++) {
+      a.CanvasContext.lineTo(points[i].X, points[i].Y);
+    }
+
+    a.CanvasContext.stroke();
+  }
+
+  DrawHorizontalLine(x, y, width, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: []
+    }, options);
+
+    y -= 0.5;
+    // y -= penWidth;
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+    a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.moveTo(x, y);
+    a.CanvasContext.lineTo((x + width), y);
+    a.CanvasContext.stroke();
+  }
+
+  DrawText(x, y, text, font, foreColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      Align: "left"
+    }, options);
+
+    a.CanvasContext.font = font;
+    a.CanvasContext.fillStyle = foreColour;
+    a.CanvasContext.textAlign = opt.Align;
+    a.CanvasContext.textBaseline = "top";
+
+    a.CanvasContext.fillText(text, x, y);
+  }
+
+  DrawVerticalLine(x, y, height, penColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      LineWidth: 1,
+      LineDash: [],
+      Precise: false
+    }, options);
+
+    if (!opt.Precise) {
+      x -= 0.5;
+      y -= opt.LineWidth;
+    }
+
+    a.CanvasContext.beginPath();
+    a.CanvasContext.strokeStyle = penColour;
+    a.CanvasContext.lineWidth = opt.LineWidth;
+     a.CanvasContext.setLineDash(opt.LineDash);
+    a.CanvasContext.moveTo(x, y);
+    a.CanvasContext.lineTo(x, (y + height));
+    a.CanvasContext.stroke();
+  }
+
+  FillText(rectangle, text, font, foreColour, options) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return;
+    }
+
+    const opt = Object.assign({
+      Align: "center",
+      VAlign: "middle"
+    }, options);
+
+    a.CanvasContext.font = font;
+    a.CanvasContext.fillStyle = foreColour;
+    a.CanvasContext.textAlign = opt.Align;
+    // a._ctx.textBaseline = verticalAlign;
+    a.CanvasContext.textBaseline = "top";
+
+    const size = a.CanvasContext.measureText(text);
+    const x = rectangle.X + Math.half(rectangle.W);
+    let y = rectangle.Y;
+
+    switch (opt.VAlign) {
+      case "center":
+      case "middle":
+        y += Math.half((rectangle.H - size.fontBoundingBoxDescent)) + size.fontBoundingBoxAscent;
+        break;
+      case "bottom":
+        y += (rectangle.H - size.fontBoundingBoxDescent);
+        break;
+      case "top":
+      default:
+        break;
+    }
+
+    a.CanvasContext.fillText(text, x, y);
+  }
+
+  MeasureText(font, value) {
+    const a = this;
+
+    if (a.CanvasContext == null) {
+      return null;
+    }
+
+    a.CanvasContext.font = font;
+
+    const size = a.CanvasContext.measureText(value);
+
+    return {
+      W: size.width,
+      H: Math.round(size.fontBoundingBoxDescent + size.fontBoundingBoxAscent)
+    };
+  }
+
+}
+
+
+export default Canvas;

src/timeline/background-canvas.js

@@ -0,0 +1,243 @@
+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;

src/timeline/timeline-background-canvas.js

@@ -1,3 +1,5 @@
+import '../references/extensions.dist.js';
+
 import TimelineCanvas from './timeline-canvas.js';
 
 
@@ -165,12 +167,12 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
       //   // Don't write first date
       // } else {
         // Write date (dd)
-        a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "center");
+        a.drawText(e.X, posDayY, date.toCString("dd"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "center");
       // }
 
       // Write month (MMMM) on first of the month
       if (writeLabel) {
-        a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "left");
+        a.drawText(e.X, posMonthY, date.toCString("MMMM yyyy"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "left");
       }
     });
   }

src/timeline/timeline-event-items.js

@@ -0,0 +1,10 @@
+class TimelineEventItems {
+  Title = "";
+  Description = "";
+  Link = "";
+  Tag = null;
+
+}
+
+
+export default TimelineEventItems;

src/timeline/timeline-events.js

@@ -0,0 +1,16 @@
+class TimelineEvents {
+  Date = "";
+  Label = "";
+  Position = {
+    X: 0,
+    Y: 0
+  };
+  Events = [];
+  HitBox = null;
+  BorderColour = "#3A5D9C";
+  BackColour = "#D4DEEF";
+
+}
+
+
+export default TimelineEvents;

src/timeline/timeline-options.js

@@ -0,0 +1,89 @@
+class TimelineOptions {
+  Padding = {
+    Left: 20,
+    Top: 20,
+    Right: 20,
+    Bottom: 0
+  };
+
+  AxisLine = {
+    Colour: "#555555",
+    Width: 2
+  };
+
+  XAxisLine = {
+    Spacing: 6,
+    SegmentCount: 4,
+
+    DayLineLength: 20,
+    DayLineWidth: 2,
+    DayLineColour: "#9E9E9E",
+
+    // NoPartPerDay: 4,
+    // HourLineSpace: 6,
+
+    HourLineLength: 10,
+    HourLineWidth: 2,
+    HourLineColour: "#EAEAEA",
+
+  };
+
+
+  // DayWidth = 24;
+  // HeaderRow = {
+  //   Height: [ 20, 20 ]
+  // };
+  // Row = {
+  //   Height: 28,
+  //   BackColour: "rgba(235, 235, 235, 0.3)",
+  //   Task: {
+  //     Height: 14,
+  //     BorderColour: "#555555",
+  //     FillColour: "#D8EEDB"
+  //   },
+  //   OrphanTask: {
+  //     Height: 14,
+  //     BorderColour: "#555555",
+  //     FillColour: "#9CC2E6"
+  //   },
+  //   ChildTask: {
+  //     Height: 14,
+  //     BorderColour: "#555555",
+  //     FillColour: "#FFF5C1"
+  //   },
+  //   CollatedTask: {
+  //     Height: 6,
+  //     BorderColour: "#555555",
+  //     FillColour: "#555555"
+  //   }
+  // };
+  // Column = {
+  //   SatColour: "rgba(233, 237, 239, 0.8)",
+  //   SunColour: "rgba(233, 237, 239, 0.9)"
+  // };
+  // Line = {
+
+  //   Colour: "#555555",
+  //   Width: 1,
+  //   ArrowSize: 5
+  // };
+  // HotTrackLine = {
+  //   Colour: "#D04437",
+  //   Width: 1
+  // };
+  // DateFont = "7pt sans-serif";
+  // DateForeColour = "#636363";
+  // BorderWidth = 1;
+  // BorderColour = "#B8B8B8";
+  // BorderDashPattern = [1, 1];
+  // EnableHotTracking = true;
+  // MinimumRowCount = 6;
+  // ShowDateLines = true;
+  // ShowStartDayOfWeekLine = true;
+  // ShowRowLines = true;
+  // ShowRowStripes = true;
+
+}
+
+
+export default TimelineOptions;

src/timeline/timeline.js

@@ -1,364 +1,453 @@
-import TimelineBackgroundCanvas from './timeline-background-canvas.js';
-import TimelineFlourishCanvas from './timeline-flourish-canvas.js';
-import TimelineForegroundCanvas from './timeline-foreground-canvas.js';
+import '../references/extensions.dist.js';
+
+import TimelineEvents from './timeline-events.js';
+import TimelineEventItems from './timeline-event-items.js';
+
+import TimelineOptions from './timeline-options.js';
+
+import CanvasContainer from '../references/canvas-container.js';
+import BackgroundCanvas from './background-canvas.js';
+// import ForegroundCanvas from './foreground-canvas.js';
+// import FlourishCanvas from './flourish-canvas.js';
+
+import './timeline.scss';
+
+
+// import TimelineBackgroundCanvas from './timeline-background-canvas.js';
+// import TimelineFlourishCanvas from './timeline-flourish-canvas.js';
+// import TimelineForegroundCanvas from './timeline-foreground-canvas.js';
 
 
 class Timeline {
-  constructor(el) {
+  Options = null;
+  CanvasContainer = null;
+
+  StartDate = new Date();
+
+  #debug = false;
+
+
+  constructor(el, options) {
     const a = this;
 
-    a.Container = document.getElementById(el);
-    a.Padding = {
-      Left: 20,
-      Top: 20,
-      Right: 20,
-      Bottom: 0
-    };
-    a.Size = {
-      W: a.Container.innerWidth || a.Container.clientWidth,
-      H: a.Container.innerHeight || a.Container.clientHeight
-    };
-    a.Layer = {
-      Background: null,
-      Flourish: null,
-      Markers: null
-    };
+    a.Options = Object.assign(new TimelineOptions(), options);
+    a.CanvasContainer = new CanvasContainer(el);
 
-    a.DateParsePattern = "yyyy-MM-dd";
+    // a.Container = document.getElementById(el);
+        // a.Padding = {
+        //   Left: 20,
+        //   Top: 20,
+        //   Right: 20,
+        //   Bottom: 0
+        // };
+    // a.Size = {
+    //   W: a.Container.innerWidth || a.Container.clientWidth,
+    //   H: a.Container.innerHeight || a.Container.clientHeight
+    // };
+    // a.Layer = {
+    //   Background: null,
+    //   Flourish: null,
+    //   Markers: null
+    // };
 
-    a.HotTrack  = {
-      Colour: "#F57C00",
-      Width: 3
-    };
+    // a.DateParsePattern = "yyyy-MM-dd";
 
-    a.Events = [];
-    a.StartDate = a.DateToInternalString(new Date());
-    a.ShowDate = a.StartDate;
-    a.ShowMarkerLabel = true;
+    // a.HotTrack  = {
+    //   Colour: "#F57C00",
+    //   Width: 3
+    // };
 
-    a.Enabled = false;
-    a.Debug = false;
-    a.EnableHotTracking = true;
+    // a.Events = [];
+    // a.StartDate = a.DateToInternalString(new Date());
+    // a.ShowDate = a.StartDate;
+    // a.ShowMarkerLabel = true;
 
-    a.initialiseComponents();
+    // a.Enabled = false;
+    // a.Debug = false;
+    // a.EnableHotTracking = true;
+
+    a.#initialiseComponents();
   }
 
-  initialiseComponents() {
+  #initialiseComponents() {
     const a = this;
 
-    a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
+    // a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
 
-    const canvasList = a.Container.getElementsByTagName("canvas");
+    // const canvasList = a.Container.getElementsByTagName("canvas");
 
-    a.Layer.Background = new TimelineBackgroundCanvas(a, canvasList[0]);
-    a.Layer.Flourish = new TimelineFlourishCanvas(a, canvasList[1]);
-    a.Layer.Markers = new TimelineForegroundCanvas(a, canvasList[2]);
+    // a.Layer.Background = new TimelineBackgroundCanvas(a, canvasList[0]);
+    // a.Layer.Flourish = new TimelineFlourishCanvas(a, canvasList[1]);
+    // a.Layer.Markers = new TimelineForegroundCanvas(a, canvasList[2]);
 
+    a.#initialiseComponents_AddBackgroundCanvas();
+
+    // Invalidate every canvas
+    a.CanvasContainer.Invalidate();
+
+    // Document.removeClass(a.CanvasContainer.FlowContainer, "border");
+    Document.addClass(a.CanvasContainer.FlowContainer, "literyzjs-timeline");
+
+    a.Debug = true;
+
+    a.Invalidate();
   }
 
-
-  get CTX() {
-    return a.Layer.Markers.CTX;
-  }
-
-  get NewEvent() {
+  #initialiseComponents_AddBackgroundCanvas() {
     const a = this;
 
-    return {
-      Date: "",
-      Label: "",
-      Position: { X: 0, Y: 0 },
-      Events: [],
-      HitBox: null,
-      BorderColour: a.Layer.Markers.Options.Marker.BorderColour,
-      BackColour: a.Layer.Markers.Options.Marker.BackColour
-    };
+    const layer = a.CanvasContainer.AddLayer();
+
+    const canvasLayer = new BackgroundCanvas(layer);
+    canvasLayer.Options = a.Options;
+
+    a.CanvasContainer.Layer.push(canvasLayer);
   }
 
-  get NewEventItem() {
-    return {
-      Title: "",
-      Description: "",
-      Link: "",
-      Tag: null
-    };
+
+  get Debug() {
+    return this.#debug;
   }
 
-  get VisibleDays() {
-    const a = this;
-    const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
-
-    return Math.floor(clientWidth / (a.XAxis.NoPartPerDay * a.XAxis.HourLineSpace));
-  }
-
-  get VisibleStartDate() {
+  set Debug(value) {
     const a = this;
 
-    return a.ConvertToDate(a.ShowDate);
-  }
+    a.#debug = value;
 
-  get VisibleEndDate() {
-    const a = this;
-
-    let date = a.ConvertToDate(a.ShowDate);
-    date.setDate(date.getDate() + a.VisibleDays);
-
-    // Minus one for lead up
-    date.setDate(date.getDate() - 1);
-
-    return a.DateToString(date, a.DateParsePattern);
-  }
-
-  get VisibleEvents() {
-    const a = this;
-    let result = [];
-
-    a.Layer.Background.XAxisPositions.forEach(function (e) {
-      const event = a.FindEvent(e.Date);
-      if (event == null) {
+    a.CanvasContainer.Layer.forEach(e => {
+      if (typeof(e.Debug) == "undefined") {
         return;
       }
 
-      // Set offsetX on current view
-      event.Position.X = e.X;
-
-      result.push(event);
+      e.Debug = value;
     });
 
-    return result;
-  }
-
-  get XAxis() {
-    const a = this;
-
-    return a.Layer.Background.Options.XAxis;
   }
 
 
-  AddEvent(date, label, options) {
-    const a = this;
 
-    const _options = Object.assign(a.NewEventItem, options);
+  // get CTX() {
+  //   return a.Layer.Markers.CTX;
+  // }
 
-    let event = a.FindEvent(date);
-    if (event == null) {
-      let newEvent = a.NewEvent;
-      newEvent.Date = date;
+  // get NewEvent() {
+  //   const a = this;
 
-      a.Events.push(newEvent);
+  //   return {
+  //     Date: "",
+  //     Label: "",
+  //     Position: { X: 0, Y: 0 },
+  //     Events: [],
+  //     HitBox: null,
+  //     BorderColour: a.Layer.Markers.Options.Marker.BorderColour,
+  //     BackColour: a.Layer.Markers.Options.Marker.BackColour
+  //   };
+  // }
 
-      event = a.FindEvent(date);
-    }
+  // get NewEventItem() {
+  //   return {
+  //     Title: "",
+  //     Description: "",
+  //     Link: "",
+  //     Tag: null
+  //   };
+  // }
 
-    if (label != null) {
-      event.Label = label;
-    }
+  // get VisibleDays() {
+  //   const a = this;
+  //   const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
 
-    event.Events.push(_options);
-  }
+  //   return Math.floor(clientWidth / (a.XAxis.NoPartPerDay * a.XAxis.HourLineSpace));
+  // }
+
+  // get VisibleStartDate() {
+  //   const a = this;
+
+  //   return a.ConvertToDate(a.ShowDate);
+  // }
+
+  // get VisibleEndDate() {
+  //   const a = this;
+
+  //   let date = a.ConvertToDate(a.ShowDate);
+  //   date.setDate(date.getDate() + a.VisibleDays);
+
+  //   // Minus one for lead up
+  //   date.setDate(date.getDate() - 1);
+
+  //   return date.toCString(a.DateParsePattern);
+  // }
+
+  // get VisibleEvents() {
+  //   const a = this;
+  //   let result = [];
+
+  //   a.Layer.Background.XAxisPositions.forEach(function (e) {
+  //     const event = a.FindEvent(e.Date);
+  //     if (event == null) {
+  //       return;
+  //     }
+
+  //     // Set offsetX on current view
+  //     event.Position.X = e.X;
+
+  //     result.push(event);
+  //   });
+
+  //   return result;
+  // }
+
+  // get XAxis() {
+  //   const a = this;
+
+  //   return a.Layer.Background.Options.XAxis;
+  // }
+
+
+  // AddEvent(date, label, options) {
+  //   const a = this;
+
+  //   const _options = Object.assign(new TimelineEvents(), options);
+
+  //   let event = a.FindEvent(date);
+  //   if (event == null) {
+  //     let newEvent = a.NewEvent;
+  //     newEvent.Date = date;
+
+  //     a.Events.push(newEvent);
+
+  //     event = a.FindEvent(date);
+  //   }
+
+  //   if (label != null) {
+  //     event.Label = label;
+  //   }
+
+  //   event.Events.push(_options);
+  // }
 
   Clear() {
     const a = this;
 
-    a.Layer.Background.Clear();
-    a.Layer.Flourish.Clear();
-    a.Layer.Markers.Clear();
+    a.CanvasContainer.Layer[0].Load(new Date());
 
-    a.StartDate = a.DateToInternalString(new Date());
-    a.ShowDate = a.StartDate;
-    a.Enabled = false;
-    a.Events = [];
+    // a.Layer.Background.Clear();
+    // a.Layer.Flourish.Clear();
+    // a.Layer.Markers.Clear();
+
+    // a.StartDate = a.DateToInternalString(new Date());
+    // a.ShowDate = a.StartDate;
+    // a.Enabled = false;
+    // a.Events = [];
   }
 
-  DeleteMarker(date)
-  {
-    const a = this;
+  // DeleteMarker(date)
+  // {
+  //   const a = this;
 
-    for (let i=0; i<a.Events.length; i++) {
-      if (a.Events[i].Date != date) {
-        continue;
-      }
+  //   for (let i=0; i<a.Events.length; i++) {
+  //     if (a.Events[i].Date != date) {
+  //       continue;
+  //     }
 
-      a.Events.splice(i, 1);
-    }
-  }
+  //     a.Events.splice(i, 1);
+  //   }
+  // }
 
-  FindDatePosition(date) {
-    const a = this;
-    const points = a.Layer.Background.XAxisPositions;
+  // FindDatePosition(date) {
+  //   const a = this;
+  //   const points = a.Layer.Background.XAxisPositions;
 
-    for (let i=0; i<points.length; i++) {
-      if (points[i].Date == date){
-        return points[i];
-      }
-    }
+  //   for (let i=0; i<points.length; i++) {
+  //     if (points[i].Date == date){
+  //       return points[i];
+  //     }
+  //   }
 
-    return null;
-  }
+  //   return null;
+  // }
 
-  FindEvent(date) {
-    const a = this;
+  // FindEvent(date) {
+  //   const a = this;
 
-    for (let i=0; i<a.Events.length; i++) {
-      if (a.Events[i].Date == date) {
-        return a.Events[i];
-      }
-    }
+  //   for (let i=0; i<a.Events.length; i++) {
+  //     if (a.Events[i].Date == date) {
+  //       return a.Events[i];
+  //     }
+  //   }
 
-    return null;
-  }
+  //   return null;
+  // }
 
-  FindEventsByCoords(x, y, addmargin) {
-    const a = this;
+  // FindEventsByCoords(x, y, addmargin) {
+  //   const a = this;
 
-    for (let i=0; i<a.Events.length; i++) {
-      const e = a.Events[i].HitBox;
-      if (a.Events[i].HitBox == null) {
-        continue;
-      }
+  //   for (let i=0; i<a.Events.length; i++) {
+  //     const e = a.Events[i].HitBox;
+  //     if (a.Events[i].HitBox == null) {
+  //       continue;
+  //     }
 
-      let x2 = (e.X + e.W);
-      let y2 = (e.Y + e.H);
+  //     let x2 = (e.X + e.W);
+  //     let y2 = (e.Y + e.H);
 
-      if (addmargin) {
-        y2 += a.Layer.Markers.Options.Label.Margin.Y;
-      }
+  //     if (addmargin) {
+  //       y2 += a.Layer.Markers.Options.Label.Margin.Y;
+  //     }
 
-      if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
-        return a.Events[i];
-      }
-    }
+  //     if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
+  //       return a.Events[i];
+  //     }
+  //   }
 
-    return null;
-  }
+  //   return null;
+  // }
 
   Load(startDate) {
     const a = this;
 
     a.StartDate = startDate;
 
-    a.Show(startDate);
+    a.CanvasContainer.Layer[0].Load(a.StartDate);
+
+
+  //   a.Show(startDate);
   }
 
-  Show(date) {
+  // Show(date) {
+  //   const a = this;
+
+  //   if (a.ConvertToDate(date) < a.ConvertToDate(a.StartDate)) {
+  //     date = a.StartDate;
+  //   }
+
+  //   a.ShowDate = date;
+  //   a.Enabled = true;
+
+  //   a.Invalidate(true, true);
+  // }
+
+  // ShowNext() {
+  //   const a = this;
+
+  //   let date = a.VisibleStartDate;
+  //   date.setDate(date.getDate() + (a.VisibleDays - 1));
+
+  //   a.Show(a.DateToInternalString(date));
+  // }
+
+  // ShowPrevious() {
+  //   const a = this;
+
+  //   let date = a.VisibleStartDate;
+  //   date.setDate(date.getDate() - (a.VisibleDays - 1));
+
+  //   a.Show(a.DateToInternalString(date));
+  // }
+
+  // UpdateLabel(date, label) {
+  //   const a = this;
+
+  //   let event = a.FindEvent(date);
+  //   if (event == null) {
+  //     return;
+  //   }
+
+  //   event.Label = label;
+
+  //   a.Invalidate(false, true);
+  // }
+
+  // UpdateMarker(date, borderColour, backColour) {
+  //   const a = this;
+
+  //   let event = a.FindEvent(date);
+  //   if (event == null) {
+  //     return;
+  //   }
+
+  //   event.BorderColour = borderColour;
+  //   event.BackColour = backColour;
+
+  //   a.Invalidate(false, true);
+  // }
+
+          // Invalidate(redrawAxis, redrawMarkers) {
+          //   const a = this;
+
+          //   if (redrawAxis) a.Layer.Background.Invalidate();
+
+          //   a.Layer.Flourish.Clear();
+
+          //   if (redrawMarkers) a.Layer.Markers.Invalidate();
+
+          // }
+
+  Invalidate() {
     const a = this;
 
-    if (a.ConvertToDate(date) < a.ConvertToDate(a.StartDate)) {
-      date = a.StartDate;
+    a.CanvasContainer.Clear();
+
+    const width = Document.getWidth(a.CanvasContainer.el);
+    const height = Document.getHeight(a.CanvasContainer.el);
+
+    a.CanvasContainer.Size = {
+      W: width,
+      H: height
+    };
+
+    a.CanvasContainer.Invalidate();
   }
 
-    a.ShowDate = date;
-    a.Enabled = true;
 
-    a.Invalidate(true, true);
-  }
+  // DateToString(date, pattern) {
+  //   let result = pattern;
 
-  ShowNext() {
-    const a = this;
+  //   result = result.replace("fffffff", date.getMilliseconds().toString().padStart(7, '0'));
+  //   result = result.replace("ffffff", date.getMilliseconds().toString().padStart(6, '0'));
+  //   result = result.replace("fffff", date.getMilliseconds().toString().padStart(5, '0'));
+  //   result = result.replace("yyyy", date.getFullYear().toString().padStart(4, '0'));
+  //   result = result.replace("MMMM", "{1}");
+  //   result = result.replace("dddd", "{2}");
+  //   result = result.replace("ffff", date.getMilliseconds().toString().padStart(4, '0'));
+  //   result = result.replace("yyy", date.getFullYear().toString().padStart(3, '0'));
+  //   result = result.replace("MMM", "{3}");
+  //   result = result.replace("ddd", "{4}");
+  //   result = result.replace("fff", date.getMilliseconds().toString().padStart(3, '0'));
+  //   result = result.replace("zzz", "");
+  //   result = result.replace("yy", date.getFullYear().toString().slice(-2));
+  //   result = result.replace("MM", (date.getMonth() + 1).toString().padStart(2, '0'));
+  //   result = result.replace("dd", date.getDate().toString().padStart(2, '0'));
+  //   result = result.replace("HH", date.getHours().toString().padStart(2, '0'));
+  //   result = result.replace("hh", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString().padStart(2, '0'));
+  //   result = result.replace("mm", date.getMinutes().toString().padStart(2, '0'));
+  //   result = result.replace("ss", date.getSeconds().toString().padStart(2, '0'));
+  //   result = result.replace("ff", date.getMilliseconds().toString().padStart(2, '0'));
+  //   result = result.replace("tt", "{5}");
+  //   result = result.replace("zz", "");
+  //   result = result.replace("y", date.getFullYear().toString());
+  //   result = result.replace("M", (date.getMonth() + 1).toString());
+  //   result = result.replace("d", date.getDate().toString());
+  //   result = result.replace("H", date.getHours().toString());
+  //   result = result.replace("h", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString());
+  //   result = result.replace("m", date.getMinutes().toString());
+  //   result = result.replace("s", date.getSeconds().toString());
+  //   result = result.replace("z", "");
+  //   result = result.replace("t", "{6}");
+  //   result = result.replace("Z", "");
 
-    let date = a.VisibleStartDate;
-    date.setDate(date.getDate() + (a.VisibleDays - 1));
+  //   result = result.replace("{1}", date.toLocaleString('default', { month: 'long' }));
+  //   result = result.replace("{2}", date.toLocaleString('default', { weekday: 'long' }));
+  //   result = result.replace("{3}", date.toLocaleString('default', { month: 'short' }));
+  //   result = result.replace("{4}", date.toLocaleString('default', { weekday: 'short' }));
+  //   result = result.replace("{5}", (date.getHours() >= 12 ? "PM" : "AM"));
+  //   result = result.replace("{6}", (date.getHours() >= 12 ? "P" : "A"));
 
-    a.Show(a.DateToInternalString(date));
-  }
-
-  ShowPrevious() {
-    const a = this;
-
-    let date = a.VisibleStartDate;
-    date.setDate(date.getDate() - (a.VisibleDays - 1));
-
-    a.Show(a.DateToInternalString(date));
-  }
-
-  UpdateLabel(date, label) {
-    const a = this;
-
-    let event = a.FindEvent(date);
-    if (event == null) {
-      return;
-    }
-
-    event.Label = label;
-
-    a.Invalidate(false, true);
-  }
-
-  UpdateMarker(date, borderColour, backColour) {
-    const a = this;
-
-    let event = a.FindEvent(date);
-    if (event == null) {
-      return;
-    }
-
-    event.BorderColour = borderColour;
-    event.BackColour = backColour;
-
-    a.Invalidate(false, true);
-  }
-
-  Invalidate(redrawAxis, redrawMarkers) {
-    const a = this;
-
-    if (redrawAxis) a.Layer.Background.Invalidate();
-
-    a.Layer.Flourish.Clear();
-
-    if (redrawMarkers) a.Layer.Markers.Invalidate();
-
-  }
-
-  DateToString(date, pattern) {
-    let result = pattern;
-
-    result = result.replace("fffffff", date.getMilliseconds().toString().padStart(7, '0'));
-    result = result.replace("ffffff", date.getMilliseconds().toString().padStart(6, '0'));
-    result = result.replace("fffff", date.getMilliseconds().toString().padStart(5, '0'));
-    result = result.replace("yyyy", date.getFullYear().toString().padStart(4, '0'));
-    result = result.replace("MMMM", "{1}");
-    result = result.replace("dddd", "{2}");
-    result = result.replace("ffff", date.getMilliseconds().toString().padStart(4, '0'));
-    result = result.replace("yyy", date.getFullYear().toString().padStart(3, '0'));
-    result = result.replace("MMM", "{3}");
-    result = result.replace("ddd", "{4}");
-    result = result.replace("fff", date.getMilliseconds().toString().padStart(3, '0'));
-    result = result.replace("zzz", "");
-    result = result.replace("yy", date.getFullYear().toString().slice(-2));
-    result = result.replace("MM", (date.getMonth() + 1).toString().padStart(2, '0'));
-    result = result.replace("dd", date.getDate().toString().padStart(2, '0'));
-    result = result.replace("HH", date.getHours().toString().padStart(2, '0'));
-    result = result.replace("hh", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString().padStart(2, '0'));
-    result = result.replace("mm", date.getMinutes().toString().padStart(2, '0'));
-    result = result.replace("ss", date.getSeconds().toString().padStart(2, '0'));
-    result = result.replace("ff", date.getMilliseconds().toString().padStart(2, '0'));
-    result = result.replace("tt", "{5}");
-    result = result.replace("zz", "");
-    result = result.replace("y", date.getFullYear().toString());
-    result = result.replace("M", (date.getMonth() + 1).toString());
-    result = result.replace("d", date.getDate().toString());
-    result = result.replace("H", date.getHours().toString());
-    result = result.replace("h", (date.getHours() > 12 ? (date.getHours() - 12) : date.getHours()).toString());
-    result = result.replace("m", date.getMinutes().toString());
-    result = result.replace("s", date.getSeconds().toString());
-    result = result.replace("z", "");
-    result = result.replace("t", "{6}");
-    result = result.replace("Z", "");
-
-    result = result.replace("{1}", date.toLocaleString('default', { month: 'long' }));
-    result = result.replace("{2}", date.toLocaleString('default', { weekday: 'long' }));
-    result = result.replace("{3}", date.toLocaleString('default', { month: 'short' }));
-    result = result.replace("{4}", date.toLocaleString('default', { weekday: 'short' }));
-    result = result.replace("{5}", (date.getHours() >= 12 ? "PM" : "AM"));
-    result = result.replace("{6}", (date.getHours() >= 12 ? "P" : "A"));
-
-    return result;
-  }
+  //   return result;
+  // }
 
   DateToInternalString(date) {
-    const a = this;
-
-    return a.DateToString(date, a.DateParsePattern);
+    return date.toCString(this.DateParsePattern);
   }
 
   ConvertToDate(value) {
@@ -366,13 +455,13 @@ class Timeline {
   }
 
 
-  OnMouseDown(sender, e, event) { /* delegate */ }
+  // OnMouseDown(sender, e, event) { /* delegate */ }
 
-  OnMouseMove(sender, e, event) { /* delegate */ }
+  // OnMouseMove(sender, e, event) { /* delegate */ }
 
-  OnClick(sender, e, event) { /* delegate */ }
+  // OnClick(sender, e, event) { /* delegate */ }
 
-  OnDblClick(sender, e, event) { /* delegate */ }
+  // OnDblClick(sender, e, event) { /* delegate */ }
 
 }
 

src/timeline/timeline.scss

@@ -0,0 +1,19 @@
+.literyzjs-timeline {
+  border-color: #B8B8B8;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #CDCDCD #F0F0F0;
+
+
+  &.scroll-x {
+    overflow-x: scroll !important;
+  }
+
+  canvas {
+    display: block;
+    position: relative;
+  }
+}
+

webpack.config.js

@@ -44,5 +44,17 @@ module.exports = {
         'process.env.VERSION': JSON.stringify(version)
     }),
     new PrependVersionPlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
         ]
+      }
+    ]
+  }
 };