From 80c342f3d438b16ed0b20b3628f01d9936ddf94a Mon Sep 17 00:00:00 2001
From: Patrice Sandhu <psandhu@zoiclabs.com>
Date: Sun, 17 Feb 2019 15:20:49 -0800
Subject: [PATCH 1/2] Fixes issue #63 which caused group drag and reorder to
 behave inconsistently.

---
 lib/timeline/component/Group.js         |  2 ++
 lib/timeline/component/ItemSet.js       | 45 +++++++++++++++++--------
 lib/timeline/component/css/labelset.css |  4 +++
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index f6db6cf..c7a7c99 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -127,6 +127,8 @@ class Group {
    * @param {Object} data   Group data, can contain properties content and className
    */
   setData(data) {
+    if (this.itemSet.groupTouchParams.isDragging) return
+
     // update contents
     let content;
     let templateFunction;
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index f06fc77..31db203 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -211,9 +211,12 @@ class ItemSet extends Component {
     this.popup = null;
 
     this.touchParams = {}; // stores properties while dragging
-    this.groupTouchParams = {};
+    this.groupTouchParams = {
+      group: null,
+      isDragging: false
+    };
+  
     // create the HTML DOM
-
     this._create();
 
     this.setOptions(options);
@@ -1845,19 +1848,29 @@ class ItemSet extends Component {
       util.addClassName(group.dom.label, collapsedDirClassName);
     }
   }
-
+  
+  toggleGroupDragClassName(group) {
+    group.dom.label.classList.toggle('timeline-group-is-dragging');
+    group.dom.foreground.classList.toggle('timeline-group-is-dragging');
+  }
+  
   _onGroupDragStart(event) {
-      if (this.options.groupEditable.order) {
-          this.groupTouchParams.group = this.groupFromTarget(event);
-          
-          if (this.groupTouchParams.group) {
-              event.stopPropagation();
-              
-              this.groupTouchParams.originalOrder = this.groupsData.getIds({
-                order: this.options.groupOrder
-              });
-          }
+    if (this.groupTouchParams.isDragging) return;
+
+    if (this.options.groupEditable.order) {
+      this.groupTouchParams.group = this.groupFromTarget(event);
+      
+      if (this.groupTouchParams.group) {
+        event.stopPropagation();      
+        
+        this.groupTouchParams.isDragging = true;
+        this.toggleGroupDragClassName(this.groupTouchParams.group);
+        
+        this.groupTouchParams.originalOrder = this.groupsData.getIds({
+          order: this.options.groupOrder
+        });
       }
+    }
   }
 
   _onGroupDrag(event) {
@@ -1964,6 +1977,8 @@ class ItemSet extends Component {
   }
 
   _onGroupDragEnd(event) {
+    this.groupTouchParams.isDragging = false;
+
     if (this.options.groupEditable.order && this.groupTouchParams.group) {
       event.stopPropagation();
           
@@ -2021,7 +2036,9 @@ class ItemSet extends Component {
       });
 
       me.body.emitter.emit('groupDragged', { groupId: id });
-      }
+      this.toggleGroupDragClassName(this.groupTouchParams.group);
+      this.groupTouchParams.group = null;
+    }
   }
 
   /**
diff --git a/lib/timeline/component/css/labelset.css b/lib/timeline/component/css/labelset.css
index 9fa5b7c..51d88c1 100644
--- a/lib/timeline/component/css/labelset.css
+++ b/lib/timeline/component/css/labelset.css
@@ -25,6 +25,10 @@
   cursor: pointer;
 }
 
+.timeline-group-is-dragging {
+  background: rgba(0, 0, 0, .1);
+}
+
 .timeline-labelset .timeline-label:last-child {
   border-bottom: none;
 }

From c91ed981b0f7a0a910b87895006b89297ccddfe8 Mon Sep 17 00:00:00 2001
From: Patrice Sandhu <pmsandhu@ucla.edu>
Date: Sun, 17 Feb 2019 23:57:32 -0800
Subject: [PATCH 2/2] Add semicolon.

---
 lib/timeline/component/Group.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index c7a7c99..ee1c224 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -127,7 +127,7 @@ class Group {
    * @param {Object} data   Group data, can contain properties content and className
    */
   setData(data) {
-    if (this.itemSet.groupTouchParams.isDragging) return
+    if (this.itemSet.groupTouchParams.isDragging) return;
 
     // update contents
     let content;