helpers are renamed, some modules are exposed.

index.html

@@ -357,7 +357,7 @@
     }
 
 
-    var dragHandler = function (object, eventName) {
+    var logDraggingMessage = function (object, eventName) {
       if (object.elements) {
         logMessage('Keyframe value: ' + object.elements[0].val + '. Selected (' + object.elements.length + ').' + eventName);
       }
@@ -371,20 +371,20 @@
       logMessage('selected :' + obj.selected.length + '. changed :' + obj.changed.length, 2);
     });
     timeline.onDragStarted(function (obj) {
-      dragHandler(obj, 'dragstarted');
+      logDraggingMessage(obj, 'dragstarted');
     });
     timeline.onDrag(function (obj) {
-      dragHandler(obj, 'drag');
+      logDraggingMessage(obj, 'drag');
       // obj.preventDefault();
       //  return;
-      if (obj.row && obj.type == 'keyframe' && obj.val <= 2) {
-
+      if (obj.row && obj.type == 'keyframe' && obj.val <= 3000) {
+        e.preventDefault();
       } else {
 
       }
     });
     timeline.onDragFinished(function (obj) {
-      dragHandler(obj, 'dragfinished')
+      logDraggingMessage(obj, 'dragfinished');
     });
     timeline.onMouseDown(function (obj) {
       var type = (obj.target ? obj.target.type : '');

lib/animation-timeline.d.ts

@@ -13,8 +13,10 @@ export { TimelineStyleUtils } from './utils/timelineStyleUtils';
 export { TimelineUtils } from './utils/timelineUtils';
 export { TimelineElement } from './utils/timelineElement';
 export { Selectable } from './utils/selectable';
-export { CutBoundsRect } from './utils/cutBoundsRect';
+export { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
 export { TimelineSelectionResults } from './utils/timelineSelectionResults';
+export { TimelineValues } from './utils/timelineValues';
+export { TimelineMouseData } from './utils/timelineMouseData';
 export { TimelineModelCalcResults } from './utils/timelineModelCalcResults';
 export { TimelineCalculatedRow } from './utils/timelineModelCalcResults';
 export { TimelineCalculatedGroup } from './utils/timelineModelCalcResults';

lib/animation-timeline.js

@@ -91,7 +91,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 15);
+/******/ 	return __webpack_require__(__webpack_require__.s = 17);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -186,6 +186,18 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ }),
 /* 15 */
+/***/ (function(module, exports) {
+
+
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
+
+
+
+/***/ }),
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -208,8 +220,10 @@ __webpack_require__.d(__webpack_exports__, "TimelineStyleUtils", function() { re
 __webpack_require__.d(__webpack_exports__, "TimelineUtils", function() { return /* reexport */ TimelineUtils; });
 __webpack_require__.d(__webpack_exports__, "TimelineElement", function() { return /* reexport */ timelineElement["TimelineElement"]; });
 __webpack_require__.d(__webpack_exports__, "Selectable", function() { return /* reexport */ selectable["Selectable"]; });
-__webpack_require__.d(__webpack_exports__, "CutBoundsRect", function() { return /* reexport */ cutBoundsRect["CutBoundsRect"]; });
+__webpack_require__.d(__webpack_exports__, "TimelineCutBoundsRectResults", function() { return /* reexport */ timelineCutBoundsRectResults["TimelineCutBoundsRectResults"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineSelectionResults", function() { return /* reexport */ timelineSelectionResults["TimelineSelectionResults"]; });
+__webpack_require__.d(__webpack_exports__, "TimelineValues", function() { return /* reexport */ timelineValues["TimelineValues"]; });
+__webpack_require__.d(__webpack_exports__, "TimelineMouseData", function() { return /* reexport */ timelineMouseData["TimelineMouseData"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineModelCalcResults", function() { return /* reexport */ timelineModelCalcResults["TimelineModelCalcResults"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineCalculatedRow", function() { return /* reexport */ timelineModelCalcResults["TimelineCalculatedRow"]; });
 __webpack_require__.d(__webpack_exports__, "TimelineCalculatedGroup", function() { return /* reexport */ timelineModelCalcResults["TimelineCalculatedGroup"]; });
@@ -957,12 +971,16 @@ var TimelineClickEvent = /*#__PURE__*/function (_TimelineBaseEvent) {
 
     timelineClickEvent_defineProperty(timelineClickEvent_assertThisInitialized(_this), "pos", void 0);
 
-    timelineClickEvent_defineProperty(timelineClickEvent_assertThisInitialized(_this), "val", void 0);
-
     timelineClickEvent_defineProperty(timelineClickEvent_assertThisInitialized(_this), "elements", void 0);
 
     timelineClickEvent_defineProperty(timelineClickEvent_assertThisInitialized(_this), "target", void 0);
 
+    timelineClickEvent_defineProperty(timelineClickEvent_assertThisInitialized(_this), "val", void 0);
+
+    timelineClickEvent_defineProperty(timelineClickEvent_assertThisInitialized(_this), "snapVal", void 0);
+
+    timelineClickEvent_defineProperty(timelineClickEvent_assertThisInitialized(_this), "originalVal", void 0);
+
     return _this;
   }
 
@@ -1503,6 +1521,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       var event = new TimelineClickEvent();
       event.pos = _this._startPos;
       event.val = _this._startPos.val;
+      event.originalVal = _this._startPos.originalVal;
+      event.snapVal = _this._startPos.snapVal;
       event.args = args; // all elements under the click:
 
       event.elements = elements; // target element.
@@ -4169,17 +4189,23 @@ var timelineElement = __webpack_require__(10);
 // EXTERNAL MODULE: ./src/utils/selectable.ts
 var selectable = __webpack_require__(11);
 
-// EXTERNAL MODULE: ./src/utils/cutBoundsRect.ts
-var cutBoundsRect = __webpack_require__(12);
+// EXTERNAL MODULE: ./src/utils/timelineCutBoundsRectResults.ts
+var timelineCutBoundsRectResults = __webpack_require__(12);
 
 // EXTERNAL MODULE: ./src/utils/timelineSelectionResults.ts
 var timelineSelectionResults = __webpack_require__(13);
 
+// EXTERNAL MODULE: ./src/utils/timelineValues.ts
+var timelineValues = __webpack_require__(14);
+
+// EXTERNAL MODULE: ./src/utils/timelineMouseData.ts
+var timelineMouseData = __webpack_require__(15);
+
 // EXTERNAL MODULE: ./src/utils/timelineModelCalcResults.ts
 var timelineModelCalcResults = __webpack_require__(0);
 
 // EXTERNAL MODULE: ./src/utils/events/timelineScrollEvent.ts
-var timelineScrollEvent = __webpack_require__(14);
+var timelineScrollEvent = __webpack_require__(16);
 
 // CONCATENATED MODULE: ./src/animation-timeline.ts
 // bundle entry point
@@ -4200,6 +4226,8 @@ var timelineScrollEvent = __webpack_require__(14);
 
 
 
+
+
  // virtual model
 
 

lib/animation-timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation-timeline.js","sourceRoot":"","sources":["../src/animation-timeline.ts"],"names":[],"mappings":";AAAA,qBAAqB;;AAErB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AAIjB,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA;AAS9B,iEAAgE;AAAvD,wHAAA,kBAAkB,OAAA;AAC3B,uDAAsD;AAA7C,8GAAA,aAAa,OAAA;AAatB,SAAS;AACT,8EAA6E;AAApE,8HAAA,qBAAqB,OAAA;AAE9B,wEAAuE;AAA9D,wHAAA,kBAAkB,OAAA;AAC3B,sEAAqE;AAA5D,sHAAA,iBAAiB,OAAA;AAC1B,oFAAmF;AAA1E,oIAAA,wBAAwB,OAAA;AACjC,yDAAwD;AAA/C,gHAAA,cAAc,OAAA;AAEvB,QAAQ;AACR,uEAAsE;AAA7D,8HAAA,qBAAqB,OAAA;AAC9B,2EAA0E;AAAjE,kIAAA,uBAAuB,OAAA;AAChC,mEAAkE;AAAzD,0HAAA,mBAAmB,OAAA;AAC5B,iEAAgE;AAAvD,wHAAA,kBAAkB,OAAA;AAC3B,6DAA4D;AAAnD,oHAAA,gBAAgB,OAAA;AACzB,mEAAkE;AAAzD,0HAAA,mBAAmB,OAAA;AAC5B,uEAAsE;AAA7D,8HAAA,qBAAqB,OAAA;AAE9B,gCAAgC;AAChC,gDAA6D;AAApD,kHAAA,sBAAsB,OAAA;AAC/B,gDAAmE;AAA1D,wHAAA,4BAA4B,OAAA;AACrC,gDAA8D;AAArD,mHAAA,uBAAuB,OAAA;AAChC,gDAA2D;AAAlD,gHAAA,oBAAoB,OAAA;AAC7B,gDAA4D;AAAnD,iHAAA,qBAAqB,OAAA"}
+{"version":3,"file":"animation-timeline.js","sourceRoot":"","sources":["../src/animation-timeline.ts"],"names":[],"mappings":";AAAA,qBAAqB;;AAErB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AAIjB,iEAAgE;AAAvD,8HAAA,qBAAqB,OAAA;AAS9B,iEAAgE;AAAvD,wHAAA,kBAAkB,OAAA;AAC3B,uDAAsD;AAA7C,8GAAA,aAAa,OAAA;AAetB,SAAS;AACT,8EAA6E;AAApE,8HAAA,qBAAqB,OAAA;AAE9B,wEAAuE;AAA9D,wHAAA,kBAAkB,OAAA;AAC3B,sEAAqE;AAA5D,sHAAA,iBAAiB,OAAA;AAC1B,oFAAmF;AAA1E,oIAAA,wBAAwB,OAAA;AACjC,yDAAwD;AAA/C,gHAAA,cAAc,OAAA;AAEvB,QAAQ;AACR,uEAAsE;AAA7D,8HAAA,qBAAqB,OAAA;AAC9B,2EAA0E;AAAjE,kIAAA,uBAAuB,OAAA;AAChC,mEAAkE;AAAzD,0HAAA,mBAAmB,OAAA;AAC5B,iEAAgE;AAAvD,wHAAA,kBAAkB,OAAA;AAC3B,6DAA4D;AAAnD,oHAAA,gBAAgB,OAAA;AACzB,mEAAkE;AAAzD,0HAAA,mBAAmB,OAAA;AAC5B,uEAAsE;AAA7D,8HAAA,qBAAqB,OAAA;AAE9B,gCAAgC;AAChC,gDAA6D;AAApD,kHAAA,sBAAsB,OAAA;AAC/B,gDAAmE;AAA1D,wHAAA,4BAA4B,OAAA;AACrC,gDAA8D;AAArD,mHAAA,uBAAuB,OAAA;AAChC,gDAA2D;AAAlD,gHAAA,oBAAoB,OAAA;AAC7B,gDAA4D;AAAnD,iHAAA,qBAAqB,OAAA"}

lib/timeline.d.ts

@@ -5,7 +5,7 @@ import { TimelineKeyframe } from './timelineKeyframe';
 import { TimelineModel } from './timelineModel';
 import { TimelineElement } from './utils/timelineElement';
 import { TimelineRow } from './timelineRow';
-import { CutBoundsRect } from './utils/cutBoundsRect';
+import { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
 import { TimelineCalculatedRow, TimelineModelCalcResults, TimelineCalculatedKeyframe } from './utils/timelineModelCalcResults';
 import { TimelineInteractionMode } from './enums/timelineInteractionMode';
 import { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
@@ -17,25 +17,7 @@ import { TimelineEventSource } from './enums/timelineEventSource';
 import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEvent';
 import { TimelineSelectionMode } from './enums/timelineSelectionMode';
 import { TimelineSelectionResults } from './utils/timelineSelectionResults';
-interface MouseData extends DOMPoint {
-    /**
-     * Value to use.
-     */
-    val: number;
-    /**
-     * Snapped value.
-     */
-    snapVal: number;
-    /**
-     * Unsnapped value.
-     */
-    originalVal: number;
-    /**
-     * Click radius
-     */
-    radius: number;
-    args: TouchEvent | MouseEvent;
-}
+import { TimelineMouseData } from './utils/timelineMouseData';
 export declare class Timeline extends TimelineEventsEmitter {
     /**
      * component container.
@@ -64,12 +46,12 @@ export declare class Timeline extends TimelineEventsEmitter {
     /**
      * Drag start position.
      */
-    _startPos: MouseData | null;
+    _startPos: TimelineMouseData | null;
     /**
      * Drag scroll started position.
      */
     _scrollStartPos: DOMPoint | null;
-    _currentPos: MouseData | null;
+    _currentPos: TimelineMouseData | null;
     _selectionRect: DOMRect | null;
     _selectionRectEnabled: boolean;
     _drag: TimelineDraggableData | null;
@@ -185,7 +167,7 @@ export declare class Timeline extends TimelineEventsEmitter {
      * @param screenRect screen coordinates to get keyframes.
      */
     _getKeyframesByRectangle(screenRect: DOMRect): TimelineKeyframe[];
-    _performClick(pos: MouseData, drag: TimelineDraggableData): boolean;
+    _performClick(pos: TimelineMouseData, drag: TimelineDraggableData): boolean;
     /**
      * Set keyframe value.
      * @param keyframe
@@ -223,7 +205,7 @@ export declare class Timeline extends TimelineEventsEmitter {
      * foreach visible keyframe.
      */
     _forEachKeyframe(callback: (keyframe: TimelineCalculatedKeyframe, index?: number, newRow?: boolean) => void): void;
-    _trackMousePos(canvas: HTMLCanvasElement, mouseArgs: MouseEvent | TouchEvent): MouseData;
+    _trackMousePos(canvas: HTMLCanvasElement, mouseArgs: MouseEvent | TouchEvent): TimelineMouseData;
     _cleanUpSelection(): void;
     /**
      * Check whether click timeout is over.
@@ -241,7 +223,7 @@ export declare class Timeline extends TimelineEventsEmitter {
      * Check whether auto pan should be slowed down a bit.
      */
     _checkUpdateSpeedTooFast(): boolean;
-    _scrollByPan(start: MouseData, pos: MouseData, scrollStartPos: DOMPoint): void;
+    _scrollByPan(start: TimelineMouseData, pos: TimelineMouseData, scrollStartPos: DOMPoint): void;
     _scrollBySelectionOutOfBounds(pos: DOMPoint): boolean;
     /**
      * Convert screen pixel to value.
@@ -285,7 +267,7 @@ export declare class Timeline extends TimelineEventsEmitter {
      * Method is used for the optimization.
      * Only visible part should be rendered.
      */
-    _cutBounds(rect: DOMRect): CutBoundsRect;
+    _cutBounds(rect: DOMRect): TimelineCutBoundsRectResults;
     /**
      * get keyframe group screen rect coordinates.
      * @param row
@@ -344,7 +326,7 @@ export declare class Timeline extends TimelineEventsEmitter {
      * @param data
      */
     setModel(data: TimelineModel): void;
-    _getMousePos(canvas: HTMLCanvasElement, e: TouchEvent | MouseEvent | any): MouseData;
+    _getMousePos(canvas: HTMLCanvasElement, e: TouchEvent | MouseEvent | any): TimelineMouseData;
     /**
      * Apply container div size to the container on changes detected.
      */
@@ -405,4 +387,3 @@ export declare class Timeline extends TimelineEventsEmitter {
     _emitKeyframesSelected(state: TimelineSelectionResults): TimelineSelectedEvent;
     _getDragEventArgs(): TimelineDragEvent;
 }
-export {};

lib/utils/cutBoundsRect.d.ts

@@ -1,7 +0,0 @@
-/**
- * Cut bounds results.
- */
-export interface CutBoundsRect extends DOMRect {
-    overlapY: boolean;
-    overlapX: boolean;
-}

lib/utils/cutBoundsRect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cutBoundsRect.js","sourceRoot":"","sources":["../../src/utils/cutBoundsRect.ts"],"names":[],"mappings":""}

lib/utils/events/timelineClickEvent.d.ts

@@ -1,15 +1,12 @@
 import { TimelineElement } from '../timelineElement';
 import { TimelineBaseEvent } from './timelineBaseEvent';
-export declare class TimelineClickEvent extends TimelineBaseEvent {
+import { TimelineValues } from '../timelineValues';
+export declare class TimelineClickEvent extends TimelineBaseEvent implements TimelineValues {
     args: MouseEvent;
     /**
      * Clicked screen position.
      */
     pos: DOMPoint;
-    /**
-     * Click time value.
-     */
-    val: number;
     /**
      * Elements list under the click
      */
@@ -18,4 +15,16 @@ export declare class TimelineClickEvent extends TimelineBaseEvent {
      * Target element
      */
     target: TimelineElement;
+    /**
+     * Value to be used.
+     */
+    val: number;
+    /**
+     * Snapped value.
+     */
+    snapVal: number;
+    /**
+     * Unsnapped original value.
+     */
+    originalVal: number;
 }

lib/utils/events/timelineClickEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineClickEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineClickEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,yDAAwD;AAExD;IAAwC,sCAAiB;IAAzD;;IAmBA,CAAC;IAAD,yBAAC;AAAD,CAAC,AAnBD,CAAwC,qCAAiB,GAmBxD;AAnBY,gDAAkB"}
+{"version":3,"file":"timelineClickEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineClickEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,yDAAwD;AAGxD;IAAwC,sCAAiB;IAAzD;;IA2BA,CAAC;IAAD,yBAAC;AAAD,CAAC,AA3BD,CAAwC,qCAAiB,GA2BxD;AA3BY,gDAAkB"}

lib/utils/events/timelineDragEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"timelineDragEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineDragEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2DAA0D;AAE1D;IAAuC,qCAAkB;IAAzD;;IAA2D,CAAC;IAAD,wBAAC;AAAD,CAAC,AAA5D,CAAuC,uCAAkB,GAAG;AAA/C,8CAAiB"}
+{"version":3,"file":"timelineDragEvent.js","sourceRoot":"","sources":["../../../src/utils/events/timelineDragEvent.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2DAA0D;AAE1D;IAAuC,qCAAkB;IAAzD;;IAEA,CAAC;IAAD,wBAAC;AAAD,CAAC,AAFD,CAAuC,uCAAkB,GAExD;AAFY,8CAAiB"}

lib/utils/timelineCutBoundsRectResults.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Helper container. Cut bounds method results.
+ */
+export interface TimelineCutBoundsRectResults extends DOMRect {
+    overlapY: boolean;
+    overlapX: boolean;
+}

lib/utils/timelineCutBoundsRectResults.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=timelineCutBoundsRectResults.js.map

lib/utils/timelineCutBoundsRectResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineCutBoundsRectResults.js","sourceRoot":"","sources":["../../src/utils/timelineCutBoundsRectResults.ts"],"names":[],"mappings":""}

lib/utils/timelineDraggableData.d.ts

@@ -1,6 +1,7 @@
 import { TimelineElement } from './timelineElement';
 import { TimelineElementType } from '../enums/timelineElementType';
-export interface TimelineDraggableData {
+import { TimelineValues } from './timelineValues';
+export interface TimelineDraggableData extends TimelineValues {
     changed: boolean;
     /**
      * Drag initial click target.
@@ -14,8 +15,4 @@ export interface TimelineDraggableData {
      * Dragging type.
      */
     type: TimelineElementType;
-    /**
-     * current drag position with the offset.
-     */
-    val: number;
 }

lib/utils/timelineMouseData.d.ts

@@ -0,0 +1,11 @@
+import { TimelineValues } from './timelineValues';
+/**
+ * Mouse data helper container.
+ */
+export interface TimelineMouseData extends TimelineValues, DOMPoint {
+    /**
+     * Click radius
+     */
+    radius?: number;
+    args?: TouchEvent | MouseEvent;
+}

lib/utils/timelineMouseData.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=timelineMouseData.js.map

lib/utils/timelineMouseData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineMouseData.js","sourceRoot":"","sources":["../../src/utils/timelineMouseData.ts"],"names":[],"mappings":""}

lib/utils/timelineValues.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Timeline values interface.
+ */
+export interface TimelineValues {
+    /**
+     * Value to be used.
+     */
+    val: number;
+    /**
+     * Snapped value.
+     */
+    snapVal?: number;
+    /**
+     * Unsnapped original value.
+     */
+    originalVal?: number;
+}

lib/utils/timelineValues.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=timelineValues.js.map

lib/utils/timelineValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineValues.js","sourceRoot":"","sources":["../../src/utils/timelineValues.ts"],"names":[],"mappings":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animation-timeline-js",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "animation timeline control based on the canvas.",
   "main": "lib/animation-timeline.min.js",
   "types": "lib/animation-timeline.d.ts",

src/animation-timeline.ts

@@ -17,8 +17,10 @@ export { TimelineStyleUtils } from './utils/timelineStyleUtils';
 export { TimelineUtils } from './utils/timelineUtils';
 export { TimelineElement } from './utils/timelineElement';
 export { Selectable } from './utils/selectable';
-export { CutBoundsRect } from './utils/cutBoundsRect';
+export { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
 export { TimelineSelectionResults } from './utils/timelineSelectionResults';
+export { TimelineValues } from './utils/timelineValues';
+export { TimelineMouseData } from './utils/timelineMouseData';
 
 // virtual model
 export { TimelineModelCalcResults } from './utils/timelineModelCalcResults';

src/timeline.ts

@@ -12,7 +12,7 @@ import { TimelineKeyframeShape } from './enums/timelineKeyframeShape';
 import { TimelineStyleUtils } from './utils/timelineStyleUtils';
 import { TimelineElementType } from './enums/timelineElementType';
 import { TimelineEvents } from './enums/timelineEvents';
-import { CutBoundsRect } from './utils/cutBoundsRect';
+import { TimelineCutBoundsRectResults } from './utils/timelineCutBoundsRectResults';
 import { TimelineCapShape } from './enums/timelineCapShape';
 import { TimelineCalculatedRow, TimelineModelCalcResults, TimelineCalculatedGroup, TimelineCalculatedKeyframe } from './utils/timelineModelCalcResults';
 import { TimelineInteractionMode } from './enums/timelineInteractionMode';
@@ -27,26 +27,7 @@ import { TimelineTimeChangedEvent } from './utils/events/timelineTimeChangedEven
 import { TimelineSelectionMode } from './enums/timelineSelectionMode';
 import { TimelineSelectionResults } from './utils/timelineSelectionResults';
 import { TimelineRanged } from './timelineRanged';
-
-interface MouseData extends DOMPoint {
-  /**
-   * Value to use.
-   */
-  val: number;
-  /**
-   * Snapped value.
-   */
-  snapVal: number;
-  /**
-   * Unsnapped value.
-   */
-  originalVal: number;
-  /**
-   * Click radius
-   */
-  radius: number;
-  args: TouchEvent | MouseEvent;
-}
+import { TimelineMouseData } from './utils/timelineMouseData';
 
 export class Timeline extends TimelineEventsEmitter {
   /**
@@ -76,12 +57,12 @@ export class Timeline extends TimelineEventsEmitter {
   /**
    * Drag start position.
    */
-  _startPos: MouseData | null = null;
+  _startPos: TimelineMouseData | null = null;
   /**
    * Drag scroll started position.
    */
   _scrollStartPos: DOMPoint | null = { x: 0, y: 0 } as DOMPoint;
-  _currentPos: MouseData | null = null;
+  _currentPos: TimelineMouseData | null = null;
 
   _selectionRect: DOMRect | null = null;
   _selectionRectEnabled = false;
@@ -432,6 +413,8 @@ export class Timeline extends TimelineEventsEmitter {
     const event = new TimelineClickEvent();
     event.pos = this._startPos;
     event.val = this._startPos.val;
+    event.originalVal = this._startPos.originalVal;
+    event.snapVal = this._startPos.snapVal;
     event.args = args;
     // all elements under the click:
     event.elements = elements;
@@ -721,7 +704,7 @@ export class Timeline extends TimelineEventsEmitter {
     return keyframesModels;
   }
 
-  _performClick(pos: MouseData, drag: TimelineDraggableData): boolean {
+  _performClick(pos: TimelineMouseData, drag: TimelineDraggableData): boolean {
     let isChanged = false;
     if (drag && drag.type === TimelineElementType.Keyframe) {
       let mode = TimelineSelectionMode.Normal;
@@ -960,8 +943,8 @@ export class Timeline extends TimelineEventsEmitter {
     });
   }
 
-  _trackMousePos(canvas: HTMLCanvasElement, mouseArgs: MouseEvent | TouchEvent): MouseData {
-    const pos = this._getMousePos(canvas, mouseArgs) as MouseData;
+  _trackMousePos(canvas: HTMLCanvasElement, mouseArgs: MouseEvent | TouchEvent): TimelineMouseData {
+    const pos = this._getMousePos(canvas, mouseArgs) as TimelineMouseData;
     pos.originalVal = this._mousePosToVal(pos.x, false);
     pos.snapVal = this._mousePosToVal(pos.x, true);
     pos.val = pos.originalVal;
@@ -1055,7 +1038,7 @@ export class Timeline extends TimelineEventsEmitter {
     return false;
   }
 
-  _scrollByPan(start: MouseData, pos: MouseData, scrollStartPos: DOMPoint): void {
+  _scrollByPan(start: TimelineMouseData, pos: TimelineMouseData, scrollStartPos: DOMPoint): void {
     if (!start || !pos) {
       return;
     }
@@ -1514,7 +1497,7 @@ export class Timeline extends TimelineEventsEmitter {
    * Method is used for the optimization.
    * Only visible part should be rendered.
    */
-  _cutBounds(rect: DOMRect): CutBoundsRect {
+  _cutBounds(rect: DOMRect): TimelineCutBoundsRectResults {
     if (!rect) {
       return null;
     }
@@ -1544,7 +1527,7 @@ export class Timeline extends TimelineEventsEmitter {
         y: y,
         overlapY: Math.abs(offsetH) > 0,
         overlapX: Math.abs(offsetW) > 0,
-      } as CutBoundsRect;
+      } as TimelineCutBoundsRectResults;
     }
     return null;
   }
@@ -1974,7 +1957,7 @@ export class Timeline extends TimelineEventsEmitter {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _getMousePos(canvas: HTMLCanvasElement, e: TouchEvent | MouseEvent | any): MouseData {
+  _getMousePos(canvas: HTMLCanvasElement, e: TouchEvent | MouseEvent | any): TimelineMouseData {
     let radius = 1;
     let clientX = 0;
     let clientY = 0;
@@ -2001,7 +1984,7 @@ export class Timeline extends TimelineEventsEmitter {
       y: y,
       radius,
       args: e,
-    } as MouseData;
+    } as TimelineMouseData;
   }
 
   /**

src/utils/cutBoundsRect.ts

@@ -1,7 +0,0 @@
-/**
- * Cut bounds results.
- */
-export interface CutBoundsRect extends DOMRect {
-  overlapY: boolean;
-  overlapX: boolean;
-}

src/utils/events/timelineClickEvent.ts

@@ -1,16 +1,13 @@
 import { TimelineElement } from '../timelineElement';
 import { TimelineBaseEvent } from './timelineBaseEvent';
+import { TimelineValues } from '../timelineValues';
 
-export class TimelineClickEvent extends TimelineBaseEvent {
+export class TimelineClickEvent extends TimelineBaseEvent implements TimelineValues {
   args: MouseEvent;
   /**
    * Clicked screen position.
    */
   pos: DOMPoint;
-  /**
-   * Click time value.
-   */
-  val: number;
 
   /**
    * Elements list under the click
@@ -20,4 +17,16 @@ export class TimelineClickEvent extends TimelineBaseEvent {
    * Target element
    */
   target: TimelineElement;
+  /**
+   * Value to be used.
+   */
+  val: number;
+  /**
+   * Snapped value.
+   */
+  snapVal: number;
+  /**
+   * Unsnapped original value.
+   */
+  originalVal: number;
 }

src/utils/events/timelineDragEvent.ts

@@ -1,3 +1,4 @@
 import { TimelineClickEvent } from './timelineClickEvent';
 
-export class TimelineDragEvent extends TimelineClickEvent {}
+export class TimelineDragEvent extends TimelineClickEvent {
+}

src/utils/timelineCutBoundsRectResults.ts

@@ -0,0 +1,7 @@
+/**
+ * Helper container. Cut bounds method results.
+ */
+export interface TimelineCutBoundsRectResults extends DOMRect {
+  overlapY: boolean;
+  overlapX: boolean;
+}

src/utils/timelineDraggableData.ts

@@ -1,7 +1,8 @@
 import { TimelineElement } from './timelineElement';
 import { TimelineElementType } from '../enums/timelineElementType';
+import { TimelineValues } from './timelineValues';
 
-export interface TimelineDraggableData {
+export interface TimelineDraggableData extends TimelineValues {
   changed: boolean;
   /**
    * Drag initial click target.
@@ -15,8 +16,4 @@ export interface TimelineDraggableData {
    * Dragging type.
    */
   type: TimelineElementType;
-  /**
-   * current drag position with the offset.
-   */
-  val: number;
 }

src/utils/timelineMouseData.ts

@@ -0,0 +1,12 @@
+import { TimelineValues } from './timelineValues';
+
+/**
+ * Mouse data helper container.
+ */
+export interface TimelineMouseData extends TimelineValues, DOMPoint {
+  /**
+   * Click radius
+   */
+  radius?: number;
+  args?: TouchEvent | MouseEvent;
+}

src/utils/timelineValues.ts

@@ -0,0 +1,17 @@
+/**
+ * Timeline values interface.
+ */
+export interface TimelineValues {
+  /**
+   * Value to be used.
+   */
+  val: number;
+  /**
+   * Snapped value.
+   */
+  snapVal?: number;
+  /**
+   * Unsnapped original value.
+   */
+  originalVal?: number;
+}