in web/src/app/timeline/background-canvas.ts [218:289]
private drawDateLabels() {
const timeColor = '#A0A0A0';
const dayLineColor = '#CCAAFF';
const dayDurationInMs = 1000 * 60 * 60 * 24;
const leftSafePaddingInPx = 430; // width of the scaling tips element.
const time =
this.timelineCoordinateCalculator.leftOffsetToTime(0) - dayDurationInMs;
const date = this.timeToDate(time);
const leftMostDate = this.toNearestMidnightBefore(date.getTime());
const headerSize = this.timelineCoordinateCalculator.adjustPixelScale(60);
const fontSize = this.timelineCoordinateCalculator.adjustPixelScale(10);
this.ctx.font = `${fontSize}px serif`;
let currentDateStart = leftMostDate.getTime();
this.ctx.strokeStyle = timeColor;
this.ctx.fillStyle = timeColor;
let currentLabel = this.toDateLabelString(currentDateStart);
const labelSize = this.ctx.measureText(currentLabel);
let currentDateOffset =
this.timelineCoordinateCalculator.timeToLeftOffset(currentDateStart);
while (currentDateOffset < 0) {
const nextDayOffset = this.timelineCoordinateCalculator.timeToLeftOffset(
currentDateStart + dayDurationInMs,
);
if (nextDayOffset < 0) {
currentDateStart += dayDurationInMs;
currentLabel = this.toDateLabelString(currentDateStart);
currentDateOffset =
this.timelineCoordinateCalculator.timeToLeftOffset(currentDateStart);
continue;
}
if (
nextDayOffset - currentDateOffset > labelSize.width + 30 &&
nextDayOffset > leftSafePaddingInPx + labelSize.width + 30
) {
this.ctx.fillText(
currentLabel,
leftSafePaddingInPx - labelSize.width / 2,
25,
);
currentDateStart += dayDurationInMs;
}
break;
}
while (
currentDateStart <
this.timelineCoordinateCalculator.rightMostTime() + dayDurationInMs
) {
const currentLabel = this.toDateLabelString(currentDateStart);
this.ctx.fillText(
currentLabel,
this.timelineCoordinateCalculator.timeToLeftOffset(currentDateStart),
25,
);
const extraHeight =
this.timelineCoordinateCalculator.adjustPixelScale(10);
this.ctx.strokeStyle = dayLineColor;
this.ctx.lineWidth = this.MAX_RULER_THICKNESS;
this.ctx.beginPath();
this.ctx.moveTo(
this.timelineCoordinateCalculator.timeToLeftOffset(currentDateStart),
headerSize - extraHeight,
);
this.ctx.lineTo(
this.timelineCoordinateCalculator.timeToLeftOffset(currentDateStart),
this.canvas.height,
);
this.ctx.stroke();
currentDateStart += dayDurationInMs;
}
}