Timeline: Multiselect improvements. New convenience methods. Multiselect

drag and drop.

5 files changed, 322 insertions, 48 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..eecf319e 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -17,7 +17,7 @@ exports.ElementController = Montage.create(Component, {
                 if(selectedLayerIndex === 0) {
                     this.application.ninja.currentSelectedContainer.appendChild(el);
                 } else {
-                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0];
+                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.stageElement;
                     element.parentNode.insertBefore(el, element.nextSibling);
                 }
             } else {
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 06514076..9c8a9ac4 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -524,9 +524,9 @@ exports.ElementMediator = Montage.create(Component, {
             length = layersDraggedArray.length;
 
             for(var i=0; documentRoot.children[i]; i++) {
-                if(documentRoot.children[i] === layerDroppedAfter.layerData.elementsList[0]) {
+                if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) {
                     if(length >0){
-                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0], documentRoot.children[i]);
+                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]);
                     }
 
                     /* Will require for Multiple Drag n Drop */
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 418d2226..4a737490 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -133,6 +133,20 @@ var Layer = exports.Layer = Montage.create(Component, {
         }
     },
     
+    _stageElement: {
+        value: null
+    },
+    
+    stageElement: {
+        get: function() {
+                return this._stageElement;
+        },
+        set: function(newVal) {
+                this._stageElement = newVal;
+                this.layerData.stageElement = newVal;
+        }
+    },
+    
     
     _elementsList : {
         value: []
@@ -398,6 +412,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 
             this.layerName = this.layerData.layerName;
             this.layerID = this.layerData.layerID;
+            this.stageElement = this.layerData.stageElement
             this.arrLayerStyles = this.layerData.arrLayerStyles;
             this.isMainCollapsed = this.layerData.isMainCollapsed;
             this.isPositionCollapsed = this.layerData.isPositionCollapsed;
@@ -678,7 +693,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = this._layerEditable.value;
                         this.needsDraw = true;
                         this.application.ninja.documentController.activeDocument.needsSave = true;
-            this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value);
+            this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value);
                 }
         },
         handleAddStyleClick: {
@@ -790,7 +805,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleDragstart: {
                 value: function(event) {
-                        this.parentComponent.parentComponent.dragLayerID = this.layerID;
+                        //this.parentComponent.parentComponent.dragLayerID = this.layerID;
             event.dataTransfer.setData('Text', 'Layer');
             this.parentComponent.parentComponent.draggingType = "layer";
                 }
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, {