From 2fa7782ef03fcbcd4cd176ca4850b764478da342 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 2 Jul 2012 08:45:08 -0700 Subject: select keyframe when first created Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 89f18f98..fe9b70d3 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -170,6 +170,12 @@ var Tween = exports.Tween = Montage.create(Component, { }, + prepareForDraw:{ + value:function(){ + this.keyframe.selectKeyframe(); + } + }, + draw:{ value:function () { this.tweenspan.element.style.width = this.spanWidth + "px"; -- cgit v1.2.3 From 2bba5361f817e96b4f84bdf5e472358da3dcec77 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 2 Jul 2012 09:13:21 -0700 Subject: Fix 3d rotate tweens not showing up Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index fe9b70d3..ae8acc57 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -250,7 +250,7 @@ var Tween = exports.Tween = Montage.create(Component, { this.isTweenAnimated = true; } - if (eventDetail.source === "translateTool") { + if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") { var arrMat = eventDetail.data.value[0].properties.mat, strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; -- cgit v1.2.3 From 0ea5607c3760852b1fe63ad568b4db064129955b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 2 Jul 2012 13:45:28 -0700 Subject: Fix performance bug when moving between nested levels Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index ae8acc57..0d189fba 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -170,9 +170,26 @@ var Tween = exports.Tween = Montage.create(Component, { }, + _initSelect:{ + value: null + }, + initSelect:{ + serializable:true, + get:function () { + return this._initSelect; + }, + set:function (newVal) { + this._initSelect = newVal; + this.tweenData.initSelect = newVal; + } + }, + prepareForDraw:{ value:function(){ - this.keyframe.selectKeyframe(); + if(this.initSelect){ + this.keyframe.selectKeyframe(); + this.initSelect = false; + } } }, @@ -200,6 +217,7 @@ var Tween = exports.Tween = Montage.create(Component, { this.tweenedProperties = this.tweenData.tweenedProperties; this.isTweenAnimated = this.tweenData.isTweenAnimated; this.easing = this.tweenData.easing; + this.initSelect = this.tweenData.initSelect; this.needsDraw = true; } }, -- cgit v1.2.3 From 776e7015b2462e024a9db8e9a208d57856d975d0 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 11:09:45 -0700 Subject: Cleanup Tween.js Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 69 ++++++++++++---------------------- 1 file changed, 25 insertions(+), 44 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 0d189fba..6b940c91 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -11,6 +11,7 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; var Tween = exports.Tween = Montage.create(Component, { + // ==== Begin Models keyframe: { value: null, serializable: true @@ -184,6 +185,23 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + setData:{ + value:function(){ + this.spanWidth = this.tweenData.spanWidth; + this.keyFramePosition = this.tweenData.keyFramePosition; + this.spanPosition = this.tweenData.spanPosition; + this.keyFrameMillisec = this.tweenData.keyFrameMillisec; + this.tweenID = this.tweenData.tweenID; + this.tweenedProperties = this.tweenData.tweenedProperties; + this.isTweenAnimated = this.tweenData.isTweenAnimated; + this.easing = this.tweenData.easing; + this.initSelect = this.tweenData.initSelect; + this.needsDraw = true; + } + }, + // ==== End Models + + // ==== Begin Draw cycle methods prepareForDraw:{ value:function(){ if(this.initSelect){ @@ -206,37 +224,19 @@ var Tween = exports.Tween = Montage.create(Component, { } } }, + // ==== End Draw cycle methods - setData:{ - value:function(){ - this.spanWidth = this.tweenData.spanWidth; - this.keyFramePosition = this.tweenData.keyFramePosition; - this.spanPosition = this.tweenData.spanPosition; - this.keyFrameMillisec = this.tweenData.keyFrameMillisec; - this.tweenID = this.tweenData.tweenID; - this.tweenedProperties = this.tweenData.tweenedProperties; - this.isTweenAnimated = this.tweenData.isTweenAnimated; - this.easing = this.tweenData.easing; - this.initSelect = this.tweenData.initSelect; - this.needsDraw = true; - } - }, - + // ==== Begin Event handlers handleElementChange:{ value:function (event) { - // temp - testing var - var useAbsolute = true; - if(event.detail.type === "cssChange"){ event.detail.source="cssPanelChange" } - if (event.detail.source && event.detail.source !== "tween") { if(this.parentComponent.parentComponent.isSubproperty){ this.setStyleTweenProperty(event.detail); } else { - // check for correct element selection if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { console.log("Wrong element selected for this keyframe track"); } else { @@ -246,10 +246,11 @@ var Tween = exports.Tween = Montage.create(Component, { } } }, + // ==== End Event handlers + // ==== Begin Controllers setTweenProperties:{ value:function (eventDetail) { - if (eventDetail.source === "SelectionTool" || eventDetail.source === "timeline" || eventDetail.source === "pi" || eventDetail.source === "cssPanelChange") { if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; @@ -263,7 +264,7 @@ var Tween = exports.Tween = Montage.create(Component, { if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; } - // tell track to update css rule + this.parentComponent.parentComponent.updateKeyframeRule(); this.isTweenAnimated = true; } @@ -281,26 +282,17 @@ var Tween = exports.Tween = Montage.create(Component, { setStyleTweenProperty:{ value:function (eventDetail) { - //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); - //console.log(eventDetail); if(eventDetail.type == "setProperties"){ - // need to ignore top, left, width, and height - //console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; this.parentComponent.parentComponent.updatePropKeyframeRule(); - } else if(eventDetail.type == "setColor"){ var prop = this.parentComponent.parentComponent.trackEditorProperty; this.tweenedProperties[prop] = eventDetail.data.value.color.css; this.parentComponent.parentComponent.updatePropKeyframeRule(); - } else if(eventDetail.type == "setProperty"){ - // need to ignore top, left, width, and height - //console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; this.parentComponent.parentComponent.updatePropKeyframeRule(); - - }else { + } else { console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); } } @@ -308,7 +300,6 @@ var Tween = exports.Tween = Montage.create(Component, { setKeyframeEase:{ value:function(easeType){ - // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) this.tweenedProperties["-webkit-animation-timing-function"] = easeType; if(this.parentComponent.parentComponent.isSubproperty){ if(this.parentComponent.parentComponent.trackType == "position"){ @@ -323,18 +314,11 @@ var Tween = exports.Tween = Montage.create(Component, { selectTween:{ value: function(){ - // turn on event listener for element change this.eventManager.addEventListener("elementChange", this, false); - - // select the containing layer var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); this.application.ninja.timeline.selectLayer(selectIndex, true); - - // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline this.application.ninja.timeline.deselectTweens(); this.application.ninja.timeline.selectedTweens.push(this); - - // update playhead position and time text this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px"; var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); @@ -342,13 +326,11 @@ var Tween = exports.Tween = Montage.create(Component, { this.application.ninja.timeline.updateTimeText(currentMillisec); if(this.parentComponent.parentComponent.isSubproperty){ - // set property specific style on element var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; var el = this.parentComponent.parentComponent.animatedElement; var prop = this.parentComponent.parentComponent.trackEditorProperty; this.application.ninja.elementMediator.setProperty([el], prop, [currentValue], "Change", "tween"); } else { - // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"]; var currentLeft = this.tweenedProperties["left"]; var currentWidth = this.tweenedProperties["width"]; @@ -364,10 +346,9 @@ var Tween = exports.Tween = Montage.create(Component, { deselectTween:{ value:function(){ - // turn off event listener for element change this.eventManager.removeEventListener("elementChange", this, false); - // deselect the keyframe for this tween this.keyframe.deselectKeyframe(); } } + // ==== End Controllers }); -- cgit v1.2.3 From 8c087f7c13a2bd72e1640e99e339a74fc2250901 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 15:47:50 -0700 Subject: Timeline: First pass at cleaning up TimelineTrack code. Changes propagated to PropertyTrack, TimelineTrack, and Tween classes. --- js/panels/Timeline/Tween.reel/Tween.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 6b940c91..472e64e2 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -316,7 +316,9 @@ var Tween = exports.Tween = Montage.create(Component, { value: function(){ this.eventManager.addEventListener("elementChange", this, false); var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); - this.application.ninja.timeline.selectLayer(selectIndex, true); + // this.application.ninja.timeline.selectLayer(selectIndex, true); // deprecated + this.application.ninja.timeline.selectLayers([selectIndex]); + this.application.ninja.timeline.updateStageSelection(); this.application.ninja.timeline.deselectTweens(); this.application.ninja.timeline.selectedTweens.push(this); this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; -- cgit v1.2.3 From 33e54da07d024ece1d52041d4ed2bcc28b8cbca3 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 16 Jul 2012 15:38:59 -0700 Subject: Timeline: Ameliorate slowness when adding first keyframe to an element. --- js/panels/Timeline/Tween.reel/Tween.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 85fdfdc9..d41ad74f 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -229,7 +229,13 @@ var Tween = exports.Tween = Montage.create(Component, { prepareForDraw:{ value:function(){ if(this.initSelect){ - this.keyframe.selectKeyframe(); + // Select our new keyframe only if our parent is a main track. + // TODO: When we decouple all property tracks, this will go away. + if (typeof(this.parentComponent.parentComponent.trackType) === "undefined") { + if (this.tweenID > 0) { + this.keyframe.selectKeyframe(); + } + } this.initSelect = false; } } -- cgit v1.2.3