private drawDateLabels()

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;
    }
  }