Changed to use gantt chart options class

This commit is contained in:
Ray 2024-09-07 22:05:16 +01:00
parent fee71b651c
commit e279321367
3 changed files with 71 additions and 60 deletions

View File

@ -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 });
}
}

View File

@ -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;

View File

@ -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();
}