Ray/literyzjs-timeline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor to remove coords

Browse Source
This commit is contained in:
Ray 2023-10-03 08:01:09 +01:00
parent ecce768399
commit 87d229a534
2 changed files with 95 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
bbtimeline.js
View File

@ -7,22 +7,29 @@ class BBTimeline {
const a = this; const a = this;
a.Container = document.getElementById(el); a.Container = document.getElementById(el);
a.DateParsePattern = "yyyy-MM-dd";
a.Debug = false;
a.Padding = { a.Padding = {
Left: 20, Left: 20,
Top: 20, Top: 20,
Right: 20, Right: 20,
Bottom: 40 Bottom: 0
}; };
a.Size = { a.Size = {
Width: a.Container.innerWidth || a.Container.clientWidth, W: a.Container.innerWidth || a.Container.clientWidth,
Height: a.Container.innerHeight || a.Container.clientHeight H: a.Container.innerHeight || a.Container.clientHeight
}; };
a.ctx = a.Container.getContext("2d");
a.ctx.canvas.width = a.Size.W;
a.ctx.canvas.height = a.Size.H;
a.Axis = { a.Axis = {
LineColour1: "#CFCFCF", LineColour1: "#CFCFCF",
LineWidth: 1, LineWidth: 1,
Font: "8pt Arial", Font: "8pt Arial",
LabelColour: "#000000", LabelColour: "#000000",
LabelSpacing: 6,
X: { X: {
NoPartPerDay: 4, NoPartPerDay: 4,
HourLineSpace: 6, HourLineSpace: 6,
@ -46,16 +53,10 @@ class BBTimeline {
Width: 1, Width: 1,
}; };
a.Events = []; a.Events = [];
a.StartDate = a.DateToString(new Date(), "yyyy-MM-dd"); a.StartDate = a.DateToString(new Date(), a.DateParsePattern);
a.ShowDate = a.StartDate; a.ShowDate = a.StartDate;
a.LastDate = null; a.GraphRectangle = a.calcGraphRectangle();
a.GraphRectangle = a.calcGraphArea();
a.Enabled = false; a.Enabled = false;
a.Debug = false;
a.ctx = a.Container.getContext("2d");
a.ctx.canvas.width = a.Size.Width;
a.ctx.canvas.height = a.Size.Height;
a.initialiseComponents(); a.initialiseComponents();
} }
@ -79,16 +80,29 @@ class BBTimeline {
event.Events.push(_options); event.Events.push(_options);
} }
CalcEndDate() {
const a = this;
const calcdays = Math.floor(a.GraphRectangle.W / (a.Axis.X.NoPartPerDay * a.Axis.X.HourLineSpace));
let date = a.ConvertToDate(a.ShowDate);
date.setDate(date.getDate() + calcdays);
// Minus one for lead up
date.setDate(date.getDate() - 1);
return a.DateToString(date, a.DateParsePattern);
}
Clear() { Clear() {
const a = this; const a = this;
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.StartDate = a.DateToString(new Date(), "yyyy-MM-dd"); a.StartDate = a.DateToString(new Date(), a.DateParsePattern);
a.ShowDate = a.StartDate; a.ShowDate = a.StartDate;
a.Enabled = false; a.Enabled = false;
a.Events = []; a.Events = [];
a.LastDate = null;
} }
DeleteMarker(date) DeleteMarker(date)
@ -158,7 +172,7 @@ class BBTimeline {
continue; continue;
} }
if ((x >= e.X1) && (x <= e.X2) && (y >= e.Y1) && (y <= e.Y2)){ if ((x >= e.X) && (x <= e.X2) && (y >= e.Y) && (y <= e.Y2)){
return a.Events[i]; return a.Events[i];
} }
} }
@ -177,7 +191,7 @@ class BBTimeline {
Show(date) { Show(date) {
const a = this; const a = this;
if (a.stringToDate(date) < a.stringToDate(a.StartDate)) { if (a.ConvertToDate(date) < a.ConvertToDate(a.StartDate)) {
date = a.StartDate; date = a.StartDate;
} }
@ -190,19 +204,19 @@ class BBTimeline {
ShowNext() { ShowNext() {
const a = this; const a = this;
let date = a.stringToDate(a.ShowDate); let date = a.ConvertToDate(a.ShowDate);
date.setMonth(date.getMonth() + 1); date.setMonth(date.getMonth() + 1);
a.Show(a.DateToString(date, "yyyy-MM-dd")); a.Show(a.DateToString(date, a.DateParsePattern));
} }
ShowPrevious() { ShowPrevious() {
const a = this; const a = this;
let date = a.stringToDate(a.ShowDate); let date = a.ConvertToDate(a.ShowDate);
date.setMonth(date.getMonth() - 1); date.setMonth(date.getMonth() - 1);
a.Show(a.DateToString(date, "yyyy-MM-dd")); a.Show(a.DateToString(date, a.DateParsePattern));
} }
UpdateLabel(date, label) { UpdateLabel(date, label) {
@ -234,7 +248,6 @@ class BBTimeline {
initialiseComponents() { initialiseComponents() {
const a = this; const a = this;
const coords = a.getClientCoords();
a.ctx.canvas.addEventListener('mousedown', function (e) { a.ctx.canvas.addEventListener('mousedown', function (e) {
if (!a.Enabled) { if (!a.Enabled) {
@ -248,7 +261,7 @@ class BBTimeline {
if (a.Debug) console.log(event); if (a.Debug) console.log(event);
a.OnEventClick(event); a.OnEventClick(this, e, event);
}); });
} }
@ -266,27 +279,26 @@ class BBTimeline {
if (redrawMarkers) { if (redrawMarkers) {
a.clearChart(); a.clearChart();
const startPosY = (a.GraphRectangle.Y + a.Marker.Width);
const visibleEvents = a.FindVisibleEvents(); const visibleEvents = a.FindVisibleEvents();
const coords = a.getClientCoords();
coords.Y1 += a.Marker.Width;
if (a.Debug) console.log(visibleEvents); if (a.Debug) console.log(visibleEvents);
visibleEvents.forEach(function (e, i) { visibleEvents.forEach(function (e, i) {
// Calculate Y position // Calculate Y position
let posY = a.calcMarkerPosition(e.Position.X, coords.Y1); let posY = a.calcMarkerPosition(e.Position.X, startPosY);
a.drawVerticalLine(e.Position.X, posY); a.drawVerticalLine(e.Position.X, posY);
const markerCoords = a.drawMarker(e.Position.X, posY, e.BorderColour, e.BackColour); const markerRectangle = a.drawMarker(e.Position.X, posY, e.BorderColour, e.BackColour);
const labelSize = a.drawText((markerCoords.X2 + a.GraphRectangle.Margin), markerCoords.Y1, e.Label, a.Marker.Font, a.Marker.ForeColour, "left"); const labelSize = a.drawText((markerRectangle.X + markerRectangle.W + a.GraphRectangle.Margin), markerRectangle.Y, e.Label, a.Marker.Font, a.Marker.ForeColour, "left");
e.Position = { X: e.Position.X, Y: posY }; e.Position = { X: e.Position.X, Y: posY };
e.HitBox = { e.HitBox = {
X1: markerCoords.X1, X: markerRectangle.X,
Y1: markerCoords.Y1, Y: markerRectangle.Y,
X2: (markerCoords.X2 + a.GraphRectangle.Margin + labelSize.Width), X2: (markerRectangle.X + a.GraphRectangle.Margin + labelSize.Width),
Y2: markerCoords.Y2 Y2: (markerRectangle.Y + markerRectangle.H)
}; };
if (a.Debug) a.drawRectangle(e.HitBox); if (a.Debug) a.drawRectangle(e.HitBox);
@ -366,27 +378,41 @@ class BBTimeline {
return result; return result;
} }
OnEventClick(event) { OnEventClick(sender, e, event) {
} }
calcGraphArea() { calcGraphRectangle() {
const a = this; const a = this;
const xAxisHeight = a.calcXAxisHeight();
let result = { let result = {
X: a.Padding.Left, X: a.Padding.Left,
Y: a.Padding.Top, Y: a.Padding.Top,
Width: (a.Size.Width - a.Padding.Right), W: (a.Size.W - (a.Padding.Left + a.Padding.Right)),
Height: (a.Size.Height - a.Padding.Bottom), H: (a.Size.H - (a.Padding.Top + a.Padding.Bottom) - xAxisHeight),
Margin: (a.Marker.BorderWidth * 2) Margin: (a.Marker.BorderWidth * 2)
}; };
result.StepHeight = a.Marker.Width + result.Margin; result.StepHeight = a.Marker.Width + result.Margin;
result.NoStep = Math.floor(result.Height / result.StepHeight); result.NoStep = Math.floor(result.H / result.StepHeight);
return result; return result;
} }
calcXAxisHeight() {
const a = this;
console.log(a.Axis.Font);
const labelSize = a.measureText(a.Axis.Font, "0");
const result = labelSize.Height + a.Axis.LabelSpacing + (a.Axis.X.DayLineHeight * 2);
return result;
}
calcMarkerPosition(x, y) { calcMarkerPosition(x, y) {
const a = this; const a = this;
@ -413,9 +439,8 @@ class BBTimeline {
clearChart() { clearChart() {
const a = this; const a = this;
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((a.GraphRectangle.X + a.Axis.LineWidth), a.GraphRectangle.Y, (a.GraphRectangle.W -a.Axis.LineWidth), (a.GraphRectangle.H - a.Axis.LineWidth));
// Clear marker positions // Clear marker positions
const visibleEvents = a.FindVisibleEvents(); const visibleEvents = a.FindVisibleEvents();
@ -427,15 +452,11 @@ class BBTimeline {
drawAxis() { drawAxis() {
const a = this; const a = this;
const coords = a.getClientCoords();
if (coords == null) {
return;
}
a.ctx.beginPath(); a.ctx.beginPath();
a.ctx.moveTo(coords.X1, coords.Y1); a.ctx.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
a.ctx.lineTo(coords.X1, coords.Y2); a.ctx.lineTo(a.GraphRectangle.X, (a.GraphRectangle.H + a.GraphRectangle.Y));
a.ctx.lineTo(coords.X2, coords.Y2); a.ctx.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y));
a.ctx.lineWidth = a.Axis.LineWidth; a.ctx.lineWidth = a.Axis.LineWidth;
a.ctx.strokeStyle = a.Axis.LineColour1; a.ctx.strokeStyle = a.Axis.LineColour1;
a.ctx.stroke(); a.ctx.stroke();
@ -445,36 +466,33 @@ class BBTimeline {
drawXAxis() { drawXAxis() {
const a = this; const a = this;
const coords = a.getClientCoords();
if (coords == null) {
return;
}
let x = coords.X1; let startPosX = a.GraphRectangle.X;
let y = coords.Y2 + a.Axis.LineWidth; const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Axis.LineWidth;
let i = 0; let i = 0;
while (true) { while (true) {
if (x >= coords.X2) { if (startPosX >= endPosX) {
break; break;
} }
a.ctx.beginPath(); a.ctx.beginPath();
a.ctx.moveTo(x, y); a.ctx.moveTo(startPosX, posY);
if ((i % a.Axis.X.NoPartPerDay) == 0) { if ((i % a.Axis.X.NoPartPerDay) == 0) {
a.ctx.lineTo(x, (y + a.Axis.X.DayLineHeight)); a.ctx.lineTo(startPosX, (posY + a.Axis.X.DayLineHeight));
a.ctx.strokeStyle = a.Axis.X.DayLineColour; a.ctx.strokeStyle = a.Axis.X.DayLineColour;
} else { } else {
a.ctx.lineTo(x, (y + a.Axis.X.HourLineHeight)); a.ctx.lineTo(startPosX, (posY + a.Axis.X.HourLineHeight));
a.ctx.strokeStyle = a.Axis.X.HourLineColour; a.ctx.strokeStyle = a.Axis.X.HourLineColour;
} }
a.ctx.lineWidth = a.Axis.LineWidth; a.ctx.lineWidth = a.Axis.LineWidth;
a.ctx.stroke(); a.ctx.stroke();
x += a.Axis.X.HourLineSpace; startPosX += a.Axis.X.HourLineSpace;
i++; i++;
} }
@ -482,17 +500,12 @@ class BBTimeline {
drawXAxisLabels() { drawXAxisLabels() {
const a = this; const a = this;
const coords = a.getClientCoords();
if (coords == null) {
return;
}
const result = a.getXAxis(); const result = a.getXAxis();
const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Axis.LineWidth;
const y = coords.Y2 + a.Axis.LineWidth;
result.forEach(function(e, i) { result.forEach(function(e, i) {
const date = a.stringToDate(e.Date); const date = a.ConvertToDate(e.Date);
let writeLabel = false; let writeLabel = false;
if ((i == 0)) { if ((i == 0)) {
@ -508,25 +521,17 @@ class BBTimeline {
// return; // return;
// } // }
const labelSize = a.drawText(e.X, (y + a.Axis.X.DayLineHeight), a.DateToString(date, "dd"), a.Axis.Font, a.Axis.LabelColour, "center"); const labelSize = a.drawText(e.X, (posY + a.Axis.X.DayLineHeight), a.DateToString(date, "dd"), a.Axis.Font, a.Axis.LabelColour, "center");
const label2Spacing = 6;
a.LastDate = a.DateToString(date, "yyyy-MM-dd");
// Write month on first of the month // Write month on first of the month
if (writeLabel) { if (writeLabel) {
a.drawText(e.X, (y + a.Axis.X.DayLineHeight + labelSize.Height + label2Spacing), a.DateToString(date, "MMMM yyyy"), a.Axis.Font, a.Axis.LabelColour, "left"); a.drawText(e.X, (posY + a.Axis.X.DayLineHeight + labelSize.Height + a.Axis.LabelSpacing), a.DateToString(date, "MMMM yyyy"), a.Axis.Font, a.Axis.LabelColour, "left");
} }
}); });
} }
drawMarker(x, y, borderColour, backColour) { drawMarker(x, y, borderColour, backColour) {
const a = this; const a = this;
const coords = a.getClientCoords();
if (coords == null) {
return;
}
const width = a.Marker.Width - (a.Marker.BorderWidth * 2); const width = a.Marker.Width - (a.Marker.BorderWidth * 2);
a.ctx.beginPath(); a.ctx.beginPath();
@ -570,7 +575,7 @@ class BBTimeline {
const a = this; const a = this;
a.ctx.beginPath(); a.ctx.beginPath();
a.ctx.rect(coords.X1, coords.Y1, (coords.X2 - coords.X1), (coords.Y2 - coords.Y1)); a.ctx.rect(coords.X, coords.Y, (coords.X2 - coords.X), (coords.Y2 - coords.Y));
//a.ctx.fillStyle = 'yellow'; //a.ctx.fillStyle = 'yellow';
//a.ctx.fill(); //a.ctx.fill();
a.ctx.lineWidth = 1; a.ctx.lineWidth = 1;
@ -580,59 +585,38 @@ class BBTimeline {
drawVerticalLine(x, y) { drawVerticalLine(x, y) {
const a = this; const a = this;
const coords = a.getClientCoords(); const linePosY = (a.GraphRectangle.Y + a.GraphRectangle.H);
if (coords == null) {
return;
}
if (y <= 0) { if (y <= 0) {
y = (coords.Y1 + a.HighlightLine.Width); y = (a.GraphRectangle.Y + a.HighlightLine.Width);
} }
a.ctx.beginPath(); a.ctx.beginPath();
a.ctx.moveTo(x, y); a.ctx.moveTo(x, y);
a.ctx.lineTo(x, (coords.Y2 - a.HighlightLine.Width)); a.ctx.lineTo(x, (linePosY - 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();
} }
getClientCoords() {
const a = this;
if (a.GraphRectangle == null) {
return null;
}
return {
X1: a.GraphRectangle.X,
Y1: a.GraphRectangle.Y,
X2: (a.GraphRectangle.Width - a.GraphRectangle.X),
Y2: (a.GraphRectangle.Height - a.GraphRectangle.Y)
};
}
getXAxis() { getXAxis() {
const a = this; const a = this;
const coords = a.getClientCoords(); const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
if (coords == null) {
return;
}
let result = []; let result = [];
let x = coords.X1; let x = a.GraphRectangle.X;
let date = a.stringToDate(a.ShowDate); let date = a.ConvertToDate(a.ShowDate);
// Rollback one day // Rollback one day
date.setDate(date.getDate() - 1); date.setDate(date.getDate() - 1);
while (true) { while (true) {
if (x >= coords.X2) { if (x >= endPosX) {
break; break;
} }
result.push({ result.push({
Date: a.DateToString(date, "yyyy-MM-dd"), Date: a.DateToString(date, a.DateParsePattern),
X: x X: x
}); });
@ -652,10 +636,10 @@ class BBTimeline {
const offset = a.half(a.Marker.Width); const offset = a.half(a.Marker.Width);
const result = { const result = {
X1: x - (offset + a.Marker.BorderWidth), X: x - (offset + a.Marker.BorderWidth),
Y1: y - (offset + a.Marker.BorderWidth), Y: y - (offset + a.Marker.BorderWidth),
X2: x + (offset + a.Marker.BorderWidth), W: (a.Marker.Width + (a.Marker.BorderWidth * 2)),
Y2: y + (offset + a.Marker.BorderWidth) H: (a.Marker.Width + (a.Marker.BorderWidth * 2))
}; };
return result; return result;
@ -675,7 +659,7 @@ class BBTimeline {
}; };
} }
stringToDate(value) { ConvertToDate(value) {
return new Date(Date.parse(value)); return new Date(Date.parse(value));
} }

6
demo-test.html
View File

@ -61,7 +61,7 @@ canvas {
<script> <script>
var timeline1 = new BBTimeline("myCanvas"); var timeline1 = new BBTimeline("myCanvas");
timeline1.OnEventClick = function(e) { timeline1.OnEventClick = function(sender, e, event) {
// console.log(e); // console.log(e);
} }
@ -105,7 +105,7 @@ function LoadToday()
{ {
const date = timeline1.DateToString(new Date(), "yyyy-MM-dd"); const date = timeline1.DateToString(new Date(), "yyyy-MM-dd");
timeline1.Load(date); timeline1.Load("2023-10-01");
} }
function LoadPrevious() function LoadPrevious()
@ -136,7 +136,7 @@ function DeleteMarker()
function GetDisplayedDateRange() function GetDisplayedDateRange()
{ {
alert(timeline1.ShowDate + " - " + timeline1.LastDate); alert(timeline1.ShowDate + " - " + timeline1.CalcEndDate());
} }
function FindEvent() function FindEvent()