From 27b3209543a1884e562436b1a9aa842bea1cbc9c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 16 Mar 2012 12:21:32 -0700 Subject: Start enforcing one element per layer Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 +++++-- 1 file changed, 5 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 c6b67c9c..90d135af 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -299,11 +299,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + // should be unneeded with one element per layer restriction _animatedElement:{ serializable:true, value:null }, - animatedElement:{ serializable:true, get:function () { @@ -367,7 +367,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function(){ this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; + this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction this.arrStyleTracks = this.trackData.arrStyleTracks; this.isTrackAnimated = this.trackData.isTrackAnimated; this.trackDuration = this.trackData.trackDuration; @@ -394,6 +394,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { draw:{ value:function () { this.ninjaStylesContoller = this.application.ninja.stylesController; + + // animatedElement going away - unneeded below var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; @@ -406,6 +408,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(!this.application.ninja.documentController.creatingNewFile){ if(this.application.ninja.currentDocument.documentRoot.children[0]){ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created); if(!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created){ this.retrieveStoredTweens(); } -- cgit v1.2.3 From 3bebf2b279d8f4da0439a4e3de1254c4292d0cac Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 16 Mar 2012 13:39:11 -0700 Subject: Timeline: Hook up data binding for changes on subproperties. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 85 ++++++++++++++++------ 1 file changed, 62 insertions(+), 23 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 c6b67c9c..b9a4574c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -26,8 +26,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._trackID; }, set:function (value) { - this._trackID = value; - //this.needsDraw = true; + if (value !== this._trackID) { + this._trackID = value; + } } }, @@ -40,11 +41,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._isMainCollapsed; }, set:function (newVal) { - this.log('TimelineTrack.js: isMainCollapsed: ', newVal); if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; } - } }, _isTransformCollapsed:{ @@ -96,8 +95,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - //console.log("timelinetrack bypassAnimation setter " + newVal) - this._bypassAnimation = newVal; + if (newVal !== this._bypassAnimation) { + this._bypassAnimation = newVal; + } + if (this.trackData.bypassAnimation !== newVal) { + this.trackData.bypassAnimation = newVal; + } } }, @@ -347,7 +350,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackData:{ - + serializable: true, + value: false }, trackData:{ @@ -358,30 +362,65 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function(val){ this._trackData = val; if(this._trackData){ - this.setData(); + this.setData(); } } }, + + _setDataTimestamp : { + value: false + }, setData:{ value:function(){ - this.trackID = this.trackData.layerID; - this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; - this.arrStyleTracks = this.trackData.arrStyleTracks; - this.isTrackAnimated = this.trackData.isTrackAnimated; - this.trackDuration = this.trackData.trackDuration; - this.animationName = this.trackData.animationName; - this.currentKeyframeRule = this.trackData.currentKeyframeRule; - this.isMainCollapsed = this.trackData.isMainCollapsed; - this.isPositionCollapsed = this.trackData.isPositionCollapsed; - this.isTransformCollapsed = this.trackData.isTransformCollapsed; - this.bypassAnimation = this.trackData.bypassAnimation; - this.isStyleCollapsed = this.trackData.isStyleCollapsed; - this.trackPosition = this.trackData.trackPosition; - this.needsDraw = true; + if (this.trackData) { + this.bypassAnimation = this.trackData.bypassAnimation; + this.trackID = this.trackData.layerID; + this.tweens = this.trackData.tweens; + this.animatedElement = this.trackData.animatedElement; + this.arrStyleTracks = this.trackData.arrStyleTracks; + this.isTrackAnimated = this.trackData.isTrackAnimated; + this.trackDuration = this.trackData.trackDuration; + this.animationName = this.trackData.animationName; + this.currentKeyframeRule = this.trackData.currentKeyframeRule; + this.isMainCollapsed = this.trackData.isMainCollapsed; + this.isPositionCollapsed = this.trackData.isPositionCollapsed; + this.isTransformCollapsed = this.trackData.isTransformCollapsed; + this.isStyleCollapsed = this.trackData.isStyleCollapsed; + this.trackPosition = this.trackData.trackPosition; + this.needsDraw = true; + } + } }, + + // Data binding observation point and trigger method + _bindingPoint : { + serializable: true, + value : {} + }, + bindingPoint: { + serializable: true, + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, + + triggerOutgoingBinding : { + value: function() { + if (this.trackData.triggerBinding === true) { + this.trackData.triggerBinding = false; + } else { + this.trackData.triggerBinding = true; + } + } + }, prepareForDraw:{ value:function () { -- cgit v1.2.3 From 6b5cdc7f3b59a70b506b4ac5c8a4d105c90c713c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 16 Mar 2012 15:04:13 -0700 Subject: Bug fix and cleanup Cleaning up unneeded code for one element per layer support and fixing some bugs with selection and layer sync. 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 90d135af..827e16c6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -408,7 +408,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(!this.application.ninja.documentController.creatingNewFile){ if(this.application.ninja.currentDocument.documentRoot.children[0]){ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created); if(!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created){ this.retrieveStoredTweens(); } -- cgit v1.2.3 From 10c58b2ccd93aabb692dbe7e86a88af9446c3c99 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 16 Mar 2012 15:58:23 -0700 Subject: Cleanup Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ---- 1 file changed, 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 827e16c6..8343ed90 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -394,8 +394,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { draw:{ value:function () { this.ninjaStylesContoller = this.application.ninja.stylesController; - - // animatedElement going away - unneeded below var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; @@ -420,9 +418,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function (ev) { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span // This needs to move to a keyboard shortcut that is TBD - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if (ev.shiftKey) { if (this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList.length == 1) { if (this.tweens.length < 1) { -- cgit v1.2.3 From aa2d8afb323e71ea562c74564609604e0480fde4 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 19 Mar 2012 16:53:29 -0700 Subject: Timeline: Re-enable adding/removing styles to layers. New methods in TimelinePanel for creating new styles on document load. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 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 601788ad..e9a2115a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -645,7 +645,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrTransformTracks = [0, 1, 2, 3, 4]; // Register event handler for layer events. - //defaultEventManager.addEventListener("layerEvent", this, false); + defaultEventManager.addEventListener("layerEvent", this, false); } }, -- cgit v1.2.3 From 3669eea4bde3518ce080048e9f53d2dd111fd8be Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 21 Mar 2012 11:37:48 -0700 Subject: Timeline: Bug fix: style collapsers not staying in synch. Also, removed console.log calls in hintable component. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++-- 1 file changed, 2 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 e9a2115a..011d991e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -672,8 +672,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } else if (layerEvent.layerEventType === "newStyle") { this.arrStyleTracks.push("1"); if (this._styleCollapser.isCollapsed === true) { - this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._styleCollapser.handleCollapserLabelClick(); + //this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; + //this._styleCollapser.handleCollapserLabelClick(); } } else if (layerEvent.layerEventType === "deleteStyle") { this.arrStyleTracks.pop(); -- cgit v1.2.3 From 2d9cb9ca8f6beb661a3d904b5125afa8243661de Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 21 Mar 2012 15:40:33 -0700 Subject: Timeline: First integration of drag and drop of layers. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 22 +++------------------- 1 file changed, 3 insertions(+), 19 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 011d991e..40af9af6 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -655,27 +655,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (layerEvent.layerID !== this.trackID) { return; } - if (layerEvent.layerEventType === "labelClick") { - if (layerEvent.layerEventLocale === "content-main") { - this._mainCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._mainCollapser.toggle(); - } else if (layerEvent.layerEventLocale === "content-position") { - this._positionCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._positionCollapser.handleCollapserLabelClick(); - } else if (layerEvent.layerEventLocale === "content-transform") { - this._transformCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._transformCollapser.handleCollapserLabelClick(); - } else if (layerEvent.layerEventLocale === "content-style") { - this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; - this._styleCollapser.handleCollapserLabelClick(); - } - } else if (layerEvent.layerEventType === "newStyle") { + if (layerEvent.layerEventType === "newStyle") { + // TODO: Add a real track of tweens. Probably need a method for that. this.arrStyleTracks.push("1"); - if (this._styleCollapser.isCollapsed === true) { - //this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; - //this._styleCollapser.handleCollapserLabelClick(); - } } else if (layerEvent.layerEventType === "deleteStyle") { + // TODO: Delete the right track. Index can be passed in event object, use that for splice(). this.arrStyleTracks.pop(); } } -- cgit v1.2.3 From 5a977f2ac151766530c129e26edc39055d11c07f Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 26 Mar 2012 11:49:48 -0700 Subject: Fix bug with track properties getting over written Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 43 ++++++++++++++-------- 1 file changed, 28 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 40af9af6..36b2fe08 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -28,6 +28,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (value) { if (value !== this._trackID) { this._trackID = value; + this.trackData.layerID = value; } } }, @@ -43,6 +44,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; + this.trackData.isMainCollapsed = newVal; } } }, @@ -56,6 +58,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isTransformCollapsed) { this._isTransformCollapsed = newVal; + this.trackData.isTransformCollapsed = newVal; } } }, @@ -69,6 +72,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isPositionCollapsed) { this._isPositionCollapsed = newVal; + this.trackData.isPositionCollapsed = newVal; } } }, @@ -82,6 +86,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isStyleCollapsed) { this._isStyleCollapsed = newVal; + this.trackData.isStyleCollapsed = newVal; } } }, @@ -97,10 +102,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set: function(newVal) { if (newVal !== this._bypassAnimation) { this._bypassAnimation = newVal; + this.trackData.bypassAnimation = newVal; } - if (this.trackData.bypassAnimation !== newVal) { - this.trackData.bypassAnimation = newVal; - } } }, @@ -117,7 +120,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set: function(newVal) { this._arrStyleTracks = newVal; - //this.needsDraw = true; + this.trackData.arrStyleTracks = newVal; } }, _styleTracksRepetition: { @@ -131,7 +134,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set: function(newVal) { this._styleTracksRepetition = newVal; - //needsDraw = true; } }, @@ -149,7 +151,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set: function(newVal) { this._arrPositionTracks = newVal; - //this.needsDraw = true; + this.trackData.arrPositionTracks = newVal; } }, _positionTracksRepetition: { @@ -163,7 +165,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set: function(newVal) { this._positionTracksRepetition = newVal; - //this.needsDraw = true; } }, @@ -182,7 +183,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set: function(newVal) { this._arrTransformTracks = newVal; - //this.needsDraw = true; + this.trackData.arrTransformTracks = newVal; } }, _transformTracksRepetition: { @@ -196,7 +197,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set: function(newVal) { this._transformTracksRepetition = newVal; - //this.needsDraw = true; } }, @@ -212,7 +212,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function (newVal) { this._tweens = newVal; - //this.needsDraw=true; + this.trackData.tweens = newVal; } }, @@ -246,6 +246,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(this._trackDuration > this.application.ninja.timeline.masterDuration){ this.application.ninja.timeline.masterDuration = this._trackDuration; } + this.trackData.trackDuration = val; } }, @@ -261,6 +262,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function (val) { this._trackPosition = val; + this.trackData.trackPosition = val; } }, @@ -276,6 +278,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function(val){ this._currentKeyframeRule = val; + this.trackData.currentKeyframeRule = val; } }, @@ -299,21 +302,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function(val){ this._isTrackAnimated = val; + this.trackData.isTrackAnimated = val; } }, // should be unneeded with one element per layer restriction _animatedElement:{ + enumerable: true, serializable:true, value:null }, animatedElement:{ + enumerable: true, serializable:true, get:function () { return this._animatedElement; }, set:function (val) { this._animatedElement = val; + this.trackData.animatedElement = val; } }, @@ -329,6 +336,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function (val) { this._animationName = val; + this.trackData.animationName = val; } }, @@ -373,6 +381,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { setData:{ value:function(){ + console.log("setting track data"); + this.bypassAnimation = this.trackData.bypassAnimation; this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; @@ -439,12 +449,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { didDraw:{ value:function () { - if(!this.application.ninja.documentController.creatingNewFile){ - if(this.application.ninja.currentDocument.documentRoot.children[0]){ + if (!this.application.ninja.documentController.creatingNewFile) { + if (this.application.ninja.currentDocument.documentRoot.children[0]) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if(!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created){ + if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { this.retrieveStoredTweens(); - } + } } } } @@ -603,7 +613,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { 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); this.isTrackAnimated = true; } @@ -612,6 +624,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { updateKeyframeRule:{ value:function () { // delete the current rule + console.log(this.currentKeyframeRule); this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); // build the new keyframe string @@ -630,6 +643,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { keyframeString += keyframePropertyString; } keyframeString += " }"; + console.log(keyframeString); // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); this.application.ninja.documentController.activeDocument.needsSave = true; @@ -639,7 +653,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Init and event handler for layer expand/collapse init:{ value:function () { - var that = this; this.arrPositionTracks = [0, 1]; this.arrTransformTracks = [0, 1, 2, 3, 4]; -- cgit v1.2.3 From 6902b20474da22029d84d92a5a6bfa129a30d92e Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 26 Mar 2012 11:52:51 -0700 Subject: Remove console logs Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ---- 1 file changed, 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 36b2fe08..5e9868f0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -381,8 +381,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { setData:{ value:function(){ - console.log("setting track data"); - this.bypassAnimation = this.trackData.bypassAnimation; this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; @@ -624,7 +622,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { updateKeyframeRule:{ value:function () { // delete the current rule - console.log(this.currentKeyframeRule); this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); // build the new keyframe string @@ -643,7 +640,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { keyframeString += keyframePropertyString; } keyframeString += " }"; - console.log(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 7845d312396e3329ac9246d4c13e99cb623216d5 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 27 Mar 2012 18:22:10 -0700 Subject: Timeline: Stability fixes for drag-and-drop and page switching. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 17 +++++++++++++---- 1 file changed, 13 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 5e9868f0..978b239f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -381,6 +381,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { setData:{ value:function(){ + if (typeof(this.trackData) === "undefined") { + return; + } this.bypassAnimation = this.trackData.bypassAnimation; this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; @@ -439,9 +442,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function () { this.ninjaStylesContoller = this.application.ninja.stylesController; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ - this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; + if (selectedIndex !== false) { + if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){ + this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; + } } + } }, @@ -450,9 +456,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (!this.application.ninja.documentController.creatingNewFile) { if (this.application.ninja.currentDocument.documentRoot.children[0]) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { - this.retrieveStoredTweens(); + if (selectedIndex !== false) { + if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { + this.retrieveStoredTweens(); + } } + } } } -- cgit v1.2.3 From 18143071c9e1308d6cb9289477563aea22856c5e Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 30 Mar 2012 12:16:40 -0700 Subject: Timeline: Bug fixes. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 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 978b239f..e294a69e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -100,7 +100,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - if (newVal !== this._bypassAnimation) { + if ((newVal !== this._bypassAnimation) && (typeof(this.trackData) !== "undefined")) { this._bypassAnimation = newVal; this.trackData.bypassAnimation = newVal; } -- cgit v1.2.3 From 1ca98c8c69ea3ef28e8bc050326306424824296d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Apr 2012 12:56:19 -0700 Subject: Timeline: Initial implementation of timeline zoom. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 53 ++++++++++++++++++++++ 1 file changed, 53 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 978b239f..b5d06ae1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -435,6 +435,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.init(); this.ninjaStylesContoller = this.application.ninja.stylesController; this.element.addEventListener("click", this, false); + this.eventManager.addEventListener("tlZoomSlider", this, false); } }, @@ -467,6 +468,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + handleTlZoomSlider: { + value: function(event) { + + var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush; + var i = 0, + tweensLength = this.tweens.length; + + for (i = 0; i < tweensLength; i++) { + + if (i === 0) { + // Exception: 0th item does not depend on anything + // TODO: If 0th tween is draggable, this will need to be fixed. + this.tweens[i].tweenData.spanWidth=0; + this.tweens[i].tweenData.spanPosition=0; + this.tweens[i].tweenData.keyFramePosition=0; + this.tweens[i].tweenData.keyFrameMillisec=0; + + } else { + var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition, + myObj = {}, + thing = {}; + + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + + for (thing in this.tweens[i].tweenData) { + myObj[thing] = this.tweens[i].tweenData[thing]; + } + myObj.spanWidth = clickPos - prevKeyFramePosition; + myObj.keyFramePosition = clickPos; + myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition); + + this.tweens[i].tweenData = myObj; + } + + + } + } + }, handleClick:{ value:function (ev) { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span @@ -681,6 +722,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrStyleTracks.pop(); } } + }, + getTweenIndexById: { + value: function(intID) { + var i = 0, + arrTweensLength = this.tweens.length; + for (i = 0; i < arrTweensLength; i++) { + if (this.tweens[i].tweenData.tweenID === intID) { + returnVal = i; + } + } + return returnVal; + } }, /* Begin: Logging routines */ _boolDebug: { -- cgit v1.2.3 From a8ea8f377919c7f1a6af69311f55fd57727d9058 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 5 Apr 2012 13:40:14 -0700 Subject: Timeline: Improved drag-and-drop performance. Also fix problems with expand/collapse getting out of synch during drag-and-drop. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 26 ++++++++-------------- 1 file changed, 9 insertions(+), 17 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 edca4306..8b639758 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -42,10 +42,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._isMainCollapsed; }, set:function (newVal) { - if (newVal !== this._isMainCollapsed) { - this._isMainCollapsed = newVal; - this.trackData.isMainCollapsed = newVal; - } + this._isMainCollapsed = newVal; + this.trackData.isMainCollapsed = newVal; } }, _isTransformCollapsed:{ @@ -56,10 +54,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._isTransformCollapsed; }, set:function (newVal) { - if (newVal !== this._isTransformCollapsed) { - this._isTransformCollapsed = newVal; - this.trackData.isTransformCollapsed = newVal; - } + this._isTransformCollapsed = newVal; + this.trackData.isTransformCollapsed = newVal; } }, _isPositionCollapsed:{ @@ -70,10 +66,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._isPositionCollapsed; }, set:function (newVal) { - if (newVal !== this._isPositionCollapsed) { - this._isPositionCollapsed = newVal; - this.trackData.isPositionCollapsed = newVal; - } + this._isPositionCollapsed = newVal; + this.trackData.isPositionCollapsed = newVal; } }, _isStyleCollapsed:{ @@ -84,10 +78,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._isStyleCollapsed; }, set:function (newVal) { - if (newVal !== this._isStyleCollapsed) { - this._isStyleCollapsed = newVal; - this.trackData.isStyleCollapsed = newVal; - } + this._isStyleCollapsed = newVal; + this.trackData.isStyleCollapsed = newVal; } }, _bypassAnimation : { @@ -100,7 +92,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - if ((newVal !== this._bypassAnimation) && (typeof(this.trackData) !== "undefined")) { + if (typeof(this.trackData) !== "undefined") { this._bypassAnimation = newVal; this.trackData.bypassAnimation = newVal; } -- cgit v1.2.3 From 4c492e2f9d01a699aba8ccdd1a2b04238749ea3c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 10 Apr 2012 14:49:20 -0700 Subject: Timeline: New Features: Tag name now present in each layer. Configuration dropdown in Master Layer; Show Only Animated Layers toggle. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 24 +++++++++++++++++++++- 1 file changed, 23 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 8b639758..64ac08d3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -32,6 +32,28 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, + _isVisible:{ + value: true + }, + + isVisible:{ + get:function(){ + return this._isVisible; + }, + set:function(value){ + if (this._isVisible !== value) { + this._isVisible = value; + if (this.element !== null) { + if (value === true) { + this.element.classList.remove("layer-hidden"); + } else { + this.element.classList.add("layer-hidden"); + } + } + } + this.trackData.isVisible = value; + } + }, // Are the various collapsers collapsed or not _isMainCollapsed:{ @@ -390,6 +412,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.isTransformCollapsed = this.trackData.isTransformCollapsed; this.isStyleCollapsed = this.trackData.isStyleCollapsed; this.trackPosition = this.trackData.trackPosition; + this.isVisible = this.trackData.isVisible; this.needsDraw = true; } }, @@ -454,7 +477,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.retrieveStoredTweens(); } } - } } } -- cgit v1.2.3 From 0e6e40a835a73ba04156d579f5a0c900a9b5c4eb Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 13 Apr 2012 14:45:08 -0700 Subject: Timeline: Bug fixes for restoring tweens on new document and breadcrumb. --- 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 64ac08d3..87fd8282 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -469,12 +469,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { didDraw:{ value:function () { - if (!this.application.ninja.documentController.creatingNewFile) { + if ((!this.application.ninja.documentController.creatingNewFile) || (this.application.ninja.breadCrumbClick)) { if (this.application.ninja.currentDocument.documentRoot.children[0]) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if (selectedIndex !== false) { if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { this.retrieveStoredTweens(); + this.application.ninja.breadCrumbClick = false; } } } -- cgit v1.2.3 From a2af3c8bd2349a24dd7de920381b04847a863a46 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 16 Apr 2012 09:58:19 -0700 Subject: Fix tweens not updating keyframe rules Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 87fd8282..25452891 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -533,8 +533,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); + this.updateKeyframeRule(); } else { this.handleNewTween(ev); + this.updateKeyframeRule(); } } else { console.log("There must be exactly one element in an animated layer."); @@ -588,6 +590,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.nextKeyframe += 1; } + this.application.ninja.documentController.activeDocument.needsSave = true; } }, -- cgit v1.2.3 From 9f39474ac006be7decf67437d8ef14c9ee0a1756 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 18 Apr 2012 10:20:33 -0700 Subject: FIX for layer selection when adding a keyframe in unselected layer Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 25452891..84d93ea3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -548,6 +548,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleNewTween:{ value:function (ev) { if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + this.application.ninja.timeline.selectLayer(selectedIndex, false); this.insertTween(ev.offsetX); } else { this.splitTween(ev); @@ -557,6 +559,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + this.application.ninja.timeline.selectLayer(selectedIndex, true); + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; -- cgit v1.2.3 From b7d5b9e9b69644cdafdcc9b7ef2fe2674f35db18 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Thu, 19 Apr 2012 13:48:28 -0700 Subject: BreadCrumb Bug Fix Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++-- 1 file changed, 2 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 25452891..145b03ef 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -469,13 +469,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { didDraw:{ value:function () { - if ((!this.application.ninja.documentController.creatingNewFile) || (this.application.ninja.breadCrumbClick)) { + if ((!this.application.ninja.documentController.creatingNewFile) || (!this.application.ninja.currentDocument.breadCrumbClick)) { if (this.application.ninja.currentDocument.documentRoot.children[0]) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if (selectedIndex !== false) { if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { this.retrieveStoredTweens(); - this.application.ninja.breadCrumbClick = false; + } } } -- cgit v1.2.3 From 933338e13e73243965d105170a269a41f7efd77f Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Fri, 20 Apr 2012 16:25:36 -0700 Subject: Breadcrumb Fix Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 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 aacddd3b..e79602e7 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -469,7 +469,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { didDraw:{ value:function () { - if ((!this.application.ninja.documentController.creatingNewFile) || (!this.application.ninja.currentDocument.breadCrumbClick)) { + if ((!this.application.ninja.documentController.creatingNewFile)||(!this.application.ninja.currentDocument.setLevel)) { if (this.application.ninja.currentDocument.documentRoot.children[0]) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if (selectedIndex !== false) { -- cgit v1.2.3 From 47488a6ff1b7fc32e2485b3dd82afe207b936b35 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 24 Apr 2012 08:46:22 -0700 Subject: Turn on width and height as tweenable properties Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index e79602e7..e46a5eb0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -578,6 +578,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; + newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; this.tweens.push(newTween); } else { newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; @@ -588,6 +590,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; + newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; this.tweens.push(newTween); // update the animation duration -- cgit v1.2.3