From 8e2dda460526735b4db2949656aa2e8ac041ad3c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 19 Jun 2012 14:39:30 -0700 Subject: prop tween splitting Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 83 +++++++++++++++++++++- js/panels/Timeline/Tween.reel/Tween.js | 3 + 2 files changed, 84 insertions(+), 2 deletions(-) diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 3a998617..9971933f 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -231,11 +231,28 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { }, handleNewPropTween:{ - value:function(ev){ + value:function (ev) { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - console.log("Splitting style tweens not yet supported."); + // 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.splitPropTweenAt(position - 18); } } }, @@ -324,6 +341,68 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + // splitTweenAt: Split a tween at a particular position (x coordinate) + splitPropTweenAt:{ + value:function (position) { + var i, j, nextComponentIndex, + tweensLength = this.propTweens.length - 1, + prevTween, + nextTween, + splitTweenIndex; + + // Search through the tweens and find the pair whose keyframes bracket position. + for (i = 0; i < tweensLength; i++) { + prevTween = this.propTweens[i].tweenData.keyFramePosition; + nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; + if (position > 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.propTweens[i + 1].tweenData.spanPosition = position; + this.propTweens[i + 1].spanPosition = position; + this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; + this.propTweens[i + 1].spanWidth = this.propTweens[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.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { + nextComponentIndex = j; + } + } + this.propTweenRepetition.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.propTweens.length; + newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens.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.propTweens[i].tweenID = i; + this.propTweens[i].tweenData.tweenID = i; + } + } + }, + retrieveStoredStyleTweens:{ value:function(){ var percentValue, fraction, splitValue; diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index dcc139a5..db368caf 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -271,6 +271,9 @@ var Tween = exports.Tween = Montage.create(Component, { // 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"){ + return; + } this.parentComponent.parentComponent.updatePropKeyframeRule(); } else { this.parentComponent.parentComponent.updateKeyframeRule(); -- cgit v1.2.3