From 71313757e8c663fb095c6712e2b78ea34cb58810 Mon Sep 17 00:00:00 2001
From: Ray <sympatheticfire@gmail.com>
Date: Tue, 3 Oct 2023 18:17:55 +0100
Subject: [PATCH] Fixed collision avoidance

---
 bbtimeline.js  | 17 ++++++++++-------
 demo-test.html | 35 +++++++++++++++++++----------------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/bbtimeline.js b/bbtimeline.js
index 02d7f6d..a339973 100644
--- a/bbtimeline.js
+++ b/bbtimeline.js
@@ -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;
diff --git a/demo-test.html b/demo-test.html
index 6435736..7d4b4c7 100644
--- a/demo-test.html
+++ b/demo-test.html
@@ -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);