Merge pull request 'release/0.1.1.277-alpha' (#4) from release/0.1.1.277-alpha into master
Reviewed-on: Ray/BBTimeline#4
This commit is contained in:
commit
02f170655b
@ -1,14 +1,31 @@
|
|||||||
class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
||||||
constructor(parentEl, el) {
|
constructor(parentEl, el) {
|
||||||
super(parentEl, el);
|
super(parentEl, el);
|
||||||
|
}
|
||||||
|
|
||||||
|
initialiseOptions() {
|
||||||
|
super.initialiseOptions();
|
||||||
|
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
a.Margin = 0;
|
a.Options = {
|
||||||
a.StepHeight = 0;
|
Axis: {
|
||||||
a.NoStep = 0;
|
LineColour1: "#000000",
|
||||||
|
LineWidth: 1,
|
||||||
a.initialiseComponents();
|
Font: "8pt Arial",
|
||||||
|
LabelColour: "#000000",
|
||||||
|
LabelSpacing: 6
|
||||||
|
},
|
||||||
|
XAxis: {
|
||||||
|
NoPartPerDay: 4,
|
||||||
|
HourLineSpace: 6,
|
||||||
|
HourLineHeight: 10,
|
||||||
|
HourLineColour: "#EAEAEA",
|
||||||
|
DayLineHeight: 20,
|
||||||
|
DayLineColour: "#9E9E9E",
|
||||||
|
Position: 'bottom'
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
initialiseComponents() {
|
initialiseComponents() {
|
||||||
@ -16,10 +33,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
|
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
a.Margin = (a.Parent.Marker.BorderWidth * 2);
|
|
||||||
a.StepHeight = a.Parent.Marker.Width + a.Margin;
|
|
||||||
a.NoStep = Math.floor(a.GraphRectangle.H / a.StepHeight);
|
|
||||||
|
|
||||||
a.Invalidate();
|
a.Invalidate();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -27,7 +40,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
get GraphRectangle() {
|
get GraphRectangle() {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
if (a.Parent.XAxis.Position == 'top') {
|
if (a.Options.XAxis.Position == 'top') {
|
||||||
return {
|
return {
|
||||||
X: a.ClientRectangle.X,
|
X: a.ClientRectangle.X,
|
||||||
Y: (a.ClientRectangle.Y + a.XAxisHeight),
|
Y: (a.ClientRectangle.Y + a.XAxisHeight),
|
||||||
@ -46,9 +59,9 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
|
|
||||||
get XAxisHeight() {
|
get XAxisHeight() {
|
||||||
const a = this;
|
const a = this;
|
||||||
const labelSize = a.measureText(a.Parent.Axis.Font, "0");
|
const labelSize = a.measureText(a.Options.Axis.Font, "0");
|
||||||
|
|
||||||
return labelSize.H + a.Parent.Axis.LabelSpacing + (a.Parent.XAxis.DayLineHeight * 2);
|
return labelSize.H + a.Options.Axis.LabelSpacing + (a.Options.XAxis.DayLineHeight * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
get XAxisPositions() {
|
get XAxisPositions() {
|
||||||
@ -72,7 +85,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
X: x
|
X: x
|
||||||
});
|
});
|
||||||
|
|
||||||
x += (a.Parent.XAxis.HourLineSpace * a.Parent.XAxis.NoPartPerDay);
|
x += (a.Options.XAxis.HourLineSpace * a.Options.XAxis.NoPartPerDay);
|
||||||
date.setDate(date.getDate() + 1);
|
date.setDate(date.getDate() + 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -99,7 +112,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
|
|
||||||
a.CTX.beginPath();
|
a.CTX.beginPath();
|
||||||
|
|
||||||
if (a.Parent.XAxis.Position == 'top') {
|
if (a.Options.XAxis.Position == 'top') {
|
||||||
a.CTX.moveTo(a.GraphRectangle.X, (a.GraphRectangle.Y + a.GraphRectangle.H));
|
a.CTX.moveTo(a.GraphRectangle.X, (a.GraphRectangle.Y + a.GraphRectangle.H));
|
||||||
a.CTX.lineTo(a.GraphRectangle.X, a.GraphRectangle.Y);
|
a.CTX.lineTo(a.GraphRectangle.X, a.GraphRectangle.Y);
|
||||||
a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), a.GraphRectangle.Y);
|
a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), a.GraphRectangle.Y);
|
||||||
@ -109,27 +122,27 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), (a.GraphRectangle.Y + a.GraphRectangle.H));
|
a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), (a.GraphRectangle.Y + a.GraphRectangle.H));
|
||||||
}
|
}
|
||||||
|
|
||||||
a.CTX.lineWidth = a.Parent.Axis.LineWidth;
|
a.CTX.lineWidth = a.Options.Axis.LineWidth;
|
||||||
a.CTX.strokeStyle = a.Parent.Axis.LineColour1;
|
a.CTX.strokeStyle = a.Options.Axis.LineColour1;
|
||||||
a.CTX.stroke();
|
a.CTX.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
drawXAxisLabels() {
|
drawXAxisLabels() {
|
||||||
const a = this;
|
const a = this;
|
||||||
const labelSize = a.measureText(a.Parent.Axis.Font, "0");
|
const labelSize = a.measureText(a.Options.Axis.Font, "0");
|
||||||
|
|
||||||
let posY = 0;
|
let posY = 0;
|
||||||
let posDayY = 0;
|
let posDayY = 0;
|
||||||
let posMonthY = 0;
|
let posMonthY = 0;
|
||||||
|
|
||||||
if (a.Parent.XAxis.Position == 'top') {
|
if (a.Options.XAxis.Position == 'top') {
|
||||||
posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth) - 2;
|
posY = (a.GraphRectangle.Y - a.Options.Axis.LineWidth) - 2;
|
||||||
posDayY = (posY - (labelSize.H + a.Parent.XAxis.DayLineHeight));
|
posDayY = (posY - (labelSize.H + a.Options.XAxis.DayLineHeight));
|
||||||
posMonthY = (posDayY - (labelSize.H + a.Parent.Axis.LabelSpacing));
|
posMonthY = (posDayY - (labelSize.H + a.Options.Axis.LabelSpacing));
|
||||||
} else {
|
} else {
|
||||||
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
|
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Options.Axis.LineWidth;
|
||||||
posDayY = (posY + a.Parent.XAxis.DayLineHeight);
|
posDayY = (posY + a.Options.XAxis.DayLineHeight);
|
||||||
posMonthY = (posDayY + labelSize.H + a.Parent.Axis.LabelSpacing);
|
posMonthY = (posDayY + labelSize.H + a.Options.Axis.LabelSpacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.XAxisPositions.forEach(function(e, i) {
|
a.XAxisPositions.forEach(function(e, i) {
|
||||||
@ -149,12 +162,12 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
// // Don't write first date
|
// // Don't write first date
|
||||||
// } else {
|
// } else {
|
||||||
// Write date (dd)
|
// Write date (dd)
|
||||||
a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center");
|
a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "center");
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// Write month (MMMM) on first of the month
|
// Write month (MMMM) on first of the month
|
||||||
if (writeLabel) {
|
if (writeLabel) {
|
||||||
a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left");
|
a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "left");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -168,14 +181,14 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
let posDayY = 0;
|
let posDayY = 0;
|
||||||
let posHourY = 0;
|
let posHourY = 0;
|
||||||
|
|
||||||
if (a.Parent.XAxis.Position == 'top') {
|
if (a.Options.XAxis.Position == 'top') {
|
||||||
posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth);
|
posY = (a.GraphRectangle.Y - a.Options.Axis.LineWidth);
|
||||||
posDayY = (posY - a.Parent.XAxis.DayLineHeight);
|
posDayY = (posY - a.Options.XAxis.DayLineHeight);
|
||||||
posHourY = (posY - a.Parent.XAxis.HourLineHeight);
|
posHourY = (posY - a.Options.XAxis.HourLineHeight);
|
||||||
} else {
|
} else {
|
||||||
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
|
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Options.Axis.LineWidth;
|
||||||
posDayY = (posY + a.Parent.XAxis.DayLineHeight);
|
posDayY = (posY + a.Options.XAxis.DayLineHeight);
|
||||||
posHourY = (posY + a.Parent.XAxis.HourLineHeight);
|
posHourY = (posY + a.Options.XAxis.HourLineHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
let i = 0;
|
let i = 0;
|
||||||
@ -188,18 +201,18 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||||||
a.CTX.beginPath();
|
a.CTX.beginPath();
|
||||||
a.CTX.moveTo(startPosX, posY);
|
a.CTX.moveTo(startPosX, posY);
|
||||||
|
|
||||||
if ((i % a.Parent.XAxis.NoPartPerDay) == 0) {
|
if ((i % a.Options.XAxis.NoPartPerDay) == 0) {
|
||||||
a.CTX.lineTo(startPosX, posDayY);
|
a.CTX.lineTo(startPosX, posDayY);
|
||||||
a.CTX.strokeStyle = a.Parent.XAxis.DayLineColour;
|
a.CTX.strokeStyle = a.Options.XAxis.DayLineColour;
|
||||||
} else {
|
} else {
|
||||||
a.CTX.lineTo(startPosX, posHourY);
|
a.CTX.lineTo(startPosX, posHourY);
|
||||||
a.CTX.strokeStyle = a.Parent.XAxis.HourLineColour;
|
a.CTX.strokeStyle = a.Options.XAxis.HourLineColour;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.CTX.lineWidth = a.Parent.Axis.LineWidth;
|
a.CTX.lineWidth = a.Options.Axis.LineWidth;
|
||||||
a.CTX.stroke();
|
a.CTX.stroke();
|
||||||
|
|
||||||
startPosX += a.Parent.XAxis.HourLineSpace;
|
startPosX += a.Options.XAxis.HourLineSpace;
|
||||||
|
|
||||||
i++;
|
i++;
|
||||||
}
|
}
|
||||||
|
@ -6,9 +6,14 @@ class BBTimelineCanvas {
|
|||||||
a.Container = el;
|
a.Container = el;
|
||||||
a.CTX = a.Container.getContext("2d");
|
a.CTX = a.Container.getContext("2d");
|
||||||
|
|
||||||
|
a.initialiseOptions();
|
||||||
a.initialiseComponents();
|
a.initialiseComponents();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initialiseOptions() {
|
||||||
|
// Inherit
|
||||||
|
}
|
||||||
|
|
||||||
initialiseComponents() {
|
initialiseComponents() {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
class BBTimelineFlourishCanvas extends BBTimelineCanvas {
|
class BBTimelineFlourishCanvas extends BBTimelineCanvas {
|
||||||
constructor(parentEl, el) {
|
constructor(parentEl, el) {
|
||||||
super(parentEl, el);
|
super(parentEl, el);
|
||||||
|
}
|
||||||
|
|
||||||
|
initialiseOptions() {
|
||||||
|
super.initialiseOptions();
|
||||||
|
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
@ -27,7 +31,6 @@ class BBTimelineFlourishCanvas extends BBTimelineCanvas {
|
|||||||
a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour);
|
a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
@ -1,10 +1,33 @@
|
|||||||
class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
||||||
constructor(parentEl, el) {
|
constructor(parentEl, el) {
|
||||||
super(parentEl, el);
|
super(parentEl, el);
|
||||||
|
}
|
||||||
|
|
||||||
|
initialiseOptions() {
|
||||||
|
super.initialiseOptions();
|
||||||
|
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
// a.initialiseComponents();
|
a.Options = {
|
||||||
|
Marker: {
|
||||||
|
BorderColour: "#3A5D9C",
|
||||||
|
BorderWidth: 2,
|
||||||
|
BackColour: "#D4DEEF",
|
||||||
|
Width: 10
|
||||||
|
},
|
||||||
|
Label: {
|
||||||
|
Colour: "#3A5D9C",
|
||||||
|
Font: "9pt Arial",
|
||||||
|
Margin: {
|
||||||
|
X: 2,
|
||||||
|
Y: 10
|
||||||
|
},
|
||||||
|
Line: {
|
||||||
|
Colour: "#A6A6A6",
|
||||||
|
Width: 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
initialiseComponents() {
|
initialiseComponents() {
|
||||||
@ -17,7 +40,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
|
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false);
|
||||||
if (event == null) {
|
if (event == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -32,7 +55,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
|
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false);
|
||||||
if (event == null) {
|
if (event == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -47,7 +70,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
|
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false);
|
||||||
if (event == null) {
|
if (event == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -63,7 +86,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
|
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false);
|
||||||
if (event != null) {
|
if (event != null) {
|
||||||
a.Container.style.cursor = 'pointer';
|
a.Container.style.cursor = 'pointer';
|
||||||
} else {
|
} else {
|
||||||
@ -96,7 +119,6 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
Invalidate() {
|
Invalidate() {
|
||||||
const a = this;
|
const a = this;
|
||||||
const rect = a.Parent.Layer.Background.GraphRectangle;
|
const rect = a.Parent.Layer.Background.GraphRectangle;
|
||||||
const margin = a.Parent.Layer.Background.Margin;
|
|
||||||
|
|
||||||
a.Clear();
|
a.Clear();
|
||||||
|
|
||||||
@ -104,9 +126,9 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
const visibleEvents = a.Parent.VisibleEvents;
|
const visibleEvents = a.Parent.VisibleEvents;
|
||||||
|
|
||||||
if (a.Parent.XAxis.Position == 'top') {
|
if (a.Parent.XAxis.Position == 'top') {
|
||||||
startPosY = (rect.Y + a.Parent.Marker.Width + 20);
|
startPosY = (rect.Y + a.Options.Marker.Width + 20);
|
||||||
} else {
|
} else {
|
||||||
startPosY = (rect.Y + a.Parent.Marker.Width);
|
startPosY = (rect.Y + a.Options.Marker.Width);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear for collisions detection
|
// Clear for collisions detection
|
||||||
@ -125,17 +147,16 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
|
posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (a.Parent.MarkerLabel.Line.Width > 0) {
|
if (a.Options.Label.Line.Width > 0) {
|
||||||
a.drawVerticalLine(e.Position.X, posY, posY2, a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
|
a.drawVerticalLine(e.Position.X, posY, posY2, a.Options.Label.Line.Width, a.Options.Label.Line.Colour);
|
||||||
}
|
}
|
||||||
|
|
||||||
const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour);
|
const markerRectangle = a.drawCircle(e.Position.X, posY, a.Options.Marker.Width, a.Options.Marker.BorderWidth, e.BorderColour, e.BackColour);
|
||||||
|
|
||||||
e.Position = { X: e.Position.X, Y: posY };
|
e.Position = { X: e.Position.X, Y: posY };
|
||||||
|
|
||||||
if (a.Parent.ShowMarkerLabel) {
|
if (a.Parent.ShowMarkerLabel) {
|
||||||
const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.MarkerLabel.Font, a.Parent.MarkerLabel.Colour, "left");
|
const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + a.Options.Label.Margin.X), markerRectangle.Y, e.Label, a.Options.Label.Font, a.Options.Label.Colour, "left");
|
||||||
labelRectangle.W += a.Parent.MarkerLabel.Margin;
|
|
||||||
|
|
||||||
e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
|
e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
|
||||||
} else {
|
} else {
|
||||||
@ -152,14 +173,13 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
|
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false);
|
||||||
if (event == null) {
|
if (event == null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (a.Parent.Debug) console.log(event);
|
if (a.Parent.Debug) console.log(event);
|
||||||
|
|
||||||
console.log("!");
|
|
||||||
a.Parent.OnMouseDown(this, e, event);
|
a.Parent.OnMouseDown(this, e, event);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -167,14 +187,13 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||||||
const a = this;
|
const a = this;
|
||||||
const rect = a.Parent.Layer.Background.GraphRectangle;
|
const rect = a.Parent.Layer.Background.GraphRectangle;
|
||||||
|
|
||||||
// Calculate Y position
|
|
||||||
let hasMoved = false;
|
let hasMoved = false;
|
||||||
let posY = y;
|
let posY = y;
|
||||||
for (let i=0; i<a.Parent.Layer.Background.NoStep; i++)
|
for (let i=rect.Y; i<(rect.Y + rect.H); i++)
|
||||||
{
|
{
|
||||||
posY = y + (a.Parent.Layer.Background.StepHeight * i);
|
posY = i;
|
||||||
|
|
||||||
var clippedEvent = a.Parent.FindEventsByCoords(x, posY);
|
var clippedEvent = a.Parent.FindEventsByCoords(x, posY, true);
|
||||||
if (clippedEvent == null) {
|
if (clippedEvent == null) {
|
||||||
hasMoved = true;
|
hasMoved = true;
|
||||||
break;
|
break;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* BBTimeline
|
* BBTimeline
|
||||||
* @version v0.1.1.121 beta (2023/10/18 2058)
|
* @version v0.1.1.277 apha (2023/11/12 0106)
|
||||||
*/
|
*/
|
||||||
class BBTimeline {
|
class BBTimeline {
|
||||||
constructor(el) {
|
constructor(el) {
|
||||||
@ -25,39 +25,6 @@ class BBTimeline {
|
|||||||
|
|
||||||
a.DateParsePattern = "yyyy-MM-dd";
|
a.DateParsePattern = "yyyy-MM-dd";
|
||||||
|
|
||||||
a.Axis = {
|
|
||||||
LineColour1: "#000000",
|
|
||||||
LineWidth: 1,
|
|
||||||
Font: "8pt Arial",
|
|
||||||
LabelColour: "#000000",
|
|
||||||
LabelSpacing: 6
|
|
||||||
};
|
|
||||||
a.XAxis = {
|
|
||||||
NoPartPerDay: 4,
|
|
||||||
HourLineSpace: 6,
|
|
||||||
HourLineHeight: 10,
|
|
||||||
HourLineColour: "#EAEAEA",
|
|
||||||
DayLineHeight: 20,
|
|
||||||
DayLineColour: "#9E9E9E",
|
|
||||||
Position: 'bottom'
|
|
||||||
};
|
|
||||||
|
|
||||||
a.Marker = {
|
|
||||||
BorderColour: "#3A5D9C",
|
|
||||||
BorderWidth: 2,
|
|
||||||
BackColour: "#D4DEEF",
|
|
||||||
Width: 10
|
|
||||||
};
|
|
||||||
a.MarkerLabel = {
|
|
||||||
Colour: "#3A5D9C",
|
|
||||||
Font: "9pt Arial",
|
|
||||||
Margin: 8,
|
|
||||||
Line: {
|
|
||||||
Colour: "#A6A6A6",
|
|
||||||
Width: 1,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
a.HotTrack = {
|
a.HotTrack = {
|
||||||
Colour: "#F57C00",
|
Colour: "#F57C00",
|
||||||
Width: 3
|
Width: 3
|
||||||
@ -75,6 +42,19 @@ class BBTimeline {
|
|||||||
a.initialiseComponents();
|
a.initialiseComponents();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initialiseComponents() {
|
||||||
|
const a = this;
|
||||||
|
|
||||||
|
a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
|
||||||
|
|
||||||
|
const canvasList = a.Container.getElementsByTagName("canvas");
|
||||||
|
|
||||||
|
a.Layer.Background = new BBTimelineBackgroundCanvas(a, canvasList[0]);
|
||||||
|
a.Layer.Flourish = new BBTimelineFlourishCanvas(a, canvasList[1]);
|
||||||
|
a.Layer.Markers = new BBTimelineForegroundCanvas(a, canvasList[2]);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
get CTX() {
|
get CTX() {
|
||||||
return a.Layer.Markers.CTX;
|
return a.Layer.Markers.CTX;
|
||||||
@ -89,8 +69,8 @@ class BBTimeline {
|
|||||||
Position: { X: 0, Y: 0 },
|
Position: { X: 0, Y: 0 },
|
||||||
Events: [],
|
Events: [],
|
||||||
HitBox: null,
|
HitBox: null,
|
||||||
BorderColour: a.Marker.BorderColour,
|
BorderColour: a.Layer.Markers.Options.Marker.BorderColour,
|
||||||
BackColour: a.Marker.BackColour
|
BackColour: a.Layer.Markers.Options.Marker.BackColour
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -147,6 +127,12 @@ class BBTimeline {
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get XAxis() {
|
||||||
|
const a = this;
|
||||||
|
|
||||||
|
return a.Layer.Background.Options.XAxis;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
AddEvent(date, label, options) {
|
AddEvent(date, label, options) {
|
||||||
const a = this;
|
const a = this;
|
||||||
@ -221,7 +207,7 @@ class BBTimeline {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
FindEventsByCoords(x, y) {
|
FindEventsByCoords(x, y, addmargin) {
|
||||||
const a = this;
|
const a = this;
|
||||||
|
|
||||||
for (let i=0; i<a.Events.length; i++) {
|
for (let i=0; i<a.Events.length; i++) {
|
||||||
@ -230,8 +216,12 @@ class BBTimeline {
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const x2 = (e.X + e.W);
|
let x2 = (e.X + e.W);
|
||||||
const y2 = (e.Y + e.H);
|
let y2 = (e.Y + e.H);
|
||||||
|
|
||||||
|
if (addmargin) {
|
||||||
|
y2 += a.Layer.Markers.Options.Label.Margin.Y;
|
||||||
|
}
|
||||||
|
|
||||||
if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
|
if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
|
||||||
return a.Events[i];
|
return a.Events[i];
|
||||||
@ -383,18 +373,4 @@ class BBTimeline {
|
|||||||
|
|
||||||
OnDblClick(sender, e, event) { /* delegate */ }
|
OnDblClick(sender, e, event) { /* delegate */ }
|
||||||
|
|
||||||
|
|
||||||
initialiseComponents() {
|
|
||||||
const a = this;
|
|
||||||
|
|
||||||
a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
|
|
||||||
|
|
||||||
const canvasList = a.Container.getElementsByTagName("canvas");
|
|
||||||
|
|
||||||
a.Layer.Background = new BBTimelineBackgroundCanvas(a, canvasList[0]);
|
|
||||||
a.Layer.Flourish = new BBTimelineFlourishCanvas(a, canvasList[1]);
|
|
||||||
a.Layer.Markers = new BBTimelineForegroundCanvas(a, canvasList[2]);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
11
bbtimeline.min.js
vendored
11
bbtimeline.min.js
vendored
File diff suppressed because one or more lines are too long
@ -197,12 +197,13 @@ function ToggleShowLabel() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ToggleXAxisPosition() {
|
function ToggleXAxisPosition() {
|
||||||
if (timeline1.XAxis.Position == 'top') {
|
const xAxis = timeline1.Layer.Background.Options.XAxis;
|
||||||
timeline1.XAxis.Position = 'bottom';
|
if (xAxis.Position == 'top') {
|
||||||
|
xAxis.Position = 'bottom';
|
||||||
timeline1.Padding.Top = 20;
|
timeline1.Padding.Top = 20;
|
||||||
timeline1.Padding.Bottom = 0;
|
timeline1.Padding.Bottom = 0;
|
||||||
} else {
|
} else {
|
||||||
timeline1.XAxis.Position = 'top';
|
xAxis.Position = 'top';
|
||||||
timeline1.Padding.Top = 0;
|
timeline1.Padding.Top = 0;
|
||||||
timeline1.Padding.Bottom = 20;
|
timeline1.Padding.Bottom = 20;
|
||||||
}
|
}
|
||||||
@ -211,7 +212,8 @@ function ToggleXAxisPosition() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ToggleMarkerTail() {
|
function ToggleMarkerTail() {
|
||||||
timeline1.MarkerLabel.Line.Width = ((timeline1.MarkerLabel.Line.Width <= 0) ? 1 : 0);
|
|
||||||
|
timeline1.Layer.Markers.Options.Label.Line.Width = ((timeline1.Layer.Markers.Options.Label.Line.Width <= 0) ? 1 : 0);
|
||||||
timeline1.Invalidate(true, true);
|
timeline1.Invalidate(true, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user