Changed to multi-layer for hot-tracking and other flourishes

Changed default colours
Added X-Axis top and bottom positions

bbtimeline-background-canvas.js

@@ -4,7 +4,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
 
     const a = this;
 
-    a.GraphRectangle = { X: 0, Y: 0, W: 0, H: 0 };
     a.Margin = 0;
     a.StepHeight = 0;
     a.NoStep = 0;
@@ -17,20 +16,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
 
     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);
@@ -39,11 +24,31 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
   }
 
 
+  get GraphRectangle() {
+    const a = this;
+
+    if (a.Parent.XAxis.Position == 'top') {
+      return {
+        X: a.ClientRectangle.X,
+        Y: (a.ClientRectangle.Y + a.XAxisHeight),
+        W: a.ClientRectangle.W,
+        H: (a.ClientRectangle.H - a.XAxisHeight)
+      };
+    } else {
+      return {
+        X: a.ClientRectangle.X,
+        Y: a.ClientRectangle.Y,
+        W: a.ClientRectangle.W,
+        H: (a.ClientRectangle.H - a.XAxisHeight)
+      };
+    }
+  }
+
   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);
+    return labelSize.H + a.Parent.Axis.LabelSpacing + (a.Parent.XAxis.DayLineHeight * 2);
   }
 
   get XAxisPositions() {
@@ -67,7 +72,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
         X: x
       });
 
-      x += (a.Parent.Axis.X.HourLineSpace * a.Parent.Axis.X.NoPartPerDay);
+      x += (a.Parent.XAxis.HourLineSpace * a.Parent.XAxis.NoPartPerDay);
       date.setDate(date.getDate() + 1);
     }
 
@@ -93,9 +98,17 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
     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));
+    if (a.Parent.XAxis.Position == 'top') {
-    a.CTX.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y));
+      a.CTX.moveTo(a.GraphRectangle.X, (a.GraphRectangle.Y + a.GraphRectangle.H));
+      a.CTX.lineTo(a.GraphRectangle.X, a.GraphRectangle.Y);
+      a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), a.GraphRectangle.Y);
+    } else {
+      a.CTX.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
+      a.CTX.lineTo(a.GraphRectangle.X, (a.GraphRectangle.Y +a.GraphRectangle.H));
+      a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), (a.GraphRectangle.Y + a.GraphRectangle.H));
+    }
+
     a.CTX.lineWidth = a.Parent.Axis.LineWidth;
     a.CTX.strokeStyle = a.Parent.Axis.LineColour1;
     a.CTX.stroke();
@@ -103,7 +116,21 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
 
   drawXAxisLabels() {
     const a = this;
-    const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
+    const labelSize = a.measureText(a.Parent.Axis.Font, "0");
+
+    let posY = 0;
+    let posDayY = 0;
+    let posMonthY = 0;
+
+    if (a.Parent.XAxis.Position == 'top') {
+      posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth) - 2;
+      posDayY = (posY - (labelSize.H + a.Parent.XAxis.DayLineHeight));
+      posMonthY = (posDayY - (labelSize.H + a.Parent.Axis.LabelSpacing));
+    } else {
+      posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
+      posDayY = (posY + a.Parent.XAxis.DayLineHeight);
+      posMonthY = (posDayY + labelSize.H + a.Parent.Axis.LabelSpacing);
+    }
 
     a.XAxisPositions.forEach(function(e, i) {
       const date = a.Parent.ConvertToDate(e.Date);
@@ -119,14 +146,15 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
       }
 
       // if (i == 0) {
-      //   return;
+      //   // Don't write first date
+      // } else {
+        // Write date (dd)
+        a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center");
       // }
 
-      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 (MMMM) on first of the month
-
-      // 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");
+        a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left");
       }
     });
   }
@@ -136,7 +164,19 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
 
     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 posY = 0;
+    let posDayY = 0;
+    let posHourY = 0;
+
+    if (a.Parent.XAxis.Position == 'top') {
+      posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth);
+      posDayY = (posY - a.Parent.XAxis.DayLineHeight);
+      posHourY = (posY - a.Parent.XAxis.HourLineHeight);
+    } else {
+      posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
+      posDayY = (posY + a.Parent.XAxis.DayLineHeight);
+      posHourY = (posY + a.Parent.XAxis.HourLineHeight);
+    }
 
     let i = 0;
 
@@ -148,18 +188,18 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
       a.CTX.beginPath();
       a.CTX.moveTo(startPosX, posY);
 
