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,
ForeColour: "#3A5D9C",
Font: "9pt Arial",
LabelCollisionMargin: 4
CollisionMargin: 8
};
a.HighlightLine = {
Colour: "#A6A6A6",
@ -172,7 +172,10 @@ class BBTimeline {
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];
}
}
@ -297,8 +300,8 @@ class BBTimeline {
e.HitBox = {
X: markerRectangle.X,
Y: markerRectangle.Y,
X2: (markerRectangle.X + a.GraphRectangle.Margin + labelSize.Width),
Y2: (markerRectangle.Y + markerRectangle.H)
W: (markerRectangle.W + a.GraphRectangle.Margin + labelSize.Width + a.Marker.CollisionMargin),
H: markerRectangle.H
};
if (a.Debug) a.drawRectangle(e.HitBox);
@ -458,7 +461,7 @@ class BBTimeline {
a.ctx.strokeStyle = a.Axis.LineColour1;
a.ctx.stroke();
if (a.Debug) a.drawRectangle(coords);
if (a.Debug) a.drawRectangle(a.GraphRectangle);
}
drawXAxis() {
@ -568,11 +571,11 @@ class BBTimeline {
return size;
}
drawRectangle(coords) {
drawRectangle(rectangle) {
const a = this;
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.fill();
a.ctx.lineWidth = 1;

35
demo-test.html
View File

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