diff options
Diffstat (limited to 'js/panels')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 46 |
2 files changed, 24 insertions, 26 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 81415951..e92c83db 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -728,7 +728,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
728 | if(this.currentLayerSelected.elementsList[0]!==undefined){ | 728 | if(this.currentLayerSelected.elementsList[0]!==undefined){ |
729 | if(this.currentTrackSelected.isTrackAnimated){ | 729 | if(this.currentTrackSelected.isTrackAnimated){ |
730 | this.application.ninja.stage.clearDrawingCanvas(); | 730 | this.application.ninja.stage.clearDrawingCanvas(); |
731 | alert("cannot add elements to a layer with animated element");/* check how to clear the canvas*/ | 731 | console.log("cannot add elements to a layer with animated element"); |
732 | return; | 732 | return; |
733 | }else{ | 733 | }else{ |
734 | this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); | 734 | this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); |
@@ -738,12 +738,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
738 | this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); | 738 | this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); |
739 | this.currentLayerSelected.elementsList.push(event.detail); | 739 | this.currentLayerSelected.elementsList.push(event.detail); |
740 | } | 740 | } |
741 | |||
742 | } | 741 | } |
743 | }, | 742 | }, |
744 | 743 | ||
745 | handleElementDeleted:{ | 744 | handleElementDeleted:{ |
746 | value:function (event) { | 745 | value:function (event) { |
746 | |||
747 | var length; | 747 | var length; |
748 | this.deleteElement = event.detail; | 748 | this.deleteElement = event.detail; |
749 | length = this.currentLayerSelected.elementsList.length - 1; | 749 | length = this.currentLayerSelected.elementsList.length - 1; |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bf97c0fd..f8f4f6b8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -459,7 +459,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
459 | 459 | ||
460 | retrieveStoredTweens:{ | 460 | retrieveStoredTweens:{ |
461 | value:function () { | 461 | value:function () { |
462 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; | 462 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute |
463 | var animationTiming,trackTiming,currentMilliSec,currentMilliSecPerPixel,clickPosition,i = 0; | ||
463 | 464 | ||
464 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 465 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
465 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | 466 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; |
@@ -467,23 +468,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
467 | if(this.animatedElement!==undefined){ | 468 | if(this.animatedElement!==undefined){ |
468 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | 469 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |
469 | if(this.animationName){ | 470 | if(this.animationName){ |
470 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 471 | animationTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); |
471 | this.trackDuration = this.animationDuration.split("s"); | 472 | trackTiming = animationTiming.split("s"); |
472 | this.currentMilliSec = this.trackDuration[0] * 1000; | 473 | currentMilliSec = trackTiming[0] * 1000; |
473 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 474 | currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
474 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | 475 | clickPosition = currentMilliSec / currentMilliSecPerPixel; |
475 | this.nextKeyframe = 0; | 476 | this.nextKeyframe = 0; |
476 | 477 | ||
477 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); | 478 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); |
478 | while (this.currentKeyframeRule[i]) { | 479 | |
480 | for (i =0; this.currentKeyframeRule[i] ;i++) { | ||
479 | var newTween = {}; | 481 | var newTween = {}; |
480 | 482 | ||
481 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); | 483 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); |
482 | topOffSetAttribute = offsetAttribute[3].split("px"); | 484 | topOffSetAttribute = offsetAttribute[3].split("px"); |
483 | leftOffsetAttribute = offsetAttribute[5].split("px"); | 485 | leftOffsetAttribute = offsetAttribute[5].split("px"); |
484 | 486 | ||
485 | parseInt(topOffSetAttribute[0]); | 487 | var tempTopOffset = parseInt(topOffSetAttribute[0]); |
486 | parseInt(leftOffsetAttribute[0]); | 488 | var tempLeftOffset =parseInt(leftOffsetAttribute[0]); |
487 | 489 | ||
488 | if (this.currentKeyframeRule[i].keyText === "0%") { | 490 | if (this.currentKeyframeRule[i].keyText === "0%") { |
489 | newTween.spanWidth = 0; | 491 | newTween.spanWidth = 0; |
@@ -492,8 +494,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
492 | newTween.tweenID = 0; | 494 | newTween.tweenID = 0; |
493 | newTween.spanPosition = 0; | 495 | newTween.spanPosition = 0; |
494 | newTween.tweenedProperties = []; | 496 | newTween.tweenedProperties = []; |
495 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | 497 | newTween.tweenedProperties["top"] = tempTopOffset; |
496 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | 498 | newTween.tweenedProperties["left"] = tempLeftOffset; |
497 | this.tweens.push(newTween); | 499 | this.tweens.push(newTween); |
498 | 500 | ||
499 | } | 501 | } |
@@ -501,30 +503,26 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
501 | percentValue = this.currentKeyframeRule[i].keyText; | 503 | percentValue = this.currentKeyframeRule[i].keyText; |
502 | splitValue = percentValue.split("%"); | 504 | splitValue = percentValue.split("%"); |
503 | fraction = splitValue[0] / 100; | 505 | fraction = splitValue[0] / 100; |
504 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; | 506 | currentMilliSec = fraction * trackTiming[0] * 1000; |
505 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 507 | currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
506 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | 508 | clickPosition = currentMilliSec / currentMilliSecPerPixel; |
507 | newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; | 509 | newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; |
508 | newTween.keyFramePosition = this.clickPos; | 510 | newTween.keyFramePosition = clickPosition; |
509 | newTween.keyFrameMillisec = this.currentMilliSec; | 511 | newTween.keyFrameMillisec = currentMilliSec; |
510 | newTween.tweenID = this.nextKeyframe; | 512 | newTween.tweenID = this.nextKeyframe; |
511 | newTween.spanPosition = this.clickPos - newTween.spanWidth; | 513 | newTween.spanPosition =clickPosition - newTween.spanWidth; |
512 | newTween.tweenedProperties=[]; | 514 | newTween.tweenedProperties=[]; |
513 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | 515 | newTween.tweenedProperties["top"] = tempTopOffset; |
514 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | 516 | newTween.tweenedProperties["left"] = tempLeftOffset; |
515 | this.tweens.push(newTween); | 517 | this.tweens.push(newTween); |
516 | 518 | ||
517 | 519 | ||
518 | } | 520 | } |
519 | i++; | ||
520 | this.nextKeyframe += 1; | 521 | this.nextKeyframe += 1; |
521 | } | 522 | } |
522 | this.isTrackAnimated = true; | 523 | this.isTrackAnimated = true; |
523 | } | 524 | } |
524 | } | 525 | } |
525 | else{ | ||
526 | return; | ||
527 | } | ||
528 | } | 526 | } |
529 | }, | 527 | }, |
530 | 528 | ||