From 5bc386c6126e3c6669dd1b524d79c91358716412 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 7 Feb 2012 16:36:58 -0800 Subject: 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 --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 478 +++++++++++++-------- 1 file changed, 304 insertions(+), 174 deletions(-) (limited to 'js/panels/Timeline') 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; thingToPush.parentElement=this.application.ninja.currentSelectedContainer; - // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; + } + newTrack.trackID = this.currentLayerNumber; newTrack.isMainCollapsed = true; @@ -319,32 +328,44 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { newTrack.isStyleCollapsed = false; newTrack.tweens = []; + if(_firstLayerDraw){ + if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ + this._hashKey="123"; + thingToPush.parentElementUUID = 123; + } + } + // If a layer is selcted, splice the new layer on top // Otherwise, just push the new layer in at the bottom. if (!!this.layerRepetition.selectedIndexes) { myIndex = this.layerRepetition.selectedIndexes[0]; - this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); - this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); thingToPush.layerPosition=myIndex; newTrack.trackPosition=myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this.arrTracks.splice(myIndex, 0, newTrack); + this._LayerUndoPosition = myIndex; this.currentLayerSelected= this.arrLayers[myIndex]; this.layerRepetition.selectedIndexes = [myIndex]; + this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); + this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); } else { this.arrLayers.push(thingToPush); this.arrTracks.push(newTrack); thingToPush.layerPosition=this.arrLayers.length-1; newTrack.trackPosition=this.arrTracks.length-1; this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; - + this._LayerUndoPosition = this.arrLayers.length-1; this.hashInstance.setItem(this._hashKey,thingToPush,thingToPush.layerPosition); this.hashTrackInstance.setItem(this._hashKey,newTrack,newTrack.trackPosition); } + this._LayerUndoObject = thingToPush; + this._LayerUndoIndex = thingToPush.layerID ; + this._LayerUndoStatus = true; + this._TrackUndoObject = newTrack; - + } } @@ -355,27 +376,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var dLayer,dTrack,parentNode,hashVariable=0,k=0,index=0,j=0; if (this.arrLayers.length > 0) { - if(this._undoElementDeleted){ - if(event.detail.dataset.parentUUID!==this.application.ninja.currentSelectedContainer.uuid){ - dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID); - 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{ - dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID) - while(dLayer[hashVariable]){ + 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].deleted===true){ - }else if(dLayer[hashVariable].element.uuid === event.detail.uuid){ + }else if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ while(this.arrLayers.length){ - if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){ + if(dLayer[hashVariable]._layerID===this.arrLayers[k]._layerID){ dLayer[hashVariable].deleted=true; this.arrLayers.splice(k,1); this.arrTracks.splice(k,1); @@ -385,113 +394,134 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } 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=true; + 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].deleted===true){ + + }else if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ + while(this.arrLayers.length){ + if(dLayer[hashVariable]._layerID===this.arrLayers[k]._layerID){ + dLayer[hashVariable].deleted=true; + this.arrLayers.splice(k,1); + this.arrTracks.splice(k,1); + break; + } + k++; + } + } + hashVariable++; } } - } + + + + } else{ if (!!this.layerRepetition.selectedIndexes) { var myIndex = this.layerRepetition.selectedIndexes[0]; + this._LayerUndoObject=this.arrLayers[myIndex]; + this._TrackUndoObject=this.arrTracks[myIndex]; + dLayer = this.hashInstance.getItem(this._hashKey); dTrack = this.hashTrackInstance.getItem(this._hashKey); dLayer[myIndex].deleted=true; this.arrLayers.splice(myIndex, 1); this.arrTracks.splice(myIndex, 1); - - } else if(this._deleteKeyDown) { - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - - if(this.deleteElement === this.application.ninja.currentSelectedContainer){ - while(dLayer[hashVariable]){ - dLayer[hashVariable].deleted=true; - hashVariable++; - } - - this.dObject=this.hashInstance.getItem(this.removeLayerFromParentUUid); - hashVariable=0; - while(this.dObject[hashVariable]){ - if(this.application.ninja.currentSelectedContainer===this.dObject[hashVariable].element){ - this.dObject[hashVariable].deleted=true; - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":this.currentParentNode,"setFlag":this._setBreadCrumb}); - this._setBreadCrumb=false; - break; - } - hashVariable++; - } - this._deleteKeyDown=false; - } else if(this.deleteElement!== this.application.ninja.currentSelectedContainer){ - - while(dLayer[hashVariable]){ - if(dLayer[hashVariable].deleted===true){ - - }else if(dLayer[hashVariable].element.uuid === this.deleteElement.uuid){ - while(this.arrLayers.length){ - if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){ - dLayer[hashVariable].deleted=true; - this.arrLayers.splice(k,1); - this.arrTracks.splice(k,1); - break; - } - k++; - } - } - hashVariable++; - } - } + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._LayerUndoPosition = myIndex; + }else{ + dLayer = this.hashInstance.getItem(this._hashKey); + dTrack = this.hashTrackInstance.getItem(this._hashKey); + dLayer[this.arrLayers.length-1].deleted=true; + this._LayerUndoPosition = this.arrLayers.length-1; + this._LayerUndoObject = this.arrLayers.pop(); + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._TrackUndoObject = this.arrTracks.pop(); } - else{ - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - dLayer[this.arrLayers.length-1].deleted=true; - this.arrLayers.pop(); - this.arrTracks.pop(); - } - } - }else if (this.arrLayers.length <= 0) { - if(this._undoElementDeleted){ - if(event.detail.dataset.parentUUID!==this.application.ninja.currentSelectedContainer.uuid){ - dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID); - 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(this._deleteKeyDown) { - this.dObject=this.hashInstance.getItem(this.removeLayerFromParentUUid); - hashVariable=0; - while(this.dObject[hashVariable]){ - if(this.application.ninja.currentSelectedContainer===this.dObject[hashVariable].element){ - this.dObject[hashVariable].deleted=true; - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":this.currentParentNode,"setFlag":this._setBreadCrumb}); - this._setBreadCrumb=false; - break; - } - hashVariable++; - } - } - } - // TODO: actually remove the selected style from the layer. (Maybe by publishing an event?) +// else if(this._deleteKeyDown) { +// dLayer = this.hashInstance.getItem(this._hashKey); +// dTrack = this.hashTrackInstance.getItem(this._hashKey); +// +// if(this.deleteElement === this.application.ninja.currentSelectedContainer){ +// while(dLayer[hashVariable]){ +// dLayer[hashVariable].deleted=true; +// hashVariable++; +// } +// +// this.dObject=this.hashInstance.getItem(this.removeLayerFromParentUUid); +// hashVariable=0; +// while(this.dObject[hashVariable]){ +// if(this.application.ninja.currentSelectedContainer===this.dObject[hashVariable].element){ +// this.dObject[hashVariable].deleted=true; +// this._setBreadCrumb=true; +// NJevent('breadCrumbTrail',{"element":this.currentParentNode,"setFlag":this._setBreadCrumb}); +// this._setBreadCrumb=false; +// break; +// } +// hashVariable++; +// } +// this._deleteKeyDown=false; +// } else if(this.deleteElement!== this.application.ninja.currentSelectedContainer){ +// +// while(dLayer[hashVariable]){ +// if(dLayer[hashVariable].deleted===true){ +// +// }else if(dLayer[hashVariable].element.uuid === this.deleteElement.uuid){ +// while(this.arrLayers.length){ +// if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){ +// dLayer[hashVariable].deleted=true; +// this.arrLayers.splice(k,1); +// this.arrTracks.splice(k,1); +// break; +// } +// k++; +// } +// } +// hashVariable++; +// } +// } +// } +// else{ +// dLayer = this.hashInstance.getItem(this._hashKey); +// dTrack = this.hashTrackInstance.getItem(this._hashKey); +// dLayer[this.arrLayers.length-1].deleted=true; +// this.arrLayers.pop(); +// this.arrTracks.pop(); +// } + } + } } }, handleElementAdded: { value: function(event) { this.layerElement=event.detail; - this._isElementAdded=true; - this.currentLayerSelected.element.push(event.detail); - this._isElementAdded=false; + if(!!this.layerRepetition.selectedIndexes){ + this.currentLayerSelected = this.arrLayers[this.layerRepetition.selectedIndexes]; + this.currentLayerSelected.element.push(event.detail) + } + else{ + this.currentLayerSelected.element.push(event.detail); + } } }, @@ -515,8 +545,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementDeleted: { value: function(event) { var length; - this._deleteKeyDown=true; this.deleteElement = event.detail; + + if(!!this.layerRepetition.selectedIndexes){ + this.currentLayerSelected = this.arrLayers[this.layerRepetition.selectedIndexes]; + } length =this.currentLayerSelected.element.length-1; while(length >= 0){ if(this.currentLayerSelected.element[length]===this.deleteElement){ @@ -604,6 +637,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } hashLayerObject[key][index] = value; this.counter=0; +// console.log(hashLayerObject) } }, @@ -663,6 +697,102 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return hashTrackObject; } + }, + + insertLayer: { + value: function() { + + var cmd = this.addLayerCommand(); + cmd.execute(); + cmd._el=this._LayerUndoObject; + cmd._layerID = this._LayerUndoIndex; + cmd._layerPosition = this._LayerUndoPosition + cmd._undoStatus = this._LayerUndoStatus; + cmd._track = this._TrackUndoObject; + + NJevent("sendToUndo", cmd); + + + + } + }, + + removeLayer: { + value: function() { + + var cmd = this.deleteLayerCommand(); + cmd.execute(); + cmd._el=this._LayerUndoObject; + cmd._layerID = this._LayerUndoIndex; + cmd._layerPosition = this._LayerUndoPosition + cmd._undoStatus = this._LayerUndoStatus; + cmd._track = this._TrackUndoObject; + + NJevent("sendToUndo", cmd); + + + } + }, + + addLayerCommand: { + value : function(){ + var command; + + command = Object.create(Object.prototype, { + + _el:{value:null,writable:true}, + _layerID:{value:null,writable:true}, + _layerPosition:{value:null,writable:true}, + _undoStatus:{value:false,writable:true}, + _track:{value:null,writable:true}, + + + description: { value: "Add Layer"}, + receiver : {value: TimelinePanel}, + + execute: { + value: function() { + NJevent('newLayer',this) + + } + }, + + unexecute: { + value: function() { + NJevent('deleteLayer',this) + + } + } + }); + + return command; + } + }, + + deleteLayerCommand: { + value : function(){ + var command; + command = Object.create(Object.prototype, { + + description: { value: "Delete Layer"}, + receiver : {value: TimelinePanel}, + + execute: { + value: function() { + NJevent('deleteLayer',this) + } + }, + + unexecute: { + value: function() { + NJevent('newLayer',this) + + } + } + }); + + return command; + } } /* === END: Controllers === */ -- cgit v1.2.3