From 0031310ea80a33b1752d3813070b00215f0c52c6 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 27 Feb 2012 21:55:37 -0800 Subject: Timeline: Successfully unbind event listeners in tweens when clearing timeline. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 158d666e..26d045d6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -62,6 +62,11 @@ "boundObject" : {"@": "tweenRepetition"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", "oneway" : false + }, + "isClearing" : { + "boundObject" : {"@": "tweenRepetition"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing", + "oneway" : false } } }, -- cgit v1.2.3 From ad730e448c523b8c849cb1c9c63a30e8b62a2780 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 28 Feb 2012 08:33:44 -0800 Subject: Fix re-reopened animation duration and milliseconds Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 55c84dce..d369106c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -553,7 +553,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; for (var i = 0; i < this.tweens.length; i++) { - var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; + var keyMill = parseInt(this.tweens[i].keyFrameMillisec); + var trackDur = parseFloat(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;"; -- cgit v1.2.3 From b301702e2eed93df9124b9f4f9a02fdf36d31dfa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 28 Feb 2012 08:41:37 -0800 Subject: todo note 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') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index d369106c..d6c1128e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -554,7 +554,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { for (var i = 0; i < this.tweens.length; i++) { var keyMill = parseInt(this.tweens[i].keyFrameMillisec); - var trackDur = parseFloat(this.trackDuration); + // TODO - trackDur should be parseFloat rounded to significant digits + var trackDur = parseInt(this.trackDuration); var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; -- cgit v1.2.3 From ffe308bc1c876b83a0b24fc1234a16f21a601aa2 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 28 Feb 2012 09:17:09 -0800 Subject: remove comment 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') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index d6c1128e..bbf505fc 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -377,7 +377,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // 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[selectedIndex].elementsList.length == 1) { -- cgit v1.2.3 From 09d487fb5d28a181f69e3c6afa87d6e2f624317b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 28 Feb 2012 10:07:04 -0800 Subject: Fix to animation names to support multiclassed elements Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bbf505fc..43cd7477 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -532,7 +532,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { 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 = "animation_" + this.animatedElement.className; + 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"); -- cgit v1.2.3 From 631c9750e5ad6d7739d8683c31aa3a9f8f3b4e4c Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 28 Feb 2012 15:01:41 -0800 Subject: Timeline: Fix Selection , Partially Fix adding element to an already animated track with one element Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 43cd7477..bf97c0fd 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -519,6 +519,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { i++; this.nextKeyframe += 1; } + this.isTrackAnimated = true; } } else{ -- cgit v1.2.3 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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