Change DOM/layer handling workflow

Signed-off-by: Jonathan Duran <jduran@motorola.com>

1 files changed, 95 insertions, 57 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a0e2376a..67081cda 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -108,6 +108,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.initTimelineView();
         }
     },
+
     _isLayer: {
         value: false
     },
@@ -120,6 +121,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:true
     },
 
+    _firstLayerDraw:{
+        value:false,
+        writable:true
+    },
+
     willDraw: {
         value: function() {
             if (this._isLayer) {
@@ -155,7 +161,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
             // Default to one layer for new doc
 //            this.newLayer();
-            NJevent('newLayer');
+            this._hashKey="123";
+            _firstLayerDraw = false;
+            NJevent('newLayer',this._hashKey);
+            _firstLayerDraw = true;
+
             // TODO - add condition for existing doc and parse DOM for top level elements
         }
     },
@@ -190,6 +200,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function(event){
             event.stopPropagation();
             this._deleteKeyDown=false;
+            if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
+                this._hashKey="123";
+            }
             NJevent('deleteLayer')
         }
     },
@@ -201,11 +214,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
              this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid;
              this.currentElement= event.detail.element;
 
-             while(this.arrLayers.pop()){
-             }
-             while(this.arrTracks.pop()){
-             }
-
+//             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)){
@@ -237,39 +251,39 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
              return;
              }
 
-             if(this._isElementAdded){
-                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;
-                            }
-                    }
-                }
+//                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;
+//                            }
+//                    }
+//                }
+
 
-                if(this._isLayerAdded===false){
                       var newLayerName = "",
                         //thingToPush = Layer.create(),
                         thingToPush = {},
@@ -278,6 +292,11 @@ 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;
@@ -288,10 +307,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         thingToPush.isTransformCollapsed = true;
                         thingToPush.isStyleCollapsed = false;
                         thingToPush.arrLayerStyles = [];
-                        thingToPush.element=this.layerElement;
+                        thingToPush.element=[];
                         thingToPush.deleted=false;
                         thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
-                        this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid;
+                       // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid;
 
                         newTrack.trackID = this.currentLayerNumber;
                         newTrack.isMainCollapsed = true;
@@ -300,7 +319,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         newTrack.isStyleCollapsed = false;
                         newTrack.tweens = [];
 
-
                         // If a layer is selcted, splice the new layer on top
                         // Otherwise, just push the new layer in at the bottom.
 
@@ -312,20 +330,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                             newTrack.trackPosition=myIndex;
                             this.arrLayers.splice(myIndex, 0, thingToPush);
                             this.arrTracks.splice(myIndex, 0, newTrack);
+                            this.currentLayerSelected= this.arrLayers[myIndex];
                             this.layerRepetition.selectedIndexes = [myIndex];
                         } else {
-                            this.arrLayers.splice(0, 0, thingToPush);
-                            this.arrTracks.splice(0, 0, newTrack);
+                            this.arrLayers.push(thingToPush);
+                            this.arrTracks.push(newTrack);
                             thingToPush.layerPosition=this.arrLayers.length-1;