literyzjs-timeline/bbtimeline-foreground-canvas.js

class BBTimelineForegroundCanvas extends BBTimelineCanvas {
  constructor(parentEl, el) {
    super(parentEl, el);

    const a = this;

    a.initialiseComponents();
  }

  initialiseComponents() {
    super.initialiseComponents();

    const a = this;

    a.Invalidate();
  }

  Invalidate() {
    const a = this;
    const rect = a.Parent.Layer.Background.GraphRectangle;
    const margin = a.Parent.Layer.Background.Margin;

    a.Clear();

    const startPosY = (rect.Y + a.Parent.Marker.Width);

    const visibleEvents = a.Parent.FindVisibleEvents();
    visibleEvents.forEach(function (e, i) {
      // Calculate Y position
      let posY = a.calcMarkerPosition(e.Position.X, startPosY);

      a.drawVerticalLine(e.Position.X, posY);

      const markerRectangle = a.drawMarker(e.Position.X, posY, 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.HitBox = {
        X: markerRectangle.X,
        Y: markerRectangle.Y,
        W: (markerRectangle.W + margin + labelSize.Width + a.Parent.Marker.CollisionMargin),
        H: markerRectangle.H
      };

      if (a.Parent.Debug) a.drawRectangle(e.HitBox, "red");
      if (a.Parent.Debug) console.log(e);
    });
  }


  calcMarkerPosition(x, y) {
    const a = this;
    const rect = a.Parent.Layer.Background.GraphRectangle;

    // Calculate Y position
    let hasMoved = false;
    let posY = y;
    for (let i=0; i<a.Parent.Layer.Background.NoStep; i++)
    {
      posY = y + (a.Parent.Layer.Background.StepHeight * i);

      var clippedEvent = a.Parent.FindEventsByCoords(x, posY);
      if (clippedEvent == null) {
        hasMoved = true;
        break;
      }
    }

    if (!hasMoved) {
      posY = y;
    }

    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 highlightLine = a.Parent.HighlightLine;
    const linePosY = (rect.Y + rect.H);

    if (y <= 0) {
      y = (rect.Y + highlightLine.Width);
    }

    a.CTX.beginPath();
    a.CTX.moveTo(x, y);
    a.CTX.lineTo(x, (linePosY - highlightLine.Width));
    a.CTX.lineWidth = highlightLine.Width;
    a.CTX.strokeStyle = highlightLine.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;
  }


}