Changed to use gantt chart options class
This commit is contained in:
parent
fee71b651c
commit
e279321367
@ -39,6 +39,12 @@ class FlourishCanvas extends Canvas {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
a.el.addEventListener('mouseout', function (e) {
|
||||||
|
a.XPos = -1;
|
||||||
|
|
||||||
|
a.Invalidate();
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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 });
|
a.DrawVerticalLine(x, a.HeaderHeight, h, a.Options.HotTrackLine.Colour, { LineWidth: a.Options.HotTrackLine.Width });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
58
src/project/gantt-chart-options.js
Normal file
58
src/project/gantt-chart-options.js
Normal 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;
|
@ -1,3 +1,5 @@
|
|||||||
|
import GanttChartOptions from './gantt-chart-options.js';
|
||||||
|
|
||||||
import CanvasContainer from '../references/canvas-container.js';
|
import CanvasContainer from '../references/canvas-container.js';
|
||||||
import BackgroundCanvas from './background-canvas.js';
|
import BackgroundCanvas from './background-canvas.js';
|
||||||
import ForegroundCanvas from './foreground-canvas.js';
|
import ForegroundCanvas from './foreground-canvas.js';
|
||||||
@ -20,7 +22,7 @@ class GanttChart {
|
|||||||
constructor(el, options) {
|
constructor(el, options) {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
a.Options = Object.assign(a.DefaultOptions, options);
|
a.Options = Object.assign(new GanttChartOptions(), options);
|
||||||
a.CanvasContainer = new CanvasContainer(el);
|
a.CanvasContainer = new CanvasContainer(el);
|
||||||
|
|
||||||
a.#initialiseComponents();
|
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() {
|
get HeaderHeight() {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
@ -170,7 +115,10 @@ class GanttChart {
|
|||||||
const width = ((a.Duration + 2) * a.Options.DayWidth);
|
const width = ((a.Duration + 2) * a.Options.DayWidth);
|
||||||
const height = (Math.max(a.Tasks.length, a.Options.MinimumRowCount) * a.Options.Row.Height) + a.HeaderHeight;
|
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();
|
a.CanvasContainer.Invalidate();
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user