aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
diff options
context:
space:
mode:
authorEric Guzman2012-02-29 16:13:19 -0800
committerEric Guzman2012-02-29 16:13:19 -0800
commit53bdb1e7773069c4cca59e88d6da91cd0f58c94a (patch)
tree44a2147fcbb43ea483f78a1e2e082919f9c81970 /js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
parentb2c60efb9c6f5dfa7b0fc5c2b9feebebc805ed97 (diff)
parentb09956e4a9a35c5588cc7cd1f01efb617cbe0884 (diff)
downloadninja-53bdb1e7773069c4cca59e88d6da91cd0f58c94a.tar.gz
Merge branch 'refs/heads/master' into CSSPanelUpdates
Conflicts: js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js128
1 files changed, 74 insertions, 54 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 0c5121cd..bf97c0fd 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -331,10 +331,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
331 _styleCollapser:{ 331 _styleCollapser:{
332 value:null 332 value:null
333 }, 333 },
334 _openDocRedrawCheck:{
335 value:true,
336 writable:true
337 },
338 prepareForDraw:{ 334 prepareForDraw:{
339 value:function () { 335 value:function () {
340 this.init(); 336 this.init();
@@ -364,10 +360,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
364 360
365 didDraw:{ 361 didDraw:{
366 value:function () { 362 value:function () {
367 if(this.application.ninja.currentDocument.documentRoot.children[0]){ 363 if(!this.application.ninja.documentController.creatingNewFile){
368 if (this._openDocRedrawCheck) { 364 if(this.application.ninja.currentDocument.documentRoot.children[0]){
369 this.retrieveStoredTweens(); 365 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
370 this._openDocRedrawCheck = false; 366 if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){
367 this.retrieveStoredTweens();
368 }
371 } 369 }
372 } 370 }
373 } 371 }
@@ -379,7 +377,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
379 // This needs to move to a keyboard shortcut that is TBD 377 // This needs to move to a keyboard shortcut that is TBD
380 378
381 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 379 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
382 //this.application.ninja.timeline.selectLayer(selectIndex);
383 380
384 if (ev.shiftKey) { 381 if (ev.shiftKey) {
385 if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { 382 if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) {
@@ -462,49 +459,67 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
462 459
463 retrieveStoredTweens:{ 460 retrieveStoredTweens:{
464 value:function () { 461 value:function () {
465 var percentValue, fraction, splitValue, i = 0; 462 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0;
466
467 this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0];
468 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
469 this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
470 if(this.animationDuration){
471 this.trackDuration = this.animationDuration.split("s");
472 this.currentMilliSec = this.trackDuration[0] * 1000;
473 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
474 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
475 this.nextKeyframe = 0;
476
477 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
478 while (this.currentKeyframeRule[i]) {
479 var newTween = {};
480
481 if (this.currentKeyframeRule[i].keyText === "0%") {
482 newTween.spanWidth = 0;
483 newTween.keyFramePosition = 0;
484 newTween.keyFrameMillisec = 0;
485 newTween.tweenID = 0;
486 newTween.spanPosition = 0;
487 this.tweens.push(newTween);
488
489 }
490 else {
491 percentValue = this.currentKeyframeRule[i].keyText;
492 splitValue = percentValue.split("%");
493 fraction = splitValue[0] / 100;
494 this.currentMilliSec = fraction * this.trackDuration[0] * 1000;
495 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
496 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
497 newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition;
498 newTween.keyFramePosition = this.clickPos;
499 newTween.keyFrameMillisec = this.currentMilliSec;
500 newTween.tweenID = this.nextKeyframe;
501 newTween.spanPosition = this.clickPos - newTween.spanWidth;
502 this.tweens.push(newTween);
503
504 463
464 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
465 this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
466 this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0];
467 if(this.animatedElement!==undefined){
468 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
469 if(this.animationName){
470 this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
471 this.trackDuration = this.animationDuration.split("s");
472 this.currentMilliSec = this.trackDuration[0] * 1000;
473 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
474 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
475 this.nextKeyframe = 0;
476
477 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
478 while (this.currentKeyframeRule[i]) {
479 var newTween = {};
480
481 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" ");
482 topOffSetAttribute = offsetAttribute[3].split("px");
483 leftOffsetAttribute = offsetAttribute[5].split("px");
484
485 parseInt(topOffSetAttribute[0]);
486 parseInt(leftOffsetAttribute[0]);
487
488 if (this.currentKeyframeRule[i].keyText === "0%") {
489 newTween.spanWidth = 0;
490 newTween.keyFramePosition = 0;
491 newTween.keyFrameMillisec = 0;
492 newTween.tweenID = 0;
493 newTween.spanPosition = 0;
494 newTween.tweenedProperties = [];
495 newTween.tweenedProperties["top"] = topOffSetAttribute[0];
496 newTween.tweenedProperties["left"] = leftOffsetAttribute[0];
497 this.tweens.push(newTween);
498
499 }
500 else {
501 percentValue = this.currentKeyframeRule[i].keyText;
502 splitValue = percentValue.split("%");
503 fraction = splitValue[0] / 100;
504 this.currentMilliSec = fraction * this.trackDuration[0] * 1000;
505 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
506 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
507 newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition;
508 newTween.keyFramePosition = this.clickPos;
509 newTween.keyFrameMillisec = this.currentMilliSec;
510 newTween.tweenID = this.nextKeyframe;
511 newTween.spanPosition = this.clickPos - newTween.spanWidth;
512 newTween.tweenedProperties=[];
513 newTween.tweenedProperties["top"] = topOffSetAttribute[0];
514 newTween.tweenedProperties["left"] = leftOffsetAttribute[0];
515 this.tweens.push(newTween);
516
517
518 }
519 i++;
520 this.nextKeyframe += 1;
505 } 521 }
506 i++; 522 this.isTrackAnimated = true;
507 this.nextKeyframe += 1;
508 } 523 }
509 } 524 }
510 else{ 525 else{
@@ -518,7 +533,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
518 this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; 533 this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop;
519 this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; 534 this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft;
520 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 535 var animationDuration = Math.round(this.trackDuration / 1000) + "s";
521 this.animationName = "animation_" + this.animatedElement.className; 536 this.animationName = "animation_" + this.animatedElement.classList[0];
522 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); 537 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
523 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 538 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
524 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); 539 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite");
@@ -538,7 +553,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
538 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 553 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
539 554
540 for (var i = 0; i < this.tweens.length; i++) { 555 for (var i = 0; i < this.tweens.length; i++) {
541 var keyframePercent = Math.round((this.tweens[i].keyFrameMillisec / this.trackDuration) * 100) + "%"; 556 var keyMill = parseInt(this.tweens[i].keyFrameMillisec);
557 // TODO - trackDur should be parseFloat rounded to significant digits
558 var trackDur = parseInt(this.trackDuration);
559 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
542 var keyframePropertyString = " " + keyframePercent + " {"; 560 var keyframePropertyString = " " + keyframePercent + " {";
543 keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; 561 keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;";
544 keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; 562 keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;";
@@ -556,7 +574,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
556 value:function () { 574 value:function () {
557 var that = this; 575 var that = this;
558 576
559 this.arrPositionTracks = [0, 1, 2]; 577 this.arrPositionTracks = [0, 1];
560 this.arrTransformTracks = [0, 1, 2, 3, 4];