1 files changed, 294 insertions, 35 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index f6e0e252..1ddb3977 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -326,6 +326,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
         }
     },
+    _dragLayerIndexes: {
+        value: []
+    },
     _dropLayerID : {
         value: null
     },
@@ -337,6 +340,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 if (newVal !== this._dropLayerID) {
                         this._dropLayerID = newVal;
                         
+                        var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
+                                arrDragLayers = [], 
+                                i = 0, 
+                                dragLayerIndexesLength = this._dragLayerIndexes.length;
+                        
+                        // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order?
+                        
+                        for (i = 0; i < dragLayerIndexesLength; i++) {
+                                var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]];
+                                arrDragLayers.push(myDraggingLayer);
+                                this.arrLayers.splice(this._dragLayerIndexes[i], 1);
+                                this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer);
+                        }
+                                console.log(arrDragLayers);
+                        //this.arrLayers.splice(dropLayerIndex, 0, arrDragLayers);
+                        this.layersDragged = arrDragLayers;
+                        console.log(this.layersDragged);
+                        console.log(this.arrLayers);
+                        this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
+                        this.cacheTimeline();
+                        
+                        this._dropLayerID = null;
+                        this.dragLayerIndexes = [];
+                        this._dragLayerIndexes = [];
+                        this.lastLayerClicked = 0;
+
+                        // 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.
+                        this._deleteHelper = true;
+                        this.needsDraw = true;
+
+/*
                         var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
                                 dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
                                 dragLayer = this.arrLayers[dragLayerIndex];
@@ -355,6 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // So just in case, set the draw routine to delete the helper.
                         this._deleteHelper = true;
                         this.needsDraw = true;
+*/
                 }
         }
     },
@@ -480,6 +516,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             returnObj.layerData = {};
             returnObj.layerData.layerName = null;
             returnObj.layerData.layerID = null;
+            returnObj.layerData.stageElement = null;
             returnObj.layerData.isMainCollapsed = true;
             returnObj.layerData.isPositionCollapsed = true;
             returnObj.layerData.isTransformCollapsed = true;
@@ -584,7 +621,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Bind all document-specific events (pass in true to unbind)
     _bindDocumentEvents : {
         value: function(boolUnbind) {
-            var arrEvents = [ "newLayer",
+            var arrEvents = [ "stageElement",
                              "deleteLayer",
                              "elementAdded",
                              "elementsRemoved",
@@ -895,13 +932,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
         
-    handleSelectionChange:{
-        value:function () {
+        // Event handler for changes in stage selection.
+    handleSelectionChange: {
+        value:function (event) {
+                this.updateLayerSelection();
+                /*
             var layerIndex, 
                 i = 0,
                 j = 0,
                 arrLayersLength = this.arrLayers.length,
-                intNumSelected = this.application.ninja.selectedElements.length,
+                intNumSelected = event.detail.elements.length,
                 checkIndex = 0;
 
             //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected)
@@ -919,12 +959,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // Build an array of indexes of selected layers to give to the selectLayers method
                 var arrSelectedIndexes = [];
                 //this.currentLayerSelected = false;
+
+                                //console.log(event.detail.elements);
+                                //console.log(this.layerRepetition.childComponents);
+
                 for (i = 0; i < intNumSelected; i++) {
-                        var currentCheck = this.application.ninja.selectedElements[i].uuid;
+                        var currentCheck = event.detail.elements[i];
                         //console.log("checking ", currentCheck);
                         for (j = 0; j < arrLayersLength; j++) {
-                                //console.log(".......... ", this.arrLayers[j].layerData.elementsList[0].uuid)
-                                if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) {
+                                //console.log(".......... ", this.arrLayers[j].layerData.stageElement)
+                                // if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) {
+                                if (currentCheck === this.arrLayers[j].layerData.stageElement) {
                                         //console.log("...............Yes!")
                                         arrSelectedIndexes.push(j);
                                 }
@@ -932,17 +977,120 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
                 this.selectLayers(arrSelectedIndexes);
             }
+            */
         }
     },
 
+        // Select the layers whose indexes are passed in as arrSelectedIndexes.
+        // Pass in an empty array to clear all selections.
     selectLayers:{
-        value:function (arrSelectedIndexes, userSelection) {
+        value:function (arrSelectedIndexes) {
+                var i = 0,
+                        j = 0,
+                        arrLayersLength = this.arrLayers.length,
+                        arrSelectedIndexesLength = arrSelectedIndexes.length,
+                        currentLayersSelectedLength = this.currentLayersSelected.length,
+                        boolContinue = false,
+                        arrSelectedLayers = false,
+                        arrCurrentElementsSelected = [];
+                /*
+                                        console.log(arrSelectedIndexes);
+                        console.log(this.currentLayersSelected);
+                // Compare arrSelectedIndexes with this.currentLayersSelected
+                // If the items are the same, we do not need to do anything.
+                if (arrSelectedIndexesLength !== currentLayersSelectedLength) {
+                        // Different length in the arrays, we definitely need to continue.
+                        console.log('diferent length')
+                        boolContinue = true;
+                } else {
+                        // Check each selected index and see if it's in this.currentLayersSelected
+                        // If we find one that isn't, we need to continue
+
+                        for (i = 0; i < arrSelectedIndexesLength; i++) {
+                                console.log('checking for ', arrSelectedIndexes[i]);
+                                        if (this.currentLayersSelected.indexOf(arrSelectedIndexes[i]) === -1) {
+                                                // Ooops, one of them was not found.
+                                                boolContinue = true;
+                                        }
+                        }
+                }
+                if (boolContinue === false) {
+                        console.log('exiting')
+                        return;
+                }
+                */
+                
 
+            // Deselect all layers.
+            for (i = 0; i < arrLayersLength; i++) {
+                if (this.arrLayers[i].layerData.isSelected === true) {
+                                        this.arrLayers[i].layerData.isSelected = false;
+                        this.triggerLayerBinding(i);
+                }
+            }
+            if (this.currentLayersSelected !== false) {
+                this.currentLayersSelected = false;
+            }
+            
+            // If we are actually going to be selecting things, create an empty array to use