Ray
/
BBTimeline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
bbtimeline.js
View File

@ -42,12 +42,16 @@ class BBTimeline {
Colour: "#A6A6A6",
Width: 1,
};
a.Events = [];
a.StartDate = new Date();
a.ClientRectangle = a.getClientRectangle();
a.Enabled = false;
a.ctx = a.Container.getContext("2d");
a.ctx.canvas.width = a.Size.Width;
a.ctx.canvas.height = a.Size.Height;
a.initialiseComponents();
}
Load(startDate) {
@ -55,8 +59,9 @@ class BBTimeline {
a.StartDate = ((typeof(startDate) == "undefined") ? new Date() : startDate);
a.invalidate();
a.initialiseComponents();
a.invalidate(true);
a.Enabled = true;
}
Clear(all) {
@ -64,46 +69,117 @@ class BBTimeline {
if (all) {
a.ctx.clearRect(0, 0, a.ctx.canvas.width, a.ctx.canvas.height);
a.Events = [];
a.Enabled = false;
} 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));
}
}
initialiseComponents() {
FindDate(date) {
const a = this;
const coords = a.getChartCoords();
// Vertical highlight line
a.ctx.canvas.addEventListener('mousemove', function (e) {
a.Clear(false);
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);
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() {
const a = this;
const coords = a.getClientCoords();
// Vertical highlight line
// a.ctx.canvas.addEventListener('mousemove', function (e) {
// if (!a.Enabled) {
// return;
// }
// a.invalidate(false);
// 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) {
console.log('mousedown');
console.log(e);
if (!a.Enabled) {
return;
}
var event = a.FindEventByCoords(e.offsetX, e.offsetY);
console.log(event);
// console.log(e);
});
}
invalidate() {
invalidate(all) {
const a = this;
a.Clear(true);
a.Clear(all);
a.drawAxis();
a.drawXAxis();
a.drawXAxisLabels();
if (all) {
a.drawAxis();
a.drawXAxis();
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() {
const a = this;
const coords = a.getChartCoords();
const coords = a.getClientCoords();
if (coords == null) {
return;
}
@ -119,7 +195,7 @@ class BBTimeline {
drawXAxis() {
const a = this;
const coords = a.getChartCoords();
const coords = a.getClientCoords();
if (coords == null) {
return;
}
@ -156,7 +232,7 @@ class BBTimeline {
drawXAxisLabels() {
const a = this;
const coords = a.getChartCoords();
const coords = a.getClientCoords();
if (coords == null) {
return;
}
@ -194,7 +270,7 @@ class BBTimeline {
drawMarker(x, y) {
const a = this;
const coords = a.getChartCoords();
const coords = a.getClientCoords();
if (coords == null) {
return;
}
@ -208,6 +284,25 @@ class BBTimeline {
a.ctx.lineWidth = a.Marker.BorderWidth;
a.ctx.strokeStyle = a.Marker.BorderColour;
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) {
@ -236,22 +331,26 @@ class BBTimeline {
return size;
}
drawVerticalLine(x) {
drawVerticalLine(x, y) {
const a = this;
const coords = a.getChartCoords();
const coords = a.getClientCoords();
if (coords == null) {
return;
}
if (y <= 0) {
y = (coords.Y1 + a.HighlightLine.Width);
}
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.lineWidth = a.HighlightLine.Width;
a.ctx.strokeStyle = a.HighlightLine.Colour;
a.ctx.stroke();
}
getChartCoords() {
getClientCoords() {
const a = this;
if (a.ClientRectangle == null) {
@ -279,7 +378,7 @@ class BBTimeline {
getXAxis() {
const a = this;
const coords = a.getChartCoords();
const coords = a.getClientCoords();
if (coords == null) {
return;
}

21
demo-test.html
View File

@ -23,6 +23,8 @@
<p>
<button onclick="Clear()">Clear</button>
<button onclick="LoadToday()">Load Today</button>
<button onclick="LoadNext()">Load Next Month</button>
</p>
@ -37,7 +39,7 @@ canvas {
border-width: 1px;
border-color: #000000;
width: 100%;
height: 400px;
height: 300px;
padding: 0;
margin: 0;
}
@ -49,15 +51,30 @@ canvas {
var timeline1 = new BBTimeline("myCanvas");
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()
{
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>