Fix dragging items that have a React template (#2211)

* Hide vertically hidden ranged items in groups that are not visible
* Add element to templates options
* Fix comment typo
* Add documentation for react mounting
* add react example
* Fix typo
* fix title
* Fix review comments
* Add vis-drag-center to fix dragging bug when template is react component

lib/timeline/component/css/item.css

@@ -136,6 +136,15 @@
   color: white;
 }
 
+.vis-item .vis-drag-center {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0px;
+  cursor: move;
+}
+
 .vis-item.vis-range .vis-drag-left {
   position: absolute;
   width: 24px;

lib/timeline/component/item/BoxItem.js

@@ -164,6 +164,7 @@ BoxItem.prototype.redraw = function() {
     this.dirty = false;
   }
 
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.box);
 };
 

lib/timeline/component/item/Item.js

@@ -287,6 +287,7 @@ Item.prototype._updateStyle = function(element) {
   }
 };
 
+
 /**
  * Stringify the items contents
  * @param {string | Element | undefined} content
@@ -315,4 +316,27 @@ Item.prototype.getWidthRight = function () {
   return 0;
 };
 
+/**
+ * Repaint a drag area on the center of the item when the item is selected
+ * @protected
+ */
+Item.prototype._repaintDragCenter = function () {
+  if (this.selected && this.options.editable.updateTime && !this.dom.dragCenter) {
+    // create and show drag area
+    var dragCenter = document.createElement('div');
+    dragCenter.className = 'vis-drag-center';
+    dragCenter.dragCenterItem = this;
+
+    this.dom.box.appendChild(dragCenter);
+    this.dom.dragCenter = dragCenter;
+  }
+  else if (!this.selected && this.dom.dragCenter) {
+    // delete drag area
+    if (this.dom.dragCenter.parentNode) {
+      this.dom.dragCenter.parentNode.removeChild(this.dom.dragCenter);
+    }
+    this.dom.dragCenter = null;
+  }
+};
+
 module.exports = Item;

lib/timeline/component/item/PointItem.js

@@ -140,7 +140,8 @@ PointItem.prototype.redraw = function() {
 
     this.dirty = false;
   }
-
+
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.point);
 };
 

lib/timeline/component/item/RangeItem.js

@@ -124,6 +124,7 @@ RangeItem.prototype.redraw = function() {
     this.dirty = false;
   }
   this._repaintDeleteButton(dom.box);
+  this._repaintDragCenter();
   this._repaintDragLeft();
   this._repaintDragRight();
 };