From c687a27c990ca17fcd073adec882780916103802 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 6 Feb 2012 22:23:04 -0800 Subject: Timeline : Change in the Hooking up of DOM/Layers Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 148 +++++++++++++-------- 1 file changed, 93 insertions(+), 55 deletions(-) diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 2db0c18a..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.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.hashInstance.setItem(this._hashKey,thingToPush,thingToPush.layerPosition); this.hashTrackInstance.setItem(this._hashKey,newTrack,newTrack.trackPosition); } - } - } + + } }, @@ -469,25 +490,41 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: function(event) { this.layerElement=event.detail; this._isElementAdded=true; - NJevent('newLayer',event.detail); + this.currentLayerSelected.element.push(event.detail); this._isElementAdded=false; } }, - handleDeleteSelection:{ - value:function(event){ - this._deleteKeyDown=true; - this.deleteElement = event.detail[0]; - NJevent('deleteLayer',event.detail); - } - }, + + +// handleDeleteSelection:{ +// value:function(event){ +// var length; +// this._deleteKeyDown=true; +// this.deleteElement = event.detail[0]; +// length =this.currentLayerSelected.element.length-1; +// while(length >= 0){ +// if(this.currentLayerSelected.element[length]===this.deleteElement){ +// this.currentLayerSelected.element.splice(length,0); +// } +// } +// +// } +// }, handleElementDeleted: { value: function(event) { - this._undoElementDeleted=true; - this.deleteElement = event.detail[0]; - NJevent('deleteLayer',event.detail); - this._undoElementDeleted=false; + var length; + this._deleteKeyDown=true; + this.deleteElement = event.detail; + length =this.currentLayerSelected.element.length-1; + while(length >= 0){ + if(this.currentLayerSelected.element[length]===this.deleteElement){ + this.currentLayerSelected.element.splice(length,1); + break; + } + length--; + } } }, drawTimeMarkers:{ @@ -549,7 +586,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { setItem: { value: function(key,value,index) { - +// console.log(this.application.ninja.currentSelectedContainer) if(hashLayerObject[key]===undefined){ hashLayerObject[key]={}; } @@ -612,6 +649,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } hashTrackObject[key][index] = value; this.counter=0; +// console.log(hashTrackObject) } }, -- cgit v1.2.3 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(-) 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 From 8cb53b7ec3b4f34fd77945256ad80bc1ae54b887 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 21:28:14 -0800 Subject: Add Span color highlight for animated spans and restyle keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 23 ++++++++++++---------- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 8 ++++++-- js/panels/Timeline/Span.reel/Span.js | 6 ++++++ js/panels/Timeline/Span.reel/css/Span.css | 4 ++++ .../TimelinePanel.reel/css/TimelinePanel.css | 1 + js/panels/Timeline/Tween.reel/Tween.html | 3 ++- 6 files changed, 32 insertions(+), 13 deletions(-) diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 4bb73514..b6623dcd 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -78,6 +78,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { } }, + containingSpan:{ + value: null + }, + prepareForDraw:{ value:function(){ this.tweenkeyframe.addEventListener("click", this, false); @@ -91,7 +95,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.tweenkeyframe.style.left = (this.position - 2) + "px"; + this.tweenkeyframe.style.left = (this.position - 3) + "px"; } }, @@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { if(event.detail.source && event.detail.source !== "keyframe") { var items = this.application.ninja.selectedElements; - - // update this keyframe's animated properties from the item[0] element props - this.animatedProperties["top"] = items[0]._element.offsetTop; - this.animatedProperties["left"] = items[0]._element.offsetLeft; - this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; - - this.containingTrack.updateKeyframeRule(); + this.containingSpan.highlightSpan(); + if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ + // update this keyframe's animated properties from the item[0] element props + this.animatedProperties["top"] = items[0]._element.offsetTop; + this.animatedProperties["left"] = items[0]._element.offsetLeft; + this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; + this.containingTrack.updateKeyframeRule(); + } } - - } }, diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css index e66bcf10..4afc1180 100644 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -1,11 +1,15 @@ .tween_keyframe{ position: absolute; height: 16px; - width: 4px; + width: 5px; background-color: white; z-index: 23; + border-radius: 3px; } .tween_keyframe.keyframeSelected{ - background-color: blue; + background-color: #570e19; + border-style: solid; + border-width: thin; + border-color: #d6d1cf; } \ No newline at end of file diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 05f56a32..f7bd4ff0 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -31,5 +31,11 @@ var Span = exports.Span = Montage.create(Component, { value: function(){ this.tweenspan.style.width = this.spanWidth + "px"; } + }, + + highlightSpan:{ + value: function(){ + this.tweenspan.classList.add("spanHighlight"); + } } }); diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 1583c20f..1e988c6c 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -3,4 +3,8 @@ height: 16px; opacity: 0.3; background-color: white; +} + +.tween_span.spanHighlight{ + background-color: #a0c8ff; } \ No newline at end of file diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f5fb9378..cbae49c8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -143,6 +143,7 @@ left: 0px; height: 20px; width: 100%; + border-bottom-style: solid; } .masterlayer{ diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index 3e72acc0..307dcd02 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -28,7 +28,8 @@ "module": "js/panels/Timeline/Keyframe.reel", "name": "Keyframe", "properties": { - "element": {"#": "keyframe_container"} + "element": {"#": "keyframe_container"}, + "containingSpan": {"@": "span"} } } } -- cgit v1.2.3 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 --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 478 +++++++++++++-------- 1 file changed, 304 insertions(+), 174 deletions(-) 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.hashTrack