Fixed dragging items (half)

src/timeline/Range.js

@@ -16,7 +16,7 @@ function Range(root, parent, options) {
   this.parent = parent;
   this.options = options || {};
 
-  // drag listeners for draggign
+  // drag listeners for dragging
   this.root.on('dragstart', this._onDragStart.bind(this));
   this.root.on('drag',      this._onDrag.bind(this));
   this.root.on('dragend',   this._onDragEnd.bind(this));

src/timeline/Timeline.js

@@ -427,7 +427,7 @@ Timeline.prototype.setSelection = function setSelection (ids) {
 Timeline.prototype.getSelection = function getSelection() {
   var itemOrGroupSet = (this.itemSet || this.groupSet);
 
-  if (itemOrGroupSet) itemOrGroupSet.getSelection() || [];
+  return itemOrGroupSet ? itemOrGroupSet.getSelection() : [];
 };
 
 /**
@@ -556,7 +556,7 @@ Timeline.prototype._onMultiSelectItem = function (event) {
     }
     this.setSelection(selection);
 
-    this.emitter.emit('select', {
+    this.emit('select', {
       items: this.getSelection()
     });
 

src/timeline/component/CustomTime.js

@@ -118,6 +118,7 @@ CustomTime.prototype.getCustomTime = function() {
  * @private
  */
 CustomTime.prototype._onDragStart = function(event) {
+  this.eventParams.dragging = true;
   this.eventParams.customTime = this.customTime;
 
   event.stopPropagation();
@@ -130,6 +131,8 @@ CustomTime.prototype._onDragStart = function(event) {
  * @private
  */
 CustomTime.prototype._onDrag = function (event) {
+  if (!this.eventParams.dragging) return;
+
   var deltaX = event.gesture.deltaX,
       x = this.options.toScreen(this.eventParams.customTime) + deltaX,
       time = this.options.toTime(x);
@@ -151,6 +154,8 @@ CustomTime.prototype._onDrag = function (event) {
  * @private
  */
 CustomTime.prototype._onDragEnd = function (event) {
+  if (!this.eventParams.dragging) return;
+
   // fire a timechanged event
   this.emit('timechanged', {
     time: new Date(this.customTime.valueOf())

src/timeline/component/ItemSet.js

@@ -11,17 +11,11 @@
 function ItemSet(options) {
   this.id = util.randomUUID();
 
-  // event listeners
-  this.eventListeners = {
-    dragstart: this._onDragStart.bind(this),
-    drag: this._onDrag.bind(this),
-    dragend: this._onDragEnd.bind(this)
-  };
-
   // one options object is shared by this itemset and all its items
   this.options = options || {};
   this.itemOptions = Object.create(this.options);
   this.dom = {};
+  this.hammer = null;
 
   var me = this;
   this.itemsData = null;  // DataSet
@@ -98,36 +92,6 @@ ItemSet.types = {
  */
 ItemSet.prototype.setOptions = Component.prototype.setOptions;
 
-
-
-/**
- * Set controller for this component
- * @param {Controller | null} controller
- */
-ItemSet.prototype.setController = function setController (controller) {
-  var event;
-
-  // unregister old event listeners
-  if (this.controller) {
-    for (event in this.eventListeners) {
-      if (this.eventListeners.hasOwnProperty(event)) {
-        this.controller.off(event, this.eventListeners[event]);
-      }
-    }
-  }
-
-  this.controller = controller || null;
-
-  // register new event listeners
-  if (this.controller) {
-    for (event in this.eventListeners) {
-      if (this.eventListeners.hasOwnProperty(event)) {
-        this.controller.on(event, this.eventListeners[event]);
-      }
-    }
-  }
-};
-
 /**
  * Set range (start and end).
  * @param {Range | Object} range  A Range or an object containing start and end.
@@ -204,7 +168,6 @@ ItemSet.prototype._deselect = function _deselect(id) {
 ItemSet.prototype.repaint = function repaint() {
   var asSize = util.option.asSize,
       asString = util.option.asString,
-      asNumber = util.option.asNumber,
       options = this.options,
       orientation = this.getOption('orientation'),
       frame = this.frame;
@@ -240,6 +203,15 @@ ItemSet.prototype.repaint = function repaint() {
 
     parentContainer.appendChild(frame);
     parentContainer.appendChild(this.dom.axis);
+
+    // attach event listeners
+    // TODO: use event listeners from the rootpanel to improve performance
+    this.hammer = Hammer(frame, {
+      prevent_default: true
+    });
+    this.hammer.on('dragstart', this._onDragStart.bind(this));
+    this.hammer.on('drag',      this._onDrag.bind(this));
+    this.hammer.on('dragend',   this._onDragEnd.bind(this));
   }
 
   // update className