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.CTX.canvas.addEventListener('mousedown', function (e) {
      if (!a.Parent.Enabled) {
        return;
      }

      var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
      if (event == null) {
        return;
      }

      if (a.Parent.Debug) console.log(event);

      a.Parent.OnMouseDown(this, e, event);
    });

    a.CTX.canvas.addEventListener('click', function (e) {
      if (!a.Parent.Enabled) {
        return;
      }

      var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
      if (event == null) {
        return;
      }

      if (a.Parent.Debug) console.log(event);

      a.Parent.OnClick(this, e, event);
    });

    a.CTX.canvas.addEventListener('dblclick', function (e) {
      if (!a.Parent.Enabled) {
        return;
      }

      var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
      if (event == null) {
        return;
      }

      if (a.Parent.Debug) console.log(event);

      a.Parent.OnDblClick(this, e, event);
    });

    if (a.Parent.EnableHotTracking) {
      a.CTX.canvas.addEventListener('mousemove', function (e) {
        if (!a.Parent.Enabled) {
          return;
        }

        if (!a.Parent.EnableHotTracking) {
          return;
        }

        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 {
          // Clear hot tracking
          a.Parent.DrawHotTracking(-1);
        }
      });
    }

    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.VisibleEvents;
    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);
    });
  }

  OnMouseDown(e) {
    if (!a.Parent.Enabled) {
      return;
    }

    var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY);
    if (event == null) {
      return;
    }

    if (a.Parent.Debug) console.log(event);

    console.log("!");
    a.Parent.OnMouseDown(this, e, event);
  }

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

}