drag event arguments are returned. Added strong typed events subscription.

demo/index.html

@@ -141,12 +141,14 @@
     });
 
     let dragHandler = function (object, eventName) {
-      document.getElementById("currentKeyframes").innerHTML = `Keyframe value: ${object.keyframes[0].val}. Selected (${object.keyframes.length}). ${eventName}`;
+      if (object.elements) {
+        document.getElementById("currentKeyframes").innerHTML = `Keyframe value: ${object.elements[0].val}. Selected (${object.elements.length}). ${eventName}`;
+      }
     }
 
-    timeline.on("dragstarted", function (obj) { dragHandler(obj, 'dragstarted') });
-    timeline.on("drag", function (obj) { dragHandler(obj, 'drag') });
-    timeline.on("dragfinished", function (obj) { dragHandler(obj, 'dragfinished') });
+    timeline.onDragStarted(function (obj) { dragHandler(obj, 'dragstarted') });
+    timeline.onDrag(function (obj) { dragHandler(obj, 'drag') });
+    timeline.onDragFinished(function (obj) { dragHandler(obj, 'dragfinished') });
 
   </script>
 </body>

lib/animation-timeline.js

@@ -770,14 +770,10 @@ var TimelineClickEvent = /*#__PURE__*/function () {
 
   return TimelineClickEvent;
 }();
-// CONCATENATED MODULE: ./src/timeline.ts
+// CONCATENATED MODULE: ./src/utils/events/timelineDragEvent.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 timeline_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function timeline_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 timeline_createClass(Constructor, protoProps, staticProps) { if (protoProps) timeline_defineProperties(Constructor.prototype, protoProps); if (staticProps) timeline_defineProperties(Constructor, staticProps); return Constructor; }
+function timelineDragEvent_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); }
 
@@ -791,11 +787,48 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+
+var TimelineDragEvent = /*#__PURE__*/function (_TimelineClickEvent) {
+  _inherits(TimelineDragEvent, _TimelineClickEvent);
+
+  var _super = _createSuper(TimelineDragEvent);
+
+  function TimelineDragEvent() {
+    timelineDragEvent_classCallCheck(this, TimelineDragEvent);
+
+    return _super.apply(this, arguments);
+  }
+
+  return TimelineDragEvent;
+}(TimelineClickEvent);
+// 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); }
+
+function timeline_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function timeline_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 timeline_createClass(Constructor, protoProps, staticProps) { if (protoProps) timeline_defineProperties(Constructor.prototype, protoProps); if (staticProps) timeline_defineProperties(Constructor, staticProps); return Constructor; }
+
+function timeline_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) timeline_setPrototypeOf(subClass, superClass); }
+
+function timeline_setPrototypeOf(o, p) { timeline_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return timeline_setPrototypeOf(o, p); }
+
+function timeline_createSuper(Derived) { var hasNativeReflectConstruct = timeline_isNativeReflectConstruct(); return function () { var Super = timeline_getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = timeline_getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return timeline_possibleConstructorReturn(this, result); }; }
+
+function timeline_possibleConstructorReturn(self, call) { if (call && (timeline_typeof(call) === "object" || typeof call === "function")) { return call; } return timeline_assertThisInitialized(self); }
+
+function timeline_assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function timeline_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 _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
 
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = timeline_getPrototypeOf(object); if (object === null) break; } return object; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function timeline_getPrototypeOf(o) { timeline_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return timeline_getPrototypeOf(o); }
 
 function timeline_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; }
 
