diff --git a/src/project/flourish-canvas.js b/src/project/flourish-canvas.js index 4413838..136afe2 100644 --- a/src/project/flourish-canvas.js +++ b/src/project/flourish-canvas.js @@ -39,6 +39,12 @@ class FlourishCanvas extends Canvas { }); + a.el.addEventListener('mouseout', function (e) { + a.XPos = -1; + + a.Invalidate(); + }); + } Invalidate() { @@ -68,7 +74,6 @@ class FlourishCanvas extends Canvas { a.DrawVerticalLine(x, a.HeaderHeight, h, a.Options.HotTrackLine.Colour, { LineWidth: a.Options.HotTrackLine.Width }); } - } diff --git a/src/project/gantt-chart-options.js b/src/project/gantt-chart-options.js new file mode 100644 index 0000000..a017d67 --- /dev/null +++ b/src/project/gantt-chart-options.js @@ -0,0 +1,58 @@ +class GanttChartOptions { + 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 GanttChartOptions; \ No newline at end of file diff --git a/src/project/gantt-chart.js b/src/project/gantt-chart.js index eb20c3e..3a41e29 100644 --- a/src/project/gantt-chart.js +++ b/src/project/gantt-chart.js @@ -1,3 +1,5 @@ +import GanttChartOptions from './gantt-chart-options.js'; + import CanvasContainer from '../references/canvas-container.js'; import BackgroundCanvas from './background-canvas.js'; import ForegroundCanvas from './foreground-canvas.js'; @@ -20,7 +22,7 @@ class GanttChart { constructor(el, options) { const a = this; - a.Options = Object.assign(a.DefaultOptions, options); + a.Options = Object.assign(new GanttChartOptions(), options); a.CanvasContainer = new CanvasContainer(el); a.#initialiseComponents(); @@ -61,63 +63,6 @@ class GanttChart { } - get DefaultOptions() { - return { - 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 - }; - } - get HeaderHeight() { const a = this; @@ -170,7 +115,10 @@ class GanttChart { const width = ((a.Duration + 2) * a.Options.DayWidth); const height = (Math.max(a.Tasks.length, a.Options.MinimumRowCount) * a.Options.Row.Height) + a.HeaderHeight; - a.CanvasContainer.Size = { W: width, H: height }; + a.CanvasContainer.Size = { + W: width, + H: height + }; a.CanvasContainer.Invalidate(); }