Timeline : Layers & DOM enchancement

- Undo & Redo of Layers within same container
- Undo & Redo of Layers between different containers
- Adding the element on the layer selected else default is the last  layer drawn

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>

1 files changed, 304 insertions, 174 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 67081cda..0a4a096f 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -113,12 +113,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value: false
     },
 
-    _isLayerAdded:{
-        value:false
-    },
-
-    addButtonClicked:{
-        value:true
+    _firstTimeLoaded:{
+        value:true,
+        writable:true
     },
 
     _firstLayerDraw:{
@@ -129,11 +126,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     willDraw: {
         value: function() {
             if (this._isLayer) {
-                this.addButtonClicked=false;
-                this._isElementAdded=true;
-                NJevent('newLayer',this)
-                this._isLayer = false;
-                this.addButtonClicked=true;
+                this.insertLayer();
+                this._isLayer = false;;
             }
         }
     },
@@ -203,7 +197,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
                 this._hashKey="123";
             }
-            NJevent('deleteLayer')
+            this.removeLayer();
         }
     },
 
@@ -211,23 +205,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function(event){
              var i=0;
              this.currentParentNode=this.application.ninja.currentSelectedContainer.parentNode;
-             this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid;
-             this.currentElement= event.detail.element;
-
-//             if(this._firstLayerDraw===false){
-//                 while(this.arrLayers.pop()){
-//                 }
-//                 while(this.arrTracks.pop()){
-//                 }
-//             }
-
-             this._hashKey = event.detail.element.uuid;
-             if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){
-                this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey);
-                this._hashFind = true;
-                NJevent('newLayer');
 
-            }
+             if(this._firstTimeLoaded){
+                     this._firstTimeLoaded=false;
+             }else{
+                     while(this.arrLayers.pop()){
+                     }
+                     while(this.arrTracks.pop()){
+                     }
+
+                     if(event.detail.element.id==="UserContent"){
+                         this._hashKey= "123";
+                     }else{
+                         this._hashKey = event.detail.element.uuid;
+                     }
+
+                     if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){
+                        this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey);
+                        this._hashFind = true;
+                     }
+                     NJevent('newLayer',event.detail);
+
+             }
 
         }
     },
@@ -250,40 +249,52 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
              this._hashFind=false;
              return;
              }
+             if(event.detail._undoStatus){
+                        if(this.application.ninja.currentSelectedContainer.id==="UserContent" && event.detail._el.parentElementUUID===123 ){
+                                dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID);
+                                while(dLayer[hashVariable]){
+                                     if(dLayer[hashVariable]._layerID === event.detail._el._layerID){
+                                                         dLayer[hashVariable].deleted=false;
+                                                         this.arrLayers.splice(event.detail._layerPosition,1,event.detail._el);
+                                                         this.arrTracks.splice(event.detail._layerPosition,1,event.detail._track);
+                                                         break;
+
+                                                }
+                                     hashVariable++;
+                                }
 
+                                }
+
+                        else if(event.detail._el.parentElementUUID!==this.application.ninja.currentSelectedContainer.uuid){
+                                dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID);
+                                while(dLayer[hashVariable]){
+                                    if(dLayer[hashVariable]._layerID===event.detail._el._layerID){
+                                        dLayer[hashVariable].deleted=false;
+                                        parentNode=dLayer[hashVariable].parentElement;
+                                        break;
+                                    }
+                                    hashVariable++;
+                                }
+                                this._setBreadCrumb=true;
+                                NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb});
+                          }else{
+                                dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID);
+                                while(dLayer[hashVariable]){
+                                     if(dLayer[hashVariable]._layerID === event.detail._el._layerID){
+                                         dLayer[hashVariable].deleted=false;
+                                         this.arrLayers.splice(event.detail._layerPosition,1,event.detail._el);
+                                         this.arrTracks.splice(event.detail._layerPosition,1,event.detail._track);
+                                         break;
+
+                                    }
+                                    hashVariable++;
+                                }
+                            }
+             }
 
-//                if(this.addButtonClicked){
-//                    layerObject = this.hashInstance.getItem(this.application.ninja.currentSelectedContainer.uuid);
-//                    trackObject = this.hashTrackInstance.getItem(this.application.ninja.currentSelectedContainer.uuid);
-//                    if(layerObject!==undefined){
-//                            while(layerObject[hashVariable]){
-//                                if(event.detail.parentElement!==this.application.ninja.currentSelectedContainer){
-//                                    dLayer=this.hashInstance.getItem(event.detail.parentNode.uuid);
-//                                        while(dLayer[hashVariable]){
-//                                            if(dLayer[hashVariable].element===event.detail){
-//                                                dLayer[hashVariable].deleted=true;
-//                                                parentNode=dLayer[hashVariable].parentElement;
-//                                                break;
-//                                            }
-//                                            hashVariable++;
-//                                        }
-//                                        this._setBreadCrumb=true;
-//                                        NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb});
-//
-//                                }
-//                                else if(layerObject[hashVariable].element===event.detail){
-//                                    this.arrLayers.splice(layerObject[hashVariable].layerPosition,0,layerObject[hashVariable]);
-//                                    this.arrTracks.splice(trackObject[hashVariable].trackPosition,0,trackObject[hashVariable]);
-//                                    this._isLayerAdded=true;
-//                                    break;
-//                                }
-//                                hashVariable++;
-//                                this._isLayerAdded=false;
-//                            }
-//                    }
-//                }
 
 
+            else{
                       var newLayerName = "",
                         //thingToPush = Layer.create(),
                         thingToPush = {},
@@ -292,11 +303,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         myIndex = 0;
 
                     // Build the thingToPush object
-                        if(_firstLayerDraw){
-                            if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
-                                this._hashKey="123";
-                            }
-                        }
 
                         this.currentLayerNumber = this.currentLayerNumber +1;
                         newLayerName = "Layer " + this.currentLayerNumber;
@@ -309,8 +315,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         thingToPush.arrLayerStyles = [];
                         thingToPush.element=[];
                         thingToPush.deleted=false;
+                        if(_firstLayerDraw){
+                        thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid;