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

release/0.1.1.121 #3

Merged
Ray merged 5 commits from release/0.1.1.121 into master 2023-11-11 14:21:18 +00:00
Conversation 0 Commits 5 Files Changed 7 +299 -191
7 changed files with 299 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0bbed0dfee - Show all commits

106
bbtimeline-background-canvas.js
View File

@ -4,7 +4,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
const a = this; const a = this;
a.GraphRectangle = { X: 0, Y: 0, W: 0, H: 0 };
a.Margin = 0; a.Margin = 0;
a.StepHeight = 0; a.StepHeight = 0;
a.NoStep = 0; a.NoStep = 0;
@ -17,20 +16,6 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
const a = this; const a = this;
a.ClientRectangle = {
X: a.Parent.Padding.Left,
Y: a.Parent.Padding.Top,
W: (a.Parent.Size.W - (a.Parent.Padding.Left + a.Parent.Padding.Right)),
H: (a.Parent.Size.H - (a.Parent.Padding.Top + a.Parent.Padding.Bottom))
};
a.GraphRectangle = {
X: a.ClientRectangle.X,
Y: a.ClientRectangle.Y,
W: a.ClientRectangle.W,
H: (a.ClientRectangle.H - a.XAxisHeight)
};
a.Margin = (a.Parent.Marker.BorderWidth * 2); a.Margin = (a.Parent.Marker.BorderWidth * 2);
a.StepHeight = a.Parent.Marker.Width + a.Margin; a.StepHeight = a.Parent.Marker.Width + a.Margin;
a.NoStep = Math.floor(a.GraphRectangle.H / a.StepHeight); a.NoStep = Math.floor(a.GraphRectangle.H / a.StepHeight);
@ -39,11 +24,31 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
} }
get GraphRectangle() {
const a = this;
if (a.Parent.XAxis.Position == 'top') {
return {
X: a.ClientRectangle.X,
Y: (a.ClientRectangle.Y + a.XAxisHeight),
W: a.ClientRectangle.W,
H: (a.ClientRectangle.H - a.XAxisHeight)
};
} else {
return {
X: a.ClientRectangle.X,
Y: a.ClientRectangle.Y,
W: a.ClientRectangle.W,
H: (a.ClientRectangle.H - a.XAxisHeight)
};
}
}
get XAxisHeight() { get XAxisHeight() {
const a = this; const a = this;
const labelSize = a.measureText(a.Parent.Axis.Font, "0"); const labelSize = a.measureText(a.Parent.Axis.Font, "0");
return labelSize.Height + a.Parent.Axis.LabelSpacing + (a.Parent.Axis.X.DayLineHeight * 2); return labelSize.H + a.Parent.Axis.LabelSpacing + (a.Parent.XAxis.DayLineHeight * 2);
} }
get XAxisPositions() { get XAxisPositions() {
@ -67,7 +72,7 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
X: x X: x
}); });
x += (a.Parent.Axis.X.HourLineSpace * a.Parent.Axis.X.NoPartPerDay); x += (a.Parent.XAxis.HourLineSpace * a.Parent.XAxis.NoPartPerDay);
date.setDate(date.getDate() + 1); date.setDate(date.getDate() + 1);
} }
@ -93,9 +98,17 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
const a = this; const a = this;
a.CTX.beginPath(); a.CTX.beginPath();
a.CTX.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
a.CTX.lineTo(a.GraphRectangle.X, (a.GraphRectangle.H + a.GraphRectangle.Y)); if (a.Parent.XAxis.Position == 'top') {
a.CTX.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y)); 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);
} else {
a.CTX.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
a.CTX.lineTo(a.GraphRectangle.X, (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.Parent.Axis.LineWidth; a.CTX.lineWidth = a.Parent.Axis.LineWidth;
a.CTX.strokeStyle = a.Parent.Axis.LineColour1; a.CTX.strokeStyle = a.Parent.Axis.LineColour1;
a.CTX.stroke(); a.CTX.stroke();
@ -103,7 +116,21 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
drawXAxisLabels() { drawXAxisLabels() {
const a = this; const a = this;
const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth; const labelSize = a.measureText(a.Parent.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));
} 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);
}
a.XAxisPositions.forEach(function(e, i) { a.XAxisPositions.forEach(function(e, i) {
const date = a.Parent.ConvertToDate(e.Date); const date = a.Parent.ConvertToDate(e.Date);
@ -119,14 +146,15 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
} }
// if (i == 0) { // if (i == 0) {
// return; // // 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");
// } // }
const labelSize = a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight), a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center"); // Write month (MMMM) on first of the month
// Write month on first of the month
if (writeLabel) { if (writeLabel) {
a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight + labelSize.Height + a.Parent.Axis.LabelSpacing), 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.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left");
} }
}); });
} }
@ -136,7 +164,19 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
let startPosX = a.GraphRectangle.X; let startPosX = a.GraphRectangle.X;
const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W); const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth; let posY = 0;
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);
} else {
posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
posDayY = (posY + a.Parent.XAxis.DayLineHeight);
posHourY = (posY + a.Parent.XAxis.HourLineHeight);
}
let i = 0; let i = 0;
@ -148,18 +188,18 @@ class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
a.CTX.beginPath(); a.CTX.beginPath();
a.CTX.moveTo(startPosX, posY); a.CTX.moveTo(startPosX, posY);
if ((i % a.Parent.Axis.X.NoPartPerDay) == 0) { if ((i % a.Parent.XAxis.NoPartPerDay) == 0) {
a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.DayLineHeight)); a.CTX.lineTo(startPosX, posDayY);
a.CTX.strokeStyle = a.Parent.Axis.X.DayLineColour; a.CTX.strokeStyle = a.Parent.XAxis.DayLineColour;
} else { } else {
a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.HourLineHeight)); a.CTX.lineTo(startPosX, posHourY);
a.CTX.strokeStyle = a.Parent.Axis.X.HourLineColour; a.CTX.strokeStyle = a.Parent.XAxis.HourLineColour;
} }
a.CTX.lineWidth = a.Parent.Axis.LineWidth; a.CTX.lineWidth = a.Parent.Axis.LineWidth;
a.CTX.stroke(); a.CTX.stroke();
startPosX += a.Parent.Axis.X.HourLineSpace; startPosX += a.Parent.XAxis.HourLineSpace;
i++; i++;
} }

