From 675dfa5057e118dac694b8fb9b960cfed48e1d52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 00:51:17 -0700 Subject: allow splitting existing spans with new keyframe Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 1 + .../Timeline/PropertyTrack.reel/PropertyTrack.js | 2 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 39 +++++++++++++++++++--- js/panels/Timeline/Tween.reel/Tween.js | 6 ---- 4 files changed, 37 insertions(+), 11 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f7259d29..e5fa71d3 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -67,6 +67,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { handleClick:{ value:function(ev){ this.selectKeyframe(); + ev.stopPropagation(); } }, diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 4f798f36..53b7bd5e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -24,7 +24,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { draw:{ value:function(){ - console.log(this.trackType); + } }, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index a1b1ce74..35440cc4 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -671,7 +671,40 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - console.log("Splitting an existing span with a new keyframe is not yet supported."); + console.log("Splitting an existing span with a new keyframe."); + var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; + var i; + var tweensLength = this.tweens.length-1; + var prevTween, nextTween, splitTweenIndex; + for(i=0; i prevTween && clickPos < nextTween){ + console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); + splitTweenIndex = this.tweens[i+1].tweenData.tweenID; + this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - clickPos; + this.tweens[i+1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; + ev.target.style.width = this.tweens[i+1].tweenData.spanWidth + "px"; + ev.target.parentElement.style.left = clickPos + "px"; + ev.target.parentElement.children[1].style.left = (this.tweens[i+1].tweenData.spanWidth - 3) + "px"; + + var newTweenToInsert = {}; + newTweenToInsert.tweenData = {}; + newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; + newTweenToInsert.tweenData.keyFramePosition = clickPos; + newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; + newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; + newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; + newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; + this.tweens.splice(splitTweenIndex, 0, newTweenToInsert); + } + } + + this.application.ninja.documentController.activeDocument.needsSave = true; } }, @@ -746,7 +779,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - this.animationName = "animation_" + this.animatedElement.classList[0]; + this.animationName = this.animatedElement.classList[0] + "_PositionSize"; 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", 1); @@ -766,8 +799,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - // first combine all style track tween arrays with the main track tween array - // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 6c273a49..48b41023 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -216,12 +216,6 @@ var Tween = exports.Tween = Montage.create(Component, { this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; } - // skewX - - // skewY - - // rotation - // tell track to update css rule this.parentComponent.parentComponent.updateKeyframeRule(); -- cgit v1.2.3