From 79cbc26904a7fbd7a846f48da6c026a91221ba93 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 11 Jun 2012 10:11:15 -0700 Subject: changes to reopen sub property functions Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 5 +- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 75 +++++++++++++++++++++- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 12 ++-- 3 files changed, 83 insertions(+), 9 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 3fc5a3e1..acc0567c 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -601,7 +601,7 @@ var Layer = exports.Layer = Montage.create(Component, { } }, addStyle : { - value: function(styleProperty) { + value: function(styleProperty, existingRule) { // Add a new style rule. It should be added above the currently selected rule, // Or at the end, if no rule is selected. @@ -630,6 +630,9 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.editorProperty = styleProperty; newEvent.layerEventType = "restoreStyle"; newEvent.trackEditorProperty = styleProperty; + if(existingRule){ + newEvent.existingRule = existingRule; + } } newStyle.editorValue = ""; newStyle.ruleTweener = false; diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 59bc14e4..d602641e 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.currentKeyframeRule); } }, @@ -178,6 +178,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.propTweens = this.propTrackData.propTweens; this.trackType = this.propTrackData.trackType; this.trackEditorProperty = this.propTrackData.trackEditorProperty; + this.currentKeyframeRule = this.propTrackData.existingRule; this.needsDraw = true; } }, @@ -315,7 +316,77 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { retrieveStoredStyleTweens:{ value:function(){ - console.log("retrieve style tweens"); + console.log("retrieving style tweens"); + var percentValue, fraction, splitValue; + var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, i = 0; + + if (this.animatedElement !== undefined) { + + //this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); + + // build tweens for this tracks's keyframe rule + if (this.animationName) { + + trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + this.nextKeyframe = 0; + + this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument.model.views.design.document); + + for (i = 0; this.currentKeyframeRule[i]; i++) { + var newTween = {}; + newTween.tweenData = {}; + + var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; + + for (j = 0; j < styleLength; j++) { + + // check for vendor prefixes and skip them for now + var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); + if (firstChar === "-") { + break; + } else { + var currProp = this.currentKeyframeRule[i].style[j]; + var propVal = this.currentKeyframeRule[i].style[currProp]; + keyframeStyles.push([currProp, propVal]); + } + } + + // recreate tween properties array for timeline tween + newTween.tweenData.tweenedProperties = []; + for (var k in keyframeStyles) { + newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; + } + + if (this.currentKeyframeRule[i].keyText === "0%") { + newTween.tweenData.spanWidth = 0; + newTween.tweenData.keyFramePosition = 0; + newTween.tweenData.keyFrameMillisec = 0; + newTween.tweenData.tweenID = 0; + newTween.tweenData.spanPosition = 0; + this.tweens.push(newTween); + } + else { + tempTiming = trackTiming.split("s"); + tempTimingFloat = parseFloat(tempTiming[0]); + this.trackDuration = tempTimingFloat * 1000; + percentValue = this.currentKeyframeRule[i].keyText; + splitValue = percentValue.split("%"); + fraction = splitValue[0] / 100; + currentMilliSec = fraction * this.trackDuration; + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + clickPosition = currentMilliSec / currentMilliSecPerPixel; + newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; + newTween.tweenData.keyFramePosition = clickPosition; + newTween.tweenData.keyFrameMillisec = currentMilliSec; + newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.spanPosition = clickPosition - newTween.tweenData.spanWidth; + this.tweens.push(newTween); + } + this.nextKeyframe += 1; + } + this.isTrackAnimated = true; + } + } } }, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bd55f2fb..efaf7aa8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -829,14 +829,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { recreatePropertyTracks:{ value:function(ruleSet){ - - for(var i in ruleSet){ var styleProp = ruleSet[i][0].style[0]; console.log(styleProp); - this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp); + console.log(ruleSet[i]); + this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]); } - } }, @@ -881,8 +879,10 @@ 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); + //console.log(this.currentKeyframeRule); this.application.ninja.currentDocument.model.needsSave = true; } }, @@ -944,8 +944,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return; } if (layerEvent.layerEventType === "newStyle") { - // TODO: Add a real track of tweens. Probably need a method for that. - var newStyleTrack = {}; newStyleTrack.propTrackData = {}; newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; @@ -953,6 +951,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newStyleTrack.propTrackData.trackType = "style"; newStyleTrack.propTrackData.trackEditorProperty = ""; newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; + newStyleTrack.propTrackData.existingRule = ""; this.arrStyleTracks.push(newStyleTrack); @@ -964,6 +963,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { restoredStyleTrack.propTrackData.trackType = "style"; restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty; restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; + restoredStyleTrack.propTrackData.existingRule = layerEvent.existingRule; this.arrStyleTracks.push(restoredStyleTrack); } -- cgit v1.2.3