@@ -811,10 +844,11 @@ function timeline_defineProperty(obj, key, value) { if (key in obj) { Object.def
 
 
 
+
 var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
-  _inherits(Timeline, _TimelineEventsEmitte);
+  timeline_inherits(Timeline, _TimelineEventsEmitte);
 
-  var _super = _createSuper(Timeline);
+  var _super = timeline_createSuper(Timeline);
 
   /**
    * component container.
@@ -868,77 +902,77 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
     _this = _super.call(this);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "container", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "container", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "canvas", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "canvas", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "scrollContainer", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "scrollContainer", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "scrollContent", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "scrollContent", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "ctx", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "ctx", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "options", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "options", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "startPos", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "startPos", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "scrollStartPos", {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "scrollStartPos", {
       x: 0,
       y: 0
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "currentPos", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "currentPos", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "selectionRect", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "selectionRect", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "selectionRectEnabled", false);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "selectionRectEnabled", false);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "drag", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "drag", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "startedDragWithCtrl", false);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "startedDragWithCtrl", false);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "startedDragWithShiftKey", false);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "startedDragWithShiftKey", false);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "clickTimeout", 0);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "clickTimeout", 0);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "lastClickTime", 0);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "lastClickTime", 0);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "consts", new TimelineConsts());
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "consts", new TimelineConsts());
 
-    timeline_defineProperty(_assertThisInitialized(_this), "scrollFinishedTimerRef", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "scrollFinishedTimerRef", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "selectedKeyframes", []);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "selectedKeyframes", []);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "val", 0);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "val", 0);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "pixelRatio", 1);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "pixelRatio", 1);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "currentZoom", 0);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "currentZoom", 0);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "intervalRef", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "intervalRef", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "autoPanLastActionDate", 0);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "autoPanLastActionDate", 0);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "isPanStarted", false);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "isPanStarted", false);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "interactionMode", TimelineInteractionMode.Selection);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "interactionMode", TimelineInteractionMode.Selection);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "lastUsedArgs", null);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "lastUsedArgs", null);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "model", void 0);
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "model", void 0);
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleBlurEvent", function () {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleBlurEvent", function () {
       _this.cleanUpSelection();
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleWindowResizeEvent", function () {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleWindowResizeEvent", function () {
       // Rescale and redraw
       _this.rescale();
 
       _this.redraw();
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleDocumentKeydownEvent", function (args) {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleDocumentKeydownEvent", function (args) {
       // ctrl + a. Select all keyframes
       if (args.which === 65 && _this.controlKeyPressed(args)) {
         _this.performSelection(true);
@@ -948,7 +982,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       }
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleScrollEvent", function (args) {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleScrollEvent", function (args) {
       _this.clearScrollFinishedTimer(); // Set a timeout to run event 'scrolling end'.
 
 
@@ -973,10 +1007,10 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       scrollData.scrollHeight = _this.scrollContainer.scrollHeight;
       scrollData.scrollWidth = _this.scrollContainer.scrollWidth;
 
-      _get((_thisSuper = _assertThisInitialized(_this), _getPrototypeOf(Timeline.prototype)), "emit", _thisSuper).call(_thisSuper, TimelineEvents.Scroll, scrollData);
+      _get((_thisSuper = timeline_assertThisInitialized(_this), timeline_getPrototypeOf(Timeline.prototype)), "emit", _thisSuper).call(_thisSuper, TimelineEvents.Scroll, scrollData);
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleWheelEvent", function (event) {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleWheelEvent", function (event) {
       if (_this.controlKeyPressed(event)) {
         event.preventDefault();
 
@@ -1024,7 +1058,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       }
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleMouseDownEvent", function (args) {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleMouseDownEvent", function (args) {
       var isDoubleClick = Date.now() - _this.lastClickTime < _this.consts.doubleClickTimeoutMs; // Prevent drag of the canvas if canvas is selected as text:
 
 
@@ -1054,12 +1088,12 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       event.target = target;
 
       if (isDoubleClick) {
-        _get((_thisSuper2 = _assertThisInitialized(_this), _getPrototypeOf(Timeline.prototype)), "emit", _thisSuper2).call(_thisSuper2, TimelineEvents.DoubleClick, event);
+        _get((_thisSuper2 = timeline_assertThisInitialized(_this), timeline_getPrototypeOf(Timeline.prototype)), "emit", _thisSuper2).call(_thisSuper2, TimelineEvents.DoubleClick, event);
 
         return;
       }
 
-      _get((_thisSuper3 = _assertThisInitialized(_this), _getPrototypeOf(Timeline.prototype)), "emit", _thisSuper3).call(_thisSuper3, TimelineEvents.MouseDown, event);
+      _get((_thisSuper3 = timeline_assertThisInitialized(_this), timeline_getPrototypeOf(Timeline.prototype)), "emit", _thisSuper3).call(_thisSuper3, TimelineEvents.MouseDown, event);
 
       _this.clickTimeout = Date.now();
       _this.lastClickTime = Date.now();
@@ -1087,7 +1121,8 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
           if (!target.keyframe.selected && !_this.controlKeyPressed(args) && !args.shiftKey) {
             _this.performSelection(true, target.keyframe);
-          }
+          } // Allow to drag all selected keyframes on a screen
+
 
           _this.drag.elements = _this.getSelectedElements();
         } else if (target.type === TimelineElementType.Stripe) {
@@ -1095,13 +1130,15 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           _this.drag.elements = keyframes && Array.isArray(keyframes) ? keyframes.map(function (keyframe) {
             return _this.convertToElement(_this.drag.target.row, keyframe);
           }) : [];
+        } else {
+          _this.drag.elements = [_this.drag.target];
         }
       }
 
       _this.redraw();
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleMouseMoveEvent", function (args) {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleMouseMoveEvent", function (args) {
       if (!args) {
         args = _this.lastUsedArgs;
       } else {
@@ -1222,7 +1259,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       }
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "handleMouseUpEvent", function (args) {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "handleMouseUpEvent", function (args) {
       if (_this.startPos) {
         //window.releaseCapture();
         var pos = _this.trackMousePos(_this.canvas, args); // Click detection.
@@ -1240,7 +1277,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       }
     });
 
-    timeline_defineProperty(_assertThisInitialized(_this), "redrawInternal", function () {
+    timeline_defineProperty(timeline_assertThisInitialized(_this), "redrawInternal", function () {
       // Rescale when animation is played out of the bounds.
       if (_this.valToPx(_this.val, true) > _this.scrollContainer.scrollWidth) {
         _this.rescale();
@@ -1292,7 +1329,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
 
     if (!_this.canvas || !_this.canvas.getContext) {
       console.log('Cannot initialize canvas context.');
-      return _possibleConstructorReturn(_this, null);
+      return timeline_possibleConstructorReturn(_this, null);
     }
 
     _this.container.style.position = 'relative'; // Generate size container:
@@ -2561,34 +2598,80 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
   }, {
     key: "emitKeyframesSelected",
     value: function emitKeyframesSelected(selectedKeyframes) {
+      // TODO: refine, add changed
       this.emit(TimelineEvents.Selected, {
         keyframes: selectedKeyframes
       });
     }
+    /**
+     * Subscribe on drag started event.
+     */
+
+  }, {
+    key: "onDragStarted",
+    value: function onDragStarted(callback) {
+      this.on(TimelineEvents.DragStarted, callback);
+    }
+    /**
+     * Subscribe on drag event.
+     */
+
+  }, {
+    key: "onDrag",
+    value: function onDrag(callback) {
+      this.on(TimelineEvents.Drag, callback);
+    }
+    /**
+     * Subscribe on drag finished event.
+     */
+
+  }, {
+    key: "onDragFinished",
+    value: function onDragFinished(callback) {
+      this.on(TimelineEvents.DragFinished, callback);
+    }
   }, {
     key: "emitDragStartedEvent",
     value: function emitDragStartedEvent() {
-      this.emit(TimelineEvents.DragStarted, {
-        keyframes: this.drag.elements
-      });
+      var args = this.getDragEventArgs();
+      this.emit(TimelineEvents.DragStarted, args);
+      return args;
     }
   }, {
     key: "emitDragFinishedEvent",
     value: function emitDragFinishedEvent() {
       if (this.drag && this.drag.changed) {
-        this.emit(TimelineEvents.DragFinished, {
-          keyframes: this.drag.elements
-        });
+        var args = this.getDragEventArgs();
+        this.emit(TimelineEvents.DragFinished, args);
+        return args;
       }
     }
   }, {
     key: "emitDragEvent",
     value: function emitDragEvent() {
       if (this.drag) {
+        var args = this.getDragEventArgs();
         this.emit(TimelineEvents.Drag, {
           keyframes: this.drag.elements
         });
+        return args;
       }
+
+      return null;
+    }
+  }, {
+    key: "getDragEventArgs",
+    value: function getDragEventArgs() {
+      var draggableArguments = new TimelineDragEvent();
+
+      if (this.drag) {
+        draggableArguments.val = this.currentPos.val;
+        draggableArguments.pos = this.currentPos;
+        draggableArguments.elements = this.drag.elements;
+        draggableArguments.target = this.drag.target;
+      }
+
+      return draggableArguments;
     }
   }, {
     key: "setScrollLeft",
@@ -2918,7 +3001,7 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
           if (Object.prototype.hasOwnProperty.call(from, key)) {
             if (to[key] == undefined) {
               to[key] = from[key];
-            } else if (_typeof(to[key]) === 'object') {
+            } else if (timeline_typeof(to[key]) === 'object') {
               mergeOptionsDeep(to[key], from[key]);
             }
           }
@@ -2972,39 +3055,6 @@ var timelineSelectedEvent = __webpack_require__(8);
 // EXTERNAL MODULE: ./src/utils/events/timelineScrollEvent.ts
 var timelineScrollEvent = __webpack_require__(9);
 
-// 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) {
-  timelineDragEvent_inherits(TimelineDragEvent, _TimelineClickEvent);
-
-  var _super = timelineDragEvent_createSuper(TimelineDragEvent);
-
-  function TimelineDragEvent() {
-    timelineDragEvent_classCallCheck(this, TimelineDragEvent);
-
-    return _super.apply(this, arguments);
-  }
-
-  return TimelineDragEvent;
-}(TimelineClickEvent);
 // CONCATENATED MODULE: ./src/index.ts
 // bundle entry point
 

src/timeline.ts

@@ -19,6 +19,7 @@ import { TimelineScrollEvent } from './utils/events/timelineScrollEvent';
 import { TimelineSelectedEvent } from './utils/events/timelineSelectedEvent';
 import { TimelineDraggableData } from './utils/timelineDraggableData';
 import { TimelineClickEvent } from './utils/events/timelineClickEvent';
+import { TimelineDragEvent } from './utils/events/timelineDragEvent';
 
 interface MousePoint extends DOMPoint {
   radius: number;
@@ -365,7 +366,7 @@ export class Timeline extends TimelineEventsEmitter {
         if (!target.keyframe.selected && !this.controlKeyPressed(args) && !args.shiftKey) {
           this.performSelection(true, target.keyframe);
         }
-
+        // Allow to drag all selected keyframes on a screen
         this.drag.elements = this.getSelectedElements();
       } else if (target.type === TimelineElementType.Stripe) {
         const keyframes = this.drag.target.row.keyframes;
@@ -375,6 +376,8 @@ export class Timeline extends TimelineEventsEmitter {
                 return this.convertToElement(this.drag.target.row, keyframe) as TimelineClickableElement;
               })
             : [];
+      } else {
+        this.drag.elements = [this.drag.target];
       }
     }
 
