added type scrict TimeChangedEvent

lib/animation-timeline.js

@@ -694,33 +694,23 @@ var TimelineInteractionMode;
   TimelineInteractionMode["Selection"] = "selection";
   TimelineInteractionMode["Pan"] = "pan";
 })(TimelineInteractionMode || (TimelineInteractionMode = {}));
-// CONCATENATED MODULE: ./src/utils/events/timelineClickEvent.ts
-function timelineClickEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+// CONCATENATED MODULE: ./src/utils/events/timelineBaseEvent.ts
+function timelineBaseEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function timelineClickEvent_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function timelineBaseEvent_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function timelineClickEvent_createClass(Constructor, protoProps, staticProps) { if (protoProps) timelineClickEvent_defineProperties(Constructor.prototype, protoProps); if (staticProps) timelineClickEvent_defineProperties(Constructor, staticProps); return Constructor; }
-
-function timelineClickEvent_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var TimelineClickEvent = /*#__PURE__*/function () {
-  function TimelineClickEvent() {
-    timelineClickEvent_classCallCheck(this, TimelineClickEvent);
+function timelineBaseEvent_createClass(Constructor, protoProps, staticProps) { if (protoProps) timelineBaseEvent_defineProperties(Constructor.prototype, protoProps); if (staticProps) timelineBaseEvent_defineProperties(Constructor, staticProps); return Constructor; }
 
-    timelineClickEvent_defineProperty(this, "args", void 0);
+function timelineBaseEvent_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-    timelineClickEvent_defineProperty(this, "pos", void 0);
+var TimelineBaseEvent = /*#__PURE__*/function () {
+  function TimelineBaseEvent() {
+    timelineBaseEvent_classCallCheck(this, TimelineBaseEvent);
 
-    timelineClickEvent_defineProperty(this, "val", void 0);
-
-    timelineClickEvent_defineProperty(this, "elements", void 0);
-
-    timelineClickEvent_defineProperty(this, "target", void 0);
-
-    timelineClickEvent_defineProperty(this, "_prevented", false);
+    timelineBaseEvent_defineProperty(this, "_prevented", false);
   }
 
-  timelineClickEvent_createClass(TimelineClickEvent, [{
+  timelineBaseEvent_createClass(TimelineBaseEvent, [{
     key: "preventDefault",
 
     /**
@@ -736,12 +726,12 @@ var TimelineClickEvent = /*#__PURE__*/function () {
     }
   }]);
 
-  return TimelineClickEvent;
+  return TimelineBaseEvent;
 }();
-// CONCATENATED MODULE: ./src/utils/events/timelineDragEvent.ts
+// CONCATENATED MODULE: ./src/utils/events/timelineClickEvent.ts
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function timelineDragEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function timelineClickEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
@@ -757,11 +747,64 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function timelineClickEvent_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+var TimelineClickEvent = /*#__PURE__*/function (_TimelineBaseEvent) {
+  _inherits(TimelineClickEvent, _TimelineBaseEvent);
+
+  var _super = _createSuper(TimelineClickEvent);
+
+  function TimelineClickEvent() {
+    var _this;
+
+    timelineClickEvent_classCallCheck(this, TimelineClickEvent);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    timelineClickEvent_defineProperty(_assertThisInitialized(_this), "args", void 0);
+
+    timelineClickEvent_defineProperty(_assertThisInitialized(_this), "pos", void 0);
+
+    timelineClickEvent_defineProperty(_assertThisInitialized(_this), "val", void 0);
+
+    timelineClickEvent_defineProperty(_assertThisInitialized(_this), "elements", void 0);
+
+    timelineClickEvent_defineProperty(_assertThisInitialized(_this), "target", void 0);
+
+    return _this;
+  }
+
+  return TimelineClickEvent;
+}(TimelineBaseEvent);
+// CONCATENATED MODULE: ./src/utils/events/timelineDragEvent.ts
+function timelineDragEvent_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { timelineDragEvent_typeof = function _typeof(obj) { return typeof obj; }; } else { timelineDragEvent_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return timelineDragEvent_typeof(obj); }
+
+function timelineDragEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function timelineDragEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) timelineDragEvent_setPrototypeOf(subClass, superClass); }
+
+function timelineDragEvent_setPrototypeOf(o, p) { timelineDragEvent_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timelineDragEvent_setPrototypeOf(o, p); }
+
+function timelineDragEvent_createSuper(Derived) { var hasNativeReflectConstruct = timelineDragEvent_isNativeReflectConstruct(); return function () { var Super = timelineDragEvent_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = timelineDragEvent_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return timelineDragEvent_possibleConstructorReturn(this, result); }; }
+
+function timelineDragEvent_possibleConstructorReturn(self, call) { if (call && (timelineDragEvent_typeof(call) === "object" || typeof call === "function")) { return call; } return timelineDragEvent_assertThisInitialized(self); }
+
+function timelineDragEvent_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function timelineDragEvent_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function timelineDragEvent_getPrototypeOf(o) { timelineDragEvent_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return timelineDragEvent_getPrototypeOf(o); }
+
 
 var TimelineDragEvent = /*#__PURE__*/function (_TimelineClickEvent) {
-  _inherits(TimelineDragEvent, _TimelineClickEvent);
+  timelineDragEvent_inherits(TimelineDragEvent, _TimelineClickEvent);
 
-  var _super = _createSuper(TimelineDragEvent);
+  var _super = timelineDragEvent_createSuper(TimelineDragEvent);
 
   function TimelineDragEvent() {
     timelineDragEvent_classCallCheck(this, TimelineDragEvent);
@@ -935,6 +978,64 @@ var defaultTimelineConsts = {
    */
   clickThreshold: 3
 };
+// CONCATENATED MODULE: ./src/enums/timelineEventSource.ts
+var TimelineEventSource;
+
+(function (TimelineEventSource) {
+  TimelineEventSource["User"] = "user";
+  TimelineEventSource["Programmatically"] = "programmatically";
+  TimelineEventSource["SetTimeMethod"] = "setTimeMethod";
+})(TimelineEventSource || (TimelineEventSource = {}));
+// CONCATENATED MODULE: ./src/utils/events/timelineTimeChangedEvent.ts
+function timelineTimeChangedEvent_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { timelineTimeChangedEvent_typeof = function _typeof(obj) { return typeof obj; }; } else { timelineTimeChangedEvent_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return timelineTimeChangedEvent_typeof(obj); }
+
+function timelineTimeChangedEvent_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function timelineTimeChangedEvent_inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) timelineTimeChangedEvent_setPrototypeOf(subClass, superClass); }
+
+function timelineTimeChangedEvent_setPrototypeOf(o, p) { timelineTimeChangedEvent_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timelineTimeChangedEvent_setPrototypeOf(o, p); }
+
+function timelineTimeChangedEvent_createSuper(Derived) { var hasNativeReflectConstruct = timelineTimeChangedEvent_isNativeReflectConstruct(); return function () { var Super = timelineTimeChangedEvent_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = timelineTimeChangedEvent_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return timelineTimeChangedEvent_possibleConstructorReturn(this, result); }; }
+
+function timelineTimeChangedEvent_possibleConstructorReturn(self, call) { if (call && (timelineTimeChangedEvent_typeof(call) === "object" || typeof call === "function")) { return call; } return timelineTimeChangedEvent_assertThisInitialized(self); }
+
+function timelineTimeChangedEvent_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function timelineTimeChangedEvent_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function timelineTimeChangedEvent_getPrototypeOf(o) { timelineTimeChangedEvent_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return timelineTimeChangedEvent_getPrototypeOf(o); }
+
+function timelineTimeChangedEvent_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+var timelineTimeChangedEvent_TimelineTimeChangedEvent = /*#__PURE__*/function (_TimelineBaseEvent) {
+  timelineTimeChangedEvent_inherits(TimelineTimeChangedEvent, _TimelineBaseEvent);
+
+  var _super = timelineTimeChangedEvent_createSuper(TimelineTimeChangedEvent);
+
+  function TimelineTimeChangedEvent() {
+    var _this;
+
+    timelineTimeChangedEvent_classCallCheck(this, TimelineTimeChangedEvent);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    timelineTimeChangedEvent_defineProperty(timelineTimeChangedEvent_assertThisInitialized(_this), "val", 0);
+
+    timelineTimeChangedEvent_defineProperty(timelineTimeChangedEvent_assertThisInitialized(_this), "prevVal", 0);
+
+    timelineTimeChangedEvent_defineProperty(timelineTimeChangedEvent_assertThisInitialized(_this), "source", TimelineEventSource.User);
+
+    return _this;
+  }
+
+  return TimelineTimeChangedEvent;
+}(TimelineBaseEvent);
 // CONCATENATED MODULE: ./src/timeline.ts
 function timeline_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { timeline_typeof = function _typeof(obj) { return typeof obj; }; } else { timeline_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return timeline_typeof(obj); }
 
@@ -976,6 +1077,8 @@ function timeline_defineProperty(obj, key, value) { if (key in obj) { Object.def
 
 
 
+
+
 var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   timeline_inherits(Timeline, _TimelineEventsEmitte);
 
@@ -1318,7 +1421,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
 
             if (_this._drag.type === TimelineElementType.Timeline) {
-              isChanged = _this._setTimeInternal(convertedVal, 'user') || isChanged;
+              isChanged = _this._setTimeInternal(convertedVal, TimelineEventSource.User) || isChanged;
             } else if ((_this._drag.type == TimelineElementType.Keyframe || _this._drag.type == TimelineElementType.Stripe) && _this._drag.elements) {
               var offset = Math.floor(convertedVal - _this._drag.val);
 
@@ -1386,7 +1489,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
         var target = _this._findDraggable(elements, _this._currentPos.val);
 
-        _this._setCursor('default');
+        _this._setCursor(TimelineCursorType.Default);
 
         if (target) {
           var cursor = null;
@@ -1632,14 +1735,14 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           var convertedVal = this._mousePosToVal(pos.x, true); // Set current timeline position if it's not a drag or selection rect small or fast click.
 
 
-          isChanged = this._setTimeInternal(convertedVal, 'user') || isChanged;
+          isChanged = this._setTimeInternal(convertedVal, TimelineEventSource.User) || isChanged;
         }
       } else {
         // deselect keyframes if any:
         isChanged = this._performSelection(false) || isChanged; // change timeline pos:
         // Set current timeline position if it's not a drag or selection rect small or fast click.
 
-        isChanged = this._setTimeInternal(this._mousePosToVal(pos.x, true), 'user') || isChanged;
+        isChanged = this._setTimeInternal(this._mousePosToVal(pos.x, true), TimelineEventSource.User) || isChanged;
       }
 
       return isChanged;
@@ -1687,6 +1790,15 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         this._cleanUpSelection();
       }
     }
+    /**
+     * Get current interaction mode.
+     */
+
+  }, {
+    key: "getInteractionMode",
+    value: function getInteractionMode() {
+      return this._interactionMode;
+    }
   }, {
     key: "_convertToElement",
     value: function _convertToElement(row, keyframe) {
@@ -2791,9 +2903,16 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
     value: function getTime() {
       return this._val;
     }
+    /**
+     * Set current time internal
+     * @param val value.
+     * @param source event source.
+     */
+
   }, {
     key: "_setTimeInternal",
-    value: function _setTimeInternal(val, source) {
+    value: function _setTimeInternal(val) {
+      var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TimelineEventSource.Programmatically;
       val = Math.round(val);
 
       if (val < 0) {
@@ -2801,15 +2920,23 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       }
 
       if (this._val != val) {
+        var timelineEvent = new timelineTimeChangedEvent_TimelineTimeChangedEvent();
+        timelineEvent.val = val;
+        var prevVal = this._val;
+        timelineEvent.prevVal = prevVal;
+        timelineEvent.source = source;
         this._val = val;
-        this.emit('timeChanged', {
-          val: val,
-          source: source
-        });
+        this.emit(TimelineEvents.Selected, timelineEvent);
+
+        if (timelineEvent.isPrevented()) {
+          this._val = prevVal;
+          return false;
+        }
+
         return true;
       }
 
-      return true;
+      return false;
     }
   }, {
     key: "setTime",
@@ -2819,7 +2946,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         return false;
       }
 
-      return this._setTimeInternal(val, 'setTime');
+      return this._setTimeInternal(val, TimelineEventSource.SetTimeMethod);
     }
   }, {
     key: "select",
@@ -3108,7 +3235,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       if (this._options && this._options.timelineStyle) {
         var timelineStyle = this._options.timelineStyle;
         width = Math.max((timelineStyle.width || 1) * this._pixelRatio, (timelineStyle.capWidth || 0) * this._pixelRatio || 1) + clickRadius;
-      }
+      } // Allow to select timeline only by half of a header to allow select by a selector top most keyframes row.
+
 
       if (pos.y <= this._options.headerHeight * 0.5 || pos.x >= timeLinePos - width / 2 && pos.x <= timeLinePos + width / 2) {
         toReturn.push({
@@ -3203,6 +3331,15 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       mergeOptionsDeep(options, toSet);
       return options;
     }
+    /**
+     * Subscribe on time changed.
+     */
+
+  }, {
+    key: "onTimeChangedEvent",
+    value: function onTimeChangedEvent(callback) {
+      this.on(TimelineEvents.DragStarted, callback);
+    }
     /**
      * Subscribe on drag started event.
      */

lib/enums/timelineEventSource.d.ts

@@ -0,0 +1,5 @@
+export declare enum TimelineEventSource {
+    User = "user",
+    Programmatically = "programmatically",
+    SetTimeMethod = "setTimeMethod"
+}

lib/timeline.d.ts

@@ -10,6 +10,8 @@ import { RowSize, RowsCalculationsResults } from './utils/rowsCalculationsResult
 import { TimelineInteractionMode } from './enums/timelineInteractionMode';
 import { TimelineDraggableData } from './utils/timelineDraggableData';
 import { TimelineDragEvent } from './utils/events/timelineDragEvent';
+import { TimelineEventSource } from './enums/timelineEventSource';
+import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
 interface MousePoint extends DOMPoint {
     radius: number;
 }
@@ -124,6 +126,10 @@ export declare class Timeline extends TimelineEventsEmitter {
      * @param isPan
      */
     setInteractionMode(mode: TimelineInteractionMode): void;
+    /**
+     * Get current interaction mode.
+     */
+    getInteractionMode(): TimelineInteractionMode;
     _convertToElement(row: TimelineRow, keyframe: TimelineKeyframe): TimelineClickableElement;
     getSelectedElements(): Array<TimelineClickableElement>;
     /**
@@ -223,7 +229,12 @@ export declare class Timeline extends TimelineEventsEmitter {
      * Get current time:
      */
     getTime(): number;
-    _setTimeInternal(val: number, source: string): boolean;
+    /**
+     * Set current time internal
+     * @param val value.
+     * @param source event source.
+     */
+    _setTimeInternal(val: number, source?: TimelineEventSource): boolean;
     setTime(val: number): boolean;
     select(value?: boolean): void;
     getOptions(): TimelineOptions;
@@ -267,6 +278,10 @@ export declare class Timeline extends TimelineEventsEmitter {
      * Merge options with the defaults.
      */
     _mergeOptions(toSet: TimelineOptions): TimelineOptions;
+    /**
+     * Subscribe on time changed.
+     */
+    onTimeChangedEvent(callback: (eventArgs: TimelineTimeChangedEvent) => void): void;
     /**
      * Subscribe on drag started event.
      */

lib/utils/events/timelineBaseEvent.d.ts

@@ -0,0 +1,8 @@
+export declare class TimelineBaseEvent {
+    private _prevented;
+    /**
+     * Prevent default click logic.
+     */
+    preventDefault(): void;
+    isPrevented(): boolean;
+}

lib/utils/events/timelineClickEvent.d.ts

@@ -1,5 +1,6 @@
 import { TimelineClickableElement } from '../timelineClickableElement';
-export declare class TimelineClickEvent {
+import { TimelineBaseEvent } from './timelineBaseEvent';
+export declare class TimelineClickEvent extends TimelineBaseEvent {
     args: MouseEvent;
     /**
      * Clicked screen position.
@@ -17,10 +18,4 @@ export declare class TimelineClickEvent {
      * Target element
      */
     target: TimelineClickableElement;
-    private _prevented;
-    /**
-     * Prevent default click logic.
-     */
-    preventDefault(): void;
-    isPrevented(): boolean;
 }

lib/utils/events/timelineTimeChangedEvent.d.ts

@@ -0,0 +1,13 @@
+import { TimelineBaseEvent } from './timelineBaseEvent';
+import { TimelineEventSource } from '../../enums/timelineEventSource';
+export declare class TimelineTimeChangedEvent extends TimelineBaseEvent {
+    /**
+     * new value to be set.
+     */
+    val: number;
+    /**
+     * previous value.
+     */
+    prevVal: number;
+    source: TimelineEventSource;
+}

src/enums/timelineEventSource.ts

@@ -0,0 +1,5 @@
+export enum TimelineEventSource {
+  User = 'user',
+  Programmatically = 'programmatically',
+  SetTimeMethod = 'setTimeMethod',
+}

src/timeline.ts

@@ -21,6 +21,8 @@ import { TimelineDraggableData } from './utils/timelineDraggableData';
 import { TimelineClickEvent } from './utils/events/timelineClickEvent';
 import { TimelineDragEvent } from './utils/events/timelineDragEvent';
 import { defaultTimelineConsts, defaultTimelineOptions } from './settings/defaults';
+import { TimelineEventSource } from './enums/timelineEventSource';
+import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
 
 interface MousePoint extends DOMPoint {
   radius: number;
@@ -440,7 +442,7 @@ export class Timeline extends TimelineEventsEmitter {
           const convertedVal = this._mousePosToVal(this._currentPos.x, true);
           //redraw();
           if (this._drag.type === TimelineElementType.Timeline) {
-            isChanged = this._setTimeInternal(convertedVal, 'user') || isChanged;
+            isChanged = this._setTimeInternal(convertedVal, TimelineEventSource.User) || isChanged;
           } else if ((this._drag.type == TimelineElementType.Keyframe || this._drag.type == TimelineElementType.Stripe) && this._drag.elements) {
             let offset = Math.floor(convertedVal - this._drag.val);
             if (Math.abs(offset) > 0) {
@@ -500,7 +502,7 @@ export class Timeline extends TimelineEventsEmitter {
       // 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('default');
+      this._setCursor(TimelineCursorType.Default);
       if (target) {
         let cursor: TimelineCursorType | null = null;
         if (target.type === TimelineElementType.Stripe) {
@@ -554,7 +556,7 @@ export class Timeline extends TimelineEventsEmitter {
         // change timeline pos:
         const convertedVal = this._mousePosToVal(pos.x, true);
         // Set current timeline position if it's not a drag or selection rect small or fast click.
-        isChanged = this._setTimeInternal(convertedVal, 'user') || isChanged;
+        isChanged = this._setTimeInternal(convertedVal, TimelineEventSource.User) || isChanged;
       }
     } else {
       // deselect keyframes if any:
@@ -562,7 +564,7 @@ export class Timeline extends TimelineEventsEmitter {
 
       // change timeline pos:
       // Set current timeline position if it's not a drag or selection rect small or fast click.
-      isChanged = this._setTimeInternal(this._mousePosToVal(pos.x, true), 'user') || isChanged;
+      isChanged = this._setTimeInternal(this._mousePosToVal(pos.x, true), TimelineEventSource.User) || isChanged;
     }
 
     return isChanged;
@@ -1562,22 +1564,33 @@ export class Timeline extends TimelineEventsEmitter {
     return this._val;
   }
 
-  _setTimeInternal(val: number, source: string): boolean {
+  /**
+   * Set current time internal
+   * @param val value.
+   * @param source event source.
+   */
+  _setTimeInternal(val: number, source: TimelineEventSource = TimelineEventSource.Programmatically): boolean {
     val = Math.round(val);
     if (val < 0) {
       val = 0;
     }
 
     if (this._val != val) {
+      const timelineEvent = new TimelineTimeChangedEvent();
+      timelineEvent.val = val;
+      const prevVal = this._val;
+      timelineEvent.prevVal = prevVal;
+      timelineEvent.source = source;
       this._val = val;
-      this.emit('timeChanged', {
-        val: val,
-        source: source,
-      });
+      this.emit(TimelineEvents.Selected, timelineEvent);
+      if (timelineEvent.isPrevented()) {
+        this._val = prevVal;
+        return false;
+      }
       return true;
     }
 
-    return true;
+    return false;
   }
 
   public setTime(val: number): boolean {
@@ -1586,7 +1599,7 @@ export class Timeline extends TimelineEventsEmitter {
       return false;
     }
 
-    return this._setTimeInternal(val, 'setTime');
+    return this._setTimeInternal(val, TimelineEventSource.SetTimeMethod);
   }
 
   public select(value = true): void {
@@ -1910,7 +1923,12 @@ export class Timeline extends TimelineEventsEmitter {
     mergeOptionsDeep(options, toSet);
     return options;
   }
-
+  /**
+   * Subscribe on time changed.
+   */
+  public onTimeChangedEvent(callback: (eventArgs: TimelineTimeChangedEvent) => void): void {
+    this.on(TimelineEvents.DragStarted, callback);
+  }
   /**
    * Subscribe on drag started event.
    */

src/utils/events/timelineBaseEvent.ts

@@ -0,0 +1,13 @@
+export class TimelineBaseEvent {
+  private _prevented = false;
+  /**
+   * Prevent default click logic.
+   */
+  preventDefault(): void {
+    this._prevented = true;
+  }
+
+  isPrevented(): boolean {
+    return this._prevented;
+  }
+}

src/utils/events/timelineClickEvent.ts

@@ -1,6 +1,7 @@
 import { TimelineClickableElement } from '../timelineClickableElement';
+import { TimelineBaseEvent } from './timelineBaseEvent';
 
-export class TimelineClickEvent {
+export class TimelineClickEvent extends TimelineBaseEvent {
   args: MouseEvent;
   /**
    * Clicked screen position.
@@ -19,15 +20,4 @@ export class TimelineClickEvent {
    * Target element
    */
   target: TimelineClickableElement;
-  private _prevented = false;
-  /**
-   * Prevent default click logic.
-   */
-  preventDefault(): void {
-    this._prevented = true;
-  }
-
-  isPrevented(): boolean {
-    return this._prevented;
-  }
 }

src/utils/events/timelineTimeChangedEvent.ts

@@ -0,0 +1,14 @@
+import { TimelineBaseEvent } from './timelineBaseEvent';
+import { TimelineEventSource } from '../../enums/timelineEventSource';
+
+export class TimelineTimeChangedEvent extends TimelineBaseEvent {
+  /**
+   * new value to be set.
+   */
+  val = 0;
+  /**
+   * previous value.
+   */
+  prevVal = 0;
+  source: TimelineEventSource = TimelineEventSource.User;
+}