diff options
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 125 |
1 files changed, 82 insertions, 43 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 669dabef..17e50789 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -345,6 +345,43 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
345 | _styleCollapser:{ | 345 | _styleCollapser:{ |
346 | value:null | 346 | value:null |
347 | }, | 347 | }, |
348 | |||
349 | _trackData:{ | ||
350 | |||
351 | }, | ||
352 | |||
353 | trackData:{ | ||
354 | serializable:true, | ||
355 | get:function(){ | ||
356 | return this._trackData; | ||
357 | }, | ||
358 | set:function(val){ | ||
359 | this._trackData = val; | ||
360 | if(this._trackData){ | ||
361 | this.setData(); | ||
362 | } | ||
363 | } | ||
364 | }, | ||
365 | |||
366 | setData:{ | ||
367 | value:function(){ | ||
368 | this.trackID = this.trackData.layerID; | ||
369 | this.tweens = this.trackData.tweens; | ||
370 | this.animatedElement = this.trackData.animatedElement; | ||
371 | this.arrStyleTracks = this.trackData.arrStyleTracks; | ||
372 | this.isTrackAnimated = this.trackData.isTrackAnimated; | ||
373 | this.trackDuration = this.trackData.trackDuration; | ||
374 | this.animationName = this.trackData.animationName; | ||
375 | this.currentKeyframeRule = this.trackData.currentKeyframeRule; | ||
376 | this.isMainCollapsed = this.trackData.isMainCollapsed; | ||
377 | this.isPositionCollapsed = this.trackData.isPositionCollapsed; | ||
378 | this.isTransformCollapsed = this.trackData.isTransformCollapsed; | ||
379 | this.bypassAnimation = this.trackData.bypassAnimation; | ||
380 | this.isStyleCollapsed = this.trackData.isStyleCollapsed; | ||
381 | this.trackPosition = this.trackData.trackPosition; | ||
382 | } | ||
383 | }, | ||
384 | |||
348 | prepareForDraw:{ | 385 | prepareForDraw:{ |
349 | value:function () { | 386 | value:function () { |
350 | this.init(); | 387 | this.init(); |
@@ -378,7 +415,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
378 | if(!this.application.ninja.documentController.creatingNewFile){ | 415 | if(!this.application.ninja.documentController.creatingNewFile){ |
379 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 416 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
380 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 417 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
381 | if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){ | 418 | if(!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created){ |
382 | this.retrieveStoredTweens(); | 419 | this.retrieveStoredTweens(); |
383 | } | 420 | } |
384 | } | 421 | } |
@@ -394,7 +431,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
394 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 431 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
395 | 432 | ||
396 | if (ev.shiftKey) { | 433 | if (ev.shiftKey) { |
397 | if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { | 434 | if (this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList.length == 1) { |
398 | if (this.tweens.length < 1) { | 435 | if (this.tweens.length < 1) { |
399 | this.insertTween(0); | 436 | this.insertTween(0); |
400 | this.addAnimationRuleToElement(ev); | 437 | this.addAnimationRuleToElement(ev); |
@@ -410,7 +447,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
410 | 447 | ||
411 | handleNewTween:{ | 448 | handleNewTween:{ |
412 | value:function (ev) { | 449 | value:function (ev) { |
413 | if (ev.offsetX > this.tweens[this.tweens.length - 1].keyFramePosition) { | 450 | if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { |
414 | this.insertTween(ev.offsetX); | 451 | this.insertTween(ev.offsetX); |
415 | } else { | 452 | } else { |
416 | this.splitTween(ev); | 453 | this.splitTween(ev); |
@@ -427,27 +464,28 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
427 | // need to check timeline master duration if greater than this track duration | 464 | // need to check timeline master duration if greater than this track duration |
428 | this.trackDuration = currentMillisec; | 465 | this.trackDuration = currentMillisec; |
429 | var newTween = {}; | 466 | var newTween = {}; |
467 | newTween.tweenData = {}; | ||
430 | 468 | ||
431 | if (clickPos == 0) { | 469 | if (clickPos == 0) { |
432 | this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; | 470 | this.animatedElement = this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0]; |
433 | newTween.spanWidth = 0; | 471 | newTween.tweenData.spanWidth = 0; |
434 | newTween.keyFramePosition = 0; | 472 | newTween.tweenData.keyFramePosition = 0; |
435 | newTween.keyFrameMillisec = 0; | 473 | newTween.tweenData.keyFrameMillisec = 0; |
436 | newTween.tweenID = 0; | 474 | newTween.tweenData.tweenID = 0; |
437 | newTween.spanPosition = 0; | 475 | newTween.tweenData.spanPosition = 0; |
438 | newTween.tweenedProperties = []; | 476 | newTween.tweenData.tweenedProperties = []; |
439 | newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; | 477 | newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; |
440 | newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; | 478 | newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; |
441 | this.tweens.push(newTween); | 479 | this.tweens.push(newTween); |
442 | } else { | 480 | } else { |
443 | newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; | 481 | newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; |
444 | newTween.keyFramePosition = clickPos; | 482 | newTween.tweenData.keyFramePosition = clickPos; |
445 | newTween.keyFrameMillisec = currentMillisec; | 483 | newTween.tweenData.keyFrameMillisec = currentMillisec; |
446 | newTween.tweenID = this.nextKeyframe; | 484 | newTween.tweenData.tweenID = this.nextKeyframe; |
447 | newTween.spanPosition = clickPos - newTween.spanWidth; | 485 | newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; |
448 | newTween.tweenedProperties = []; | 486 | newTween.tweenData.tweenedProperties = []; |
449 | newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; | 487 | newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; |
450 | newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; | 488 | newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; |
451 | this.tweens.push(newTween); | 489 | this.tweens.push(newTween); |
452 | 490 | ||
453 | // update the animation duration | 491 | // update the animation duration |
@@ -471,8 +509,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
471 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; | 509 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; |
472 | 510 | ||
473 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 511 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
474 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | 512 | this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created=true; |
475 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; | 513 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; |
476 | if(this.animatedElement!==undefined){ | 514 | if(this.animatedElement!==undefined){ |
477 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | 515 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |
478 | if(this.animationName){ | 516 | if(this.animationName){ |
@@ -483,6 +521,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
483 | 521 | ||
484 | for (i =0; this.currentKeyframeRule[i] ;i++) { | 522 | for (i =0; this.currentKeyframeRule[i] ;i++) { |
485 | var newTween = {}; | 523 | var newTween = {}; |
524 | newTween.tweenData = {}; | ||
486 | 525 | ||
487 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); | 526 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); |
488 | topOffSetAttribute = offsetAttribute[3].split("px"); | 527 | topOffSetAttribute = offsetAttribute[3].split("px"); |
@@ -492,14 +531,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
492 | var tempLeftOffset =parseInt(leftOffsetAttribute[0]); | 531 | var tempLeftOffset =parseInt(leftOffsetAttribute[0]); |
493 | 532 | ||
494 | if (this.currentKeyframeRule[i].keyText === "0%") { | 533 | if (this.currentKeyframeRule[i].keyText === "0%") { |
495 | newTween.spanWidth = 0; | 534 | newTween.tweenData.spanWidth = 0; |
496 | newTween.keyFramePosition = 0; | 535 | newTween.tweenData.keyFramePosition = 0; |
497 | newTween.keyFrameMillisec = 0; | 536 | newTween.tweenData.keyFrameMillisec = 0; |
498 | newTween.tweenID = 0; | 537 | newTween.tweenData.tweenID = 0; |
499 | newTween.spanPosition = 0; | 538 | newTween.tweenData.spanPosition = 0; |
500 | newTween.tweenedProperties = []; | 539 | newTween.tweenData.tweenedProperties = []; |
501 | newTween.tweenedProperties["top"] = tempTopOffset; | 540 | newTween.tweenData.tweenedProperties["top"] = tempTopOffset; |
502 | newTween.tweenedProperties["left"] = tempLeftOffset; | 541 | newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; |
503 | this.tweens.push(newTween); | 542 | this.tweens.push(newTween); |
504 | } | 543 | } |
505 | else { | 544 | else { |
@@ -512,14 +551,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
512 | currentMilliSec = fraction * this.trackDuration; | 551 | currentMilliSec = fraction * this.trackDuration; |
513 | currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 552 | currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
514 | clickPosition = currentMilliSec / currentMilliSecPerPixel; | 553 | clickPosition = currentMilliSec / currentMilliSecPerPixel; |
515 | newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; | 554 | newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; |
516 | newTween.keyFramePosition = clickPosition; | 555 | newTween.tweenData.keyFramePosition = clickPosition; |
517 | newTween.keyFrameMillisec = currentMilliSec; | 556 | newTween.tweenData.keyFrameMillisec = currentMilliSec; |
518 | newTween.tweenID = this.nextKeyframe; | 557 | newTween.tweenData.tweenID = this.nextKeyframe; |
519 | newTween.spanPosition =clickPosition - newTween.spanWidth; | 558 | newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; |
520 | newTween.tweenedProperties=[]; | 559 | newTween.tweenData.tweenedProperties=[]; |
521 | newTween.tweenedProperties["top"] = tempTopOffset; | 560 | newTween.tweenData.tweenedProperties["top"] = tempTopOffset; |
522 | newTween.tweenedProperties["left"] = tempLeftOffset; | 561 | newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; |
523 | this.tweens.push(newTween);< |