diff options
4 files changed, 36 insertions, 18 deletions
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, { | |||
42 | 42 | ||
43 | draw:{ | 43 | draw:{ |
44 | value:function(){ | 44 | value:function(){ |
45 | this.element.style.left = (this.position - 6) + "px"; | 45 | this.element.style.left = (this.position - 5) + "px"; |
46 | } | 46 | } |
47 | }, | 47 | }, |
48 | 48 | ||
49 | deselectKeyframe:{ | 49 | deselectKeyframe:{ |
50 | value:function(){ | 50 | value:function(){ |
51 | this.element.classList.remove("keyframeSelected"); | 51 | this.element.classList.remove("keyframeSelected"); |
52 | this.element.style.left = (this.position - 5) + "px"; | ||
52 | } | 53 | } |
53 | }, | 54 | }, |
54 | 55 | ||
55 | selectKeyframe:{ | 56 | selectKeyframe:{ |
56 | value:function(){ | 57 | value:function(){ |
57 | this.element.classList.add("keyframeSelected"); | 58 | this.element.classList.add("keyframeSelected"); |
59 | this.element.style.left = (this.position - 6) + "px"; | ||
58 | this.parentComponent.selectTween(); | 60 | this.parentComponent.selectTween(); |
59 | } | 61 | } |
60 | }, | 62 | }, |
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 @@ | |||
6 | 6 | ||
7 | .tween_keyframe{ | 7 | .tween_keyframe{ |
8 | position: absolute; | 8 | position: absolute; |
9 | height: 10px; | 9 | height: 8px; |
10 | width: 10px; | 10 | width: 8px; |
11 | top: 3px; | 11 | top: 4px; |
12 | background-color: white; | 12 | background-color: white; |
13 | z-index: 23; | 13 | z-index: 23; |
14 | border-radius: 2px; | 14 | border-radius: 2px; |
@@ -16,6 +16,9 @@ | |||
16 | } | 16 | } |
17 | 17 | ||
18 | .tween_keyframe.keyframeSelected{ | 18 | .tween_keyframe.keyframeSelected{ |
19 | height: 10px; | ||
20 | width: 10px; | ||
21 | top: 3px; | ||
19 | background-color: #570e19; | 22 | background-color: #570e19; |
20 | border-style: solid; | 23 | border-style: solid; |
21 | border-width: thin; | 24 | border-width: thin; |
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index fbc3edd0..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, { | |||
35 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 35 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
36 | if (selectedIndex !== false) { | 36 | if (selectedIndex !== false) { |
37 | if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { | 37 | if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { |
38 | //this.retrieveStoredStyleTweens(); | 38 | this.retrieveStoredStyleTweens(); |
39 | } | 39 | } |
40 | } | 40 | } |
41 | } | 41 | } |
@@ -240,6 +240,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
240 | 240 | ||
241 | var newTween = {}; | 241 | var newTween = {}; |
242 | newTween.tweenData = {}; | 242 | newTween.tweenData = {}; |
243 | newTween.tweenData.tweenedProperties = []; | ||
244 | |||
245 | // TODO - check for color values vs px values and set the correct default | ||
246 | var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
247 | if(propVal == null){ | ||
248 | propVal = "1px"; | ||
249 | } | ||
250 | newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; | ||
243 | 251 | ||
244 | if (clickPos == 0) { | 252 | if (clickPos == 0) { |
245 | newTween.tweenData.spanWidth = 0; | 253 | newTween.tweenData.spanWidth = 0; |
@@ -247,8 +255,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
247 | newTween.tweenData.keyFrameMillisec = 0; | 255 | newTween.tweenData.keyFrameMillisec = 0; |
248 | newTween.tweenData.tweenID = 0; | 256 | newTween.tweenData.tweenID = 0; |
249 | newTween.tweenData.spanPosition = 0; | 257 | newTween.tweenData.spanPosition = 0; |
250 | newTween.tweenData.tweenedProperties = []; | ||
251 | newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
252 | 258 | ||
253 | this.propTweens.push(newTween); | 259 | this.propTweens.push(newTween); |
254 | 260 | ||
@@ -258,8 +264,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
258 | newTween.tweenData.keyFrameMillisec = currentMillisec; | 264 | newTween.tweenData.keyFrameMillisec = currentMillisec; |
259 | newTween.tweenData.tweenID = this.nextKeyframe; | 265 | newTween.tweenData.tweenID = this.nextKeyframe; |
260 | newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; | 266 | newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; |
261 | newTween.tweenData.tweenedProperties = []; | 267 | |
262 | newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
263 | this.propTweens.push(newTween); | 268 | this.propTweens.push(newTween); |
264 | 269 | ||
265 | this.nextKeyframe += 1; | 270 | this.nextKeyframe += 1; |
@@ -344,27 +349,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
344 | addPropAnimationRuleToElement:{ | 349 | addPropAnimationRuleToElement:{ |
345 | value:function(tweenEvent){ | 350 | value:function(tweenEvent){ |
346 | var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | 351 | var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); |
352 | if (currentStyleValue == null) { | ||
353 | currentStyleValue = "1px"; | ||
354 | } | ||
355 | console.log(currentStyleValue); | ||
356 | |||
347 | this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; | 357 | this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; |
348 | 358 | ||
359 | |||
349 | this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; | 360 | this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; |
350 | var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; | 361 | var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; |
351 | var newAnimationNames = currentAnimationNameString + "," + this.animationName; | 362 | var newAnimationNames = currentAnimationNameString + "," + this.animationName; |
352 | //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 363 | var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); |
353 | //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; | 364 | var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; |
354 | //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); | 365 | var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); |
355 | //var newIterationCount = currentIterationCount + ",1"; | 366 | var newIterationCount = currentIterationCount + ",1"; |
356 | 367 | ||
357 | this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; | 368 | this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; |
358 | 369 | ||
359 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); | 370 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); |
360 | 371 | ||
361 | //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); | 372 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); |
362 | //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); | 373 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); |
363 | //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); | ||
364 | //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); | ||
365 | 374 | ||
366 | var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; | 375 | var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; |
367 | //console.log(initRule); | 376 | console.log(initRule); |
368 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); | 377 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); |
369 | 378 | ||
370 | this.insertPropTween(tweenEvent.offsetX); | 379 | 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, { | |||
820 | 820 | ||
821 | getAllAnimationRules:{ | 821 | getAllAnimationRules:{ |
822 | value:function(ruleNames){ | 822 | value:function(ruleNames){ |
823 | ruleNames.splice(0,1); // temp remove first animation already retrieved for main track | ||
823 | 824 | ||
824 | for(var i in ruleNames){ | 825 | for(var i in ruleNames){ |
825 | var currentName = ruleNames[i].replace(/^\s+|\s+$/g,""); // trim whitespace | 826 | var currentName = ruleNames[i].replace(/^\s+|\s+$/g,""); // trim whitespace |
826 | var currentRule = this.application.ninja.stylesController.getAnimationRuleWithName(currentName, this.application.ninja.currentDocument._document); | 827 | var currentRule = this.application.ninja.stylesController.getAnimationRuleWithName(currentName, this.application.ninja.currentDocument._document); |
827 | this.ruleList[currentName] = currentRule; | 828 | this.ruleList[currentName] = currentRule; |
828 | } | 829 | } |
830 | |||
829 | this.recreatePropertyTracks(this.ruleList); | 831 | this.recreatePropertyTracks(this.ruleList); |
830 | } | 832 | } |
831 | }, | 833 | }, |
@@ -833,8 +835,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
833 | recreatePropertyTracks:{ | 835 | recreatePropertyTracks:{ |
834 | value:function(ruleSet){ | 836 | value:function(ruleSet){ |
835 | 837 | ||
838 | |||
836 | for(var i in ruleSet){ | 839 | for(var i in ruleSet){ |
837 | var styleProp = ruleSet[i][0].style[0]; | 840 | var styleProp = ruleSet[i][0].style[0]; |
841 | console.log(styleProp); | ||
838 | this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp); | 842 | this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp); |
839 | } | 843 | } |