@@ -1546,28 +1549,63 @@ export class Timeline extends TimelineEventsEmitter {
   }
 
   private emitKeyframesSelected(selectedKeyframes: Array<TimelineKeyframe>): void {
+    // TODO: refine, add changed
     this.emit(TimelineEvents.Selected, {
       keyframes: selectedKeyframes,
     } as TimelineSelectedEvent);
   }
-  private emitDragStartedEvent(): void {
-    this.emit(TimelineEvents.DragStarted, {
-      keyframes: this.drag.elements,
-    });
+  /**
+   * Subscribe on drag started event.
+   */
+  public onDragStarted(callback: (dragEvent: TimelineDragEvent) => void): void {
+    this.on(TimelineEvents.DragStarted, callback);
+  }
+  /**
+   * Subscribe on drag event.
+   */
+  public onDrag(callback: (dragEvent: TimelineDragEvent) => void): void {
+    this.on(TimelineEvents.Drag, callback);
+  }
+  /**
+   * Subscribe on drag finished event.
+   */
+  public onDragFinished(callback: (dragEvent: TimelineDragEvent) => void): void {
+    this.on(TimelineEvents.DragFinished, callback);
   }
-  private emitDragFinishedEvent(): void {
+  private emitDragStartedEvent(): TimelineDragEvent {
+    const args = this.getDragEventArgs();
+    this.emit(TimelineEvents.DragStarted, args);
+    return args;
+  }
+  private emitDragFinishedEvent(): TimelineDragEvent {
     if (this.drag && this.drag.changed) {
-      this.emit(TimelineEvents.DragFinished, {
-        keyframes: this.drag.elements,
-      });
+      const args = this.getDragEventArgs();
+      this.emit(TimelineEvents.DragFinished, args);
+      return args;
     }
   }
-  private emitDragEvent(): void {
+  private emitDragEvent(): TimelineDragEvent {
     if (this.drag) {
+      const args = this.getDragEventArgs();
       this.emit(TimelineEvents.Drag, {
         keyframes: this.drag.elements,
       });
+
+      return args;
+    }
+
+    return null;
+  }
+  private getDragEventArgs(): TimelineDragEvent {
+    const draggableArguments = new TimelineDragEvent();
+    if (this.drag) {
+      draggableArguments.val = this.currentPos.val;
+      draggableArguments.pos = this.currentPos;
+      draggableArguments.elements = this.drag.elements;
+      draggableArguments.target = this.drag.target;
     }
+
+    return draggableArguments;
   }
   public setScrollLeft(value: number): void {
     if (this.scrollContainer) {

src/utils/timelineDraggableData.ts

@@ -4,13 +4,19 @@ import { TimelineElementType } from '..';
 export interface TimelineDraggableData {
   changed: boolean;
   /**
-   * Drag click target
+   * Drag initial click target.
    */
   target: TimelineClickableElement;
+  /**
+   * Elements to be dragged.
+   */
   elements: Array<TimelineClickableElement>;
+  /**
+   * Dragging type.
+   */
   type: TimelineElementType;
   /**
-   * Current drag data.
+   * current drag position with the offset.
    */
   val: number;
 }