-      if ((i % a.Parent.Axis.X.NoPartPerDay) == 0) {
+      if ((i % a.Parent.XAxis.NoPartPerDay) == 0) {
-        a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.DayLineHeight));
+        a.CTX.lineTo(startPosX, posDayY);
-        a.CTX.strokeStyle = a.Parent.Axis.X.DayLineColour;
+        a.CTX.strokeStyle = a.Parent.XAxis.DayLineColour;
       } else {
-        a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.HourLineHeight));
+        a.CTX.lineTo(startPosX, posHourY);
-        a.CTX.strokeStyle = a.Parent.Axis.X.HourLineColour;
+        a.CTX.strokeStyle = a.Parent.XAxis.HourLineColour;
       }
 
       a.CTX.lineWidth = a.Parent.Axis.LineWidth;
       a.CTX.stroke();
 
-      startPosX += a.Parent.Axis.X.HourLineSpace;
+      startPosX += a.Parent.XAxis.HourLineSpace;
 
       i++;
     }

bbtimeline-canvas.js

@@ -6,8 +6,6 @@ class BBTimelineCanvas {
     a.Container = el;
     a.CTX = a.Container.getContext("2d");
 
-    a.ClientRectangle = { X: 0, Y: 0, W: 0, H: 0 };
-
     a.initialiseComponents();
   }
 
@@ -26,6 +24,18 @@ class BBTimelineCanvas {
   }
 
 
