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

Compare commits

base: Ray:master
Branches Tags
Ray:master
Ray:release/0.2.0.121
Ray:release/0.1.1.277-alpha
Ray:release/0.1.1.121
Ray:release/0.1.0.089-beta
Ray:release/0.1.0.076-alpha
..
compare: Ray:release/0.1.1.121
Branches Tags
Ray:master
Ray:release/0.2.0.121
Ray:release/0.1.1.277-alpha
Ray:release/0.1.1.121
Ray:release/0.1.0.089-beta
Ray:release/0.1.0.076-alpha

No commits in common. "master" and "release/0.1.1.121" have entirely different histories.
master ... release/0.

12 changed files with 136 additions and 2586 deletions
Show Stats Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,2 +0,0 @@
/dist
/node_modules

97
src/timeline/timeline-background-canvas.js → bbtimeline-background-canvas.js
View File

@ -1,34 +1,14 @@
import TimelineCanvas from './timeline-canvas.js'; class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
class TimelineBackgroundCanvas extends TimelineCanvas {
constructor(parentEl, el) { constructor(parentEl, el) {
super(parentEl, el); super(parentEl, el);
}
initialiseOptions() {
super.initialiseOptions();
const a = this; const a = this;
a.Options = { a.Margin = 0;
Axis: { a.StepHeight = 0;
LineColour1: "#000000", a.NoStep = 0;
LineWidth: 1,
Font: "8pt Arial", a.initialiseComponents();
LabelColour: "#000000",
LabelSpacing: 6
},
XAxis: {
NoPartPerDay: 4,
HourLineSpace: 6,
HourLineHeight: 10,
HourLineColour: "#EAEAEA",
DayLineHeight: 20,
DayLineColour: "#9E9E9E",
Position: 'bottom'
}
};
} }
initialiseComponents() { initialiseComponents() {
@ -36,6 +16,10 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
const a = this; 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(); a.Invalidate();
} }
@ -43,7 +27,7 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
get GraphRectangle() { get GraphRectangle() {
const a = this; const a = this;
if (a.Options.XAxis.Position == 'top') { if (a.Parent.XAxis.Position == 'top') {
return { return {
X: a.ClientRectangle.X, X: a.ClientRectangle.X,
Y: (a.ClientRectangle.Y + a.XAxisHeight), Y: (a.ClientRectangle.Y + a.XAxisHeight),
@ -62,9 +46,9 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
get XAxisHeight() { get XAxisHeight() {
const a = this; const a = this;
const labelSize = a.measureText(a.Options.Axis.Font, "0"); const labelSize = a.measureText(a.Parent.Axis.Font, "0");
return labelSize.H + a.Options.Axis.LabelSpacing + (a.Options.XAxis.DayLineHeight * 2); return labelSize.H + a.Parent.Axis.LabelSpacing + (a.Parent.XAxis.DayLineHeight * 2);
} }
get XAxisPositions() { get XAxisPositions() {
@ -88,7 +72,7 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
X: x X: x
}); });
x += (a.Options.XAxis.HourLineSpace * a.Options.XAxis.NoPartPerDay); x += (a.Parent.XAxis.HourLineSpace * a.Parent.XAxis.NoPartPerDay);
date.setDate(date.getDate() + 1); date.setDate(date.getDate() + 1);
} }
@ -115,7 +99,7 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
a.CTX.beginPath(); a.CTX.beginPath();
if (a.Options.XAxis.Position == 'top') { if (a.Parent.XAxis.Position == 'top') {
a.CTX.moveTo(a.GraphRectangle.X, (a.GraphRectangle.Y + a.GraphRectangle.H)); 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.Y);
a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), a.GraphRectangle.Y); a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), a.GraphRectangle.Y);
@ -125,27 +109,27 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), (a.GraphRectangle.Y + a.GraphRectangle.H)); a.CTX.lineTo((a.GraphRectangle.X + a.GraphRectangle.W), (a.GraphRectangle.Y + a.GraphRectangle.H));
} }
a.CTX.lineWidth = a.Options.Axis.LineWidth; a.CTX.lineWidth = a.Parent.Axis.LineWidth;
a.CTX.strokeStyle = a.Options.Axis.LineColour1; a.CTX.strokeStyle = a.Parent.Axis.LineColour1;
a.CTX.stroke(); a.CTX.stroke();
} }
drawXAxisLabels() { drawXAxisLabels() {
const a = this; const a = this;
const labelSize = a.measureText(a.Options.Axis.Font, "0"); const labelSize = a.measureText(a.Parent.Axis.Font, "0");
let posY = 0; let posY = 0;
let posDayY = 0; let posDayY = 0;
let posMonthY = 0; let posMonthY = 0;
if (a.Options.XAxis.Position == 'top') { if (a.Parent.XAxis.Position == 'top') {
posY = (a.GraphRectangle.Y - a.Options.Axis.LineWidth) - 2; posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth) - 2;
posDayY = (posY - (labelSize.H + a.Options.XAxis.DayLineHeight)); posDayY = (posY - (labelSize.H + a.Parent.XAxis.DayLineHeight));
posMonthY = (posDayY - (labelSize.H + a.Options.Axis.LabelSpacing)); posMonthY = (posDayY - (labelSize.H + a.Parent.Axis.LabelSpacing));
} else { } else {
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Options.Axis.LineWidth; posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
posDayY = (posY + a.Options.XAxis.DayLineHeight); posDayY = (posY + a.Parent.XAxis.DayLineHeight);
posMonthY = (posDayY + labelSize.H + a.Options.Axis.LabelSpacing); posMonthY = (posDayY + labelSize.H + a.Parent.Axis.LabelSpacing);
} }
a.XAxisPositions.forEach(function(e, i) { a.XAxisPositions.forEach(function(e, i) {
@ -165,12 +149,12 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
// // Don't write first date // // Don't write first date
// } else { // } else {
// Write date (dd) // Write date (dd)
a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "center"); a.drawText(e.X, posDayY, a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center");
// } // }
// Write month (MMMM) on first of the month // Write month (MMMM) on first of the month
if (writeLabel) { if (writeLabel) {
a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Options.Axis.Font, a.Options.Axis.LabelColour, "left"); a.drawText(e.X, posMonthY, a.Parent.DateToString(date, "MMMM yyyy"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left");
} }
}); });
} }
@ -184,14 +168,14 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
let posDayY = 0; let posDayY = 0;
let posHourY = 0; let posHourY = 0;
if (a.Options.XAxis.Position == 'top') { if (a.Parent.XAxis.Position == 'top') {
posY = (a.GraphRectangle.Y - a.Options.Axis.LineWidth); posY = (a.GraphRectangle.Y - a.Parent.Axis.LineWidth);
posDayY = (posY - a.Options.XAxis.DayLineHeight); posDayY = (posY - a.Parent.XAxis.DayLineHeight);
posHourY = (posY - a.Options.XAxis.HourLineHeight); posHourY = (posY - a.Parent.XAxis.HourLineHeight);
} else { } else {
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Options.Axis.LineWidth; posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
posDayY = (posY + a.Options.XAxis.DayLineHeight); posDayY = (posY + a.Parent.XAxis.DayLineHeight);
posHourY = (posY + a.Options.XAxis.HourLineHeight); posHourY = (posY + a.Parent.XAxis.HourLineHeight);
} }
let i = 0; let i = 0;
@ -204,24 +188,21 @@ class TimelineBackgroundCanvas extends TimelineCanvas {
a.CTX.beginPath(); a.CTX.beginPath();
a.CTX.moveTo(startPosX, posY); a.CTX.moveTo(startPosX, posY);
if ((i % a.Options.XAxis.NoPartPerDay) == 0) { if ((i % a.Parent.XAxis.NoPartPerDay) == 0) {
a.CTX.lineTo(startPosX, posDayY); a.CTX.lineTo(startPosX, posDayY);
a.CTX.strokeStyle = a.Options.XAxis.DayLineColour; a.CTX.strokeStyle = a.Parent.XAxis.DayLineColour;
} else { } else {
a.CTX.lineTo(startPosX, posHourY); a.CTX.lineTo(startPosX, posHourY);
a.CTX.strokeStyle = a.Options.XAxis.HourLineColour; a.CTX.strokeStyle = a.Parent.XAxis.HourLineColour;
} }
a.CTX.lineWidth = a.Options.Axis.LineWidth; a.CTX.lineWidth = a.Parent.Axis.LineWidth;
a.CTX.stroke(); a.CTX.stroke();
startPosX += a.Options.XAxis.HourLineSpace; startPosX += a.Parent.XAxis.HourLineSpace;
i++; i++;
} }
} }
} }
export default TimelineBackgroundCanvas;

