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

Fixed collision avoidance

Browse Source
This commit is contained in:
Ray 2023-10-03 18:17:55 +01:00
parent f99835fcac
commit 71313757e8
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
bbtimeline.js
View File

@ -46,7 +46,7 @@ class BBTimeline {
Width: 10, Width: 10,
ForeColour: "#3A5D9C", ForeColour: "#3A5D9C",
Font: "9pt Arial", Font: "9pt Arial",
LabelCollisionMargin: 4 CollisionMargin: 8
}; };
a.HighlightLine = { a.HighlightLine = {
Colour: "#A6A6A6", Colour: "#A6A6A6",
@ -172,7 +172,10 @@ class BBTimeline {
continue; continue;
} }
if ((x >= e.X) && (x <= e.X2) && (y >= e.Y) && (y <= e.Y2)){ const x2 = (e.X + e.W);
const y2 = (e.Y + e.H);
if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
return a.Events[i]; return a.Events[i];
} }
} }
@ -297,8 +300,8 @@ class BBTimeline {
e.HitBox = { e.HitBox = {
X: markerRectangle.X, X: markerRectangle.X,
Y: markerRectangle.Y, Y: markerRectangle.Y,
X2: (markerRectangle.X + a.GraphRectangle.Margin + labelSize.Width), W: (markerRectangle.W + a.GraphRectangle.Margin + labelSize.Width + a.Marker.CollisionMargin),
Y2: (markerRectangle.Y + markerRectangle.H) H: markerRectangle.H
}; };
if (a.Debug) a.drawRectangle(e.HitBox); if (a.Debug) a.drawRectangle(e.HitBox);
@ -458,7 +461,7 @@ class BBTimeline {
a.ctx.strokeStyle = a.Axis.LineColour1; a.ctx.strokeStyle = a.Axis.LineColour1;
a.ctx.stroke(); a.ctx.stroke();
if (a.Debug) a.drawRectangle(coords); if (a.Debug) a.drawRectangle(a.GraphRectangle);
} }
drawXAxis() { drawXAxis() {
@ -568,11 +571,11 @@ class BBTimeline {
return size; return size;
} }
drawRectangle(coords) { drawRectangle(rectangle) {
const a = this; const a = this;
a.ctx.beginPath(); a.ctx.beginPath();
a.ctx.rect(coords.X, coords.Y, (coords.X2 - coords.X), (coords.Y2 - coords.Y)); a.ctx.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
//a.ctx.fillStyle = 'yellow'; //a.ctx.fillStyle = 'yellow';
//a.ctx.fill(); //a.ctx.fill();
a.ctx.lineWidth = 1; a.ctx.lineWidth = 1;

35
demo-test.html
View File

@ -79,17 +79,20 @@ function Clear()
function LoadDemo() function LoadDemo()
{ {
timeline1.AddEvent("2023-10-05", "hello", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-05", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-06", "hello", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-06", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-06", null, { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-16", "hello", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-16", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-06", "hello 2", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-06", "Event 2", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-06", null, { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-06", null, { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-20", "hello hello hello", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-20", "Very Long Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-21", "hello", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-21", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-23", "hello", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-23", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2023-10-26", "hello", { Title: Math.random(), Description: Math.random() }); timeline1.AddEvent("2001-01-26", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-02-05", "Event", { Title: Math.random(), Description: Math.random() });
timeline1.AddEvent("2001-02-07", "Event", { Title: Math.random(), Description: Math.random() });
LoadToday(); LoadToday();
timeline1.Invalidate(false, true); timeline1.Invalidate(false, true);
@ -105,7 +108,7 @@ function LoadToday()
{ {
// const date = timeline1.DateToString(new Date(), "yyyy-MM-dd"); // const date = timeline1.DateToString(new Date(), "yyyy-MM-dd");
timeline1.Load("2023-10-01"); timeline1.Load("2001-01-01");
} }
function LoadPrevious() function LoadPrevious()
@ -120,17 +123,17 @@ function LoadNext()
function UpdateLabel() function UpdateLabel()
{ {
timeline1.UpdateLabel("2023-10-21", "hello world"); timeline1.UpdateLabel("2001-01-21", "Very Long Event");
} }
function UpdateMarker() function UpdateMarker()
{ {
timeline1.UpdateMarker("2023-10-21", "#E68422", "#FAE7D3"); timeline1.UpdateMarker("2001-01-21", "#E68422", "#FAE7D3");
} }
function DeleteMarker() function DeleteMarker()
{ {
timeline1.DeleteMarker("2023-10-06"); timeline1.DeleteMarker("2001-01-06");
timeline1.Invalidate(false, true); timeline1.Invalidate(false, true);
} }
@ -141,7 +144,7 @@ function GetDisplayedDateRange()
function FindEvent() function FindEvent()
{ {
const result = timeline1.FindEvent("2023-10-26"); const result = timeline1.FindEvent("2001-01-26");
console.log(result); console.log(result);
@ -150,7 +153,7 @@ function FindEvent()
function FindDatePosition() function FindDatePosition()
{ {
const result = timeline1.FindDatePosition("2023-10-26"); const result = timeline1.FindDatePosition("2001-01-26");
console.log(result); console.log(result);