+  get ClientRectangle() {
+    const a = this;
+
+    return {
+      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))
+    };
+  }
+
+
   Clear() {
     const a = this;
 
@@ -36,31 +46,28 @@ class BBTimelineCanvas {
     // placeholder
   }
 
-
+  drawCircle(x, y, width, borderWidth, borderColour, backColour) {
-  drawText(x, y, label, font, foreColour, align) {
     const a = this;
+    const calcBorderWidth = (borderWidth * 2);
+    const calcWidth = width - calcBorderWidth;
+    const offset = a.half(width);
 
-    a.CTX.font = font;
+    a.CTX.beginPath();
-    a.CTX.fillStyle = foreColour;
+    a.CTX.arc(x, y, calcWidth, 0, 2 * Math.PI, false);
+    a.CTX.fillStyle = backColour;
+    a.CTX.fill();
+    a.CTX.lineWidth = borderWidth;
+    a.CTX.strokeStyle = borderColour;
+    a.CTX.stroke();
 
-    const size = a.measureText(font, label);
+    const result = {
+      X: x - (offset + borderWidth),
+      Y: y - (offset + borderWidth),
+      W: (width + calcBorderWidth),
+      H: (width + calcBorderWidth)
+    };
 
-    switch (align) {
+    return result;
-      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) {
@@ -73,8 +80,58 @@ class BBTimelineCanvas {
     a.CTX.lineWidth = 1;
     a.CTX.strokeStyle = colour;
     a.CTX.stroke();
+
+    return rectangle;
   }
 
+  drawText(x, y, label, font, foreColour, align) {
+    const a = this;
+
+    a.CTX.font = font;
+    a.CTX.fillStyle = foreColour;
+
+    let size = a.measureText(font, label);
+    size.Y = y;
+
+    switch (align) {
+      case "center":
+        size.X = (x - size.X);
+        break;
+      case "right":
+        size.X = (x - size.W);
+        break;
+      case "left":
+      default:
+        size.X = x;
+        break;
+    }
+
+    a.CTX.fillText(label, size.X, (size.Y + size.H));
+
+    return size;
+  }
+
+  drawVerticalLine(x, y1, y2, width, colour) {
+    const a = this;
+
+    a.CTX.beginPath();
+    a.CTX.moveTo(x, y1);
+    a.CTX.lineTo(x, (y2 - width));
+    a.CTX.lineWidth = width;
+    a.CTX.strokeStyle = colour;
+    a.CTX.stroke();
+
+    const result = {
+      X: x,
+      Y: y1,
+      W: width,
+      H: (y2 - y1)
+    };
+
+    return result;
+  }
+
+
   half(value) {
     return (value / 2);
   }
@@ -86,11 +143,35 @@ class BBTimelineCanvas {
     const size = a.CTX.measureText(value);
 
     return {
-      Width: size.width,
+      W: size.width,
-      Height: size.fontBoundingBoxAscent,
+      H: size.fontBoundingBoxAscent,
-      OffsetLeft: a.half(size.width),
+      X: a.half(size.width),
-      OffsetTop: a.half(size.fontBoundingBoxAscent)
+      Y: a.half(size.fontBoundingBoxAscent)
     };
   }
 
+  isPointInRectangle(rect, point) {
+    const x2 = (rect.X + rect.W);
+    const y2 = (rect.Y + rect.H);
+
+    return ((point.X >= rect.X) && (point.X <= x2) && (point.Y >= rect.Y) && (point.Y <= y2));
+  }
+
+  combineRectangle(rect1, rect2) {
+    const x2 = Math.max((rect1.X + rect1.W), (rect2.X + rect2.W));
+    const y2 = Math.max((rect1.Y + rect1.H), (rect2.Y + rect2.H));
+
+    const rect = {
+      X: Math.min(rect1.X, rect2.X),
+      Y: Math.min(rect1.Y, rect2.Y),
+      W: 0,
+      H: 0
+    };
+
+    rect.W = x2 - rect.X;
+    rect.H = y2 - rect.Y;
+
+    return rect;
+  }
+
 }

bbtimeline-flourish-canvas.js

@@ -2,21 +2,32 @@ class BBTimelineFlourishCanvas extends BBTimelineCanvas {
   constructor(parentEl, el) {
     super(parentEl, el);
 
+    const a = this;
+
+    a.XPos = -1;
   }
 
-  DrawVerticalLine(x) {
+  Invalidate() {
     const a = this;
-    const rect = a.Parent.Layer.Background.GraphRectangle;
-    const linePosY = (rect.Y + rect.H);
 
     a.Clear();
 
-    a.CTX.beginPath();
+    if (a.XPos < 0) {
-    a.CTX.moveTo(x, rect.Y);
+      a.Clear();
-    a.CTX.lineTo(x, (linePosY - a.Parent.Marker.Line.Width));
+    } else {
-    a.CTX.lineWidth = 1;
+      let posY = 0;
-    a.CTX.strokeStyle = a.Parent.HotTrack.Colour;
+
-    a.CTX.stroke();
+      if (a.Parent.XAxis.Position == 'top') {
+        posY = a.Parent.Layer.Background.GraphRectangle.Y;
+      } else {
+        posY = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
+      }
+
+      // a.drawVerticalLine(a.XPos, a.Parent.Layer.Background.GraphRectangle.Y, (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H), a.Parent.MarkerLabel.Line.Width, a.Parent.HotTrack.Colour);
+      a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour);
+
+    }
+
   }
 
 }

bbtimeline-foreground-canvas.js

@@ -63,21 +63,30 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
           return;
         }
 
-        if (!a.Parent.EnableHotTracking) {
+        var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
-          return;
+        if (event != null) {
-        }
+          a.Container.style.cursor = 'pointer';
-
-        const point = { X: e.offsetX, Y: e.offsetY };
-        if (a.Parent.HasInterception(a.Parent.Layer.Background.GraphRectangle, point)) {
-          if (a.Parent.Debug) console.log(point);
-
-          a.Parent.DrawHotTracking(point.X);
-
-          a.Parent.OnMouseMove(this, e, point);
         } else {
-          // Clear hot tracking
+          a.Container.style.cursor = 'default';
-          a.Parent.DrawHotTracking(-1);
         }
+
+        // Hottracking
+        if (a.Parent.EnableHotTracking) {
+          const point = { X: e.offsetX, Y: e.offsetY };
+          if (a.isPointInRectangle(a.Parent.Layer.Background.GraphRectangle, point)) {
+            if (a.Parent.Debug) console.log(point);
+
+            a.Parent.Layer.Flourish.XPos = point.X;
+
+            a.Parent.OnMouseMove(this, e, event);
+          } else {
+            // Clear hot tracking
+            a.Parent.Layer.Flourish.XPos = -1;
+          }
+
+          a.Parent.Layer.Flourish.Invalidate();
+        }
+
       });
     }
 
@@ -92,25 +101,33 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
     a.Clear();
 
     const startPosY = (rect.Y + a.Parent.Marker.Width);
-
     const visibleEvents = a.Parent.VisibleEvents;
