aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js108
1 files changed, 60 insertions, 48 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 40e680de..bb1d5a1f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -192,6 +192,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
192 }, 192 },
193 set:function (newVal) { 193 set:function (newVal) {
194 this._tweens = newVal; 194 this._tweens = newVal;
195 this.needsDraw=true;
195 } 196 }
196 }, 197 },
197 198
@@ -324,7 +325,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
324 _styleCollapser:{ 325 _styleCollapser:{
325 value:null 326 value:null
326 }, 327 },
327 328 _openDocRedrawCheck:{
329 value:true,
330 writable:true
331 },
328 prepareForDraw:{ 332 prepareForDraw:{
329 value:function () { 333 value:function () {
330 this.init(); 334 this.init();
@@ -335,6 +339,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
335 339
336 draw:{ 340 draw:{
337 value:function () { 341 value:function () {
342 this.ninjaStylesContoller = this.application.ninja.stylesController;
338 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { 343 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) {
339 this._mainCollapser.toggle(false); 344 this._mainCollapser.toggle(false);
340 } 345 }
@@ -347,7 +352,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
347 if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) { 352 if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) {
348 this._styleCollapser.toggle(false); 353 this._styleCollapser.toggle(false);
349 } 354 }
355
356 }
357 },
358
359 didDraw:{
360 value:function(){
361 if(this._openDocRedrawCheck){
350 this.retrieveStoredTweens(); 362 this.retrieveStoredTweens();
363 this._openDocRedrawCheck=false;
364 }
351 } 365 }
352 }, 366 },
353 367
@@ -360,7 +374,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
360 //this.application.ninja.timeline.selectLayer(selectIndex); 374 //this.application.ninja.timeline.selectLayer(selectIndex);
361 375
362 if (ev.shiftKey) { 376 if (ev.shiftKey) {
363 if (this.application.ninja.timeline.arrLayers[selectedIndex].element.length == 1) { 377 if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) {
364 if (this.tweens.length < 1) { 378 if (this.tweens.length < 1) {
365 this.insertTween(0); 379 this.insertTween(0);
366 this.addAnimationRuleToElement(ev); 380 this.addAnimationRuleToElement(ev);
@@ -401,7 +415,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
401 var newTween = {}; 415 var newTween = {};
402 416
403 if (clickPos == 0) { 417 if (clickPos == 0) {
404 this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; 418 this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0];
405 newTween.spanWidth = 0; 419 newTween.spanWidth = 0;
406 newTween.keyFramePosition = 0; 420 newTween.keyFramePosition = 0;
407 newTween.keyFrameMillisec = 0; 421 newTween.keyFrameMillisec = 0;
@@ -440,54 +454,52 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
440 454
441 retrieveStoredTweens:{ 455 retrieveStoredTweens:{
442 value:function(){ 456 value:function(){
443 var animationDuration,trackDuration,currentMilliSec , currentMillisecPerPixel,clickPos,i=0,k=0; 457 var percentValue,fraction,splitValue,i=0,k=0
444 if(this.application.ninja.timeline.currentLayerSelected.element[0]){ 458 while(this.application.ninja.timeline.arrLayers[k]){
445 this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0]; 459 this.animatedElement = this.application.ninja.timeline.arrLayers[k].elementsList[0];
446 this.animationName = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-name"); 460 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-name");
447 animationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement,"-webkit-animation-duration"); 461 this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement,"-webkit-animation-duration");
448 trackDuration = animationDuration.split("s"); 462 this.trackDuration = this.animationDuration.split("s");
449 currentMilliSec =trackDuration[0]*1000; 463 this.currentMilliSec =this.trackDuration[0]*1000;
450 currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); 464 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
451 clickPos = currentMilliSec / currentMillisecPerPixel; 465 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
452 466 this.nextKeyframe=0;
453 this.currentKeyframeRule = this.ninjaStylesContoller.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document); 467
454 468 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName , this.application.ninja.currentDocument._document);
455 var newTween = {}; 469 while(this.currentKeyframeRule[i]){
456 if( this.currentKeyframeRule[i].keyText==="0%"){ 470 var newTween = {};
457 newTween.spanWidth = 0; 471 if( this.currentKeyframeRule[i].keyText==="0%"){
458 newTween.keyFramePosition = 0; 472 newTween.spanWidth = 0;
459 newTween.keyFrameMillisec = 0; 473 newTween.keyFramePosition = 0;
460 newTween.keyframeID = i; 474 newTween.keyFrameMillisec = 0;
461 newTween.spanPosition = 0; 475 newTween.tweenID = 0;
462 this.tweens.push(newTween); 476 newTween.spanPosition = 0;
463 477 this.tweens.push(newTween);
464 }else{ 478
465 479 }
466 newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; 480 else{
467 newTween.keyFramePosition = clickPos; 481 percentValue=this.currentKeyframeRule[i].keyText;
468 newTween.keyFrameMillisec = currentMilliSec; 482 splitValue=percentValue.split("%");
469 newTween.keyframeID = i; 483 fraction=splitValue[0]/100;
470 newTween.spanPosition = clickPos - newTween.spanWidth; 484 this.currentMilliSec =fraction*this.trackDuration[0]*1000;
471 this.tweens.push(newTween); 485 this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
472 486 this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
473 } 487 newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition;
474 this.needsDraw=true; 488 newTween.keyFramePosition = this.clickPos;
475 // this.retrieveAnimationRuleToElement(); 489 newTween.keyFrameMillisec = this.currentMilliSec;
476 this.i++; 490 newTween.tweenID = this.nextKeyframe;
477 491 newTween.spanPosition = this.clickPos - newTween.spanWidth;
478 // this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); 492 this.tweens.push(newTween);
479 493
494
495 }
496 i++;
497 this.nextKeyframe+=1;
498 }
499 k++;
480 } 500 }
481 501
482 }
483 },
484 502
485 retrieveAnimationRuleToElement:{
486 value:function(){
487 // this.animatedElement = this.tempArray[0];
488 // var initAnimatedProperties = new Array();
489 // initAnimatedProperties["top"] = this.currentKeyframeRule[this.i].style[0];
490 // initAnimatedProperties["left"] = this.currentKeyframeRule[this.i].style[1];
491 } 503 }
492 }, 504 },
493 505