diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 192 |
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 | ||