From 43a8db67a808bf42220203484db192faeb8e21cb Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Tue, 7 Feb 2012 21:39:09 -0800
Subject: Layer Undo enhancements
Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
.../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 0dbcfa16..5bae14d4 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