WIP: Added event markers and marker hit-boxes

This commit is contained in:
Ray 2023-10-01 03:37:24 +01:00
parent 8b0701b2e5
commit 00c38a5e00
2 changed files with 145 additions and 29 deletions

View File

@ -42,12 +42,16 @@ class BBTimeline {
Colour: "#A6A6A6", Colour: "#A6A6A6",
Width: 1, Width: 1,
}; };
a.Events = [];
a.StartDate = new Date(); a.StartDate = new Date();
a.ClientRectangle = a.getClientRectangle(); a.ClientRectangle = a.getClientRectangle();
a.Enabled = false;
a.ctx = a.Container.getContext("2d"); a.ctx = a.Container.getContext("2d");
a.ctx.canvas.width = a.Size.Width; a.ctx.canvas.width = a.Size.Width;
a.ctx.canvas.height = a.Size.Height; a.ctx.canvas.height = a.Size.Height;
a.initialiseComponents();
} }
Load(startDate) { Load(startDate) {
@ -55,8 +59,9 @@ class BBTimeline {
a.StartDate = ((typeof(startDate) == "undefined") ? new Date() : startDate); a.StartDate = ((typeof(startDate) == "undefined") ? new Date() : startDate);
a.invalidate(); a.invalidate(true);
a.initialiseComponents();
a.Enabled = true;
} }
Clear(all) { Clear(all) {
@ -64,46 +69,117 @@ class BBTimeline {
if (all) { if (all) {
a.ctx.clearRect(0, 0, a.ctx.canvas.width, a.ctx.canvas.height); a.ctx.clearRect(0, 0, a.ctx.canvas.width, a.ctx.canvas.height);
a.Events = [];
a.Enabled = false;
} else { } else {
const rect = a.getChartCoords(); const rect = a.getClientCoords();
a.ctx.clearRect((rect.X1 + a.Axis.LineWidth), rect.Y1, (rect.X2 - rect.X1 - a.Axis.LineWidth), (rect.Y2 - rect.Y1 - a.Axis.LineWidth)); a.ctx.clearRect((rect.X1 + a.Axis.LineWidth), rect.Y1, (rect.X2 - rect.X1 - a.Axis.LineWidth), (rect.Y2 - rect.Y1 - a.Axis.LineWidth));
} }
} }
FindDate(date) {
const a = this;
const points = a.getXAxis();
for (let i=0; i<points.length; i++) {
if (points[i].Date == date){
return points[i];
}
}
return null;
}
FindEventByCoords(x, y) {
const a = this;
for (let i=0; i<a.Events.length; i++) {
const e = a.Events[i].Rectangle;
if ((x >= e.X1) && (x <= e.X2) && (y >= e.Y1) && (y <= e.Y2)){
return a.Events[i];
}
}
return null;
}
AddEvent(date, title, description, link) {
const a = this;
a.Events.push({
Date: date,
Title: title,
Description: description,
Link: link
});
a.invalidate(false);
}
initialiseComponents() { initialiseComponents() {
const a = this; const a = this;
const coords = a.getChartCoords(); const coords = a.getClientCoords();
// Vertical highlight line // Vertical highlight line
a.ctx.canvas.addEventListener('mousemove', function (e) { // a.ctx.canvas.addEventListener('mousemove', function (e) {
a.Clear(false); // if (!a.Enabled) {
// return;
// }
if ((e.offsetX > (coords.X1 + a.Axis.LineWidth)) && (e.offsetX < coords.X2) && (e.offsetY >= coords.Y1) && (e.offsetY < (coords.Y2 - a.Axis.LineWidth))){ // a.invalidate(false);
a.drawVerticalLine(e.offsetX);
} // if ((e.offsetX > (coords.X1 + a.Axis.LineWidth)) && (e.offsetX < coords.X2) && (e.offsetY >= coords.Y1) && (e.offsetY < (coords.Y2 - a.Axis.LineWidth))){
}); // a.drawVerticalLine(e.offsetX);
// }
// });
a.ctx.canvas.addEventListener('mousedown', function (e) { a.ctx.canvas.addEventListener('mousedown', function (e) {
console.log('mousedown'); if (!a.Enabled) {
console.log(e); return;
}
var event = a.FindEventByCoords(e.offsetX, e.offsetY);
console.log(event);
// console.log(e);
}); });
} }
invalidate() { invalidate(all) {
const a = this; const a = this;
a.Clear(true); a.Clear(all);
if (all) {
a.drawAxis(); a.drawAxis();
a.drawXAxis(); a.drawXAxis();
a.drawXAxisLabels(); a.drawXAxisLabels();
} else {
const coords = a.getClientCoords();
coords.Y1 += a.Marker.Width;
for (let i=0; i<a.Events.length; i++) {
const event = a.FindDate(a.Events[i].Date);
a.drawVerticalLine(event.X, coords.Y1);
const rect = a.drawMarker(event.X, coords.Y1);
a.Events[i].Rectangle = rect;
}
console.log(a.Events);
}
} }
drawAxis() { drawAxis() {
const a = this; const a = this;
const coords = a.getChartCoords(); const coords = a.getClientCoords();
if (coords == null) { if (coords == null) {
return; return;
} }
@ -119,7 +195,7 @@ class BBTimeline {
drawXAxis() { drawXAxis() {
const a = this; const a = this;
const coords = a.getChartCoords(); const coords = a.getClientCoords();
if (coords == null) { if (coords == null) {
return; return;
} }
@ -156,7 +232,7 @@ class BBTimeline {
drawXAxisLabels() { drawXAxisLabels() {
const a = this; const a = this;
const coords = a.getChartCoords(); const coords = a.getClientCoords();
if (coords == null) { if (coords == null) {
return; return;
} }
@ -194,7 +270,7 @@ class BBTimeline {
drawMarker(x, y) { drawMarker(x, y) {
const a = this; const a = this;
const coords = a.getChartCoords(); const coords = a.getClientCoords();
if (coords == null) { if (coords == null) {
return; return;
} }
@ -208,6 +284,25 @@ class BBTimeline {
a.ctx.lineWidth = a.Marker.BorderWidth; a.ctx.lineWidth = a.Marker.BorderWidth;
a.ctx.strokeStyle = a.Marker.BorderColour; a.ctx.strokeStyle = a.Marker.BorderColour;
a.ctx.stroke(); a.ctx.stroke();
const offset = a.half(a.Marker.Width);
const result = {
X1: x - (offset + a.Marker.BorderWidth),
Y1: y - (offset + a.Marker.BorderWidth),
X2: x + (offset + a.Marker.BorderWidth),
Y2: y + (offset + a.Marker.BorderWidth)
};
// a.ctx.beginPath();
// a.ctx.rect(result.X1, result.Y1, (result.X2 - result.X1), (result.Y2 - result.Y1));
// a.ctx.fillStyle = 'yellow';
// a.ctx.fill();
// a.ctx.lineWidth = 1;
// a.ctx.strokeStyle = 'black';
// a.ctx.stroke();
return result;
} }
drawText(x, y, label, align) { drawText(x, y, label, align) {
@ -236,22 +331,26 @@ class BBTimeline {
return size; return size;
} }
drawVerticalLine(x) { drawVerticalLine(x, y) {
const a = this; const a = this;
const coords = a.getChartCoords(); const coords = a.getClientCoords();
if (coords == null) { if (coords == null) {
return; return;
} }
if (y <= 0) {
y = (coords.Y1 + a.HighlightLine.Width);
}
a.ctx.beginPath(); a.ctx.beginPath();
a.ctx.moveTo(x, (coords.Y1 + a.HighlightLine.Width)); a.ctx.moveTo(x, y);
a.ctx.lineTo(x, (coords.Y2 - a.HighlightLine.Width)); a.ctx.lineTo(x, (coords.Y2 - a.HighlightLine.Width));
a.ctx.lineWidth = a.HighlightLine.Width; a.ctx.lineWidth = a.HighlightLine.Width;
a.ctx.strokeStyle = a.HighlightLine.Colour; a.ctx.strokeStyle = a.HighlightLine.Colour;
a.ctx.stroke(); a.ctx.stroke();
} }
getChartCoords() { getClientCoords() {
const a = this; const a = this;
if (a.ClientRectangle == null) { if (a.ClientRectangle == null) {
@ -279,7 +378,7 @@ class BBTimeline {
getXAxis() { getXAxis() {
const a = this; const a = this;
const coords = a.getChartCoords(); const coords = a.getClientCoords();
if (coords == null) { if (coords == null) {
return; return;
} }

View File

@ -23,6 +23,8 @@
<p> <p>
<button onclick="Clear()">Clear</button> <button onclick="Clear()">Clear</button>
<button onclick="LoadToday()">Load Today</button>
<button onclick="LoadNext()">Load Next Month</button>
</p> </p>
@ -37,7 +39,7 @@ canvas {
border-width: 1px; border-width: 1px;
border-color: #000000; border-color: #000000;
width: 100%; width: 100%;
height: 400px; height: 300px;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -49,15 +51,30 @@ canvas {
var timeline1 = new BBTimeline("myCanvas"); var timeline1 = new BBTimeline("myCanvas");
timeline1.Load(); timeline1.Load();
timeline1.AddEvent("2023-10-05", "title", "description", "link");
timeline1.AddEvent("2023-10-06", "title", "description", "link");
timeline1.AddEvent("2023-10-16", "title", "description", "link");
function Clear() function Clear()
{ {
timeline1.Clear(); timeline1.Clear(true);
} }
function LoadToday()
{
timeline1.Load(new Date());
}
function LoadNext()
{
let date = timeline1.StartDate;
date.setMonth(date.getMonth() + 1);
timeline1.Load(date);
}
</script> </script>