elementFromPoint can be used to get full row

lib/animation-timeline.js

@@ -702,6 +702,7 @@ var TimelineElementType;
   TimelineElementType["Timeline"] = "timeline";
   TimelineElementType["Keyframe"] = "keyframe";
   TimelineElementType["Stripe"] = "stripe";
+  TimelineElementType["Row"] = "row";
 })(TimelineElementType || (TimelineElementType = {}));
 // CONCATENATED MODULE: ./src/enums/timelineEvents.ts
 var TimelineEvents;
@@ -2763,11 +2764,11 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
       // filter and sort: Timeline, individual keyframes, stripes (distance).
       var getPriority = function getPriority(type) {
-        if (type === TimelineElementType.Keyframe) {
+        if (type === TimelineElementType.Timeline) {
           return 1;
-        } else if (type === TimelineElementType.Stripe) {
+        } else if (type === TimelineElementType.Keyframe) {
           return 2;
-        } else if (type === TimelineElementType.Timeline) {
+        } else if (type === TimelineElementType.Stripe) {
           return 3;
         }
 
@@ -2787,6 +2788,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           if (!_draggable) {
             return false;
           }
+        } else if (element.type === TimelineElementType.Row) {
+          return false;
         }
 
         return true;
@@ -2840,6 +2843,17 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         this.forEachKeyframe(function (keyframe, keyframeIndex, rowModel, rowIndex, isNextRow) {
           // Check keyframes stripe overlap
           if (isNextRow && rowModel.stripeRect) {
+            var rowOverlapped = TimelineUtils.isOverlap(pos.x, pos.y, rowModel);
+
+            if (rowOverlapped) {
+              var _row = {
+                val: _this9.mousePosToVal(pos.x, true),
+                type: TimelineElementType.Row,
+                row: rowModel.row
+              };
+              toReturn.push(_row);
+            }
+
             var keyframesStripeOverlapped = TimelineUtils.isOverlap(pos.x, pos.y, rowModel.stripeRect);
 
             if (keyframesStripeOverlapped) {

src/enums/timelineElementType.ts

@@ -11,4 +11,8 @@ export enum TimelineElementType {
    * Keyframes stripe
    */
   Stripe = 'stripe',
+  /**
+   * Row
+   */
+  Row = 'row',
 }

src/timeline.ts

@@ -1743,6 +1743,8 @@ export class Timeline extends TimelineEventsEmitter {
         if (!draggable) {
           return false;
         }
+      } else if (element.type === TimelineElementType.Row) {
+        return false;
       }
       return true;
     });
@@ -1788,6 +1790,16 @@ export class Timeline extends TimelineEventsEmitter {
       this.forEachKeyframe((keyframe, keyframeIndex, rowModel, rowIndex, isNextRow): boolean => {
         // Check keyframes stripe overlap
         if (isNextRow && rowModel.stripeRect) {
+          const rowOverlapped = TimelineUtils.isOverlap(pos.x, pos.y, rowModel);
+          if (rowOverlapped) {
+            const row = {
+              val: this.mousePosToVal(pos.x, true),
+              type: TimelineElementType.Row,
+              row: rowModel.row,
+            } as TimelineClickableElement;
+            toReturn.push(row);
+          }
+
           const keyframesStripeOverlapped = TimelineUtils.isOverlap(pos.x, pos.y, rowModel.stripeRect);
           if (keyframesStripeOverlapped) {
             const stripe = {