135
bbtimeline-canvas.js
View File

@ -6,8 +6,6 @@ class BBTimelineCanvas {
a.Container = el; a.Container = el;
a.CTX = a.Container.getContext("2d"); a.CTX = a.Container.getContext("2d");
a.ClientRectangle = { X: 0, Y: 0, W: 0, H: 0 };
a.initialiseComponents(); a.initialiseComponents();
} }
@ -26,6 +24,18 @@ class BBTimelineCanvas {
} }
get ClientRectangle() {
const a = this;
return {
X: a.Parent.Padding.Left,
Y: a.Parent.Padding.Top,
W: (a.Parent.Size.W - (a.Parent.Padding.Left + a.Parent.Padding.Right)),
H: (a.Parent.Size.H - (a.Parent.Padding.Top + a.Parent.Padding.Bottom))
};
}
Clear() { Clear() {
const a = this; const a = this;
@ -36,31 +46,28 @@ class BBTimelineCanvas {
// placeholder // placeholder
} }
drawCircle(x, y, width, borderWidth, borderColour, backColour) {
drawText(x, y, label, font, foreColour, align) {
const a = this; const a = this;
const calcBorderWidth = (borderWidth * 2);
const calcWidth = width - calcBorderWidth;
const offset = a.half(width);
a.CTX.font = font; a.CTX.beginPath();
a.CTX.fillStyle = foreColour; a.CTX.arc(x, y, calcWidth, 0, 2 * Math.PI, false);
a.CTX.fillStyle = backColour;
a.CTX.fill();
a.CTX.lineWidth = borderWidth;
a.CTX.strokeStyle = borderColour;
a.CTX.stroke();
const size = a.measureText(font, label); const result = {
X: x - (offset + borderWidth),
Y: y - (offset + borderWidth),
W: (width + calcBorderWidth),
H: (width + calcBorderWidth)
};
switch (align) { return result;
case "center":
x = (x - size.OffsetLeft);
break;
case "right":
x = (x - size.Width);
break;
case "left":
default:
// do nothing
break;
}
a.CTX.fillText(label, x, (y + size.Height));
return size;
} }
drawRectangle(rectangle, colour) { drawRectangle(rectangle, colour) {
@ -73,8 +80,58 @@ class BBTimelineCanvas {
a.CTX.lineWidth = 1; a.CTX.lineWidth = 1;
a.CTX.strokeStyle = colour; a.CTX.strokeStyle = colour;
a.CTX.stroke(); a.CTX.stroke();
return rectangle;
} }
drawText(x, y, label, font, foreColour, align) {
const a = this;
a.CTX.font = font;
a.CTX.fillStyle = foreColour;
let size = a.measureText(font, label);
size.Y = y;
switch (align) {
case "center":
size.X = (x - size.X);
break;
case "right":
size.X = (x - size.W);
break;
case "left":
default:
size.X = x;
break;
}
a.CTX.fillText(label, size.X, (size.Y + size.H));
return size;
}
drawVerticalLine(x, y1, y2, width, colour) {
const a = this;
a.CTX.beginPath();
a.CTX.moveTo(x, y1);
a.CTX.lineTo(x, (y2 - width));
a.CTX.lineWidth = width;
a.CTX.strokeStyle = colour;
a.CTX.stroke();
const result = {
X: x,
Y: y1,
W: width,
H: (y2 - y1)
};
return result;
}
half(value) { half(value) {
return (value / 2); return (value / 2);
} }
@ -86,11 +143,35 @@ class BBTimelineCanvas {
const size = a.CTX.measureText(value); const size = a.CTX.measureText(value);
return { return {
Width: size.width, W: size.width,
Height: size.fontBoundingBoxAscent, H: size.fontBoundingBoxAscent,
OffsetLeft: a.half(size.width), X: a.half(size.width),
OffsetTop: a.half(size.fontBoundingBoxAscent) Y: a.half(size.fontBoundingBoxAscent)
}; };
} }
isPointInRectangle(rect, point) {
const x2 = (rect.X + rect.W);
const y2 = (rect.Y + rect.H);
return ((point.X >= rect.X) && (point.X <= x2) && (point.Y >= rect.Y) && (point.Y <= y2));
}
combineRectangle(rect1, rect2) {
const x2 = Math.max((rect1.X + rect1.W), (rect2.X + rect2.W));
const y2 = Math.max((rect1.Y + rect1.H), (rect2.Y + rect2.H));
const rect = {
X: Math.min(rect1.X, rect2.X),
Y: Math.min(rect1.Y, rect2.Y),
W: 0,
H: 0
};
rect.W = x2 - rect.X;
rect.H = y2 - rect.Y;
return rect;
}
} }

