From ae12b4040c09d3130921bfc5a1bbcbece103f3c5 Mon Sep 17 00:00:00 2001 From: Ray Date: Sun, 12 Nov 2023 01:13:17 +0000 Subject: [PATCH] Refactor to move properties to options in layers --- bbtimeline-background-canvas.js | 89 +++++++++++++++++++-------------- bbtimeline-canvas.js | 5 ++ bbtimeline-flourish-canvas.js | 5 +- bbtimeline-foreground-canvas.js | 57 ++++++++++++++------- bbtimeline.js | 82 +++++++++++------------------- bbtimeline.min.js | 4 -- demo-test.html | 10 ++-- 7 files changed, 133 insertions(+), 119 deletions(-) diff --git a/bbtimeline-background-canvas.js b/bbtimeline-background-canvas.js index 9f6a859..c40adee 100644 --- a/bbtimeline-background-canvas.js +++ b/bbtimeline-background-canvas.js @@ -1,14 +1,31 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { constructor(parentEl, el) { super(parentEl, el); + } + + initialiseOptions() { + super.initialiseOptions(); const a = this; - a.Margin = 0; - a.StepHeight = 0; - a.NoStep = 0; - - a.initialiseComponents(); + a.Options = { + Axis: { + LineColour1: "#000000", + LineWidth: 1, + Font: "8pt Arial", + LabelColour: "#000000", + LabelSpacing: 6 + }, + XAxis: { + NoPartPerDay: 4, + HourLineSpace: 6, + HourLineHeight: 10, + HourLineColour: "#EAEAEA", + DayLineHeight: 20, + DayLineColour: "#9E9E9E", + Position: 'bottom' + } + }; } initialiseComponents() { @@ -16,10 +33,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { const a = this; - a.Margin = (a.Parent.Marker.BorderWidth * 2); - a.StepHeight = a.Parent.Marker.Width + a.Margin; - a.NoStep = Math.floor(a.GraphRectangle.H / a.StepHeight); - a.Invalidate(); } @@ -27,7 +40,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { get GraphRectangle() { const a = this; - if (a.Parent.XAxis.Position == 'top') { + if (a.Options.XAxis.Position == 'top') { return { X: a.ClientRectangle.X, Y: (a.ClientRectangle.Y + a.XAxisHeight), @@ -46,9 +59,9 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { get XAxisHeight() { const a = this; - const labelSize = a.measureText(a.Parent.Axis.Font, "0"); + const labelSize = a.measureText(a.Options.Axis.Font, "0"); - return labelSize.H + a.Parent.Axis.LabelSpacing + (a.Parent.XAxis.DayLineHeight * 2); + return labelSize.H + a.Options.Axis.LabelSpacing + (a.Options.XAxis.DayLineHeight * 2); } get XAxisPositions() { @@ -72,7 +85,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { X: x }); - x += (a.Parent.XAxis.HourLineSpace * a.Parent.XAxis.NoPartPerDay); + x += (a.Options.XAxis.HourLineSpace * a.Options.XAxis.NoPartPerDay); date.setDate(date.getDate() + 1); } @@ -99,7 +112,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { a.CTX.beginPath(); - if (a.Parent.XAxis.Position == 'top') { + if (a.Options.XAxis.Position == 'top') { a.CTX.moveTo(a.GraphRectangle.X, (a.GraphRectangle.Y + a.GraphRectangle.H)); a.CTX.lineTo(a.GraphRectangle.X, a.GraphRectangle.Y); a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), a.GraphRectangle.Y); @@ -109,27 +122,27 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), (a.GraphRectangle.Y + a.GraphRectangle.H)); } - a.CTX.lineWidth = a.Parent.Axis.LineWidth; - a.CTX.strokeStyle = a.Parent.Axis.LineColour1; + a.CTX.lineWidth = a.Options.Axis.LineWidth; + a.CTX.strokeStyle = a.Options.Axis.LineColour1; a.CTX.stroke(); } drawXAxisLabels() { const a = this; - const labelSize = a.measureText(a.Parent.Axis.Font, "0"); + const labelSize = a.measureText(a.Options.Axis.Font, "0"); let posY = 0; let posDayY = 0; let posMonthY = 0; - if (a.Parent.XAxis.Position == 'top') { - posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth) - 2; - posDayY = (posY - (labelSize.H + a.Parent.XAxis.DayLineHeight)); - posMonthY = (posDayY - (labelSize.H + a.Parent.Axis.LabelSpacing)); + if (a.Options.XAxis.Position == 'top') { + posY = (a.GraphRectangle.Y - a.Options.Axis.LineWidth) - 2; + posDayY = (posY - (labelSize.H + a.Options.XAxis.DayLineHeight)); + posMonthY = (posDayY - (labelSize.H + a.Options.Axis.LabelSpacing)); } else { - posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth; - posDayY = (posY + a.Parent.XAxis.DayLineHeight); - posMonthY = (posDayY + labelSize.H + a.Parent.Axis.LabelSpacing); + posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Options.Axis.LineWidth; + posDayY = (posY + a.Options.XAxis.DayLineHeight); + posMonthY = (posDayY + labelSize.H + a.Options.Axis.LabelSpacing); } a.XAxisPositions.forEach(function(e, i) { @@ -149,12 +162,12 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { // // Don't write first date // } else { // Write date (dd) - a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center"); + a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "center"); // } // Write month (MMMM) on first of the month if (writeLabel) { - a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left"); + a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "left"); } }); } @@ -168,14 +181,14 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { let posDayY = 0; let posHourY = 0; - if (a.Parent.XAxis.Position == 'top') { - posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth); - posDayY = (posY - a.Parent.XAxis.DayLineHeight); - posHourY = (posY - a.Parent.XAxis.HourLineHeight); + if (a.Options.XAxis.Position == 'top') { + posY = (a.GraphRectangle.Y - a.Options.Axis.LineWidth); + posDayY = (posY - a.Options.XAxis.DayLineHeight); + posHourY = (posY - a.Options.XAxis.HourLineHeight); } else { - posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth; - posDayY = (posY + a.Parent.XAxis.DayLineHeight); - posHourY = (posY + a.Parent.XAxis.HourLineHeight); + posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Options.Axis.LineWidth; + posDayY = (posY + a.Options.XAxis.DayLineHeight); + posHourY = (posY + a.Options.XAxis.HourLineHeight); } let i = 0; @@ -188,18 +201,18 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas { a.CTX.beginPath(); a.CTX.moveTo(startPosX, posY); - if ((i % a.Parent.XAxis.NoPartPerDay) == 0) { + if ((i % a.Options.XAxis.NoPartPerDay) == 0) { a.CTX.lineTo(startPosX, posDayY); - a.CTX.strokeStyle = a.Parent.XAxis.DayLineColour; + a.CTX.strokeStyle = a.Options.XAxis.DayLineColour; } else { a.CTX.lineTo(startPosX, posHourY); - a.CTX.strokeStyle = a.Parent.XAxis.HourLineColour; + a.CTX.strokeStyle = a.Options.XAxis.HourLineColour; } - a.CTX.lineWidth = a.Parent.Axis.LineWidth; + a.CTX.lineWidth = a.Options.Axis.LineWidth; a.CTX.stroke(); - startPosX += a.Parent.XAxis.HourLineSpace; + startPosX += a.Options.XAxis.HourLineSpace; i++; } diff --git a/bbtimeline-canvas.js b/bbtimeline-canvas.js index adeeaa2..f53be16 100644 --- a/bbtimeline-canvas.js +++ b/bbtimeline-canvas.js @@ -6,9 +6,14 @@ class BBTimelineCanvas { a.Container = el; a.CTX = a.Container.getContext("2d"); + a.initialiseOptions(); a.initialiseComponents(); } + initialiseOptions() { + // Inherit + } + initialiseComponents() { const a = this; diff --git a/bbtimeline-flourish-canvas.js b/bbtimeline-flourish-canvas.js index 8b0cc7e..5e3c12f 100644 --- a/bbtimeline-flourish-canvas.js +++ b/bbtimeline-flourish-canvas.js @@ -1,6 +1,10 @@ class BBTimelineFlourishCanvas extends BBTimelineCanvas { constructor(parentEl, el) { super(parentEl, el); + } + + initialiseOptions() { + super.initialiseOptions(); const a = this; @@ -27,7 +31,6 @@ class BBTimelineFlourishCanvas extends BBTimelineCanvas { a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour); } - } } \ No newline at end of file diff --git a/bbtimeline-foreground-canvas.js b/bbtimeline-foreground-canvas.js index 1649e92..82be438 100644 --- a/bbtimeline-foreground-canvas.js +++ b/bbtimeline-foreground-canvas.js @@ -1,10 +1,33 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { constructor(parentEl, el) { super(parentEl, el); + } + + initialiseOptions() { + super.initialiseOptions(); const a = this; - // a.initialiseComponents(); + a.Options = { + Marker: { + BorderColour: "#3A5D9C", + BorderWidth: 2, + BackColour: "#D4DEEF", + Width: 10 + }, + Label: { + Colour: "#3A5D9C", + Font: "9pt Arial", + Margin: { + X: 2, + Y: 10 + }, + Line: { + Colour: "#A6A6A6", + Width: 1, + } + } + }; } initialiseComponents() { @@ -17,7 +40,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { return; } - var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY); + var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); if (event == null) { return; } @@ -32,7 +55,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { return; } - var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY); + var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); if (event == null) { return; } @@ -47,7 +70,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { return; } - var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY); + var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); if (event == null) { return; } @@ -63,7 +86,7 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { return; } - var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY); + var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); if (event != null) { a.Container.style.cursor = 'pointer'; } else { @@ -96,7 +119,6 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { Invalidate() { const a = this; const rect = a.Parent.Layer.Background.GraphRectangle; - const margin = a.Parent.Layer.Background.Margin; a.Clear(); @@ -104,9 +126,9 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { const visibleEvents = a.Parent.VisibleEvents; if (a.Parent.XAxis.Position == 'top') { - startPosY = (rect.Y + a.Parent.Marker.Width + 20); + startPosY = (rect.Y + a.Options.Marker.Width + 20); } else { - startPosY = (rect.Y + a.Parent.Marker.Width); + startPosY = (rect.Y + a.Options.Marker.Width); } // Clear for collisions detection @@ -125,17 +147,16 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H); } - if (a.Parent.MarkerLabel.Line.Width > 0) { - a.drawVerticalLine(e.Position.X, posY, posY2, a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour); + if (a.Options.Label.Line.Width > 0) { + a.drawVerticalLine(e.Position.X, posY, posY2, a.Options.Label.Line.Width, a.Options.Label.Line.Colour); } - const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour); + const markerRectangle = a.drawCircle(e.Position.X, posY, a.Options.Marker.Width, a.Options.Marker.BorderWidth, e.BorderColour, e.BackColour); e.Position = { X: e.Position.X, Y: posY }; if (a.Parent.ShowMarkerLabel) { - const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.MarkerLabel.Font, a.Parent.MarkerLabel.Colour, "left"); - labelRectangle.W += a.Parent.MarkerLabel.Margin; + const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + a.Options.Label.Margin.X), markerRectangle.Y, e.Label, a.Options.Label.Font, a.Options.Label.Colour, "left"); e.HitBox = a.combineRectangle(markerRectangle, labelRectangle); } else { @@ -152,14 +173,13 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { return; } - var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY); + var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); if (event == null) { return; } if (a.Parent.Debug) console.log(event); - console.log("!"); a.Parent.OnMouseDown(this, e, event); } @@ -167,14 +187,13 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas { const a = this; const rect = a.Parent.Layer.Background.GraphRectangle; - // Calculate Y position let hasMoved = false; let posY = y; - for (let i=0; i= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){ return a.Events[i]; @@ -383,18 +373,4 @@ class BBTimeline { OnDblClick(sender, e, event) { /* delegate */ } - - initialiseComponents() { - const a = this; - - a.Container.innerHTML = ""; - - const canvasList = a.Container.getElementsByTagName("canvas"); - - a.Layer.Background = new BBTimelineBackgroundCanvas(a, canvasList[0]); - a.Layer.Flourish = new BBTimelineFlourishCanvas(a, canvasList[1]); - a.Layer.Markers = new BBTimelineForegroundCanvas(a, canvasList[2]); - - } - } \ No newline at end of file diff --git a/bbtimeline.min.js b/bbtimeline.min.js index 2d55388..e69de29 100644 --- a/bbtimeline.min.js +++ b/bbtimeline.min.js @@ -1,4 +0,0 @@ -/** - * BBTimeline - * @version v0.1.1.121 beta (2023/10/18 2058) - */ diff --git a/demo-test.html b/demo-test.html index 128ed04..ca55f19 100644 --- a/demo-test.html +++ b/demo-test.html @@ -197,12 +197,13 @@ function ToggleShowLabel() { } function ToggleXAxisPosition() { - if (timeline1.XAxis.Position == 'top') { - timeline1.XAxis.Position = 'bottom'; + const xAxis = timeline1.Layer.Background.Options.XAxis; + if (xAxis.Position == 'top') { + xAxis.Position = 'bottom'; timeline1.Padding.Top = 20; timeline1.Padding.Bottom = 0; } else { - timeline1.XAxis.Position = 'top'; + xAxis.Position = 'top'; timeline1.Padding.Top = 0; timeline1.Padding.Bottom = 20; } @@ -211,7 +212,8 @@ function ToggleXAxisPosition() { } function ToggleMarkerTail() { - timeline1.MarkerLabel.Line.Width = ((timeline1.MarkerLabel.Line.Width <= 0) ? 1 : 0); + + timeline1.Layer.Markers.Options.Label.Line.Width = ((timeline1.Layer.Markers.Options.Label.Line.Width <= 0) ? 1 : 0); timeline1.Invalidate(true, true); }