src/project/flourish-canvas.js

@@ -0,0 +1,75 @@
+import Canvas from '../references/canvas.js';
+
+
+class FlourishCanvas extends Canvas {
+  Options = null;
+  Debug = false;
+
+  XPos = -1
+
+
+  constructor(el) {
+    super(el);
+  }
+
+
+  get HeaderHeight() {
+    const a = this;
+
+    return a.Options.HeaderRow.Height[0] + a.Options.HeaderRow.Height[1];
+  }
+
+
+  Load() {
+    const a = this;
+
+    a.el.addEventListener('mousemove', function (e) {
+      // Hottracking
+      if (a.Options.EnableHotTracking) {
+        const point = { X: e.offsetX, Y: e.offsetY };
+
+        if (a.Debug) {
+          console.log(point);
+        }
+
+        a.XPos = point.X;
+
+        a.Invalidate();
+      }
+
+    });
+
+  }
+
+  Invalidate() {
+    const a = this;
+
+    if (a.Options == null) {
+      return;
+    }
+
+    a.Clear();
+
+    if (a.XPos < 0) {
+      return;
+    }
+
+    a.#drawVerticalLine(a.XPos);
+  }
+
+  #drawVerticalLine(x) {
+    const a = this;
+    const h = this.Height - a.HeaderHeight;
+
+    if (a.Options.HotTrackLine.Width > 1) {
+      x += Math.half(a.Options.HotTrackLine.Width);
+    }
+
+    a.DrawVerticalLine(x, a.HeaderHeight, h, a.Options.HotTrackLine.Colour, { LineWidth: a.Options.HotTrackLine.Width });
+  }
+
+
+}
+
+
+export default FlourishCanvas;

src/project/gantt-chart.js

@@ -1,6 +1,7 @@
 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 './project.scss';
 
@@ -44,11 +45,19 @@ class GanttChart {
 
     a.CanvasContainer.Layer.push(foreCanvasLayer);
 
+    // Add flourish canvas layer
+    const layer3 = a.CanvasContainer.AddLayer();
+
+    const flourishCanvasLayer = new FlourishCanvas(layer3);
+    flourishCanvasLayer.Options = a.Options;
+
+    a.CanvasContainer.Layer.push(flourishCanvasLayer);
+
+    // Invalidate every canvas
     a.CanvasContainer.Invalidate();
 
     Document.removeClass(a.CanvasContainer.FlowContainer, "border");
     Document.addClass(a.CanvasContainer.FlowContainer, "gantt-chart");
-
   }
 
 
@@ -91,11 +100,16 @@ class GanttChart {
         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,
@@ -143,6 +157,7 @@ class GanttChart {
     // Invalidate canvas (background, foreground)
     a.CanvasContainer.Layer[0].Load(new Date(), a.Duration, a.StartOfWeek, a.Tasks.length);
     a.CanvasContainer.Layer[1].Load(new Date(), a.Tasks);
+    a.CanvasContainer.Layer[2].Load();
 
     a.Invalidate();
   }
@@ -177,6 +192,7 @@ class GanttChart {
     // Invalidate canvas (background, foreground)
     a.CanvasContainer.Layer[0].Load(new Date(project.StartDate), project.Duration, project.Project.StartOfWeek, a.Tasks.length);
     a.CanvasContainer.Layer[1].Load(new Date(project.StartDate), a.Tasks);
+    a.CanvasContainer.Layer[2].Load();
 
     a.Invalidate();
   }

src/references/canvas-container.js

@@ -207,6 +207,8 @@ class CanvasContainer {
       }
     });
 
+    let offsetTop = 0;
+
     a.Layer.forEach((e, i) => {
       if (i <= 0) {
         return;
@@ -215,7 +217,9 @@ class CanvasContainer {
       // Correct positon because of position-relative to keep container overflow working
       const h = Document.getHeight(a.Layer[(i - 1)].el);
 
-      a.Layer[i].el.style.top = "-" + h + "px";
+      offsetTop += h;
+
+      a.Layer[i].el.style.top = "-" + offsetTop + "px";
     });
   }