Timeline: Improved drag-and-drop performance. Also fix problems with

expand/collapse getting out of synch during drag-and-drop.

3 files changed, 36 insertions, 40 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b8ab1539..3bcc1401 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -311,11 +311,9 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isMainCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isMainCollapsed) {
-                        this.log('layer.js: isMainCollapsed: ' + newVal);
-                        this._isMainCollapsed = newVal;
-                        this.layerData.isMainCollapsed = newVal;
-                }
+                        this._isMainCollapsed = newVal;
+                        this.layerData.isMainCollapsed = newVal;
+
         }
     },
     
@@ -329,10 +327,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isTransformCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isTransformCollapsed) {
-                        this._isTransformCollapsed = newVal;
-                        this.layerData.isTransformCollapsed = newVal;
-                }
+                        this._isTransformCollapsed = newVal;
+                        this.layerData.isTransformCollapsed = newVal;
         }
     },
     
@@ -346,10 +342,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isPositionCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isPositionCollapsed) {
-                        this._isPositionCollapsed = newVal;
-                        this.layerData.isPositionCollapsed = newVal;
-                }
+                        this._isPositionCollapsed = newVal;
+                        this.layerData.isPositionCollapsed = newVal;
         }
     },
     
@@ -363,10 +357,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._isStyleCollapsed;
         },
         set: function(newVal) {
-                if (newVal !== this._isStyleCollapsed) {
-                        this._isStyleCollapsed = newVal;
-                        this.layerData.isStyleCollapsed = newVal;
-                }
+                        this._isStyleCollapsed = newVal;
+                        this.layerData.isStyleCollapsed = newVal;
         }
     },
     _bypassAnimation : {
@@ -379,7 +371,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._bypassAnimation;
         },
         set: function(newVal) {
-                if ((newVal !== this._bypassAnimation) && (typeof(this.layerData) !== "undefined")) {
+                if (typeof(this.layerData) !== "undefined") {
                         this._bypassAnimation = newVal;
                         this.layerData.bypassAnimation = newVal;        
                 }
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 647d2f4e..2df447db 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -294,12 +294,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 if (newVal !== this._dropLayerID) {
                         this._dropLayerID = newVal;
                         
-                        var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
+                        var myNewArray = [],
+                                dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
                                 dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
-                                dragLayer = this.arrLayers[dragLayerIndex];
+                                dragLayer = myNewArray[dragLayerIndex],
+                                thing;
+                        
+                        // Copy arrLayers into new array; we want to avoid referencing.
+                        for (thing in this.arrLayers) {
+                                myNewArray[thing] = this.arrLayers[thing];
+                        }
 
-                        this.arrLayers.splice(dragLayerIndex, 1);
-                        this.arrLayers.splice(dropLayerIndex, 0, dragLayer);
+                                // Operate on new array
+                        myNewArray.splice(dragLayerIndex, 1);
+                        myNewArray.splice(dropLayerIndex, 0, dragLayer);
+                        
+                        // Feed new array into repetition
+                        this.arrLayers = myNewArray;
+                        // Store reference in currentDocument.
                         this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
                         
                         // Clear for future DnD
@@ -307,7 +319,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         this._dragLayerID = null;
                         
                         // Sometimes, just to be fun, the drop and dragend events don't fire.
-                        // So just in case, set the draw routine to delete the helper.
+                        // To avoid this, set the draw routine to delete the helper here.
                         this._deleteHelper = true;
                         this.needsDraw = true;
                 }
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index edca4306..8b639758 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -42,10 +42,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isMainCollapsed;
         },
         set:function (newVal) {
-            if (newVal !== this._isMainCollapsed) {
-                this._isMainCollapsed = newVal;
-                this.trackData.isMainCollapsed = newVal;
-            }
+            this._isMainCollapsed = newVal;
+            this.trackData.isMainCollapsed = newVal;
         }
     },
     _isTransformCollapsed:{
@@ -56,10 +54,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isTransformCollapsed;
         },
         set:function (newVal) {
-            if (newVal !== this._isTransformCollapsed) {
-                this._isTransformCollapsed = newVal;
-                this.trackData.isTransformCollapsed = newVal;
-            }
+            this._isTransformCollapsed = newVal;
+            this.trackData.isTransformCollapsed = newVal;
         }
     },
     _isPositionCollapsed:{
@@ -70,10 +66,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isPositionCollapsed;
         },
         set:function (newVal) {
-            if (newVal !== this._isPositionCollapsed) {
-                this._isPositionCollapsed = newVal;
-                this.trackData.isPositionCollapsed = newVal;
-            }
+            this._isPositionCollapsed = newVal;
+            this.trackData.isPositionCollapsed = newVal;
         }
     },
     _isStyleCollapsed:{
@@ -84,10 +78,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isStyleCollapsed;
         },
         set:function (newVal) {
-            if (newVal !== this._isStyleCollapsed) {
-                this._isStyleCollapsed = newVal;
-                this.trackData.isStyleCollapsed = newVal;
-            }
+            this._isStyleCollapsed = newVal;
+            this.trackData.isStyleCollapsed = newVal;
         }
     },
     _bypassAnimation : {
@@ -100,7 +92,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 return this._bypassAnimation;
         },
         set: function(newVal) {
-                if ((newVal !== this._bypassAnimation) && (typeof(this.trackData) !== "undefined")) {
+                if (typeof(this.trackData) !== "undefined") {
                         this._bypassAnimation = newVal;
                 this.trackData.bypassAnimation = newVal;
                 }