more accurate click detection

lib/animation-timeline.js

@@ -549,6 +549,8 @@ var TimelineConsts = function TimelineConsts() {
   timelineConsts_defineProperty(this, "scrollFinishedTimeoutMs", 500);
 
   timelineConsts_defineProperty(this, "autoPanByScrollPadding", 10);
+
+  timelineConsts_defineProperty(this, "clickThreshold", 3);
 };
 // CONCATENATED MODULE: ./src/enums/timelineCursorType.ts
 var TimelineCursorType;
@@ -939,6 +941,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
     timeline_defineProperty(timeline_assertThisInitialized(_this), "consts", new TimelineConsts());
 
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "clickAllowed", false);
+
     timeline_defineProperty(timeline_assertThisInitialized(_this), "scrollFinishedTimerRef", null);
 
     timeline_defineProperty(timeline_assertThisInitialized(_this), "selectedKeyframes", []);
@@ -1073,6 +1077,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         x: _this.scrollContainer.scrollLeft,
         y: _this.scrollContainer.scrollTop
       };
+      _this.clickAllowed = true;
 
       var elements = _this.elementFromPoint(_this.startPos, Math.max(2, _this.startPos.radius));
 
@@ -1265,7 +1270,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         var pos = _this.trackMousePos(_this.canvas, args); // Click detection.
 
 
-        if (_this.selectionRect && _this.selectionRect.height <= 2 && _this.selectionRect.width <= 2 || !_this.clickTimeoutIsOver() || _this.drag && _this.startedDragWithCtrl || _this.drag && _this.startedDragWithShiftKey) {
+        if (_this.clickAllowed || !_this.clickTimeoutIsOver() || _this.drag && _this.startedDragWithCtrl || _this.drag && _this.startedDragWithShiftKey) {
           _this.performClick(pos, args, _this.drag);
         } else if (!_this.drag && _this.selectionRect && _this.selectionRectEnabled) {
           _this.performSelection(true, _this.selectionRect, args.shiftKey);
@@ -1654,7 +1659,11 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         this.selectionRect.x = Math.min(x, pos.x);
         this.selectionRect.y = Math.min(y, pos.y);
         this.selectionRect.width = Math.max(x, pos.x) - this.selectionRect.x;
-        this.selectionRect.height = Math.max(y, pos.y) - this.selectionRect.y;
+        this.selectionRect.height = Math.max(y, pos.y) - this.selectionRect.y; // Once mouse was moved outside of the bounds it's not a click anymore
+
+        if (this.clickAllowed) {
+          this.clickAllowed = this.selectionRect.height <= this.consts.clickThreshold && this.selectionRect.width <= this.consts.clickThreshold;
+        }
       }
 
       return pos;
@@ -1671,6 +1680,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       this.clickTimeout = null;
       this.scrollStartPos = null;
       this.isPanStarted = false;
+      this.clickAllowed = false;
       this.stopAutoPan();
     }
     /**

src/settings/timelineConsts.ts

@@ -23,4 +23,8 @@ export class TimelineConsts {
    * Auto pan padding
    */
   autoPanByScrollPadding = 10;
+  /**
+   * Click threshold
+   */
+  clickThreshold = 3;
 }

src/timeline.ts

@@ -73,6 +73,7 @@ export class Timeline extends TimelineEventsEmitter {
   private clickTimeout? = 0;
   private lastClickTime = 0;
   private consts = new TimelineConsts();
+  private clickAllowed = false;
   /**
    * scroll finished timer reference.
    */
@@ -321,7 +322,7 @@ export class Timeline extends TimelineEventsEmitter {
       x: this.scrollContainer.scrollLeft,
       y: this.scrollContainer.scrollTop,
     } as DOMPoint;
-
+    this.clickAllowed = true;
     const elements = this.elementFromPoint(this.startPos, Math.max(2, this.startPos.radius));
     const target = this.findDraggable(elements, this.startPos.val);
     const event = new TimelineClickEvent();
@@ -494,12 +495,7 @@ export class Timeline extends TimelineEventsEmitter {
       const pos = this.trackMousePos(this.canvas, args);
 
       // Click detection.
-      if (
-        (this.selectionRect && this.selectionRect.height <= 2 && this.selectionRect.width <= 2) ||
-        !this.clickTimeoutIsOver() ||
-        (this.drag && this.startedDragWithCtrl) ||
-        (this.drag && this.startedDragWithShiftKey)
-      ) {
+      if (this.clickAllowed || !this.clickTimeoutIsOver() || (this.drag && this.startedDragWithCtrl) || (this.drag && this.startedDragWithShiftKey)) {
         this.performClick(pos, args, this.drag);
       } else if (!this.drag && this.selectionRect && this.selectionRectEnabled) {
         this.performSelection(true, this.selectionRect, args.shiftKey);
@@ -703,6 +699,10 @@ export class Timeline extends TimelineEventsEmitter {
       this.selectionRect.y = Math.min(y, pos.y);
       this.selectionRect.width = Math.max(x, pos.x) - this.selectionRect.x;
       this.selectionRect.height = Math.max(y, pos.y) - this.selectionRect.y;
+      // Once mouse was moved outside of the bounds it's not a click anymore
+      if (this.clickAllowed) {
+        this.clickAllowed = this.selectionRect.height <= this.consts.clickThreshold && this.selectionRect.width <= this.consts.clickThreshold;
+      }
     }
 
     return pos;
@@ -718,6 +718,7 @@ export class Timeline extends TimelineEventsEmitter {
     this.clickTimeout = null;
     this.scrollStartPos = null;
     this.isPanStarted = false;
+    this.clickAllowed = false;
     this.stopAutoPan();
   }