29
bbtimeline-flourish-canvas.js
View File

@ -2,21 +2,32 @@ class BBTimelineFlourishCanvas extends BBTimelineCanvas {
constructor(parentEl, el) { constructor(parentEl, el) {
super(parentEl, el); super(parentEl, el);
const a = this;
a.XPos = -1;
} }
DrawVerticalLine(x) { Invalidate() {
const a = this; const a = this;
const rect = a.Parent.Layer.Background.GraphRectangle;
const linePosY = (rect.Y + rect.H);
a.Clear(); a.Clear();
a.CTX.beginPath(); if (a.XPos < 0) {
a.CTX.moveTo(x, rect.Y); a.Clear();
a.CTX.lineTo(x, (linePosY - a.Parent.Marker.Line.Width)); } else {
a.CTX.lineWidth = 1; let posY = 0;
a.CTX.strokeStyle = a.Parent.HotTrack.Colour;
a.CTX.stroke(); if (a.Parent.XAxis.Position == 'top') {
posY = a.Parent.Layer.Background.GraphRectangle.Y;
} else {
posY = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
}
// a.drawVerticalLine(a.XPos, a.Parent.Layer.Background.GraphRectangle.Y, (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H), a.Parent.MarkerLabel.Line.Width, a.Parent.HotTrack.Colour);
a.drawCircle(a.XPos, posY, a.Parent.HotTrack.Width, 0, a.Parent.HotTrack.Colour, a.Parent.HotTrack.Colour);
}
} }
} }

