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

Changed markers for x-axis positions

Browse Source
This commit is contained in:
Ray 2023-10-23 01:21:53 +01:00
parent 0bbed0dfee
commit e82d90c745
3 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
bbtimeline-foreground-canvas.js
View File

@ -100,9 +100,15 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
a.Clear(); a.Clear();
const startPosY = (rect.Y + a.Parent.Marker.Width); let startPosY = 0;
const visibleEvents = a.Parent.VisibleEvents; const visibleEvents = a.Parent.VisibleEvents;
if (a.Parent.XAxis.Position == 'top') {
startPosY = (rect.Y + a.Parent.Marker.Width + 20);
} else {
startPosY = (rect.Y + a.Parent.Marker.Width);
}
// Clear for collisions detection // Clear for collisions detection
visibleEvents.forEach(function (e, i) { visibleEvents.forEach(function (e, i) {
e.HitBox = { X: 0, Y:0, W: 0, H: 0}; e.HitBox = { X: 0, Y:0, W: 0, H: 0};
@ -111,9 +117,16 @@ class BBTimelineForegroundCanvas extends BBTimelineCanvas {
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);
let posY2 = 0;
if (a.Parent.XAxis.Position == 'top') {
posY2 = a.Parent.Layer.Background.GraphRectangle.Y;
} else {
posY2 = (a.Parent.Layer.Background.GraphRectangle.Y + a.Parent.Layer.Background.GraphRectangle.H);
}
if (a.Parent.MarkerLabel.Line.Width > 0) { 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); 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.Parent.Marker.Width, a.Parent.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);

4
bbtimeline.js
View File

@ -11,7 +11,7 @@ class BBTimeline {
Left: 20, Left: 20,
Top: 20, Top: 20,
Right: 20, Right: 20,
Bottom: 20 Bottom: 0
}; };
a.Size = { a.Size = {
W: a.Container.innerWidth || a.Container.clientWidth, W: a.Container.innerWidth || a.Container.clientWidth,
@ -39,7 +39,7 @@ class BBTimeline {
HourLineColour: "#EAEAEA", HourLineColour: "#EAEAEA",
DayLineHeight: 20, DayLineHeight: 20,
DayLineColour: "#9E9E9E", DayLineColour: "#9E9E9E",
Position: 'top' Position: 'bottom'
}; };
a.Marker = { a.Marker = {

11
demo-test.html
View File

@ -197,7 +197,16 @@ function ToggleShowLabel() {
} }
function ToggleXAxisPosition() { function ToggleXAxisPosition() {
timeline1.XAxis.Position = (timeline1.XAxis.Position == 'top' ? 'bottom' : 'top'); if (timeline1.XAxis.Position == 'top') {
timeline1.XAxis.Position = 'bottom';
timeline1.Padding.Top = 20;
timeline1.Padding.Bottom = 0;
} else {
timeline1.XAxis.Position = 'top';
timeline1.Padding.Top = 0;
timeline1.Padding.Bottom = 20;
}
timeline1.Invalidate(true, true); timeline1.Invalidate(true, true);
} }