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