109
bbtimeline-foreground-canvas.js
View File

@ -63,21 +63,30 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
return; return;
} }
if (!a.Parent.EnableHotTracking) { var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
return; if (event != null) {
} a.Container.style.cursor = 'pointer';
const point = { X: e.offsetX, Y: e.offsetY };
if (a.Parent.HasInterception(a.Parent.Layer.Background.GraphRectangle, point)) {
if (a.Parent.Debug) console.log(point);
a.Parent.DrawHotTracking(point.X);
a.Parent.OnMouseMove(this, e, point);
} else { } else {
// Clear hot tracking a.Container.style.cursor = 'default';
a.Parent.DrawHotTracking(-1);
} }
// Hottracking
if (a.Parent.EnableHotTracking) {
const point = { X: e.offsetX, Y: e.offsetY };
if (a.isPointInRectangle(a.Parent.Layer.Background.GraphRectangle, point)) {
if (a.Parent.Debug) console.log(point);
a.Parent.Layer.Flourish.XPos = point.X;
a.Parent.OnMouseMove(this, e, event);
} else {
// Clear hot tracking
a.Parent.Layer.Flourish.XPos = -1;
}
a.Parent.Layer.Flourish.Invalidate();
}
}); });
} }
@ -92,25 +101,33 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
a.Clear(); a.Clear();
const startPosY = (rect.Y + a.Parent.Marker.Width); const startPosY = (rect.Y + a.Parent.Marker.Width);
const visibleEvents = a.Parent.VisibleEvents; const visibleEvents = a.Parent.VisibleEvents;
// Clear for collisions detection
visibleEvents.forEach(function (e, i) {
e.HitBox = { X: 0, Y:0, W: 0, H: 0};
});
visibleEvents.forEach(function (e, i) { visibleEvents.forEach(function (e, i) {
// Calculate Y position // Calculate Y position
let posY = a.calcMarkerPosition(e.Position.X, startPosY); let posY = a.calcMarkerPosition(e.Position.X, startPosY);
a.drawVerticalLine(e.Position.X, posY); if (a.Parent.MarkerLabel.Line.Width > 0) {
a.drawVerticalLine(e.Position.X, posY, (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H), a.Parent.MarkerLabel.Line.Width, a.Parent.MarkerLabel.Line.Colour);
}
const markerRectangle = a.drawMarker(e.Position.X, posY, e.BorderColour, e.BackColour); const markerRectangle = a.drawCircle(e.Position.X, posY, a.Parent.Marker.Width, a.Parent.Marker.BorderWidth, e.BorderColour, e.BackColour);
const labelSize = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.Marker.Font, a.Parent.Marker.ForeColour, "left");
e.Position = { X: e.Position.X, Y: posY }; e.Position = { X: e.Position.X, Y: posY };
e.HitBox = { if (a.Parent.ShowMarkerLabel) {
X: markerRectangle.X, const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.MarkerLabel.Font, a.Parent.MarkerLabel.Colour, "left");
Y: markerRectangle.Y, labelRectangle.W += a.Parent.MarkerLabel.Margin;
W: (markerRectangle.W + margin + labelSize.Width + a.Parent.Marker.CollisionMargin),
H: markerRectangle.H e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
}; } else {
e.HitBox = markerRectangle;
}
if (a.Parent.Debug) a.drawRectangle(e.HitBox, "red"); if (a.Parent.Debug) a.drawRectangle(e.HitBox, "red");
if (a.Parent.Debug) console.log(e); if (a.Parent.Debug) console.log(e);
@ -158,50 +175,4 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
return posY; return posY;
} }
drawMarker(x, y, borderColour, backColour) {
const a = this;
const width = a.Parent.Marker.Width - (a.Parent.Marker.BorderWidth * 2);
a.CTX.beginPath();
a.CTX.arc(x, y, width, 0, 2 * Math.PI, false);
a.CTX.fillStyle = backColour;
a.CTX.fill();
a.CTX.lineWidth = a.Parent.Marker.BorderWidth;
a.CTX.strokeStyle = borderColour;
a.CTX.stroke();
return a.measureMarker(x, y);
}
drawVerticalLine(x, y) {
const a = this;
const rect = a.Parent.Layer.Background.GraphRectangle;
const linePosY = (rect.Y + rect.H);
if (y <= 0) {
y = (rect.Y + a.Parent.Marker.Line.Width);
}
a.CTX.beginPath();
a.CTX.moveTo(x, y);
a.CTX.lineTo(x, (linePosY - a.Parent.Marker.Line.Width));
a.CTX.lineWidth = a.Parent.Marker.Line.Width;
a.CTX.strokeStyle = a.Parent.Marker.Line.Colour;
a.CTX.stroke();
}
measureMarker(x, y) {
const a = this;
const offset = a.half(a.Parent.Marker.Width);
const result = {
X: x - (offset + a.Parent.Marker.BorderWidth),
Y: y - (offset + a.Parent.Marker.BorderWidth),
W: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2)),
H: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2))
};
return result;
}
} }

