From 8ccc989388bfbcb0d5713c44b9c97ef5ce45d31c Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Wed, 29 Feb 2012 12:30:12 -0800 Subject: Timeline: Changed the variables names to resolve issues.And removed the alert. Signed-off-by: Kruti Shah --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 45 ++++++++++------------ 1 file changed, 21 insertions(+), 24 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 bf97c0fd..a2aaa550 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -459,7 +459,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function () { - var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; + var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute + var animationTiming,trackTiming,currentMilliSec,currentMilliSecPerPixel,clickPosition,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.arrLayers[selectedIndex].created=true; @@ -467,23 +468,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(this.animatedElement!==undefined){ this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); if(this.animationName){ - 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; + animationTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + trackTiming = animationTiming.split("s"); + currentMilliSec = trackTiming[0] * 1000; + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + clickPosition = currentMilliSec / currentMilliSecPerPixel; this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - while (this.currentKeyframeRule[i]) { + for (i =0; this.currentKeyframeRule[i] ;i++) { var newTween = {}; offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); topOffSetAttribute = offsetAttribute[3].split("px"); leftOffsetAttribute = offsetAttribute[5].split("px"); - parseInt(topOffSetAttribute[0]); - parseInt(leftOffsetAttribute[0]); + var tempTopOffset = parseInt(topOffSetAttribute[0]); + var tempLeftOffset =parseInt(leftOffsetAttribute[0]); if (this.currentKeyframeRule[i].keyText === "0%") { newTween.spanWidth = 0; @@ -492,8 +493,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenID = 0; newTween.spanPosition = 0; newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = topOffSetAttribute[0]; - newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; + newTween.tweenedProperties["top"] = tempTopOffset; + newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } @@ -501,30 +502,26 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { 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; + currentMilliSec = fraction * trackTiming[0] * 1000; + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + clickPosition = currentMilliSec / currentMilliSecPerPixel; + newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = clickPosition; + newTween.keyFrameMillisec = currentMilliSec; newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = this.clickPos - newTween.spanWidth; + newTween.spanPosition =clickPosition - newTween.spanWidth; newTween.tweenedProperties=[]; - newTween.tweenedProperties["top"] = topOffSetAttribute[0]; - newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; + newTween.tweenedProperties["top"] = tempTopOffset; + newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } - i++; this.nextKeyframe += 1; } this.isTrackAnimated = true; } } - else{ - return; - } } }, -- cgit v1.2.3 From 6e28beaca4ebc740fdc637d65f0b966c59fd05d2 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Wed, 29 Feb 2012 12:36:46 -0800 Subject: TImeline: Cleanup Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (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 a2aaa550..7394d42e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -476,7 +476,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - for (i =0; this.currentKeyframeRule[i] ;i++) { + var currentKeyFrameRuleLength = this.currentKeyframeRule.length; + + for (i =0; i --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 ++--- 1 file changed, 2 insertions(+), 3 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 7394d42e..f8f4f6b8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -476,9 +476,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - var currentKeyFrameRuleLength = this.currentKeyframeRule.length; - - for (i =0; i Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 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 f8f4f6b8..8f867d35 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -460,7 +460,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function () { var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute - var animationTiming,trackTiming,currentMilliSec,currentMilliSecPerPixel,clickPosition,i = 0; + var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.arrLayers[selectedIndex].created=true; @@ -468,11 +468,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(this.animatedElement!==undefined){ this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); if(this.animationName){ - animationTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - trackTiming = animationTiming.split("s"); - currentMilliSec = trackTiming[0] * 1000; - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - clickPosition = currentMilliSec / currentMilliSecPerPixel; + trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); @@ -500,10 +496,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } else { + tempTiming = trackTiming.split("s"); + tempTimingInt = parseInt(tempTiming[0]); + this.trackDuration = tempTimingInt *1000; percentValue = this.currentKeyframeRule[i].keyText; splitValue = percentValue.split("%"); fraction = splitValue[0] / 100; - currentMilliSec = fraction * trackTiming[0] * 1000; + currentMilliSec = fraction * this.trackDuration; currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); clickPosition = currentMilliSec / currentMilliSecPerPixel; newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; -- cgit v1.2.3 From 219f3a05e8a0fa994e301bb548d0d623c0208e81 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 11:00:18 -0800 Subject: Update master track on duration change instead of tween add. Adds support for updating the master track duration on file open as well as when adding tweens to already opened files. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 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 8f867d35..1edc04ba 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -229,6 +229,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function (val) { this._trackDuration = val; + if(this._trackDuration > this.application.ninja.timeline.masterDuration){ + this.application.ninja.timeline.masterDuration = this._trackDuration; + } } }, @@ -413,9 +416,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // 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 = {}; -- cgit v1.2.3 From 51206a5b16e299f7ec8291d899277f7e4c95bb25 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 11:46:36 -0800 Subject: Set doc dirty flag when adding tweens or modifying animations Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 ++----- 1 file changed, 2 insertions(+), 5 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 1edc04ba..88c78411 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -408,16 +408,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (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; - - - var newTween = {}; if (clickPos == 0) { @@ -445,9 +441,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // update the animation duration var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); - this.nextKeyframe += 1; } + this.application.ninja.documentController.activeDocument.needsSave = true; } }, @@ -564,6 +560,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { keyframeString += " }"; // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); + this.application.ninja.documentController.activeDocument.needsSave = true; } }, -- cgit v1.2.3 From 4a4b4e69ce101b22a85d16ece2dd8034c242654c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 1 Mar 2012 12:01:44 -0800 Subject: Timeline: efficiency improvements to collapser. Document switching. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 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 90b685dc..4a3d7a44 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -589,55 +589,54 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.myContent = this.myContent; this._mainCollapser.contentHeight = 60; this._mainCollapser.isLabelClickable = false; - this._mainCollapser.element = this.element; + this._mainCollapser.element = this.myContent; this._mainCollapser.isCollapsed = this.isMainCollapsed; this._mainCollapser.isAnimated = true; this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; }; - this._mainCollapser.needsDraw = true; + //this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); this._positionCollapser.clicker = this.labelPosition; this._positionCollapser.myContent = this.contentPosition; - this._positionCollapser.contentHeight = 60; + this._positionCollapser.contentHeight = 40; this._positionCollapser.isLabelClickable = true; - this._positionCollapser.element = this.element; + this._positionCollapser.element = this.contentPosition; this._positionCollapser.isCollapsed = this.isPositionCollapsed; this._positionCollapser.isAnimated = true; this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; }; - this._positionCollapser.needsDraw = true; + //this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); this._transformCollapser.clicker = this.labelTransform; this._transformCollapser.myContent = this.contentTransform; this._transformCollapser.contentHeight = 100; this._transformCollapser.isLabelClickable = false; - this._transformCollapser.element = this.element; + this._transformCollapser.element = this.contentTransform; this._transformCollapser.isCollapsed = this.isTransformCollapsed; this._transformCollapser.isAnimated = true; this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; }; - this._transformCollapser.needsDraw = true; + //this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; this._styleCollapser.contentHeight = 0; this._styleCollapser.isLabelClickable = false; - this._styleCollapser.element = this.element; + this._styleCollapser.element = this.contentStyles; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; }; - this._styleCollapser.needsDraw = true; + //this._styleCollapser.needsDraw = true; // Register event handler for layer events. - var that = this; defaultEventManager.addEventListener("layerEvent", this, false); } -- cgit v1.2.3 From 205d869d94005cb214fd838879d4f5e81d763311 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 1 Mar 2012 18:01:08 -0800 Subject: Timeline: Merge arrlayers and arrtracks into one object. Redefine collapser to use property binding instead of events. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 95 +++++++++++++++++++++- 1 file changed, 91 insertions(+), 4 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 74a7f962..a10cb4d8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -33,16 +33,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Are the various collapsers collapsed or not _isMainCollapsed:{ - value:"" + value: true }, isMainCollapsed:{ get:function () { return this._isMainCollapsed; }, set:function (newVal) { + this.log('TimelineTrack.js: isMainCollapsed: ', newVal); if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; - this.needsDraw = true; } } @@ -89,6 +89,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, + _animateCollapser : { + serializable: true, + value: false + }, + animateCollapser : { + serializable: true, + get: function() { + return this._animateCollapser; + }, + set: function(newVal) { + this._animateCollapser = newVal; + } + }, _arrStyleTracks : { serializable:true, @@ -345,6 +358,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { draw:{ value:function () { this.ninjaStylesContoller = this.application.ninja.stylesController; + return; if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { this._mainCollapser.toggle(false); } @@ -450,7 +464,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { alert("Splitting an existing span with a new keyframe is not yet supported."); - //console.log("splitting tween at span offsetX: " + ev.offsetX); + //this.log("splitting tween at span offsetX: " + ev.offsetX); } }, @@ -589,9 +603,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.element = this.myContent; this._mainCollapser.isCollapsed = this.isMainCollapsed; this._mainCollapser.isAnimated = true; + Object.defineBinding(this._mainCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isMainCollapsed", + oneway: false + }); + Object.defineBinding(this._mainCollapser, "bypassAnimation", { + boundObject: this, + boundObjectPropertyPath: "animateCollapser", + oneway: false, + boundValueMutator: function(value) { + return !value; + } + }); + + /* this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; }; + */ //this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); @@ -602,9 +632,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser.element = this.contentPosition; this._positionCollapser.isCollapsed = this.isPositionCollapsed; this._positionCollapser.isAnimated = true; + Object.defineBinding(this._positionCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isPositionCollapsed", + oneway: false + }); + + + /* this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; }; + */ //this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); @@ -615,9 +654,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._transformCollapser.element = this.contentTransform; this._transformCollapser.isCollapsed = this.isTransformCollapsed; this._transformCollapser.isAnimated = true; + Object.defineBinding(this._transformCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isTransformCollapsed", + oneway: false + }); + + + /* this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; }; + */ //this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); @@ -628,13 +676,22 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.element = this.contentStyles; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; + Object.defineBinding(this._styleCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isStyleCollapsed", + oneway: false + }); + + + /* this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; }; + */ //this._styleCollapser.needsDraw = true; // Register event handler for layer events. - defaultEventManager.addEventListener("layerEvent", this, false); + //defaultEventManager.addEventListener("layerEvent", this, false); } }, @@ -668,5 +725,35 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrStyleTracks.pop(); } } + }, + /* Begin: Logging routines */ + _boolDebug: { + enumerable: false, + value: false // set to true to enable debugging to console; false for turning off all debugging. + }, + boolDebug: { + get: function() { + return this._boolDebug; + }, + set: function(boolDebugSwitch) { + this._boolDebug = boolDebugSwitch; + } + }, + log: { + value: function(strMessage) { + if (this.boolDebug) { + console.log(this.getLineNumber() + ": " + strMessage); + } + } + }, + getLineNumber: { + value: function() { + try { + throw new Error('bazinga') + }catch(e){ + return e.stack.split("at")[3].split(":")[2]; + } + } } + /* End: Logging routines */ }); -- cgit v1.2.3 From ef41a2897809d768e066ee3b4bfbb436ab20175c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 23:58:41 -0800 Subject: Timeline bug fixes and cleanup Deselect tweens on every selection change. Replace JS alerts with console logs. Cleanup obsolete models and references. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 10 +++------- 1 file changed, 3 insertions(+), 7 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 a10cb4d8..d35f59d3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -404,7 +404,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.handleNewTween(ev); } } else { - alert("There must be exactly one element in an animated layer.") + console.log("There must be exactly one element in an animated layer."); } } } @@ -463,14 +463,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - alert("Splitting an existing span with a new keyframe is not yet supported."); - //this.log("splitting tween at span offsetX: " + ev.offsetX); + console.log("Splitting an existing span with a new keyframe is not yet supported."); } }, retrieveStoredTweens:{ value:function () { - var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute + var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute; var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); @@ -504,7 +503,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenedProperties["top"] = tempTopOffset; newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); - } else { tempTiming = trackTiming.split("s"); @@ -525,8 +523,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenedProperties["top"] = tempTopOffset; newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); - - } this.nextKeyframe += 1; } -- cgit v1.2.3 From 40c1d9df5b28d37facc10ee6de4d742caed59a6f Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 09:02:52 -0800 Subject: Start looping over tweened properties generically No longer hard coding for top and left properties. Instead, looping over all tweened properties generically and building keyframe strings. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 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 d35f59d3..1521f0fd 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -562,8 +562,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var trackDur = parseInt(this.trackDuration); var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; - keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; - keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; + + for(var prop in this.tweens[i].tweenedProperties){ + console.log(prop); + keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; + } + + //keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; + //keyframePropertyString += "left: " + this.tweens[i].tweenedProperties["left"] + "px;"; + keyframePropertyString += "}"; keyframeString += keyframePropertyString; } -- cgit v1.2.3 From ab5558ea89e7c9ef94b608b568b5fb345bd5adaa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 09:03:36 -0800 Subject: Cleanup remove commented lines Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 ----- 1 file changed, 5 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 1521f0fd..529b5625 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -562,15 +562,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var trackDur = parseInt(this.trackDuration); var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; - for(var prop in this.tweens[i].tweenedProperties){ console.log(prop); keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; } - - //keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; - //keyframePropertyString += "left: " + this.tweens[i].tweenedProperties["left"] + "px;"; - keyframePropertyString += "}"; keyframeString += keyframePropertyString; } -- cgit v1.2.3 From 395c4df4be16c663e6b51075441cbe0a826b2cd3 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 09:07:38 -0800 Subject: Remove console log Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 1 - 1 file changed, 1 deletion(-) (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 529b5625..420be0c9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -563,7 +563,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; for(var prop in this.tweens[i].tweenedProperties){ - console.log(prop); keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; } keyframePropertyString += "}"; -- cgit v1.2.3 From f7594082c808276306342a9a44c0b55de3be5c03 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 11:09:04 -0800 Subject: Timeline: Fix for animation iteration count Add default webkit css properties to allow animations with integer iteration counts. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (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 420be0c9..cc1dac5d 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -540,7 +540,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animationName = "animation_" + this.animatedElement.classList[0]; 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"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); 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.insertTween(tweenEvent.offsetX); -- cgit v1.2.3 From 239bb2d2a690ca24296749e7d0c2daa6fc4633f4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 11:34:37 -0800 Subject: Timeline Fix timing function Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 1 + 1 file changed, 1 insertion(+) (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 cc1dac5d..051d56c2 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -542,6 +542,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); 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.insertTween(tweenEvent.offsetX); -- cgit v1.2.3 From 6f1d1232e54d3d30b24abe0319dcfe5f4dc30f66 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 14:55:26 -0800 Subject: Support writing and reading of animation duration with millseconds Removed math rounding so that animation durations won't round to full seconds anymore. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 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 051d56c2..7120298c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -453,7 +453,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens.push(newTween); // update the animation duration - var animationDuration = Math.round(this.trackDuration / 1000) + "s"; + var animationDuration = (this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.nextKeyframe += 1; } @@ -470,7 +470,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function () { var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute; - var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; + var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.arrLayers[selectedIndex].created=true; @@ -506,8 +506,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } else { tempTiming = trackTiming.split("s"); - tempTimingInt = parseInt(tempTiming[0]); - this.trackDuration = tempTimingInt *1000; + tempTimingFloat = parseFloat(tempTiming[0]); + this.trackDuration = tempTimingFloat *1000; percentValue = this.currentKeyframeRule[i].keyText; splitValue = percentValue.split("%"); fraction = splitValue[0] / 100; -- cgit v1.2.3 From 5689e3e2deda1b1f7ba32f6007ddab20f6c1fe64 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 2 Mar 2012 18:17:14 -0800 Subject: Timeline: Serialization of all Collapser components --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 32 ++++++++++++---------- 1 file changed, 17 insertions(+), 15 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 420be0c9..6e753b9f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -57,7 +57,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isTransformCollapsed) { this._isTransformCollapsed = newVal; - this.needsDraw = true; } } }, @@ -71,7 +70,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isPositionCollapsed) { this._isPositionCollapsed = newVal; - this.needsDraw = true; } } }, @@ -85,21 +83,21 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isStyleCollapsed) { this._isStyleCollapsed = newVal; - this.needsDraw = true; } } }, - _animateCollapser : { + _bypassAnimation : { serializable: true, value: false }, - animateCollapser : { + bypassAnimation : { serializable: true, get: function() { - return this._animateCollapser; + return this._bypassAnimation; }, set: function(newVal) { - this._animateCollapser = newVal; + //console.log("timelinetrack bypassAnimation setter " + newVal) + this._bypassAnimation = newVal; } }, @@ -582,7 +580,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrPositionTracks = [0, 1]; 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"); @@ -605,22 +603,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { boundObjectPropertyPath: "isMainCollapsed", oneway: false }); + + Object.defineBinding(this._mainCollapser, "bypassAnimation", { boundObject: this, boundObjectPropertyPath: "animateCollapser", oneway: false, boundValueMutator: function(value) { - return !value; + console.log('mutating') + return !value } }); - + */ /* this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; }; */ //this._mainCollapser.needsDraw = true; - +/* this._positionCollapser = Collapser.create(); this._positionCollapser.clicker = this.labelPosition; this._positionCollapser.myContent = this.contentPosition; @@ -634,7 +635,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { boundObjectPropertyPath: "isPositionCollapsed", oneway: false }); - + */ /* this._positionCollapser.labelClickEvent = function () { @@ -642,7 +643,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }; */ //this._positionCollapser.needsDraw = true; - +/* this._transformCollapser = Collapser.create(); this._transformCollapser.clicker = this.labelTransform; this._transformCollapser.myContent = this.contentTransform; @@ -656,7 +657,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { boundObjectPropertyPath: "isTransformCollapsed", oneway: false }); - + */ /* this._transformCollapser.labelClickEvent = function () { @@ -665,6 +666,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { */ //this._transformCollapser.needsDraw = true; +/* this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; @@ -679,7 +681,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { oneway: false }); - + */ /* this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; -- cgit v1.2.3 From bcfb704b04587f95a13c474cf0598ba90ec3b371 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 6 Mar 2012 18:06:40 -0800 Subject: Timeline: Code cleanup. Fix bug with unfound property in serialization. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 108 --------------------- 1 file changed, 108 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 92714c07..669dabef 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -582,114 +582,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrPositionTracks = [0, 1]; 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"); - this.contentPosition = this.element.querySelector(".content-position"); - this.labelTransform = this.element.querySelector(".label-transform"); - this.contentTransform = this.element.querySelector(".content-transform"); - this.labelStyles = this.element.querySelector(".label-styles"); - this.contentStyles = this.element.querySelector(".content-styles"); - - this._mainCollapser = Collapser.create(); - this._mainCollapser.clicker = this.label; - this._mainCollapser.myContent = this.myContent; - this._mainCollapser.contentHeight = 60; - this._mainCollapser.isLabelClickable = false; - this._mainCollapser.element = this.myContent; - this._mainCollapser.isCollapsed = this.isMainCollapsed; - this._mainCollapser.isAnimated = true; - Object.defineBinding(this._mainCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isMainCollapsed", - oneway: false - }); - - - Object.defineBinding(this._mainCollapser, "bypassAnimation", { - boundObject: this, - boundObjectPropertyPath: "animateCollapser", - oneway: false, - boundValueMutator: function(value) { - console.log('mutating') - return !value - } - }); - */ - /* - this._mainCollapser.labelClickEvent = function () { - that.isMainCollapsed = that._mainCollapser.isCollapsed; - }; - */ - //this._mainCollapser.needsDraw = true; -/* - this._positionCollapser = Collapser.create(); - this._positionCollapser.clicker = this.labelPosition; - this._positionCollapser.myContent = this.contentPosition; - this._positionCollapser.contentHeight = 40; - this._positionCollapser.isLabelClickable = true; - this._positionCollapser.element = this.contentPosition; - this._positionCollapser.isCollapsed = this.isPositionCollapsed; - this._positionCollapser.isAnimated = true; - Object.defineBinding(this._positionCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isPositionCollapsed", - oneway: false - }); - */ - - /* - this._positionCollapser.labelClickEvent = function () { - that.isPositionCollapsed = that._positionCollapser.isCollapsed; - }; - */ - //this._positionCollapser.needsDraw = true; -/* - this._transformCollapser = Collapser.create(); - this._transformCollapser.clicker = this.labelTransform; - this._transformCollapser.myContent = this.contentTransform; - this._transformCollapser.contentHeight = 100; - this._transformCollapser.isLabelClickable = false; - this._transformCollapser.element = this.contentTransform; - this._transformCollapser.isCollapsed = this.isTransformCollapsed; - this._transformCollapser.isAnimated = true; - Object.defineBinding(this._transformCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isTransformCollapsed", - oneway: false - }); - */ - - /* - 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 = 0; - this._styleCollapser.isLabelClickable = false; - this._styleCollapser.element = this.contentStyles; - this._styleCollapser.isCollapsed = this.isStyleCollapsed; - this._styleCollapser.isAnimated = true; - Object.defineBinding(this._styleCollapser, "isToggling", { - boundObject: this, - boundObjectPropertyPath: "isStyleCollapsed", - oneway: false - }); - - */ - /* - this._styleCollapser.labelClickEvent = function () { - that.isStyleCollapsed = that._styleCollapser.isCollapsed; - }; - */ - //this._styleCollapser.needsDraw = true; // Register event handler for layer events. //defaultEventManager.addEventListener("layerEvent", this, false); -- cgit v1.2.3