From 0013aae80fc22642db6a2753f7dbd5a150f3b3cc Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 2 Apr 2012 16:04:58 -0700 Subject: TImeline : Bug Fix 1429 & The zoom tweendata Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 2 + js/panels/Timeline/Tween.reel/Tween.js | 120 +++++++++++---------- 2 files changed, 65 insertions(+), 57 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a82d3373..c454130c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -777,6 +777,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Delete the selected layer. var myIndex = this.layerRepetition.selectedIndexes[0]; this.arrLayers.splice(myIndex, 1); + var selectIndex = this.arrLayers.length; + this.selectLayer(selectIndex-1); } } }, diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 28c9a585..bd62a212 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -230,68 +230,74 @@ var Tween = exports.Tween = Montage.create(Component, { }, handleTlZoomSlider:{ - value:function(event){ - var currentMilliSecPerPixel , currentMilliSec , clickPos,i=0; - - length = this.application.ninja.timeline.tempArray.length; - if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){ - this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); - var i = this.application.ninja.timeline.tweenarray.length-1; - for(;this.currentTween = this.application.ninja.timeline.tweenarray[i];i--){ - if(this.application.ninja.timeline.tweenarray[i].tweenID===0){ - this.currentTween.spanWidth=0; - this.currentTween.spanPosition=0; - this.currentTween.keyFramePosition=0; - this.currentTween.keyFrameMillisec=0; - this.needsDraw=true; - }else{ - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - currentMilliSec = this.currentTween.keyFrameMillisec; - clickPos = currentMilliSec / currentMilliSecPerPixel; - this.currentTween.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition; - this.currentTween.keyFramePosition = clickPos; - this.currentTween.spanPosition=clickPos-this.currentTween.spanWidth; - this.needsDraw=true; - } + value:function(event){ + var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush; + + length = this.application.ninja.timeline.tempArray.length; + if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){ + this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); + var i = this.application.ninja.timeline.tweenarray.length-1; + for(var index=0;this.currentTween = this.parentComponent.parentComponent.tweens[index];i--,index++){ + if(this.parentComponent.parentComponent.tweens[index].tweenData.tweenID===0){ + this.currentTween.tweenData.spanWidth=0; + this.currentTween.tweenData.spanPosition=0; + this.currentTween.tweenData.keyFramePosition=0; + this.currentTween.tweenData.keyFrameMillisec=0; + this.setData(); + }else{ + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.currentTween.tweenData.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition; + this.currentTween.tweenData.keyFramePosition = clickPos; + this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth; + this.setData(); + } + } + this.application.ninja.timeline.tweenarray=[]; + thingToPush = {}; + thingToPush.tweenID = this.tweenID; + thingToPush.keyFramePosition = this.keyFramePosition; + this.application.ninja.timeline.tweenarray.push(thingToPush); + }else if(length===0){ + this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); + thingToPush = {}; + thingToPush.tweenID = this.tweenID; + thingToPush.keyFramePosition = this.keyFramePosition; + this.application.ninja.timeline.tweenarray.push(thingToPush); + }else{ + thingToPush = {}; + thingToPush.tweenID = this.tweenID; + thingToPush.keyFramePosition = this.keyFramePosition; + this.application.ninja.timeline.tweenarray.push(thingToPush); } - this.application.ninja.timeline.tweenarray.length=0; - this.application.ninja.timeline.tweenarray.push(this); - }else if(length===0){ - this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); - this.application.ninja.timeline.tweenarray.push(this); - }else{ - this.application.ninja.timeline.tweenarray.push(this); - } - var levelNumber = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); - var k = this.application.ninja.timeline.tweenarray.length-1; - if(this.parentComponent.parentComponent.tweens.length === this.application.ninja.timeline.tweenarray.length && levelNumber===0){ - for(;this.currentTween = this.application.ninja.timeline.tweenarray[k];k--){ - if(this.application.ninja.timeline.tweenarray[k].tweenID===0){ - this.currentTween.spanWidth=0; - this.currentTween.spanPosition=0; - this.currentTween.keyFramePosition=0; - this.currentTween.keyFrameMillisec=0; - this.needsDraw=true; - }else{ - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - currentMilliSec = this.currentTween.keyFrameMillisec; - clickPos = currentMilliSec / currentMilliSecPerPixel; - this.currentTween.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[k+1].keyFramePosition; - this.currentTween.keyFramePosition = clickPos; - this.currentTween.spanPosition=clickPos-this.currentTween.spanWidth; - this.needsDraw=true; - } + var levelNumber = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); + var k = this.application.ninja.timeline.tweenarray.length-1; + if(this.parentComponent.parentComponent.tweens.length === this.application.ninja.timeline.tweenarray.length && levelNumber===0){ + for(var indexValue=0;this.currentTween = this.parentComponent.parentComponent.tweens[indexValue];k--,indexValue++){ + if(this.parentComponent.parentComponent.tweens[indexValue].tweenData.tweenID===0){ + this.currentTween.tweenData.spanWidth=0; + this.currentTween.tweenData.spanPosition=0; + this.currentTween.tweenData.keyFramePosition=0; + this.currentTween.tweenData.keyFrameMillisec=0; + this.setData(); + }else{ + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.currentTween.tweenData.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[k+1].keyFramePosition; + this.currentTween.tweenData.keyFramePosition = clickPos; + this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth; + this.setData(); + } + } + this.application.ninja.timeline.tempArray=[]; + this.application.ninja.timeline.tweenarray=[]; } - this.application.ninja.timeline.tempArray.length=0; - this.application.ninja.timeline.tweenarray.length=0; } - - - } - } -}); + }); -- cgit v1.2.3 From 1ca98c8c69ea3ef28e8bc050326306424824296d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Apr 2012 12:56:19 -0700 Subject: Timeline: Initial implementation of timeline zoom. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 53 ++++++++++++++ js/panels/Timeline/Tween.reel/Tween.js | 83 ++-------------------- 2 files changed, 58 insertions(+), 78 deletions(-) (limited to 'js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 978b239f..b5d06ae1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -435,6 +435,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; this.element.addEventListener("click", this, false); + this.eventManager.addEventListener("tlZoomSlider", this, false); } }, @@ -467,6 +468,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + handleTlZoomSlider: { + value: function(event) { + + var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush; + var i = 0, + tweensLength = this.tweens.length; + + for (i = 0; i < tweensLength; i++) { + + if (i === 0) { + // Exception: 0th item does not depend on anything + // TODO: If 0th tween is draggable, this will need to be fixed. + this.tweens[i].tweenData.spanWidth=0; + this.tweens[i].tweenData.spanPosition=0; + this.tweens[i].tweenData.keyFramePosition=0; + this.tweens[i].tweenData.keyFrameMillisec=0; + + } else { + var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition, + myObj = {}, + thing = {}; + + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + + for (thing in this.tweens[i].tweenData) { + myObj[thing] = this.tweens[i].tweenData[thing]; + } + myObj.spanWidth = clickPos - prevKeyFramePosition; + myObj.keyFramePosition = clickPos; + myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition); + + this.tweens[i].tweenData = myObj; + } + + + } + } + }, handleClick:{ value:function (ev) { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span @@ -681,6 +722,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrStyleTracks.pop(); } } + }, + getTweenIndexById: { + value: function(intID) { + var i = 0, + arrTweensLength = this.tweens.length; + for (i = 0; i < arrTweensLength; i++) { + if (this.tweens[i].tweenData.tweenID === intID) { + returnVal = i; + } + } + return returnVal; + } }, /* Begin: Logging routines */ _boolDebug: { diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index bd62a212..27828c3c 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -44,6 +44,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set: function(value){ this._spanWidth = value; + this.tweenData.spanWidth = value; this.needsDraw=true; } }, @@ -59,6 +60,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._spanPosition = value; + this.tweenData.spanPosition = value; this.needsDraw=true; } }, @@ -74,6 +76,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._keyFramePosition = value; + this.tweenData.keyFramePosition = value; this.needsDraw=true; } }, @@ -136,11 +139,6 @@ var Tween = exports.Tween = Montage.create(Component, { } }, - prepareForDraw:{ - value:function(){ - this.eventManager.addEventListener("tlZoomSlider", this, false); - } - }, draw:{ value:function () { @@ -227,77 +225,6 @@ var Tween = exports.Tween = Montage.create(Component, { // deselect the keyframe for this tween this.keyframe.deselectKeyframe(); } - }, - - handleTlZoomSlider:{ - value:function(event){ - var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush; - - length = this.application.ninja.timeline.tempArray.length; - if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){ - this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); - var i = this.application.ninja.timeline.tweenarray.length-1; - for(var index=0;this.currentTween = this.parentComponent.parentComponent.tweens[index];i--,index++){ - if(this.parentComponent.parentComponent.tweens[index].tweenData.tweenID===0){ - this.currentTween.tweenData.spanWidth=0; - this.currentTween.tweenData.spanPosition=0; - this.currentTween.tweenData.keyFramePosition=0; - this.currentTween.tweenData.keyFrameMillisec=0; - this.setData(); - }else{ - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - currentMilliSec = this.currentTween.tweenData.keyFrameMillisec; - clickPos = currentMilliSec / currentMilliSecPerPixel; - this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition; - this.currentTween.tweenData.keyFramePosition = clickPos; - this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth; - this.setData(); - } - - } - this.application.ninja.timeline.tweenarray=[]; - thingToPush = {}; - thingToPush.tweenID = this.tweenID; - thingToPush.keyFramePosition = this.keyFramePosition; - this.application.ninja.timeline.tweenarray.push(thingToPush); - }else if(length===0){ - this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID); - thingToPush = {}; - thingToPush.tweenID = this.tweenID; - thingToPush.keyFramePosition = this.keyFramePosition; - this.application.ninja.timeline.tweenarray.push(thingToPush); - }else{ - thingToPush = {}; - thingToPush.tweenID = this.tweenID; - thingToPush.keyFramePosition = this.keyFramePosition; - this.application.ninja.timeline.tweenarray.push(thingToPush); - } - - var levelNumber = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); - var k = this.application.ninja.timeline.tweenarray.length-1; - if(this.parentComponent.parentComponent.tweens.length === this.application.ninja.timeline.tweenarray.length && levelNumber===0){ - for(var indexValue=0;this.currentTween = this.parentComponent.parentComponent.tweens[indexValue];k--,indexValue++){ - if(this.parentComponent.parentComponent.tweens[indexValue].tweenData.tweenID===0){ - this.currentTween.tweenData.spanWidth=0; - this.currentTween.tweenData.spanPosition=0; - this.currentTween.tweenData.keyFramePosition=0; - this.currentTween.tweenData.keyFrameMillisec=0; - this.setData(); - }else{ - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - currentMilliSec = this.currentTween.tweenData.keyFrameMillisec; - clickPos = currentMilliSec / currentMilliSecPerPixel; - this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[k+1].keyFramePosition; - this.currentTween.tweenData.keyFramePosition = clickPos; - this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth; - this.setData(); - } - - } - this.application.ninja.timeline.tempArray=[]; - this.application.ninja.timeline.tweenarray=[]; - } - } - } + } - }); +}); -- cgit v1.2.3 From 59de13ed9f88497b07b4fdcf4d2c9d5c2bf05365 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Wed, 4 Apr 2012 10:54:29 -0700 Subject: Timeline: Saving layername Signed-off-by: Kruti Shah --- js/panels/Timeline/Layer.reel/Layer.js | 1 + js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 5 +++++ 2 files changed, 6 insertions(+) (limited to 'js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index c69f28b0..300462ee 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -490,6 +490,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, false); this._layerEditable.addEventListener("change", function(event) { that.dynamicLayerName.value = that._layerEditable.value; + this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value that.needsDraw = true; }, false); this._layerEditable.editingClass = "editable2"; diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index c454130c..0ca4800d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -747,6 +747,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = this.currentLayerNumber + 1; newLayerName = "Layer " + this.currentLayerNumber; + + if(ele.dataset.storedLayerName){ + newLayerName = ele.dataset.storedLayerName; + } thingToPush.layerData.layerName = newLayerName; thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.parentElementUUID = this.hashKey; @@ -787,6 +791,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function() { this.createNewLayer(); this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]._element); + this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName; } }, -- cgit v1.2.3