diff --git a/src/project/flourish-canvas.js b/src/project/flourish-canvas.js new file mode 100644 index 0000000..4413838 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/project/gantt-chart.js b/src/project/gantt-chart.js index fde94f0..eb20c3e 100644 --- a/src/project/gantt-chart.js +++ b/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(); } diff --git a/src/references/canvas-container.js b/src/references/canvas-container.js index 7ae170e..f8133dd 100644 --- a/src/references/canvas-container.js +++ b/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"; }); }