From 3addd510462bea9878764112dcb3d6f8c1d0f0d0 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 23:19:33 +0300
Subject: [PATCH] Add vis-drag-center to fix dragging bug when template is
 react component

---
 lib/timeline/component/css/item.css      |  9 +++++++++
 lib/timeline/component/item/BoxItem.js   |  1 +
 lib/timeline/component/item/Item.js      | 24 ++++++++++++++++++++++++
 lib/timeline/component/item/PointItem.js |  3 ++-
 lib/timeline/component/item/RangeItem.js |  1 +
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index 41d22256..0e9327ae 100644
--- a/lib/timeline/component/css/item.css
+++ b/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;
diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js
index f77652bf..2963619b 100644
--- a/lib/timeline/component/item/BoxItem.js
+++ b/lib/timeline/component/item/BoxItem.js
@@ -164,6 +164,7 @@ BoxItem.prototype.redraw = function() {
     this.dirty = false;
   }
 
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.box);
 };
 
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index c70cc0a4..c12a3203 100644
--- a/lib/timeline/component/item/Item.js
+++ b/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;
diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js
index 10a2463c..91b86909 100644
--- a/lib/timeline/component/item/PointItem.js
+++ b/lib/timeline/component/item/PointItem.js
@@ -140,7 +140,8 @@ PointItem.prototype.redraw = function() {
 
     this.dirty = false;
   }
-
+  
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.point);
 };
 
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 8ec29991..5e287f4f 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/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();
 };