diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 5 | ||||
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 75 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 12 |
3 files changed, 83 insertions, 9 deletions
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, { | |||
601 | } | 601 | } |
602 | }, | 602 | }, |
603 | addStyle : { | 603 | addStyle : { |
604 | value: function(styleProperty) { | 604 | value: function(styleProperty, existingRule) { |
605 | // Add a new style rule. It should be added above the currently selected rule, | 605 | // Add a new style rule. It should be added above the currently selected rule, |
606 | // Or at the end, if no rule is selected. | 606 | // Or at the end, if no rule is selected. |
607 | 607 | ||
@@ -630,6 +630,9 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
630 | newStyle.editorProperty = styleProperty; | 630 | newStyle.editorProperty = styleProperty; |
631 | newEvent.layerEventType = "restoreStyle"; | 631 | newEvent.layerEventType = "restoreStyle"; |
632 | newEvent.trackEditorProperty = styleProperty; | 632 | newEvent.trackEditorProperty = styleProperty; |
633 | if(existingRule){ | ||
634 | newEvent.existingRule = existingRule; | ||
635 | } | ||
633 | } | 636 | } |
634 | newStyle.editorValue = ""; | 637 | newStyle.editorValue = ""; |
635 | newStyle.ruleTweener = false; | 638 | 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, { | |||
24 | 24 | ||
25 | draw:{ | 25 | draw:{ |
26 | value:function(){ | 26 | value:function(){ |
27 | 27 | console.log(this.currentKeyframeRule); | |
28 | } | 28 | } |
29 | }, | 29 | }, |
30 | 30 | ||
@@ -178,6 +178,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
178 | this.propTweens = this.propTrackData.propTweens; | 178 | this.propTweens = this.propTrackData.propTweens; |
179 | this.trackType = this.propTrackData.trackType; | 179 | this.trackType = this.propTrackData.trackType; |
180 | this.trackEditorProperty = this.propTrackData.trackEditorProperty; | 180 | this.trackEditorProperty = this.propTrackData.trackEditorProperty; |
181 | this.currentKeyframeRule = this.propTrackData.existingRule; | ||
181 | this.needsDraw = true; | 182 | this.needsDraw = true; |
182 | } | 183 | } |
183 | }, | 184 | }, |
@@ -315,7 +316,77 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
315 | 316 | ||
316 | retrieveStoredStyleTweens:{ | 317 | retrieveStoredStyleTweens:{ |
317 | value:function(){ | 318 | value:function(){ |
318 | console.log("retrieve style tweens"); | 319 | console.log("retrieving style tweens"); |
320 | var percentValue, fraction, splitValue; | ||
321 | var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, i = 0; | ||
322 | |||
323 | if (this.animatedElement !== undefined) { | ||
324 | |||
325 | //this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | ||
326 | |||
327 | // build tweens for this tracks's keyframe rule | ||
328 | if (this.animationName) { | ||
329 | |||
330 | trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | ||
331 | this.nextKeyframe = 0; | ||
332 | |||
333 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument.model.views.design.document); | ||
334 | |||
335 | for (i = 0; this.currentKeyframeRule[i]; i++) { | ||
336 | var newTween = {}; | ||
337 | newTween.tweenData = {}; | ||
338 | |||
339 | var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; | ||
340 | |||
341 | for (j = 0; j < styleLength; j++) { | ||
342 | |||
343 | // check for vendor prefixes and skip them for now | ||
344 | var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); | ||
345 | if (firstChar === "-") { | ||
346 | break; | ||
347 | } else { | ||
348 | var currProp = this.currentKeyframeRule[i].style[j]; | ||
349 | var propVal = this.currentKeyframeRule[i].style[currProp]; | ||
350 | keyframeStyles.push([currProp, propVal]); | ||
351 | } | ||
352 | } | ||
353 | |||
354 | // recreate tween properties array for timeline tween | ||
355 | newTween.tweenData.tweenedProperties = []; | ||
356 | for (var k in keyframeStyles) { | ||
357 | newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; | ||
358 | } | ||
359 | |||
360 | if (this.currentKeyframeRule[i].keyText === "0%") { | ||
361 | newTween.tweenData.spanWidth = 0; | ||
362 | newTween.tweenData.keyFramePosition = 0; | ||
363 | newTween.tweenData.keyFrameMillisec = 0; | ||
364 | newTween.tweenData.tweenID = 0; | ||
365 | newTween.tweenData.spanPosition = 0; | ||
366 | this.tweens.push(newTween); | ||
367 | } | ||
368 | else { | ||
369 | tempTiming = trackTiming.split("s"); | ||
370 | tempTimingFloat = parseFloat(tempTiming[0]); | ||
371 | this.trackDuration = tempTimingFloat * 1000; | ||
372 | percentValue = this.currentKeyframeRule[i].keyText; | ||
373 | splitValue = percentValue.split("%"); | ||
374 | fraction = splitValue[0] / 100; | ||
375 | currentMilliSec = fraction * this.trackDuration; | ||
376 | currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
377 | clickPosition = currentMilliSec / currentMilliSecPerPixel; | ||
378 | newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; | ||
379 | newTween.tweenData.keyFramePosition = clickPosition; | ||
380 | newTween.tweenData.keyFrameMillisec = currentMilliSec; | ||
381 | newTween.tweenData.tweenID = this.nextKeyframe; | ||
382 | newTween.tweenData.spanPosition = clickPosition - newTween.tweenData.spanWidth; | ||
383 | this.tweens.push(newTween); | ||
384 | } | ||
385 | this.nextKeyframe += 1; | ||
386 | } | ||
387 | this.isTrackAnimated = true; | ||
388 | } | ||
389 | } | ||
319 | } | 390 | } |
320 | }, | 391 | }, |
321 | 392 | ||
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, { | |||
829 | 829 | ||
830 | recreatePropertyTracks:{ | 830 | recreatePropertyTracks:{ |
831 | value:function(ruleSet){ | 831 | value:function(ruleSet){ |
832 | |||
833 | |||
834 | for(var i in ruleSet){ | 832 | for(var i in ruleSet){ |
835 | var styleProp = ruleSet[i][0].style[0]; | 833 | var styleProp = ruleSet[i][0].style[0]; |
836 | console.log(styleProp); | 834 | console.log(styleProp); |
837 | this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp); | 835 | console.log(ruleSet[i]); |
836 | this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]); | ||
838 | } | 837 | } |
839 | |||
840 | } | 838 | } |
841 | }, | 839 | }, |
842 | 840 | ||
@@ -881,8 +879,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
881 | keyframeString += keyframePropertyString; | 879 | keyframeString += keyframePropertyString; |
882 | } | 880 | } |
883 | keyframeString += " }"; | 881 | keyframeString += " }"; |
882 | //console.log(keyframeString); | ||
884 | // set the keyframe string as the new rule | 883 | // set the keyframe string as the new rule |
885 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); | 884 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); |
885 | //console.log(this.currentKeyframeRule); | ||
886 | this.application.ninja.currentDocument.model.needsSave = true; | 886 | this.application.ninja.currentDocument.model.needsSave = true; |
887 | } | 887 | } |
888 | }, | 888 | }, |
@@ -944,8 +944,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
944 | return; | 944 | return; |
945 | } | 945 | } |
946 | if (layerEvent.layerEventType === "newStyle") { | 946 | if (layerEvent.layerEventType === "newStyle") { |
947 | // TODO: Add a real track of tweens. Probably need a method for that. | ||
948 | |||
949 | var newStyleTrack = {}; | 947 | var newStyleTrack = {}; |
950 | newStyleTrack.propTrackData = {}; | 948 | newStyleTrack.propTrackData = {}; |
951 | newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; | 949 | newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; |
@@ -953,6 +951,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
953 | newStyleTrack.propTrackData.trackType = "style"; | 951 | newStyleTrack.propTrackData.trackType = "style"; |
954 | newStyleTrack.propTrackData.trackEditorProperty = ""; | 952 | newStyleTrack.propTrackData.trackEditorProperty = ""; |
955 | newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; | 953 | newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; |
954 | newStyleTrack.propTrackData.existingRule = ""; | ||
956 | 955 | ||
957 | this.arrStyleTracks.push(newStyleTrack); | 956 | this.arrStyleTracks.push(newStyleTrack); |
958 | 957 | ||
@@ -964,6 +963,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
964 | restoredStyleTrack.propTrackData.trackType = "style"; | 963 | restoredStyleTrack.propTrackData.trackType = "style"; |
965 | restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty; | 964 | restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty; |
966 | restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; | 965 | restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; |
966 | restoredStyleTrack.propTrackData.existingRule = layerEvent.existingRule; | ||
967 | 967 | ||
968 | this.arrStyleTracks.push(restoredStyleTrack); | 968 | this.arrStyleTracks.push(restoredStyleTrack); |
969 |