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.js192
1 files changed, 83 insertions, 109 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index bf97c0fd..669dabef 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -33,16 +33,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
33 33
34 // Are the various collapsers collapsed or not 34 // Are the various collapsers collapsed or not
35 _isMainCollapsed:{ 35 _isMainCollapsed:{
36 value:"" 36 value: true
37 }, 37 },
38 isMainCollapsed:{ 38 isMainCollapsed:{
39 get:function () { 39 get:function () {
40 return this._isMainCollapsed; 40 return this._isMainCollapsed;
41 }, 41 },
42 set:function (newVal) { 42 set:function (newVal) {
43 this.log('TimelineTrack.js: isMainCollapsed: ', newVal);
43 if (newVal !== this._isMainCollapsed) { 44 if (newVal !== this._isMainCollapsed) {
44 this._isMainCollapsed = newVal; 45 this._isMainCollapsed = newVal;
45 this.needsDraw = true;
46 } 46 }
47 47
48 } 48 }
@@ -57,7 +57,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
57 set:function (newVal) { 57 set:function (newVal) {
58 if (newVal !== this._isTransformCollapsed) { 58 if (newVal !== this._isTransformCollapsed) {
59 this._isTransformCollapsed = newVal; 59 this._isTransformCollapsed = newVal;
60 this.needsDraw = true;
61 } 60 }
62 } 61 }
63 }, 62 },
@@ -71,7 +70,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
71 set:function (newVal) { 70 set:function (newVal) {
72 if (newVal !== this._isPositionCollapsed) { 71 if (newVal !== this._isPositionCollapsed) {
73 this._isPositionCollapsed = newVal; 72 this._isPositionCollapsed = newVal;
74 this.needsDraw = true;
75 } 73 }
76 } 74 }
77 }, 75 },
@@ -85,10 +83,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
85 set:function (newVal) { 83 set:function (newVal) {
86 if (newVal !== this._isStyleCollapsed) { 84 if (newVal !== this._isStyleCollapsed) {
87 this._isStyleCollapsed = newVal; 85 this._isStyleCollapsed = newVal;
88 this.needsDraw = true;
89 } 86 }
90 } 87 }
91 }, 88 },
89 _bypassAnimation : {
90 serializable: true,
91 value: false
92 },
93 bypassAnimation : {
94 serializable: true,
95 get: function() {
96 return this._bypassAnimation;
97 },
98 set: function(newVal) {
99 //console.log("timelinetrack bypassAnimation setter " + newVal)
100 this._bypassAnimation = newVal;
101 }
102 },
92 103
93 _arrStyleTracks : { 104 _arrStyleTracks : {
94 serializable:true, 105 serializable:true,
@@ -229,6 +240,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
229 }, 240 },
230 set:function (val) { 241 set:function (val) {
231 this._trackDuration = val; 242 this._trackDuration = val;
243 if(this._trackDuration > this.application.ninja.timeline.masterDuration){
244 this.application.ninja.timeline.masterDuration = this._trackDuration;
245 }
232 } 246 }
233 }, 247 },
234 248
@@ -342,6 +356,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
342 draw:{ 356 draw:{
343 value:function () { 357 value:function () {
344 this.ninjaStylesContoller = this.application.ninja.stylesController; 358 this.ninjaStylesContoller = this.application.ninja.stylesController;
359 return;
345 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { 360 if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) {
346 this._mainCollapser.toggle(false); 361 this._mainCollapser.toggle(false);
347 } 362 }
@@ -387,7 +402,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
387 this.handleNewTween(ev); 402 this.handleNewTween(ev);
388 } 403 }
389 } else { 404 } else {
390 alert("There must be exactly one element in an animated layer.") 405 console.log("There must be exactly one element in an animated layer.");
391 } 406 }
392 } 407 }
393 } 408 }
@@ -405,18 +420,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
405 420
406 insertTween:{ 421 insertTween:{
407 value:function (clickPos) { 422 value:function (clickPos) {
408
409 // calculate new tween's keyframe milliseconds by clickPos 423 // calculate new tween's keyframe milliseconds by clickPos
410 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); 424 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
411 var currentMillisec = currentMillisecPerPixel * clickPos; 425 var currentMillisec = currentMillisecPerPixel * clickPos;
412 426
413 // need to check timeline master duration if greater than this track duration 427 // need to check timeline master duration if greater than this track duration
414 this.trackDuration = currentMillisec; 428 this.trackDuration = currentMillisec;
415
416 if(this.trackDuration > this.application.ninja.timeline.masterDuration){
417 this.application.ninja.timeline.masterDuration = this.trackDuration;
418 }
419
420 var newTween = {}; 429 var newTween = {};
421 430
422 if (clickPos == 0) { 431 if (clickPos == 0) {
@@ -442,24 +451,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
442 this.tweens.push(newTween); 451 this.tweens.push(newTween);
443 452
444 // update the animation duration 453 // update the animation duration
445 var animationDuration = Math.round(this.trackDuration / 1000) + "s"; 454 var animationDuration = (this.trackDuration / 1000) + "s";
446 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); 455 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
447
448 this.nextKeyframe += 1; 456 this.nextKeyframe += 1;
449 } 457 }
458 this.application.ninja.documentController.activeDocument.needsSave = true;
450 } 459 }
451 }, 460 },
452 461
453 splitTween:{ 462 splitTween:{
454 value:function (ev) { 463 value:function (ev) {
455 alert("Splitting an existing span with a new keyframe is not yet supported."); 464 console.log("Splitting an existing span with a new keyframe is not yet supported.");
456 //console.log("splitting tween at span offsetX: " + ev.offsetX);
457 } 465 }
458 }, 466 },
459 467
460 retrieveStoredTweens:{ 468 retrieveStoredTweens:{
461 value:function () { 469 value:function () {
462 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; 470 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute;
471 var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0;
463 472
464 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 473 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
465 this.application.ninja.timeline.arrLayers[selectedIndex].created=true; 474 this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
@@ -467,23 +476,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
467 if(this.animatedElement!==undefined){ 476 if(this.animatedElement!==undefined){
468 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); 477 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
469 if(this.animationName){ 478 if(this.animationName){
470 this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); 479 trackTiming = 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; 480 this.nextKeyframe = 0;
476 481
477 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); 482 this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
478 while (this.currentKeyframeRule[i]) { 483
484 for (i =0; this.currentKeyframeRule[i] ;i++) {
479 var newTween = {}; 485 var newTween = {};
480 486
481 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); 487 offsetAttribute = this.currentKeyframeRule[i].cssText.split(" ");
482 topOffSetAttribute = offsetAttribute[3].split("px"); 488 topOffSetAttribute = offsetAttribute[3].split("px");
483 leftOffsetAttribute = offsetAttribute[5].split("px"); 489 leftOffsetAttribute = offsetAttribute[5].split("px");
484 490
485 parseInt(topOffSetAttribute[0]); 491 var tempTopOffset = parseInt(topOffSetAttribute[0]);
486 parseInt(leftOffsetAttribute[0]); 492 var tempLeftOffset =parseInt(leftOffsetAttribute[0]);
487 493
488 if (this.currentKeyframeRule[i].keyText === "0%") {