Changed to multi-layer for hot-tracking and other flourishes
Changed default colours Added X-Axis top and bottom positions
This commit is contained in:
Ray
parent
8663a39116
commit
0bbed0dfee
|
|
@ -4,7 +4,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
|
||||
const a = this;
|
||||
|
||||
a.GraphRectangle = { X: 0, Y: 0, W: 0, H: 0 };
|
||||
a.Margin = 0;
|
||||
a.StepHeight = 0;
|
||||
a.NoStep = 0;
|
||||
|
|
@ -17,20 +16,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
|
||||
const a = this;
|
||||
|
||||
a.ClientRectangle = {
|
||||
X: a.Parent.Padding.Left,
|
||||
Y: a.Parent.Padding.Top,
|
||||
W: (a.Parent.Size.W - (a.Parent.Padding.Left + a.Parent.Padding.Right)),
|
||||
H: (a.Parent.Size.H - (a.Parent.Padding.Top + a.Parent.Padding.Bottom))
|
||||
};
|
||||
|
||||
a.GraphRectangle = {
|
||||
X: a.ClientRectangle.X,
|
||||
Y: a.ClientRectangle.Y,
|
||||
W: a.ClientRectangle.W,
|
||||
H: (a.ClientRectangle.H - a.XAxisHeight)
|
||||
};
|
||||
|
||||
a.Margin = (a.Parent.Marker.BorderWidth * 2);
|
||||
a.StepHeight = a.Parent.Marker.Width + a.Margin;
|
||||
a.NoStep = Math.floor(a.GraphRectangle.H / a.StepHeight);
|
||||
|
|
@ -39,11 +24,31 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
}
|
||||
|
||||
|
||||
get GraphRectangle() {
|
||||
const a = this;
|
||||
|
||||
if (a.Parent.XAxis.Position == 'top') {
|
||||
return {
|
||||
X: a.ClientRectangle.X,
|
||||
Y: (a.ClientRectangle.Y + a.XAxisHeight),
|
||||
W: a.ClientRectangle.W,
|
||||
H: (a.ClientRectangle.H - a.XAxisHeight)
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
X: a.ClientRectangle.X,
|
||||
Y: a.ClientRectangle.Y,
|
||||
W: a.ClientRectangle.W,
|
||||
H: (a.ClientRectangle.H - a.XAxisHeight)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
get XAxisHeight() {
|
||||
const a = this;
|
||||
const labelSize = a.measureText(a.Parent.Axis.Font, "0");
|
||||
|
||||
return labelSize.Height + a.Parent.Axis.LabelSpacing + (a.Parent.Axis.X.DayLineHeight * 2);
|
||||
return labelSize.H + a.Parent.Axis.LabelSpacing + (a.Parent.XAxis.DayLineHeight * 2);
|
||||
}
|
||||
|
||||
get XAxisPositions() {
|
||||
|
|
@ -67,7 +72,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
X: x
|
||||
});
|
||||
|
||||
x += (a.Parent.Axis.X.HourLineSpace * a.Parent.Axis.X.NoPartPerDay);
|
||||
x += (a.Parent.XAxis.HourLineSpace * a.Parent.XAxis.NoPartPerDay);
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
|
||||
|
|
@ -93,9 +98,17 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
const a = this;
|
||||
|
||||
a.CTX.beginPath();
|
||||
a.CTX.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
|
||||
a.CTX.lineTo(a.GraphRectangle.X, (a.GraphRectangle.H + a.GraphRectangle.Y));
|
||||
a.CTX.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y));
|
||||
|
||||
if (a.Parent.XAxis.Position == 'top') {
|
||||
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.W), a.GraphRectangle.Y);
|
||||
} else {
|
||||
a.CTX.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
|
||||
a.CTX.lineTo(a.GraphRectangle.X, (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.strokeStyle = a.Parent.Axis.LineColour1;
|
||||
a.CTX.stroke();
|
||||
|
|
@ -103,7 +116,21 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
|
||||
drawXAxisLabels() {
|
||||
const a = this;
|
||||
const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
|
||||
const labelSize = a.measureText(a.Parent.Axis.Font, "0");
|
||||
|
||||
let posY = 0;
|
||||
let posDayY = 0;
|
||||
let posMonthY = 0;
|
||||
|
||||
if (a.Parent.XAxis.Position == 'top') {
|
||||
posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth) - 2;
|
||||
posDayY = (posY - (labelSize.H + a.Parent.XAxis.DayLineHeight));
|
||||
posMonthY = (posDayY - (labelSize.H + a.Parent.Axis.LabelSpacing));
|
||||
} else {
|
||||
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
|
||||
posDayY = (posY + a.Parent.XAxis.DayLineHeight);
|
||||
posMonthY = (posDayY + labelSize.H + a.Parent.Axis.LabelSpacing);
|
||||
}
|
||||
|
||||
a.XAxisPositions.forEach(function(e, i) {
|
||||
const date = a.Parent.ConvertToDate(e.Date);
|
||||
|
|
@ -119,14 +146,15 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
}
|
||||
|
||||
// if (i == 0) {
|
||||
// return;
|
||||
// // Don't write first date
|
||||
// } else {
|
||||
// Write date (dd)
|
||||
a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center");
|
||||
// }
|
||||
|
||||
const labelSize = a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight), a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center");
|
||||
|
||||
// Write month on first of the month
|
||||
// Write month (MMMM) on first of the month
|
||||
if (writeLabel) {
|
||||
a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight + labelSize.Height + a.Parent.Axis.LabelSpacing), 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.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -136,7 +164,19 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
|
||||
let startPosX = a.GraphRectangle.X;
|
||||
const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
|
||||
const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
|
||||
let posY = 0;
|
||||
let posDayY = 0;
|
||||
let posHourY = 0;
|
||||
|
||||
if (a.Parent.XAxis.Position == 'top') {
|
||||
posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth);
|
||||
posDayY = (posY - a.Parent.XAxis.DayLineHeight);
|
||||
posHourY = (posY - a.Parent.XAxis.HourLineHeight);
|
||||
} else {
|
||||
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
|
||||
posDayY = (posY + a.Parent.XAxis.DayLineHeight);
|
||||
posHourY = (posY + a.Parent.XAxis.HourLineHeight);
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
|
||||
|
|
@ -148,18 +188,18 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
|
|||
a.CTX.beginPath();
|
||||
a.CTX.moveTo(startPosX, posY);
|
||||
|
||||
if ((i % a.Parent.Axis.X.NoPartPerDay) == 0) {
|
||||
a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.DayLineHeight));
|
||||
a.CTX.strokeStyle = a.Parent.Axis.X.DayLineColour;
|
||||
if ((i % a.Parent.XAxis.NoPartPerDay) == 0) {
|
||||
a.CTX.lineTo(startPosX, posDayY);
|
||||
a.CTX.strokeStyle = a.Parent.XAxis.DayLineColour;
|
||||
} else {
|
||||
a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.HourLineHeight));
|
||||
a.CTX.strokeStyle = a.Parent.Axis.X.HourLineColour;
|
||||
a.CTX.lineTo(startPosX, posHourY);
|
||||
a.CTX.strokeStyle = a.Parent.XAxis.HourLineColour;
|
||||
}
|
||||
|
||||
a.CTX.lineWidth = a.Parent.Axis.LineWidth;
|
||||
a.CTX.stroke();
|
||||
|
||||
startPosX += a.Parent.Axis.X.HourLineSpace;
|
||||
startPosX += a.Parent.XAxis.HourLineSpace;
|
||||
|
||||
i++;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ class BBTimelineCanvas {
|
|||
a.Container = el;
|
||||
a.CTX = a.Container.getContext("2d");
|
||||
|
||||
a.ClientRectangle = { X: 0, Y: 0, W: 0, H: 0 };
|
||||
|
||||
a.initialiseComponents();
|
||||
}
|
||||
|
||||
|
|
@ -26,6 +24,18 @@ class BBTimelineCanvas {
|
|||
}
|
||||
|
||||
|
||||
get ClientRectangle() {
|
||||
const a = this;
|
||||
|
||||
return {
|
||||
X: a.Parent.Padding.Left,
|
||||
Y: a.Parent.Padding.Top,
|
||||
W: (a.Parent.Size.W - (a.Parent.Padding.Left + a.Parent.Padding.Right)),
|
||||
H: (a.Parent.Size.H - (a.Parent.Padding.Top + a.Parent.Padding.Bottom))
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Clear() {
|
||||
const a = this;
|
||||
|
||||
|
|
@ -36,31 +46,28 @@ class BBTimelineCanvas {
|
|||
// placeholder
|
||||
}
|
||||
|
||||
|
||||
drawText(x, y, label, font, foreColour, align) {
|
||||
drawCircle(x, y, width, borderWidth, borderColour, backColour) {
|
||||
const a = this;
|
||||
const calcBorderWidth = (borderWidth * 2);
|
||||
const calcWidth = width - calcBorderWidth;
|
||||
const offset = a.half(width);
|
||||
|
||||
a.CTX.font = font;
|
||||
a.CTX.fillStyle = foreColour;
|
||||
a.CTX.beginPath();
|
||||
a.CTX.arc(x, y, calcWidth, 0, 2 * Math.PI, false);
|
||||
a.CTX.fillStyle = backColour;
|
||||
a.CTX.fill();
|
||||
a.CTX.lineWidth = borderWidth;
|
||||
a.CTX.strokeStyle = borderColour;
|
||||
a.CTX.stroke();
|
||||
|
||||
const size = a.measureText(font, label);
|
||||
const result = {
|
||||
X: x - (offset + borderWidth),
|
||||
Y: y - (offset + borderWidth),
|
||||
W: (width + calcBorderWidth),
|
||||
H: (width + calcBorderWidth)
|
||||
};
|
||||
|
||||
switch (align) {
|
||||
case "center":
|
||||
x = (x - size.OffsetLeft);
|
||||
break;
|
||||
case "right":
|
||||
x = (x - size.Width);
|
||||
break;
|
||||
case "left":
|
||||
default:
|
||||
// do nothing
|
||||
break;
|
||||
}
|
||||
|
||||
a.CTX.fillText(label, x, (y + size.Height));
|
||||
|
||||
return size;
|
||||
return result;
|
||||
}
|
||||
|
||||
drawRectangle(rectangle, colour) {
|
||||
|
|
@ -73,8 +80,58 @@ class BBTimelineCanvas {
|
|||
a.CTX.lineWidth = 1;
|
||||
a.CTX.strokeStyle = colour;
|
||||
a.CTX.stroke();
|
||||
|
||||
return rectangle;
|
||||
}
|
||||
|
||||
drawText(x, y, label, font, foreColour, align) {
|
||||
const a = this;
|
||||
|
||||
a.CTX.font = font;
|
||||
a.CTX.fillStyle = foreColour;
|
||||
|
||||
let size = a.measureText(font, label);
|
||||
size.Y = y;
|
||||
|
||||
switch (align) {
|
||||
case "center":
|
||||
size.X = (x - size.X);
|
||||
break;
|
||||
case "right":
|
||||
size.X = (x - size.W);
|
||||
break;
|
||||
case "left":
|
||||
default:
|
||||
size.X = x;
|
||||
break;
|
||||
}
|
||||
|
||||
a.CTX.fillText(label, size.X, (size.Y + size.H));
|
||||
|
||||
return size;
|
||||
}
|
||||
|
||||
drawVerticalLine(x, y1, y2, width, colour) {
|
||||
const a = this;
|
||||
|
||||
a.CTX.beginPath();
|
||||
a.CTX.moveTo(x, y1);
|
||||
a.CTX.lineTo(x, (y2 - width));
|
||||
a.CTX.lineWidth = width;
|
||||
a.CTX.strokeStyle = colour;
|
||||
a.CTX.stroke();
|
||||
|
||||
const result = {
|
||||
X: x,
|
||||
Y: y1,
|
||||
W: width,
|
||||
H: (y2 - y1)
|
||||
};
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
half(value) {
|
||||
return (value / 2);
|
||||
}
|
||||
|
|
@ -86,11 +143,35 @@ class BBTimelineCanvas {
|
|||
const size = a.CTX.measureText(value);
|
||||
|
||||
return {
|
||||
Width: size.width,
|
||||
Height: size.fontBoundingBoxAscent,
|
||||
OffsetLeft: a.half(size.width),
|
||||
OffsetTop: a.half(size.fontBoundingBoxAscent)
|
||||
W: size.width,
|
||||
H: size.fontBoundingBoxAscent,
|
||||
X: a.half(size.width),
|
||||
Y: a.half(size.fontBoundingBoxAscent)
|
||||
};
|
||||
}
|
||||
|
||||
isPointInRectangle(rect, point) {
|
||||
const x2 = (rect.X + rect.W);
|
||||
const y2 = (rect.Y + rect.H);
|
||||
|
||||
return ((point.X >= rect.X) && (point.X <= x2) && (point.Y >= rect.Y) && (point.Y <= y2));
|
||||
}
|
||||
|
||||
combineRectangle(rect1, rect2) {
|
||||
const x2 = Math.max((rect1.X + rect1.W), (rect2.X + rect2.W));
|
||||
const y2 = Math.max((rect1.Y + rect1.H), (rect2.Y + rect2.H));
|
||||
|
||||
const rect = {
|
||||
X: Math.min(rect1.X, rect2.X),
|
||||
Y: Math.min(rect1.Y, rect2.Y),
|
||||
W: 0,
|
||||
H: 0
|
||||
};
|
||||
|
||||
rect.W = x2 - rect.X;
|
||||
rect.H = y2 - rect.Y;
|
||||
|
||||
return rect;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,21 +2,32 @@ class BBTimelineFlourishCanvas extends BBTimelineCanvas {
|
|||
constructor(parentEl, el) {
|
||||
super(parentEl, el);
|
||||
|
||||
const a = this;
|
||||
|
||||
a.XPos = -1;
|
||||
}
|
||||
|
||||
DrawVerticalLine(x) {
|
||||
Invalidate() {
|
||||
const a = this;
|
||||
const rect = a.Parent.Layer.Background.GraphRectangle;
|
||||
const linePosY = (rect.Y + rect.H);
|
||||
|
||||
a.Clear();
|
||||
|
||||
a.CTX.beginPath();
|
||||
a.CTX.moveTo(x, rect.Y);
|
||||
a.CTX.lineTo(x, (linePosY - a.Parent.Marker.Line.Width));
|
||||
a.CTX.lineWidth = 1;
|
||||
a.CTX.strokeStyle = a.Parent.HotTrack.Colour;
|
||||
a.CTX.stroke();
|
||||
if (a.XPos < 0) {
|
||||
a.Clear();
|
||||
} else {
|
||||
let posY = 0;
|
||||
|
||||
if (a.Parent.XAxis.Position == 'top') {
|
||||
posY = a.Parent.Layer.Background.GraphRectangle.Y;
|
||||
} else {
|
||||
posY = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
|
||||
}
|
||||
|
||||
// a.drawVerticalLine(a.XPos, a.Parent.Layer.Background.GraphRectangle.Y, (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H), a.Parent.MarkerLabel.Line.Width, a.Parent.HotTrack.Colour);
|
||||
a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -63,21 +63,30 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||
return;
|
||||
}
|
||||
|
||||
if (!a.Parent.EnableHotTracking) {
|
||||
return;
|
||||
}
|
||||
|
||||
const point = { X: e.offsetX, Y: e.offsetY };
|
||||
if (a.Parent.HasInterception(a.Parent.Layer.Background.GraphRectangle, point)) {
|
||||
if (a.Parent.Debug) console.log(point);
|
||||
|
||||
a.Parent.DrawHotTracking(point.X);
|
||||
|
||||
a.Parent.OnMouseMove(this, e, point);
|
||||
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
|
||||
if (event != null) {
|
||||
a.Container.style.cursor = 'pointer';
|
||||
} else {
|
||||
// Clear hot tracking
|
||||
a.Parent.DrawHotTracking(-1);
|
||||
a.Container.style.cursor = 'default';
|
||||
}
|
||||
|
||||
// Hottracking
|
||||
if (a.Parent.EnableHotTracking) {
|
||||
const point = { X: e.offsetX, Y: e.offsetY };
|
||||
if (a.isPointInRectangle(a.Parent.Layer.Background.GraphRectangle, point)) {
|
||||
if (a.Parent.Debug) console.log(point);
|
||||
|
||||
a.Parent.Layer.Flourish.XPos = point.X;
|
||||
|
||||
a.Parent.OnMouseMove(this, e, event);
|
||||
} else {
|
||||
// Clear hot tracking
|
||||
a.Parent.Layer.Flourish.XPos = -1;
|
||||
}
|
||||
|
||||
a.Parent.Layer.Flourish.Invalidate();
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -92,25 +101,33 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||
a.Clear();
|
||||
|
||||
const startPosY = (rect.Y + a.Parent.Marker.Width);
|
||||
|
||||
const visibleEvents = a.Parent.VisibleEvents;
|
||||
|
||||
// Clear for collisions detection
|
||||
visibleEvents.forEach(function (e, i) {
|
||||
e.HitBox = { X: 0, Y:0, W: 0, H: 0};
|
||||
});
|
||||
|
||||
visibleEvents.forEach(function (e, i) {
|
||||
// Calculate Y position
|
||||
let posY = a.calcMarkerPosition(e.Position.X, startPosY);
|
||||
|
||||
a.drawVerticalLine(e.Position.X, posY);
|
||||
if (a.Parent.MarkerLabel.Line.Width > 0) {
|
||||
a.drawVerticalLine(e.Position.X, posY, (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H), a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
|
||||
}
|
||||
|
||||
const markerRectangle = a.drawMarker(e.Position.X, posY, e.BorderColour, e.BackColour);
|
||||
const labelSize = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.Marker.Font, a.Parent.Marker.ForeColour, "left");
|
||||
const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour);
|
||||
|
||||
e.Position = { X: e.Position.X, Y: posY };
|
||||
|
||||
e.HitBox = {
|
||||
X: markerRectangle.X,
|
||||
Y: markerRectangle.Y,
|
||||
W: (markerRectangle.W + margin + labelSize.Width + a.Parent.Marker.CollisionMargin),
|
||||
H: markerRectangle.H
|
||||
};
|
||||
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");
|
||||
labelRectangle.W += a.Parent.MarkerLabel.Margin;
|
||||
|
||||
e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
|
||||
} else {
|
||||
e.HitBox = markerRectangle;
|
||||
}
|
||||
|
||||
if (a.Parent.Debug) a.drawRectangle(e.HitBox, "red");
|
||||
if (a.Parent.Debug) console.log(e);
|
||||
|
|
@ -158,50 +175,4 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
|
|||
return posY;
|
||||
}
|
||||
|
||||
drawMarker(x, y, borderColour, backColour) {
|
||||
const a = this;
|
||||
const width = a.Parent.Marker.Width - (a.Parent.Marker.BorderWidth * 2);
|
||||
|
||||
a.CTX.beginPath();
|
||||
a.CTX.arc(x, y, width, 0, 2 * Math.PI, false);
|
||||
a.CTX.fillStyle = backColour;
|
||||
a.CTX.fill();
|
||||
a.CTX.lineWidth = a.Parent.Marker.BorderWidth;
|
||||
a.CTX.strokeStyle = borderColour;
|
||||
a.CTX.stroke();
|
||||
|
||||
return a.measureMarker(x, y);
|
||||
}
|
||||
|
||||
drawVerticalLine(x, y) {
|
||||
const a = this;
|
||||
const rect = a.Parent.Layer.Background.GraphRectangle;
|
||||
const linePosY = (rect.Y + rect.H);
|
||||
|
||||
if (y <= 0) {
|
||||
y = (rect.Y + a.Parent.Marker.Line.Width);
|
||||
}
|
||||
|
||||
a.CTX.beginPath();
|
||||
a.CTX.moveTo(x, y);
|
||||
a.CTX.lineTo(x, (linePosY - a.Parent.Marker.Line.Width));
|
||||
a.CTX.lineWidth = a.Parent.Marker.Line.Width;
|
||||
a.CTX.strokeStyle = a.Parent.Marker.Line.Colour;
|
||||
a.CTX.stroke();
|
||||
}
|
||||
|
||||
measureMarker(x, y) {
|
||||
const a = this;
|
||||
const offset = a.half(a.Parent.Marker.Width);
|
||||
|
||||
const result = {
|
||||
X: x - (offset + a.Parent.Marker.BorderWidth),
|
||||
Y: y - (offset + a.Parent.Marker.BorderWidth),
|
||||
W: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2)),
|
||||
H: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2))
|
||||
};
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ class BBTimeline {
|
|||
Left: 20,
|
||||
Top: 20,
|
||||
Right: 20,
|
||||
Bottom: 0
|
||||
Bottom: 20
|
||||
};
|
||||
a.Size = {
|
||||
W: a.Container.innerWidth || a.Container.clientWidth,
|
||||
|
|
@ -26,29 +26,32 @@ class BBTimeline {
|
|||
a.DateParsePattern = "yyyy-MM-dd";
|
||||
|
||||
a.Axis = {
|
||||
LineColour1: "#CFCFCF",
|
||||
LineColour1: "#000000",
|
||||
LineWidth: 1,
|
||||
Font: "8pt Arial",
|
||||
LabelColour: "#000000",
|
||||
LabelSpacing: 6,
|
||||
X: {
|
||||
NoPartPerDay: 4,
|
||||
HourLineSpace: 6,
|
||||
HourLineHeight: 10,
|
||||
HourLineColour: "#A6A6A6",
|
||||
DayLineHeight: 20,
|
||||
DayLineColour: "#282828"
|
||||
}
|
||||
LabelSpacing: 6
|
||||
};
|
||||
a.XAxis = {
|
||||
NoPartPerDay: 4,
|
||||
HourLineSpace: 6,
|
||||
HourLineHeight: 10,
|
||||
HourLineColour: "#EAEAEA",
|
||||
DayLineHeight: 20,
|
||||
DayLineColour: "#9E9E9E",
|
||||
Position: 'top'
|
||||
};
|
||||
|
||||
a.Marker = {
|
||||
BorderColour: "#3A5D9C",
|
||||
BorderWidth: 2,
|
||||
BackColour: "#D4DEEF",
|
||||
Width: 10,
|
||||
ForeColour: "#3A5D9C",
|
||||
Width: 10
|
||||
};
|
||||
a.MarkerLabel = {
|
||||
Colour: "#3A5D9C",
|
||||
Font: "9pt Arial",
|
||||
CollisionMargin: 8,
|
||||
Margin: 8,
|
||||
Line: {
|
||||
Colour: "#A6A6A6",
|
||||
Width: 1,
|
||||
|
|
@ -56,12 +59,14 @@ class BBTimeline {
|
|||
};
|
||||
|
||||
a.HotTrack = {
|
||||
Colour: "#1D7F1D"
|
||||
Colour: "#F57C00",
|
||||
Width: 3
|
||||
};
|
||||
|
||||
a.Events = [];
|
||||
a.StartDate = a.DateToInternalString(new Date());
|
||||
a.ShowDate = a.StartDate;
|
||||
a.ShowMarkerLabel = true;
|
||||
|
||||
a.Enabled = false;
|
||||
a.Debug = false;
|
||||
|
|
@ -102,7 +107,7 @@ class BBTimeline {
|
|||
const a = this;
|
||||
const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
|
||||
|
||||
return Math.floor(clientWidth / (a.Axis.X.NoPartPerDay * a.Axis.X.HourLineSpace));
|
||||
return Math.floor(clientWidth / (a.XAxis.NoPartPerDay * a.XAxis.HourLineSpace));
|
||||
}
|
||||
|
||||
get VisibleStartDate() {
|
||||
|
|
@ -305,15 +310,11 @@ class BBTimeline {
|
|||
Invalidate(redrawAxis, redrawMarkers) {
|
||||
const a = this;
|
||||
|
||||
if (redrawAxis) {
|
||||
a.Layer.Background.Invalidate();
|
||||
}
|
||||
if (redrawAxis) a.Layer.Background.Invalidate();
|
||||
|
||||
a.Layer.Flourish.Clear();
|
||||
|
||||
if (redrawMarkers) {
|
||||
a.Layer.Markers.Invalidate();
|
||||
}
|
||||
if (redrawMarkers) a.Layer.Markers.Invalidate();
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -369,27 +370,10 @@ class BBTimeline {
|
|||
return a.DateToString(date, a.DateParsePattern);
|
||||
}
|
||||
|
||||
DrawHotTracking(x) {
|
||||
const a = this;
|
||||
|
||||
if (x < 0) {
|
||||
a.Layer.Flourish.Clear();
|
||||
} else {
|
||||
a.Layer.Flourish.DrawVerticalLine(x);
|
||||
}
|
||||
}
|
||||
|
||||
ConvertToDate(value) {
|
||||
return new Date(Date.parse(value));
|
||||
}
|
||||
|
||||
HasInterception(rect, point) {
|
||||
const x2 = (rect.X + rect.W);
|
||||
const y2 = (rect.Y + rect.H);
|
||||
|
||||
return ((point.X >= rect.X) && (point.X <= x2) && (point.Y >= rect.Y) && (point.Y <= y2));
|
||||
}
|
||||
|
||||
|
||||
OnMouseDown(sender, e, event) { /* delegate */ }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,13 +10,13 @@
|
|||
<!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
<!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<!-- <script src="bbtimeline.js"></script>
|
||||
<script src="bbtimeline.js"></script>
|
||||
<script src="bbtimeline-canvas.js"></script>
|
||||
<script src="bbtimeline-background-canvas.js"></script>
|
||||
<script src="bbtimeline-flourish-canvas.js"></script>
|
||||
<script src="bbtimeline-foreground-canvas.js"></script> -->
|
||||
<script src="bbtimeline-foreground-canvas.js"></script>
|
||||
|
||||
<script src="bbtimeline.min.js"></script>
|
||||
<!-- <script src="bbtimeline.min.js"></script> -->
|
||||
|
||||
<title></title>
|
||||
</head>
|
||||
|
|
@ -34,10 +34,25 @@
|
|||
|
||||
<p>
|
||||
<button onclick="Clear()">Clear</button>
|
||||
<button onclick="ToggleDebug()">Toggle Debug</button>
|
||||
<button onclick="ToggleHotTracking()">Toggle Hot Tracking</button>
|
||||
<button onclick="Refresh()">Refresh</button>
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
<button onclick="ToggleDebug()">Toggle Debug</button>
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
<p>
|
||||
<button onclick="ToggleHotTracking()">Toggle Hot Tracking</button>
|
||||
<button onclick="ToggleShowLabel()">Toggle Marker Label</button>
|
||||
<button onclick="ToggleMarkerTail()">Toggle Marker Tail</button>
|
||||
</p>
|
||||
<p>
|
||||
<button onclick="ToggleXAxisPosition()">Toggle X-Axis Position</button>
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
|
|
@ -176,6 +191,21 @@ function ToggleHotTracking() {
|
|||
timeline1.Invalidate(true, true);
|
||||
}
|
||||
|
||||
function ToggleShowLabel() {
|
||||
timeline1.ShowMarkerLabel = !timeline1.ShowMarkerLabel;
|
||||
timeline1.Invalidate(true, true);
|
||||
}
|
||||
|
||||
function ToggleXAxisPosition() {
|
||||
timeline1.XAxis.Position = (timeline1.XAxis.Position == 'top' ? 'bottom' : 'top');
|
||||
timeline1.Invalidate(true, true);
|
||||
}
|
||||
|
||||
function ToggleMarkerTail() {
|
||||
timeline1.MarkerLabel.Line.Width = ((timeline1.MarkerLabel.Line.Width <= 0) ? 1 : 0);
|
||||
timeline1.Invalidate(true, true);
|
||||
}
|
||||
|
||||
function Refresh() {
|
||||
timeline1.Invalidate(true, true);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue