aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js5
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js75
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js12
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 } 969 }