literyzjs-timeline/bbtimeline-foreground-canvas.js

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

  initialiseOptions() {
    super.initialiseOptions();

    const a = this;

    a.Options = {
      Marker: {
        BorderColour: "#3A5D9C",
        BorderWidth: 2,
        BackColour: "#D4DEEF",
        Width: 10
      },
      Label: {
        Colour: "#3A5D9C",
        Font: "9pt Arial",
        Margin: {
          X: 2,
          Y: 10
        },
        Line: {
          Colour: "#A6A6A6",
          Width: 1,
        }
      }
    };
  }

  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, false);
      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, false);
      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, false);
      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;
        }

        var event = a.Parent.FindEventsByCoords(e.offsetX, e.offsetY, false);
        if (event != null) {
          a.Container.style.cursor = 'pointer';
        } else {
          a.Container.style.cursor = 'default';
        }

        // Hottracking
        if (a.Parent.EnableHotTracking) {
          const point = { X: e.offsetX, Y: e.offsetY };
          if (a.isPointInRectangle(a.Parent.Layer.Background.GraphRectangle, point)) {
            if (a.Parent.Debug) console.log(point);

            a.Parent.Layer.Flourish.XPos = point.X;

            a.Parent.OnMouseMove(this, e, event);
          } else {
            // Clear hot tracking
            a.Parent.Layer.Flourish.XPos = -1;
          }

          a.Parent.Layer.Flourish.Invalidate();
        }

      });
    }

    a.Invalidate();
  }

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

    a.Clear();

    let startPosY = 0;
    const visibleEvents = a.Parent.VisibleEvents;

    if (a.Parent.XAxis.Position == 'top') {
      startPosY = (rect.Y + a.Options.Marker.Width + 20);
    } else {
      startPosY = (rect.Y + a.Options.Marker.Width);
    }

    // Clear for collisions detection
    visibleEvents.forEach(function (e, i) {
      e.HitBox = { X: 0, Y:0, W: 0, H: 0};
    });

    visibleEvents.forEach(function (e, i) {
      // Calculate Y position
      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.Options.Label.Line.Width > 0) {
        a.drawVerticalLine(e.Position.X, posY, posY2, a.Options.Label.Line.Width, a.Options.Label.Line.Colour);
      }

      const markerRectangle = a.drawCircle(e.Position.X, posY, a.Options.Marker.Width, a.Options.Marker.BorderWidth, e.BorderColour, e.BackColour);

      e.Position = { X: e.Position.X, Y: posY };

      if (a.Parent.ShowMarkerLabel) {
        const labelRectangle = a.drawText((markerRectangle.X + markerRectangle.W + a.Options.Label.Margin.X), markerRectangle.Y, e.Label, a.Options.Label.Font, a.Options.Label.Colour, "left");

        e.HitBox = a.combineRectangle(markerRectangle, labelRectangle);
      } else {
        e.HitBox = markerRectangle;
      }

      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, false);
    if (event == null) {
      return;
    }

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

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

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

    let hasMoved = false;
    let posY = y;
    for (let i=rect.Y; i<(rect.Y + rect.H); i++)
    {
      posY = i;

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

    if (!hasMoved) {
      posY = y;
    }

    return posY;
  }

}