+
+    // Clear for collisions detection
+    visibleEvents.forEach(function (e, i) {
+      e.HitBox = { X: 0, Y:0, W: 0, H: 0};
+    });
+
     visibleEvents.forEach(function (e, i) {
       // Calculate Y position
       let posY = a.calcMarkerPosition(e.Position.X, startPosY);
 
-      a.drawVerticalLine(e.Position.X, posY);
+      if (a.Parent.MarkerLabel.Line.Width > 0) {
+        a.drawVerticalLine(e.Position.X, posY, (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H), a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
+      }
 
-      const markerRectangle = a.drawMarker(e.Position.X, posY, e.BorderColour, e.BackColour);
+      const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour);
-      const labelSize = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.Marker.Font, a.Parent.Marker.ForeColour, "left");
 
       e.Position = { X: e.Position.X, Y: posY };
 
-      e.HitBox = {
+      if (a.Parent.ShowMarkerLabel) {
-        X: markerRectangle.X,
+        const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.MarkerLabel.Font, a.Parent.MarkerLabel.Colour, "left");
-        Y: markerRectangle.Y,
+        labelRectangle.W += a.Parent.MarkerLabel.Margin;
-        W: (markerRectangle.W + margin + labelSize.Width + a.Parent.Marker.CollisionMargin),
+
-        H: markerRectangle.H
+        e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
-      };
+      } else {
+        e.HitBox = markerRectangle;
+      }
 
       if (a.Parent.Debug) a.drawRectangle(e.HitBox, "red");
       if (a.Parent.Debug) console.log(e);
@@ -158,50 +175,4 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
     return posY;
   }
 
-  drawMarker(x, y, borderColour, backColour) {
-    const a = this;
-    const width = a.Parent.Marker.Width - (a.Parent.Marker.BorderWidth * 2);
-
-    a.CTX.beginPath();
-    a.CTX.arc(x, y, width, 0, 2 * Math.PI, false);
-    a.CTX.fillStyle = backColour;
-    a.CTX.fill();
-    a.CTX.lineWidth = a.Parent.Marker.BorderWidth;
-    a.CTX.strokeStyle = borderColour;
-    a.CTX.stroke();
-
-    return a.measureMarker(x, y);
-  }
-
-  drawVerticalLine(x, y) {
-    const a = this;
-    const rect = a.Parent.Layer.Background.GraphRectangle;
-    const linePosY = (rect.Y + rect.H);
-
-    if (y <= 0) {
-      y = (rect.Y + a.Parent.Marker.Line.Width);
-    }
-
-    a.CTX.beginPath();
-    a.CTX.moveTo(x, y);
-    a.CTX.lineTo(x, (linePosY - a.Parent.Marker.Line.Width));
-    a.CTX.lineWidth = a.Parent.Marker.Line.Width;
-    a.CTX.strokeStyle = a.Parent.Marker.Line.Colour;
-    a.CTX.stroke();
-  }
-
-  measureMarker(x, y) {
-    const a = this;
-    const offset = a.half(a.Parent.Marker.Width);
-
-    const result = {
-      X: x - (offset + a.Parent.Marker.BorderWidth),
-      Y: y - (offset + a.Parent.Marker.BorderWidth),
-      W: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2)),
-      H: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2))
-    };
-
-    return result;
-  }
-
 }

bbtimeline.js

