From 517661250fb478f460df3f57f4654bf85723ea2a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 29 May 2012 11:32:04 -0700 Subject: fix to set default prop for tween Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 22 +++++++++++++--------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 2 files changed, 17 insertions(+), 9 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index fbc3edd0..af58199a 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -344,27 +344,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + if (currentStyleValue == null) { + currentStyleValue = "1px"; + } + console.log(currentStyleValue); + this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; + this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = currentAnimationNameString + "," + this.animationName; - //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; - //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); - //var newIterationCount = currentIterationCount + ",1"; + var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + var newIterationCount = currentIterationCount + ",1"; this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); - //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; - //console.log(initRule); + console.log(initRule); this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertPropTween(tweenEvent.offsetX); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 835fc785..075290c7 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -820,12 +820,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { getAllAnimationRules:{ value:function(ruleNames){ + ruleNames.splice(0,1); // temp remove first animation already retrieved for main track for(var i in ruleNames){ var currentName = ruleNames[i].replace(/^\s+|\s+$/g,""); // trim whitespace var currentRule = this.application.ninja.stylesController.getAnimationRuleWithName(currentName, this.application.ninja.currentDocument._document); this.ruleList[currentName] = currentRule; } + this.recreatePropertyTracks(this.ruleList); } }, @@ -833,8 +835,10 @@ 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); } -- cgit v1.2.3 From 41754c04c5c5f3c372dc2b38a122144f8d9e1d18 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 30 May 2012 09:29:49 -0700 Subject: fancy keyframe selection Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 4 +++- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 9 ++++++--- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 15 ++++++++++----- 3 files changed, 19 insertions(+), 9 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 41eb6ef1..b91027b6 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -42,19 +42,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.element.style.left = (this.position - 6) + "px"; + this.element.style.left = (this.position - 5) + "px"; } }, deselectKeyframe:{ value:function(){ this.element.classList.remove("keyframeSelected"); + this.element.style.left = (this.position - 5) + "px"; } }, selectKeyframe:{ value:function(){ this.element.classList.add("keyframeSelected"); + this.element.style.left = (this.position - 6) + "px"; this.parentComponent.selectTween(); } }, diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css index 36166c1c..5ea236e9 100644 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -6,9 +6,9 @@ .tween_keyframe{ position: absolute; - height: 10px; - width: 10px; - top: 3px; + height: 8px; + width: 8px; + top: 4px; background-color: white; z-index: 23; border-radius: 2px; @@ -16,6 +16,9 @@ } .tween_keyframe.keyframeSelected{ + height: 10px; + width: 10px; + top: 3px; background-color: #570e19; border-style: solid; border-width: thin; diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index af58199a..d785ea3e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -35,7 +35,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if (selectedIndex !== false) { if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { - //this.retrieveStoredStyleTweens(); + this.retrieveStoredStyleTweens(); } } } @@ -240,6 +240,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var newTween = {}; newTween.tweenData = {}; + newTween.tweenData.tweenedProperties = []; + + // TODO - check for color values vs px values and set the correct default + var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + if(propVal == null){ + propVal = "1px"; + } + newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; if (clickPos == 0) { newTween.tweenData.spanWidth = 0; @@ -247,8 +255,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = 0; newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; - newTween.tweenData.tweenedProperties = []; - newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.push(newTween); @@ -258,8 +264,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = currentMillisec; newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; - newTween.tweenData.tweenedProperties = []; - newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens.push(newTween); this.nextKeyframe += 1; -- cgit v1.2.3