10
src/timeline/timeline-canvas.js → bbtimeline-canvas.js
View File

@ -1,4 +1,4 @@
class TimelineCanvas { class BBTimelineCanvas {
constructor(parentEl, el) { constructor(parentEl, el) {
const a = this; const a = this;
@ -6,14 +6,9 @@ class TimelineCanvas {
a.Container = el; a.Container = el;
a.CTX = a.Container.getContext("2d"); a.CTX = a.Container.getContext("2d");
a.initialiseOptions();
a.initialiseComponents(); a.initialiseComponents();
} }
initialiseOptions() {
// Inherit
}
initialiseComponents() { initialiseComponents() {
const a = this; const a = this;
@ -180,6 +175,3 @@ class TimelineCanvas {
} }
} }
export default TimelineCanvas;

13
src/timeline/timeline-flourish-canvas.js → bbtimeline-flourish-canvas.js
View File

@ -1,13 +1,6 @@
import TimelineCanvas from './timeline-canvas.js'; class BBTimelineFlourishCanvas extends BBTimelineCanvas {
class TimelineFlourishCanvas extends TimelineCanvas {
constructor(parentEl, el) { constructor(parentEl, el) {
super(parentEl, el); super(parentEl, el);
}
initialiseOptions() {
super.initialiseOptions();
const a = this; const a = this;
@ -34,9 +27,7 @@ class TimelineFlourishCanvas extends TimelineCanvas {
a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour); a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour);
} }
}
} }
}
export default TimelineFlourishCanvas;

