From 730389f72b1f2949e74b4ce8f8625bfd8bc4fa39 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 18 Jun 2012 16:12:49 -0700 Subject: Timeline: Bug Fixes - Splitting tweens now works again for shift-click interaction - Fixed visual "jump" in keyframes and spans when splitting tweens - Set default easing to "none" to match CSS standard. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 101 +++++++++++++++++++-- 1 file changed, 95 insertions(+), 6 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 3db57a3a..74dd1ca1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (ev.target.className === "tracklane") { this.handleNewTween(ev); this.updateKeyframeRule(); - } else if (ev.target.className === "tween_span" && ev.target.parentElement.parentElement.className === "tracklane") { + } else if (ev.target.className === "tween_span_bar" && ev.target.parentElement.parentElement.parentElement.className === "tracklane") { this.handleNewTween(ev); this.updateKeyframeRule(); } @@ -703,6 +703,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.addAnimationRuleToElement(ev); this.updateKeyframeRule(); } else { + + this.handleNewTween(ev); this.updateKeyframeRule(); } @@ -716,7 +718,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.selectLayer(selectedIndex, false); this.insertTween(ev.offsetX); } else { - this.splitTween(ev); + // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. + // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. + + // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element + var findXOffset = function(obj) { + var curleft = 0; + if (obj.offsetParent) { + do { + curleft += (obj.offsetLeft-obj.scrollLeft); + + } while (obj = obj.offsetParent); + } + return curleft; + } + var targetElementOffset = findXOffset(ev.currentTarget), + position = event.pageX - targetElementOffset; + + this.splitTweenAt(position-18); } } }, @@ -771,10 +790,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; - var i; - var tweensLength = this.tweens.length-1; - var prevTween, nextTween, splitTweenIndex; + var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX, + i, + tweensLength = this.tweens.length-1, + prevTween, nextTween, splitTweenIndex; + + consol.log(ev.target.className) for(i=0; i prevTween && position < nextTween) { + + // We will insert a new tween at this index + splitTweenIndex = i+1; + + // Update the next tween to have new span position and width. + this.tweens[i+1].tweenData.spanPosition = position; + this.tweens[i+1].spanPosition = position; + this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - position; + this.tweens[i+1].spanWidth = this.tweens[i+1].keyFramePosition - position; + + // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? + // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. + // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. + for (j = 0; j < tweensLength +1; j++) { + if (this.tweenRepetition.childComponents[j].keyFramePosition === nextTween) { + nextComponentIndex = j; + } + } + this.tweenRepetition.childComponents[nextComponentIndex].setData(); + + // Create the new tween and splice it into the model + var newTweenToInsert = {}; + newTweenToInsert.tweenData = {}; + newTweenToInsert.tweenData.spanWidth = position - prevTween; + newTweenToInsert.tweenData.keyFramePosition = position; + newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position; + newTweenToInsert.tweenData.tweenID = this.tweens.length; + newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; + newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; + newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; + newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; + this.tweens.splice(splitTweenIndex, 0, newTweenToInsert); + + // We are done, so end the loop. + i = tweensLength; + } + } + + // We've made a change, so set the needsSave flag + this.application.ninja.currentDocument.model.needsSave = true; + + // Our tween IDs are now all messed up. Fix them. + for (i = 0; i <= tweensLength+1; i++) { + this.tweens[i].tweenID = i; + this.tweens[i].tweenData.tweenID = i; + } + } + }, + retrieveStoredTweens:{ value:function () { var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute,widthOffsetAttribute,heightOffsetAttribute; @@ -885,6 +971,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; newTween.tweenData.easing = this.currentKeyframeRule[i].style.webkitAnimationName; + if (newTween.tweenData.easing == "") { + newTween.tweenData.easing = "none"; + } this.tweens.push(newTween); } this.nextKeyframe += 1; -- cgit v1.2.3 From 3163108217677d7eec1c79cf6aa7525cdd6600ef Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 18 Jun 2012 16:24:02 -0700 Subject: Timeline: Default easing for new animation keyframes set to "none" per CSS standard. --- 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 74dd1ca1..a4d20c39 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -770,7 +770,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = currentMillisec; newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; - newTween.tweenData.easing = "ease-in"; + newTween.tweenData.easing = "none"; newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; -- cgit v1.2.3 From e600253fa8e6027c4bac7ebb69e0d4ce12a76ff8 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 18 Jun 2012 16:46:00 -0700 Subject: Timeline: Enable splitting of keyframes with F6 interaction. Bug fix: Error on console if you press F6 with no layer selected. --- 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 a4d20c39..84bac2cb 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -703,9 +703,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.addAnimationRuleToElement(ev); this.updateKeyframeRule(); } else { - - - this.handleNewTween(ev); + //this.handleNewTween(ev); + + // Split a tween! + this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft) this.updateKeyframeRule(); } } -- cgit v1.2.3