diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 199 |
1 files changed, 141 insertions, 58 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 55c84dce..7120298c 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 | } |
@@ -89,6 +89,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
89 | } | 89 | } |
90 | } | 90 | } |
91 | }, | 91 | }, |
92 | _animateCollapser : { | ||
93 | serializable: true, | ||
94 | value: false | ||
95 | }, | ||
96 | animateCollapser : { | ||
97 | serializable: true, | ||
98 | get: function() { | ||
99 | return this._animateCollapser; | ||
100 | }, | ||
101 | set: function(newVal) { | ||
102 | this._animateCollapser = newVal; | ||
103 | } | ||
104 | }, | ||
92 | 105 | ||
93 | _arrStyleTracks : { | 106 | _arrStyleTracks : { |
94 | serializable:true, | 107 | serializable:true, |
@@ -229,6 +242,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
229 | }, | 242 | }, |
230 | set:function (val) { | 243 | set:function (val) { |
231 | this._trackDuration = val; | 244 | this._trackDuration = val; |
245 | if(this._trackDuration > this.application.ninja.timeline.masterDuration){ | ||
246 | this.application.ninja.timeline.masterDuration = this._trackDuration; | ||
247 | } | ||
232 | } | 248 | } |
233 | }, | 249 | }, |
234 | 250 | ||
@@ -342,6 +358,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
342 | draw:{ | 358 | draw:{ |
343 | value:function () { | 359 | value:function () { |
344 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 360 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
361 | return; | ||
345 | if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { | 362 | if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { |
346 | this._mainCollapser.toggle(false); | 363 | this._mainCollapser.toggle(false); |
347 | } | 364 | } |
@@ -377,7 +394,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
377 | // This needs to move to a keyboard shortcut that is TBD | 394 | // This needs to move to a keyboard shortcut that is TBD |
378 | 395 | ||
379 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 396 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
380 | //this.application.ninja.timeline.selectLayer(selectIndex); | ||
381 | 397 | ||
382 | if (ev.shiftKey) { | 398 | if (ev.shiftKey) { |
383 | if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { | 399 | if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { |
@@ -388,7 +404,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
388 | this.handleNewTween(ev); | 404 | this.handleNewTween(ev); |
389 | } | 405 | } |
390 | } else { | 406 | } else { |
391 | alert("There must be exactly one element in an animated layer.") | 407 | console.log("There must be exactly one element in an animated layer."); |
392 | } | 408 | } |
393 | } | 409 | } |
394 | } | 410 | } |
@@ -406,18 +422,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
406 | 422 | ||
407 | insertTween:{ | 423 | insertTween:{ |
408 | value:function (clickPos) { | 424 | value:function (clickPos) { |
409 | |||
410 | // calculate new tween's keyframe milliseconds by clickPos | 425 | // calculate new tween's keyframe milliseconds by clickPos |
411 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 426 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
412 | var currentMillisec = currentMillisecPerPixel * clickPos; | 427 | var currentMillisec = currentMillisecPerPixel * clickPos; |
413 | 428 | ||
414 | // need to check timeline master duration if greater than this track duration | 429 | // need to check timeline master duration if greater than this track duration |
415 | this.trackDuration = currentMillisec; | 430 | this.trackDuration = currentMillisec; |
416 | |||
417 | if(this.trackDuration > this.application.ninja.timeline.masterDuration){ | ||
418 | this.application.ninja.timeline.masterDuration = this.trackDuration; | ||
419 | } | ||
420 | |||
421 | var newTween = {}; | 431 | var newTween = {}; |
422 | 432 | ||
423 | if (clickPos == 0) { | 433 | if (clickPos == 0) { |
@@ -443,24 +453,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
443 | this.tweens.push(newTween); | 453 | this.tweens.push(newTween); |
444 | 454 | ||
445 | // update the animation duration | 455 | // update the animation duration |
446 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; | 456 | var animationDuration = (this.trackDuration / 1000) + "s"; |
447 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 457 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
448 | |||
449 | this.nextKeyframe += 1; | 458 | this.nextKeyframe += 1; |
450 | } | 459 | } |
460 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
451 | } | 461 | } |
452 | }, | 462 | }, |
453 | 463 | ||
454 | splitTween:{ | 464 | splitTween:{ |
455 | value:function (ev) { | 465 | value:function (ev) { |
456 | alert("Splitting an existing span with a new keyframe is not yet supported."); | 466 | console.log("Splitting an existing span with a new keyframe is not yet supported."); |
457 | //console.log("splitting tween at span offsetX: " + ev.offsetX); | ||
458 | } | 467 | } |
459 | }, | 468 | }, |
460 | 469 | ||
461 | retrieveStoredTweens:{ | 470 | retrieveStoredTweens:{ |
462 | value:function () { | 471 | value:function () { |
463 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; | 472 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute; |
473 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; | ||
464 | 474 | ||
465 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 475 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
466 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | 476 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; |
@@ -468,23 +478,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
468 | if(this.animatedElement!==undefined){ | 478 | if(this.animatedElement!==undefined){ |
469 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | 479 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |
470 | if(this.animationName){ | 480 | if(this.animationName){ |
471 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 481 | trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); |
472 | this.trackDuration = this.animationDuration.split("s"); | ||
473 | this.currentMilliSec = this.trackDuration[0] * 1000; | ||
474 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
475 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | ||
476 | this.nextKeyframe = 0; | 482 | this.nextKeyframe = 0; |
477 | 483 | ||
478 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); | 484 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); |
479 | while (this.currentKeyframeRule[i]) { | 485 | |
486 | for (i =0; this.currentKeyframeRule[i] ;i++) { | ||
480 | var newTween = {}; | 487 | var newTween = {}; |
481 | 488 | ||
482 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); | 489 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); |
483 | topOffSetAttribute = offsetAttribute[3].split("px"); | 490 | topOffSetAttribute = offsetAttribute[3].split("px"); |
484 | leftOffsetAttribute = offsetAttribute[5].split("px"); | 491 | leftOffsetAttribute = offsetAttribute[5].split("px"); |
485 | 492 | ||
486 | parseInt(topOffSetAttribute[0]); | 493 | var tempTopOffset = parseInt(topOffSetAttribute[0]); |
487 | parseInt(leftOffsetAttribute[0]); | 494 | var tempLeftOffset =parseInt(leftOffsetAttribute[0]); |
488 | 495 | ||
489 | if (this.currentKeyframeRule[i].keyText === "0%") { | 496 | if (this.currentKeyframeRule[i].keyText === "0%") { |
490 | newTween.spanWidth = 0; | 497 | newTween.spanWidth = 0; |
@@ -493,38 +500,35 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
493 | newTween.tweenID = 0; | 500 | newTween.tweenID = 0; |
494 | newTween.spanPosition = 0; | 501 | newTween.spanPosition = 0; |
495 | newTween.tweenedProperties = []; | 502 | newTween.tweenedProperties = []; |
496 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | 503 | newTween.tweenedProperties["top"] = tempTopOffset; |
497 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | 504 | newTween.tweenedProperties["left"] = tempLeftOffset; |
498 | this.tweens.push(newTween); | 505 |