grab cursor is used for pan mode.

lib/animation-timeline.js

@@ -1410,12 +1410,16 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
       if (!_this._isPanStarted && _this._selectionRect && _this._clickTimeoutIsOver()) {
         _this._selectionRectEnabled = true;
+      } else {
+        _this._selectionRectEnabled = false;
       }
 
       args = args;
 
+      var isLeftClicked = _this.isLeftButtonClicked(args);
+
       if (_this._startPos) {
-        if (args.buttons == 1 || isTouch) {
+        if (isLeftClicked || isTouch) {
           var isChanged = false;
 
           if (_this._drag && !_this._startedDragWithCtrl) {
@@ -1470,7 +1474,10 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           }
 
           if (_this._interactionMode === TimelineInteractionMode.Pan && !_this._drag) {
-            _this._isPanStarted = true; // Track scroll by drag.
+            _this._isPanStarted = true;
+
+            _this._setCursor(TimelineCursorType.Grabbing); // Track scroll by drag.
+
 
             _this._scrollByPan(_this._startPos, _this._currentPos, _this._scrollStartPos);
           } else {
@@ -1486,12 +1493,19 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           _this.redraw();
         }
       } else if (!isTouch) {
-        // TODO: mouse over event
         var elements = _this.elementFromPoint(_this._currentPos, Math.max(2, _this._currentPos.radius));
 
         var target = _this._findDraggable(elements, _this._currentPos.val);
 
-        _this._setCursor(TimelineCursorType.Default);
+        if (_this._isPanStarted || _this._interactionMode === TimelineInteractionMode.Pan) {
+          if (isLeftClicked) {
+            _this._setCursor(TimelineCursorType.Grabbing);
+          } else {
+            _this._setCursor(TimelineCursorType.Grab);
+          }
+        } else {
+          _this._setCursor(TimelineCursorType.Default);
+        }
 
         if (target) {
           var cursor = null;
@@ -1715,6 +1729,12 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
     value: function _controlKeyPressed(e) {
       return this._options.controlKeyIsMetaKey || this._options.controlKeyIsMetaKey ? e.metaKey : e.ctrlKey;
     }
+  }, {
+    key: "isLeftButtonClicked",
+    value: function isLeftButtonClicked(args) {
+      return !!args && args.buttons == 1;
+    } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   }, {
     key: "_performClick",
     value: function _performClick(pos, args, drag) {

lib/timeline.d.ts

@@ -110,6 +110,7 @@ export declare class Timeline extends TimelineEventsEmitter {
      * @param args
      */
     _handleMouseDownEvent: (args: MouseEvent) => void;
+    isLeftButtonClicked(args: MouseEvent | TouchEvent | any): boolean;
     _handleMouseMoveEvent: (args: any) => void;
     _handleMouseUpEvent: (args: MouseEvent) => void;
     _performClick(pos: MouseData, args: MouseEvent, drag: TimelineDraggableData): boolean;

src/timeline.ts

@@ -418,6 +418,9 @@ export class Timeline extends TimelineEventsEmitter {
     this.redraw();
   };
 
+  isLeftButtonClicked(args: MouseEvent | TouchEvent | any): boolean {
+    return !!args && args.buttons == 1;
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _handleMouseMoveEvent = (args: MouseEvent | TouchEvent | any): void => {
     if (!args) {
@@ -432,11 +435,14 @@ export class Timeline extends TimelineEventsEmitter {
     this._currentPos = this._trackMousePos(this._canvas, args);
     if (!this._isPanStarted && this._selectionRect && this._clickTimeoutIsOver()) {
       this._selectionRectEnabled = true;
+    } else {
+      this._selectionRectEnabled = false;
     }
 
     args = args as MouseEvent;
+    const isLeftClicked = this.isLeftButtonClicked(args);
     if (this._startPos) {
-      if (args.buttons == 1 || isTouch) {
+      if (isLeftClicked || isTouch) {
         let isChanged = false;
         if (this._drag && !this._startedDragWithCtrl) {
           const convertedVal = this._mousePosToVal(this._currentPos.x, true);
@@ -486,6 +492,7 @@ export class Timeline extends TimelineEventsEmitter {
 
         if (this._interactionMode === TimelineInteractionMode.Pan && !this._drag) {
           this._isPanStarted = true;
+          this._setCursor(TimelineCursorType.Grabbing);
           // Track scroll by drag.
           this._scrollByPan(this._startPos, this._currentPos, this._scrollStartPos);
         } else {
@@ -499,10 +506,18 @@ export class Timeline extends TimelineEventsEmitter {
         this.redraw();
       }
     } else if (!isTouch) {
-      // TODO: mouse over event
       const elements = this.elementFromPoint(this._currentPos, Math.max(2, this._currentPos.radius));
       const target = this._findDraggable(elements, this._currentPos.val);
-      this._setCursor(TimelineCursorType.Default);
+      if (this._isPanStarted || this._interactionMode === TimelineInteractionMode.Pan) {
+        if (isLeftClicked) {
+          this._setCursor(TimelineCursorType.Grabbing);
+        } else {
+          this._setCursor(TimelineCursorType.Grab);
+        }
+      } else {
+        this._setCursor(TimelineCursorType.Default);
+      }
+
       if (target) {
         let cursor: TimelineCursorType | null = null;
         if (target.type === TimelineElementType.Stripe) {