62
bbtimeline.js
View File

@ -11,7 +11,7 @@ class BBTimeline {
Left: 20, Left: 20,
Top: 20, Top: 20,
Right: 20, Right: 20,
Bottom: 0 Bottom: 20
}; };
a.Size = { a.Size = {
W: a.Container.innerWidth || a.Container.clientWidth, W: a.Container.innerWidth || a.Container.clientWidth,
@ -26,29 +26,32 @@ class BBTimeline {
a.DateParsePattern = "yyyy-MM-dd"; a.DateParsePattern = "yyyy-MM-dd";
a.Axis = { a.Axis = {
LineColour1: "#CFCFCF", LineColour1: "#000000",
LineWidth: 1, LineWidth: 1,
Font: "8pt Arial", Font: "8pt Arial",
LabelColour: "#000000", LabelColour: "#000000",
LabelSpacing: 6, LabelSpacing: 6
X: { };
NoPartPerDay: 4, a.XAxis = {
HourLineSpace: 6, NoPartPerDay: 4,
HourLineHeight: 10, HourLineSpace: 6,
HourLineColour: "#A6A6A6", HourLineHeight: 10,
DayLineHeight: 20, HourLineColour: "#EAEAEA",
DayLineColour: "#282828" DayLineHeight: 20,
} DayLineColour: "#9E9E9E",
Position: 'top'
}; };
a.Marker = { a.Marker = {
BorderColour: "#3A5D9C", BorderColour: "#3A5D9C",
BorderWidth: 2, BorderWidth: 2,
BackColour: "#D4DEEF", BackColour: "#D4DEEF",
Width: 10, Width: 10
ForeColour: "#3A5D9C", };
a.MarkerLabel = {
Colour: "#3A5D9C",
Font: "9pt Arial", Font: "9pt Arial",
CollisionMargin: 8, Margin: 8,
Line: { Line: {
Colour: "#A6A6A6", Colour: "#A6A6A6",
Width: 1, Width: 1,
@ -56,12 +59,14 @@ class BBTimeline {
}; };
a.HotTrack = { a.HotTrack = {
Colour: "#1D7F1D" Colour: "#F57C00",
Width: 3
}; };
a.Events = []; a.Events = [];
a.StartDate = a.DateToInternalString(new Date()); a.StartDate = a.DateToInternalString(new Date());
a.ShowDate = a.StartDate; a.ShowDate = a.StartDate;
a.ShowMarkerLabel = true;
a.Enabled = false; a.Enabled = false;
a.Debug = false; a.Debug = false;
@ -102,7 +107,7 @@ class BBTimeline {
const a = this; const a = this;
const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right)); const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
return Math.floor(clientWidth / (a.Axis.X.NoPartPerDay * a.Axis.X.HourLineSpace)); return Math.floor(clientWidth / (a.XAxis.NoPartPerDay * a.XAxis.HourLineSpace));
} }
get VisibleStartDate() { get VisibleStartDate() {
@ -305,15 +310,11 @@ class BBTimeline {
Invalidate(redrawAxis, redrawMarkers) { Invalidate(redrawAxis, redrawMarkers) {
const a = this; const a = this;
if (redrawAxis) { if (redrawAxis) a.Layer.Background.Invalidate();
a.Layer.Background.Invalidate();
}
a.Layer.Flourish.Clear(); a.Layer.Flourish.Clear();
if (redrawMarkers) { if (redrawMarkers) a.Layer.Markers.Invalidate();
a.Layer.Markers.Invalidate();
}
} }
@ -369,27 +370,10 @@ class BBTimeline {
return a.DateToString(date, a.DateParsePattern); return a.DateToString(date, a.DateParsePattern);
} }
DrawHotTracking(x) {
const a = this;
if (x < 0) {
a.Layer.Flourish.Clear();
} else {
a.Layer.Flourish.DrawVerticalLine(x);
}
}
ConvertToDate(value) { ConvertToDate(value) {
return new Date(Date.parse(value)); return new Date(Date.parse(value));
} }
HasInterception(rect, point) {
const x2 = (rect.X + rect.W);
const y2 = (rect.Y + rect.H);
return ((point.X >= rect.X) && (point.X <= x2) && (point.Y >= rect.Y) && (point.Y <= y2));
}
OnMouseDown(sender, e, event) { /* delegate */ } OnMouseDown(sender, e, event) { /* delegate */ }

9
bbtimeline.min.js vendored
View File

File diff suppressed because one or more lines are too long

40
demo-test.html
View File

@ -10,13 +10,13 @@
<!-- <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="bbtimeline.js"></script> <script src="bbtimeline.js"></script>
<script src="bbtimeline-canvas.js"></script> <script src="bbtimeline-canvas.js"></script>
<script src="bbtimeline-background-canvas.js"></script> <script src="bbtimeline-background-canvas.js"></script>
<script src="bbtimeline-flourish-canvas.js"></script> <script src="bbtimeline-flourish-canvas.js"></script>
<script src="bbtimeline-foreground-canvas.js"></script> --> <script src="bbtimeline-foreground-canvas.js"></script>
<script src="bbtimeline.min.js"></script> <!-- <script src="bbtimeline.min.js"></script> -->
<title></title> <title></title>
</head> </head>
@ -34,10 +34,25 @@
<p> <p>
<button onclick="Clear()">Clear</button> <button onclick="Clear()">Clear</button>
<button onclick="ToggleDebug()">Toggle Debug</button>
<button onclick="ToggleHotTracking()">Toggle Hot Tracking</button>
<button onclick="Refresh()">Refresh</button> <button onclick="Refresh()">Refresh</button>
</p> </p>
<hr />
<p>
<button onclick="ToggleDebug()">Toggle Debug</button>
</p>
<hr />
<p>
<button onclick="ToggleHotTracking()">Toggle Hot Tracking</button>
<button onclick="ToggleShowLabel()">Toggle Marker Label</button>
<button onclick="ToggleMarkerTail()">Toggle Marker Tail</button>
</p>
<p>
<button onclick="ToggleXAxisPosition()">Toggle X-Axis Position</button>
</p>
<hr /> <hr />
<p> <p>
@ -176,6 +191,21 @@ function ToggleHotTracking() {
timeline1.Invalidate(true, true); timeline1.Invalidate(true, true);
} }
function ToggleShowLabel() {
timeline1.ShowMarkerLabel = !timeline1.ShowMarkerLabel;
timeline1.Invalidate(true, true);
}
function ToggleXAxisPosition() {
timeline1.XAxis.Position = (timeline1.XAxis.Position == 'top' ? 'bottom' : 'top');
timeline1.Invalidate(true, true);
}
function ToggleMarkerTail() {
timeline1.MarkerLabel.Line.Width = ((timeline1.MarkerLabel.Line.Width <= 0) ? 1 : 0);
timeline1.Invalidate(true, true);
}
function Refresh() { function Refresh() {
timeline1.Invalidate(true, true); timeline1.Invalidate(true, true);
} }