65
src/timeline/timeline-foreground-canvas.js → bbtimeline-foreground-canvas.js
View File

@ -1,36 +1,10 @@
import TimelineCanvas from './timeline-canvas.js'; class BBTimelineForegroundCanvas extends BBTimelineCanvas {
class TimelineForegroundCanvas extends TimelineCanvas {
constructor(parentEl, el) { constructor(parentEl, el) {
super(parentEl, el); super(parentEl, el);
}
initialiseOptions() {
super.initialiseOptions();
const a = this; const a = this;
a.Options = { // a.initialiseComponents();
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() { initialiseComponents() {
@ -43,7 +17,7 @@ class TimelineForegroundCanvas extends TimelineCanvas {
return; return;
} }
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
if (event == null) { if (event == null) {
return; return;
} }
@ -58,7 +32,7 @@ class TimelineForegroundCanvas extends TimelineCanvas {
return; return;
} }
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
if (event == null) { if (event == null) {
return; return;
} }
@ -73,7 +47,7 @@ class TimelineForegroundCanvas extends TimelineCanvas {
return; return;
} }
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
if (event == null) { if (event == null) {
return; return;
} }
@ -89,7 +63,7 @@ class TimelineForegroundCanvas extends TimelineCanvas {
return; return;
} }
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
if (event != null) { if (event != null) {
a.Container.style.cursor = 'pointer'; a.Container.style.cursor = 'pointer';
} else { } else {
@ -122,6 +96,7 @@ class TimelineForegroundCanvas extends TimelineCanvas {
Invalidate() { Invalidate() {
const a = this; const a = this;
const rect = a.Parent.Layer.Background.GraphRectangle; const rect = a.Parent.Layer.Background.GraphRectangle;
const margin = a.Parent.Layer.Background.Margin;
a.Clear(); a.Clear();
@ -129,9 +104,9 @@ class TimelineForegroundCanvas extends TimelineCanvas {
const visibleEvents = a.Parent.VisibleEvents; const visibleEvents = a.Parent.VisibleEvents;
if (a.Parent.XAxis.Position == 'top') { if (a.Parent.XAxis.Position == 'top') {
startPosY = (rect.Y + a.Options.Marker.Width + 20); startPosY = (rect.Y + a.Parent.Marker.Width + 20);
} else { } else {
startPosY = (rect.Y + a.Options.Marker.Width); startPosY = (rect.Y + a.Parent.Marker.Width);
} }
// Clear for collisions detection // Clear for collisions detection
@ -150,16 +125,17 @@ class TimelineForegroundCanvas extends TimelineCanvas {
posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H); posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
} }
if (a.Options.Label.Line.Width > 0) { if (a.Parent.MarkerLabel.Line.Width > 0) {
a.drawVerticalLine(e.Position.X, posY, posY2, a.Options.Label.Line.Width, a.Options.Label.Line.Colour); a.drawVerticalLine(e.Position.X, posY, posY2, a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
} }
const markerRectangle = a.drawCircle(e.Position.X, posY, a.Options.Marker.Width, a.Options.Marker.BorderWidth, e.BorderColour, e.BackColour); const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour);
e.Position = { X: e.Position.X, Y: posY }; e.Position = { X: e.Position.X, Y: posY };
if (a.Parent.ShowMarkerLabel) { if (a.Parent.ShowMarkerLabel) {
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"); 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;
e.HitBox = a.combineRectangle(markerRectangle, labelRectangle); e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
} else { } else {
@ -176,13 +152,14 @@ class TimelineForegroundCanvas extends TimelineCanvas {
return; return;
} }
var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false); var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
if (event == null) { if (event == null) {
return; return;
} }
if (a.Parent.Debug) console.log(event); if (a.Parent.Debug) console.log(event);
console.log("!");
a.Parent.OnMouseDown(this, e, event); a.Parent.OnMouseDown(this, e, event);
} }
@ -190,13 +167,14 @@ class TimelineForegroundCanvas extends TimelineCanvas {
const a = this; const a = this;
const rect = a.Parent.Layer.Background.GraphRectangle; const rect = a.Parent.Layer.Background.GraphRectangle;
// Calculate Y position
let hasMoved = false; let hasMoved = false;
let posY = y; let posY = y;
for (let i=rect.Y; i<(rect.Y + rect.H); i++) for (let i=0; i<a.Parent.Layer.Background.NoStep; i++)
{ {
posY = i; posY = y + (a.Parent.Layer.Background.StepHeight * i);
var clippedEvent = a.Parent.FindEventsByCoords(x, posY, true); var clippedEvent = a.Parent.FindEventsByCoords(x, posY);
if (clippedEvent == null) { if (clippedEvent == null) {
hasMoved = true; hasMoved = true;
break; break;
@ -211,6 +189,3 @@ class TimelineForegroundCanvas extends TimelineCanvas {
} }
} }
export default TimelineForegroundCanvas;

92
src/timeline/timeline.js → bbtimeline.js
View File

@ -1,9 +1,8 @@
import TimelineBackgroundCanvas from './timeline-background-canvas.js'; /**
import TimelineFlourishCanvas from './timeline-flourish-canvas.js'; * BBTimeline
import TimelineForegroundCanvas from './timeline-foreground-canvas.js'; * @version v0.1.1.121 beta (2023/10/18 2058)
*/
class BBTimeline {
class Timeline {
constructor(el) { constructor(el) {
const a = this; const a = this;
@ -26,6 +25,39 @@ class Timeline {
a.DateParsePattern = "yyyy-MM-dd"; a.DateParsePattern = "yyyy-MM-dd";
a.Axis = {
LineColour1: "#000000",
LineWidth: 1,
Font: "8pt Arial",
LabelColour: "#000000",
LabelSpacing: 6
};
a.XAxis = {
NoPartPerDay: 4,
HourLineSpace: 6,
HourLineHeight: 10,
HourLineColour: "#EAEAEA",
DayLineHeight: 20,
DayLineColour: "#9E9E9E",
Position: 'bottom'
};
a.Marker = {
BorderColour: "#3A5D9C",
BorderWidth: 2,
BackColour: "#D4DEEF",
Width: 10
};
a.MarkerLabel = {
Colour: "#3A5D9C",
Font: "9pt Arial",
Margin: 8,
Line: {
Colour: "#A6A6A6",
Width: 1,
}
};
a.HotTrack = { a.HotTrack = {
Colour: "#F57C00", Colour: "#F57C00",
Width: 3 Width: 3
@ -43,19 +75,6 @@ class Timeline {
a.initialiseComponents(); a.initialiseComponents();
} }
initialiseComponents() {
const a = this;
a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
const canvasList = a.Container.getElementsByTagName("canvas");
a.Layer.Background = new TimelineBackgroundCanvas(a, canvasList[0]);
a.Layer.Flourish = new TimelineFlourishCanvas(a, canvasList[1]);
a.Layer.Markers = new TimelineForegroundCanvas(a, canvasList[2]);
}
get CTX() { get CTX() {
return a.Layer.Markers.CTX; return a.Layer.Markers.CTX;
@ -70,8 +89,8 @@ class Timeline {
Position: { X: 0, Y: 0 }, Position: { X: 0, Y: 0 },
Events: [], Events: [],
HitBox: null, HitBox: null,
BorderColour: a.Layer.Markers.Options.Marker.BorderColour, BorderColour: a.Marker.BorderColour,
BackColour: a.Layer.Markers.Options.Marker.BackColour BackColour: a.Marker.BackColour
}; };
} }
@ -128,12 +147,6 @@ class Timeline {
return result; return result;
} }
get XAxis() {
const a = this;
return a.Layer.Background.Options.XAxis;
}
AddEvent(date, label, options) { AddEvent(date, label, options) {
const a = this; const a = this;
@ -208,7 +221,7 @@ class Timeline {
return null; return null;
} }
FindEventsByCoords(x, y, addmargin) { FindEventsByCoords(x, y) {
const a = this; const a = this;
for (let i=0; i<a.Events.length; i++) { for (let i=0; i<a.Events.length; i++) {
@ -217,12 +230,8 @@ class Timeline {
continue; continue;
} }
let x2 = (e.X + e.W); const x2 = (e.X + e.W);
let y2 = (e.Y + e.H); const y2 = (e.Y + e.H);
if (addmargin) {
y2 += a.Layer.Markers.Options.Label.Margin.Y;
}
if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){ if ((x >= e.X) && (x <= x2) && (y >= e.Y) && (y <= y2)){
return a.Events[i]; return a.Events[i];
@ -374,7 +383,18 @@ class Timeline {
OnDblClick(sender, e, event) { /* delegate */ } OnDblClick(sender, e, event) { /* delegate */ }
initialiseComponents() {
const a = this;
a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
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]);
} }
}
export default Timeline;

4
bbtimeline.min.js vendored Normal file
View File

@ -0,0 +1,4 @@
/**
* BBTimeline
* @version v0.1.1.121 beta (2023/10/18 2058)
*/

24
demo-test.html
View File

@ -10,13 +10,11 @@
<!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> --> <!-- <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> --> <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
<script src="dist//timeline.min.js"></script> <script src="bbtimeline.js"></script>
<script src="bbtimeline-canvas.js"></script>
<!-- <script src="bbtimeline.js"></script> --> <script src="bbtimeline-background-canvas.js"></script>
<!-- <script src="bbtimeline-canvas.js"></script> --> <script src="bbtimeline-flourish-canvas.js"></script>
<!-- <script src="bbtimeline-background-canvas.js"></script> --> <script src="bbtimeline-foreground-canvas.js"></script>
<!-- <script src="bbtimeline-flourish-canvas.js"></script> -->
<!-- <script src="bbtimeline-foreground-canvas.js"></script> -->
<!-- <script src="bbtimeline.min.js"></script> --> <!-- <script src="bbtimeline.min.js"></script> -->
@ -147,7 +145,7 @@ textarea {
<script> <script>
var timeline1 = new LiteRyzJS.Timeline("myCanvas"); var timeline1 = new BBTimeline("myCanvas");
timeline1.OnMouseDown = function(sender, e, event) { timeline1.OnMouseDown = function(sender, e, event) {
LogInfo(""); LogInfo("");
LogInfo("OnMouseDown"); LogInfo("OnMouseDown");
@ -199,13 +197,12 @@ function ToggleShowLabel() {
} }
function ToggleXAxisPosition() { function ToggleXAxisPosition() {
const xAxis = timeline1.Layer.Background.Options.XAxis; if (timeline1.XAxis.Position == 'top') {
if (xAxis.Position == 'top') { timeline1.XAxis.Position = 'bottom';
xAxis.Position = 'bottom';
timeline1.Padding.Top = 20; timeline1.Padding.Top = 20;
timeline1.Padding.Bottom = 0; timeline1.Padding.Bottom = 0;
} else { } else {
xAxis.Position = 'top'; timeline1.XAxis.Position = 'top';
timeline1.Padding.Top = 0; timeline1.Padding.Top = 0;
timeline1.Padding.Bottom = 20; timeline1.Padding.Bottom = 20;
} }
@ -214,8 +211,7 @@ function ToggleXAxisPosition() {
} }
function ToggleMarkerTail() { 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); timeline1.Invalidate(true, true);
} }

2343
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@ -1,11 +0,0 @@
{
"name": "LiteRyzJS/Timeline",
"version": "0.2.0.121",
"devDependencies": {
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
},
"scripts": {
"build": "webpack"
}
}

5
src/index.js
View File

@ -1,5 +0,0 @@
// src/index.js
import Timeline from './timeline/timeline.js';
export { Timeline };

48
webpack.config.js
View File

@ -1,48 +0,0 @@
const path = require('path');
const { version } = require('./package.json');
const webpack = require('webpack');
class PrependVersionPlugin {
apply(compiler) {
compiler.hooks.emit.tapAsync('PrependVersionPlugin', (compilation, callback) => {
Object.keys(compilation.assets).forEach((filename) => {
if (filename.endsWith('.js')) {
const asset = compilation.assets[filename];
const headerText = `/*!\n * LiteRyzJS/Timeline v${version}\n * Copyright 2023-2024 Ray Lam (https://www.hiimray.co.uk)\n *\n */\n`;
const newContent = headerText + asset.source();
compilation.assets[filename] = {
source: () => newContent,
size: () => newContent.length,
};
}
});
callback();
});
}
}
module.exports = {
entry: {
timeline: './src/index.js'
},
output: {
filename: `[name].dist.js`,
path: path.resolve(__dirname, 'dist'),
library: 'LiteRyzJS',
libraryTarget: 'umd',
globalObject: 'this'
},
mode: 'production', // development|production
plugins: [
new webpack.DefinePlugin({
'process.env.VERSION': JSON.stringify(version)
}),
new PrependVersionPlugin()
]
};