@@ -11,7 +11,7 @@ class BBTimeline {
       Left: 20,
       Top: 20,
       Right: 20,
-      Bottom: 0
+      Bottom: 20
     };
     a.Size = {
       W: a.Container.innerWidth || a.Container.clientWidth,
@@ -26,29 +26,32 @@ class BBTimeline {
     a.DateParsePattern = "yyyy-MM-dd";
 
     a.Axis = {
-      LineColour1: "#CFCFCF",
+      LineColour1: "#000000",
       LineWidth: 1,
       Font: "8pt Arial",
       LabelColour: "#000000",
-      LabelSpacing: 6,
+      LabelSpacing: 6
-      X: {
+    };
-        NoPartPerDay: 4,
+    a.XAxis = {
-        HourLineSpace: 6,
+      NoPartPerDay: 4,
-        HourLineHeight: 10,
+      HourLineSpace: 6,
-        HourLineColour: "#A6A6A6",
+      HourLineHeight: 10,
-        DayLineHeight: 20,
+      HourLineColour: "#EAEAEA",
-        DayLineColour: "#282828"
+      DayLineHeight: 20,
-      }
+      DayLineColour: "#9E9E9E",
+      Position: 'top'
     };
 
     a.Marker = {
       BorderColour: "#3A5D9C",
       BorderWidth: 2,
       BackColour: "#D4DEEF",
-      Width: 10,
+      Width: 10
-      ForeColour: "#3A5D9C",
+    };
+    a.MarkerLabel = {
+      Colour: "#3A5D9C",
       Font: "9pt Arial",
-      CollisionMargin: 8,
+      Margin: 8,
       Line: {
         Colour: "#A6A6A6",
         Width: 1,
@@ -56,12 +59,14 @@ class BBTimeline {
     };
 
     a.HotTrack  = {
-      Colour: "#1D7F1D"
+      Colour: "#F57C00",
+      Width: 3
     };
 
     a.Events = [];
     a.StartDate = a.DateToInternalString(new Date());
     a.ShowDate = a.StartDate;
+    a.ShowMarkerLabel = true;
 
     a.Enabled = false;
     a.Debug = false;
@@ -102,7 +107,7 @@ class BBTimeline {
     const a = this;
     const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
 
-    return Math.floor(clientWidth / (a.Axis.X.NoPartPerDay * a.Axis.X.HourLineSpace));
+    return Math.floor(clientWidth / (a.XAxis.NoPartPerDay * a.XAxis.HourLineSpace));
   }
 
   get VisibleStartDate() {
@@ -305,15 +310,11 @@ class BBTimeline {
   Invalidate(redrawAxis, redrawMarkers) {
     const a = this;
 
-    if (redrawAxis) {
+    if (redrawAxis) a.Layer.Background.Invalidate();
-      a.Layer.Background.Invalidate();
-    }
 
     a.Layer.Flourish.Clear();
 
-    if (redrawMarkers) {
+    if (redrawMarkers) a.Layer.Markers.Invalidate();
-      a.Layer.Markers.Invalidate();
-    }
 
   }
 
@@ -369,27 +370,10 @@ class BBTimeline {
     return a.DateToString(date, a.DateParsePattern);
   }
 
-  DrawHotTracking(x) {
-    const a = this;
-
-    if (x < 0) {
-      a.Layer.Flourish.Clear();
-    } else {
-      a.Layer.Flourish.DrawVerticalLine(x);
-    }
-  }
-
   ConvertToDate(value) {
     return new Date(Date.parse(value));
   }
 
-  HasInterception(rect, point) {
-    const x2 = (rect.X + rect.W);
-    const y2 = (rect.Y + rect.H);
-
-    return ((point.X >= rect.X) && (point.X <= x2) && (point.Y >= rect.Y) && (point.Y <= y2));
-  }
-
 
   OnMouseDown(sender, e, event) { /* delegate */ }
 

demo-test.html

@@ -10,13 +10,13 @@
   <!-- <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="bbtimeline.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-foreground-canvas.js"></script>
 
-  <script src="bbtimeline.min.js"></script>
+  <!-- <script src="bbtimeline.min.js"></script> -->
 
   <title></title>
 </head>
@@ -34,10 +34,25 @@
 
       <p>
         <button onclick="Clear()">Clear</button>
-        <button onclick="ToggleDebug()">Toggle Debug</button>
-        <button onclick="ToggleHotTracking()">Toggle Hot Tracking</button>
         <button onclick="Refresh()">Refresh</button>
       </p>
+
+      <hr />
+
+      <p>
+        <button onclick="ToggleDebug()">Toggle Debug</button>
+      </p>
+
+      <hr />
+      <p>
+        <button onclick="ToggleHotTracking()">Toggle Hot Tracking</button>
+        <button onclick="ToggleShowLabel()">Toggle Marker Label</button>
+        <button onclick="ToggleMarkerTail()">Toggle Marker Tail</button>
+      </p>
+      <p>
+        <button onclick="ToggleXAxisPosition()">Toggle X-Axis Position</button>
+      </p>
+
       <hr />
 
       <p>
@@ -176,6 +191,21 @@ function ToggleHotTracking() {
   timeline1.Invalidate(true, true);
 }
 
+function ToggleShowLabel() {
+  timeline1.ShowMarkerLabel = !timeline1.ShowMarkerLabel;
+  timeline1.Invalidate(true, true);
+}
+
+function ToggleXAxisPosition() {
+  timeline1.XAxis.Position = (timeline1.XAxis.Position == 'top' ? 'bottom' : 'top');
+  timeline1.Invalidate(true, true);
+}
+
+function ToggleMarkerTail() {
+  timeline1.MarkerLabel.Line.Width = ((timeline1.MarkerLabel.Line.Width <= 0) ? 1 : 0);
+  timeline1.Invalidate(true, true);
+}
+
 function Refresh() {
   timeline1.Invalidate(true, true);
 }