From b7402018659cf8058d5646c08b2a916492269e33 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 07:37:17 -0800 Subject: Timeline Reset to clean Master branch. Code scrub. Fresh copy of ninja-internal/master with Timeline folder copied in to resolved merge issues. Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 192 +++++++++++++++------ 1 file changed, 136 insertions(+), 56 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 62688825..1c33a040 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -10,10 +10,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackID:{ - value:null, - writable:true, serializable:true, - enumerable:true + value:null }, trackID:{ @@ -85,21 +83,50 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, - - _tweens:{ + + _arrStyleTracks : { serializable:true, enumerable:true, + value: [] + }, + arrStyleTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrStyleTracks; + }, + set: function(newVal) { + this._arrStyleTracks = newVal; + this.needsDraw = true; + } + }, + _styleTracksRepetition: { + serializable: true, + value: null + }, + styleTracksRepetition : { + serializable: true, + get: function() { + return this._styleTracksRepetition; + }, + set: function(newVal) { + this._styleTracksRepetition = newVal; + this.needsDraw = true; + } + }, + + _tweens:{ + enumerable: false, value:[] }, tweens:{ serializable:true, - enumerable:true, get:function () { - return this._spans; + return this._tweens; }, set:function (newVal) { - this._spans = newVal; + this._tweens = newVal; } }, @@ -118,14 +145,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + _trackDuration:{ + serializable: true, + value:0 + }, + trackDuration:{ + serializable:true, + get:function () { + return this._trackDuration; + }, + set:function (val) { + this._trackDuration = val; + } + }, + + _trackPosition:{ + serializable:true, value:0 }, - currentKeyframeRule:{ + trackPosition:{ + serializable:true, + get:function () { + return this._trackPosition; + }, + set:function (val) { + this._trackPosition = val; + } + }, + + _currentKeyframeRule:{ + serializable: true, value:null }, + currentKeyframeRule:{ + serializable: true, + get:function(){ + return this._currentKeyframeRule; + }, + set:function(val){ + this._currentKeyframeRule = val; + } + }, + nextKeyframe:{ value:1 }, @@ -134,14 +198,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:0 }, - isAnimated:{ - value:false + _isTrackAnimated:{ + serializable: true, + value:null + }, + + isTrackAnimated:{ + serializable: true, + get:function(){ + return this._isTrackAnimated; + }, + set:function(val){ + this._isTrackAnimated = val; + } }, _animatedElement:{ serializable:true, - enumerable:true, - writable:true, value:null }, @@ -155,12 +228,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - animationName:{ + _animationName:{ + serializable:true, value:null }, - keyFramePropertyData:{ - value:[] + animationName:{ + serializable:true, + get:function () { + return this._animationName; + }, + set:function (val) { + this._animationName = val; + } }, ninjaStylesContoller:{ @@ -184,8 +264,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function () { this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; - this.track_lane.addEventListener("click", this, false); - this.keyFramePropertyData = new Array(); + this.element.addEventListener("click", this, false); } }, @@ -210,8 +289,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function (ev) { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span // This needs to move to a keyboard shortcut that is TBD + + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + //this.application.ninja.timeline.selectLayer(selectIndex); + if (ev.shiftKey) { - if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { + if (this.application.ninja.timeline.arrLayers[selectedIndex].element.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -238,36 +321,41 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { - // calculate new tween's keyframe percent by clickPos + // calculate new tween's keyframe milliseconds by clickPos var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; + if(this.trackDuration > this.application.ninja.timeline.masterDuration){ + this.application.ninja.timeline.masterDuration = this.trackDuration; + } + var newTween = {}; + if (clickPos == 0) { + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; - newTween.keyframeID = 0; + newTween.tweenID = 0; newTween.spanPosition = 0; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); } else { newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; newTween.keyFramePosition = clickPos; newTween.keyFrameMillisec = currentMillisec; - newTween.keyframeID = this.nextKeyframe; + newTween.tweenID = this.nextKeyframe; newTween.spanPosition = clickPos - newTween.spanWidth; - newTween.timelineTrack = this; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); - var animatedProperties = new Array(); - animatedProperties["top"] = this.keyFramePropertyData[0]["top"]; - animatedProperties["left"] = this.keyFramePropertyData[0]["left"]; - this.keyFramePropertyData[this.nextKeyframe] = animatedProperties; - // update the animation duration var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); @@ -279,32 +367,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - alert("Splitting an existing span with a new keyframe is not yet supported.") + alert("Splitting an existing span with a new keyframe is not yet supported."); //console.log("splitting tween at span offsetX: " + ev.offsetX); } }, addAnimationRuleToElement:{ value:function (tweenEvent) { - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; - var initAnimatedProperties = new Array(); - initAnimatedProperties["top"] = this.animatedElement.offsetTop; - initAnimatedProperties["left"] = this.animatedElement.offsetLeft; - this.keyFramePropertyData[0] = initAnimatedProperties; - + this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; + this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - this.animationName = this.animatedElement.className + this.trackID; - + this.animationName = "animation_" + this.animatedElement.className; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); - - this.isAnimated = true; - this.insertTween(tweenEvent.offsetX); + this.isTrackAnimated = true; } }, @@ -316,18 +396,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.keyFramePropertyData.length; i++) { - + for (var i = 0; i < this.tweens.length; i++) { var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; - var keyframePropertyString = " " + keyframePercent + " {"; - keyframePropertyString += "top: " + this.keyFramePropertyData[i]["top"] + "px;"; - keyframePropertyString += " left: " + this.keyFramePropertyData[i]["left"] + "px;"; + keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; + keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; keyframePropertyString += "}"; keyframeString += keyframePropertyString; } keyframeString += " }"; - // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); } @@ -337,7 +414,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { init:{ value:function () { var that = this; - this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); @@ -357,7 +433,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.isAnimated = true; this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; - } + }; this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); @@ -370,7 +446,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser.isAnimated = true; this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; - } + }; this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); @@ -383,20 +459,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._transformCollapser.isAnimated = true; this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; - } + }; this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; - this._styleCollapser.contentHeight = 60; + this._styleCollapser.contentHeight = 20; this._styleCollapser.isLabelClickable = false; this._styleCollapser.element = this.element; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; - } + }; this._styleCollapser.needsDraw = true; // Register event handler for layer events. @@ -408,11 +484,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleLayerEvent:{ value:function (layerEvent) { - if (layerEvent.layerID !== this.trackID) { return; } - if (layerEvent.layerEventType === "labelClick") { if (layerEvent.layerEventLocale === "content-main") { this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; @@ -427,6 +501,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; this._styleCollapser.handleCollapserLabelClick(); } + } else if (layerEvent.layerEventType === "newStyle") { + this.arrStyleTracks.push("1"); + if (this._styleCollapser.isCollapsed === true) { + this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + this._styleCollapser.handleCollapserLabelClick(); + } } } } -- cgit v1.2.3 From cf671b4855ecca0278128e82459691292a3d3dc9 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 08:08:30 -0800 Subject: Timeline: Create new PropertyTrack subcomponent, and use it in the TimelineTrack component. Cherry pick commit from jreid/Timeline-jreid Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 69 ++++++++++++++++++++++ 1 file changed, 69 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 1c33a040..de2c75c7 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -114,6 +114,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.needsDraw = true; } }, + + /* Position Property Tracks */ + _arrPositionTracks : { + serializable:true, + enumerable:true, + value: [] + }, + arrPositionTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrPositionTracks; + }, + set: function(newVal) { + this._arrPositionTracks = newVal; + this.needsDraw = true; + } + }, + _positionTracksRepetition: { + serializable: true, + value: null + }, + positionTracksRepetition : { + serializable: true, + get: function() { + return this._positionTracksRepetition; + }, + set: function(newVal) { + this._positionTracksRepetition = newVal; + this.needsDraw = true; + } + }, + + + /* Transform Property Tracks */ + _arrTransformTracks : { + serializable:true, + enumerable:true, + value: [] + }, + arrTransformTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrTransformTracks; + }, + set: function(newVal) { + this._arrTransformTracks = newVal; + this.needsDraw = true; + } + }, + _transformTracksRepetition: { + serializable: true, + value: null + }, + transformTracksRepetition : { + serializable: true, + get: function() { + return this._transformTracksRepetition; + }, + set: function(newVal) { + this._transformTracksRepetition = newVal; + this.needsDraw = true; + } + }, _tweens:{ enumerable: false, @@ -414,6 +479,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { init:{ value:function () { var that = this; + + this.arrPositionTracks = [0, 1, 2]; + this.arrTransformTracks = [0, 1, 2, 3, 4]; + this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); -- cgit v1.2.3 From d382eca23468b10575ca857a9feb1ede136ab813 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 11:05:38 -0800 Subject: Timeline Track Open doc Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 54 ++++++++++++++++++++++ 1 file changed, 54 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index de2c75c7..40e680de 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -347,6 +347,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { this._styleCollapser.toggle(false); } + this.retrieveStoredTweens(); } }, @@ -437,6 +438,59 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + retrieveStoredTweens:{ + value:function(){ + var animationDuration,trackDuration,currentMilliSec , currentMillisecPerPixel,clickPos,i=0,k=0; + if(this.application.ninja.timeline.currentLayerSelected.element[0]){ + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; + this.animationName = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-name"); + animationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-duration"); + trackDuration = animationDuration.split("s"); + currentMilliSec =trackDuration[0]*1000; + currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + clickPos = currentMilliSec / currentMillisecPerPixel; + + this.currentKeyframeRule = this.ninjaStylesContoller.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); + + var newTween = {}; + if( this.currentKeyframeRule[i].keyText==="0%"){ + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.keyframeID = i; + newTween.spanPosition = 0; + this.tweens.push(newTween); + + }else{ + + newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = clickPos; + newTween.keyFrameMillisec = currentMilliSec; + newTween.keyframeID = i; + newTween.spanPosition = clickPos - newTween.spanWidth; + this.tweens.push(newTween); + + } + this.needsDraw=true; + // this.retrieveAnimationRuleToElement(); + this.i++; + + // this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); + + } + + } + }, + + retrieveAnimationRuleToElement:{ + value:function(){ + // this.animatedElement = this.tempArray[0]; + // var initAnimatedProperties = new Array(); + // initAnimatedProperties["top"] = this.currentKeyframeRule[this.i].style[0]; + // initAnimatedProperties["left"] = this.currentKeyframeRule[this.i].style[1]; + } + }, + addAnimationRuleToElement:{ value:function (tweenEvent) { this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; -- cgit v1.2.3 From 7de846bfe60bde190c14053107fcb227f6404d65 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 11:17:22 -0800 Subject: Timeline: Reopen Doc Restore TimeLine Signed-off-by: Kruti Shah Conflicts: js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 108 ++++++++++++--------- 1 file changed, 60 insertions(+), 48 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 40e680de..bb1d5a1f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -192,6 +192,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function (newVal) { this._tweens = newVal; + this.needsDraw=true; } }, @@ -324,7 +325,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _styleCollapser:{ value:null }, - + _openDocRedrawCheck:{ + value:true, + writable:true + }, prepareForDraw:{ value:function () { this.init(); @@ -335,6 +339,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { draw:{ value:function () { + this.ninjaStylesContoller = this.application.ninja.stylesController; if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { this._mainCollapser.toggle(false); } @@ -347,7 +352,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { this._styleCollapser.toggle(false); } + + } + }, + + didDraw:{ + value:function(){ + if(this._openDocRedrawCheck){ this.retrieveStoredTweens(); + this._openDocRedrawCheck=false; + } } }, @@ -360,7 +374,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { //this.application.ninja.timeline.selectLayer(selectIndex); if (ev.shiftKey) { - if (this.application.ninja.timeline.arrLayers[selectedIndex].element.length == 1) { + if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -401,7 +415,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var newTween = {}; if (clickPos == 0) { - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; @@ -440,54 +454,52 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function(){ - var animationDuration,trackDuration,currentMilliSec , currentMillisecPerPixel,clickPos,i=0,k=0; - if(this.application.ninja.timeline.currentLayerSelected.element[0]){ - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; - this.animationName = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-name"); - animationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-duration"); - trackDuration = animationDuration.split("s"); - currentMilliSec =trackDuration[0]*1000; - currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - clickPos = currentMilliSec / currentMillisecPerPixel; - - this.currentKeyframeRule = this.ninjaStylesContoller.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); - - var newTween = {}; - if( this.currentKeyframeRule[i].keyText==="0%"){ - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.keyframeID = i; - newTween.spanPosition = 0; - this.tweens.push(newTween); - - }else{ - - newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = clickPos; - newTween.keyFrameMillisec = currentMilliSec; - newTween.keyframeID = i; - newTween.spanPosition = clickPos - newTween.spanWidth; - this.tweens.push(newTween); - - } - this.needsDraw=true; - // this.retrieveAnimationRuleToElement(); - this.i++; - - // this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - + var percentValue,fraction,splitValue,i=0,k=0 + while(this.application.ninja.timeline.arrLayers[k]){ + this.animatedElement = this.application.ninja.timeline.arrLayers[k].elementsList[0]; + this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-name"); + this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-duration"); + this.trackDuration = this.animationDuration.split("s"); + this.currentMilliSec =this.trackDuration[0]*1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + this.nextKeyframe=0; + + this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); + while(this.currentKeyframeRule[i]){ + var newTween = {}; + if( this.currentKeyframeRule[i].keyText==="0%"){ + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.tweenID = 0; + newTween.spanPosition = 0; + this.tweens.push(newTween); + + } + else{ + percentValue=this.currentKeyframeRule[i].keyText; + splitValue=percentValue.split("%"); + fraction=splitValue[0]/100; + this.currentMilliSec =fraction*this.trackDuration[0]*1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = this.clickPos; + newTween.keyFrameMillisec = this.currentMilliSec; + newTween.tweenID = this.nextKeyframe; + newTween.spanPosition = this.clickPos - newTween.spanWidth; + this.tweens.push(newTween); + + + } + i++; + this.nextKeyframe+=1; + } + k++; } - } - }, - retrieveAnimationRuleToElement:{ - value:function(){ - // this.animatedElement = this.tempArray[0]; - // var initAnimatedProperties = new Array(); - // initAnimatedProperties["top"] = this.currentKeyframeRule[this.i].style[0]; - // initAnimatedProperties["left"] = this.currentKeyframeRule[this.i].style[1]; } }, -- cgit v1.2.3 From 935d3e8b592fc9a3a6b252dd5fe0469e35b84713 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 12:09:23 -0800 Subject: Fix for tween repetition arrays getting overwritten on file open Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 92 +++++++++++----------- 1 file changed, 44 insertions(+), 48 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bb1d5a1f..fddfd170 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -357,10 +357,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, didDraw:{ - value:function(){ - if(this._openDocRedrawCheck){ - this.retrieveStoredTweens(); - this._openDocRedrawCheck=false; + value:function () { + if (this._openDocRedrawCheck) { + this.retrieveStoredTweens(); + this._openDocRedrawCheck = false; } } }, @@ -453,55 +453,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, retrieveStoredTweens:{ - value:function(){ - var percentValue,fraction,splitValue,i=0,k=0 - while(this.application.ninja.timeline.arrLayers[k]){ - this.animatedElement = this.application.ninja.timeline.arrLayers[k].elementsList[0]; - this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-name"); - this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-duration"); - this.trackDuration = this.animationDuration.split("s"); - this.currentMilliSec =this.trackDuration[0]*1000; + value:function () { + var percentValue, fraction, splitValue, i = 0; + + this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; + this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); + this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + this.trackDuration = this.animationDuration.split("s"); + this.currentMilliSec = this.trackDuration[0] * 1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + this.nextKeyframe = 0; + + this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); + while (this.currentKeyframeRule[i]) { + var newTween = {}; + if (this.currentKeyframeRule[i].keyText === "0%") { + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.tweenID = 0; + newTween.spanPosition = 0; + this.tweens.push(newTween); + + } + else { + percentValue = this.currentKeyframeRule[i].keyText; + splitValue = percentValue.split("%"); + fraction = splitValue[0] / 100; + this.currentMilliSec = fraction * this.trackDuration[0] * 1000; this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - this.nextKeyframe=0; - - this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); - while(this.currentKeyframeRule[i]){ - var newTween = {}; - if( this.currentKeyframeRule[i].keyText==="0%"){ - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - this.tweens.push(newTween); - - } - else{ - percentValue=this.currentKeyframeRule[i].keyText; - splitValue=percentValue.split("%"); - fraction=splitValue[0]/100; - this.currentMilliSec =fraction*this.trackDuration[0]*1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = this.clickPos; - newTween.keyFrameMillisec = this.currentMilliSec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = this.clickPos - newTween.spanWidth; - this.tweens.push(newTween); - - - } - i++; - this.nextKeyframe+=1; - } - k++; - } + newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = this.clickPos; + newTween.keyFrameMillisec = this.currentMilliSec; + newTween.tweenID = this.nextKeyframe; + newTween.spanPosition = this.clickPos - newTween.spanWidth; + this.tweens.push(newTween); + } + i++; + this.nextKeyframe += 1; } - }, + } + }, addAnimationRuleToElement:{ value:function (tweenEvent) { -- cgit v1.2.3 From 2d4c8ea72223dfbf556d9ba63eb45475523e0f0d Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Thu, 23 Feb 2012 16:08:40 -0800 Subject: Timeline : Fix for the split and element model error Timeline Signed-off-by: Kruti Shah --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 78 ++++++++++++---------- 1 file changed, 43 insertions(+), 35 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index fddfd170..61da9e36 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -358,9 +358,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { didDraw:{ value:function () { - if (this._openDocRedrawCheck) { - this.retrieveStoredTweens(); - this._openDocRedrawCheck = false; + if(this.application.ninja.currentDocument.documentRoot.children[0]){ + if (this._openDocRedrawCheck) { + this.retrieveStoredTweens(); + this._openDocRedrawCheck = false; + } } } }, @@ -459,42 +461,48 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - this.trackDuration = this.animationDuration.split("s"); - this.currentMilliSec = this.trackDuration[0] * 1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - this.nextKeyframe = 0; - - this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - while (this.currentKeyframeRule[i]) { - var newTween = {}; - if (this.currentKeyframeRule[i].keyText === "0%") { - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - this.tweens.push(newTween); + if(this.animationDuration){ + this.trackDuration = this.animationDuration.split("s"); + this.currentMilliSec = this.trackDuration[0] * 1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + this.nextKeyframe = 0; + + this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); + while (this.currentKeyframeRule[i]) { + var newTween = {}; + + if (this.currentKeyframeRule[i].keyText === "0%") { + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.tweenID = 0; + newTween.spanPosition = 0; + this.tweens.push(newTween); - } - else { - percentValue = this.currentKeyframeRule[i].keyText; - splitValue = percentValue.split("%"); - fraction = splitValue[0] / 100; - this.currentMilliSec = fraction * this.trackDuration[0] * 1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = this.clickPos; - newTween.keyFrameMillisec = this.currentMilliSec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = this.clickPos - newTween.spanWidth; - this.tweens.push(newTween); + } + else { + percentValue = this.currentKeyframeRule[i].keyText; + splitValue = percentValue.split("%"); + fraction = splitValue[0] / 100; + this.currentMilliSec = fraction * this.trackDuration[0] * 1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = this.clickPos; + newTween.keyFrameMillisec = this.currentMilliSec; + newTween.tweenID = this.nextKeyframe; + newTween.spanPosition = this.clickPos - newTween.spanWidth; + this.tweens.push(newTween); + } + i++; + this.nextKeyframe += 1; } - i++; - this.nextKeyframe += 1; + } + else{ + return; } } }, -- cgit v1.2.3