diff options
author | Jose Antonio Marquez | 2012-06-27 15:32:38 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-06-27 15:32:38 -0700 |
commit | 60554730ac89bb874f811ba312c491d5caacf8ce (patch) | |
tree | 3b78bab74798812a38c05bfba0f88c407f98031f /js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |
parent | f704705fd85c1af44ad86f8c29e8e93d330796e5 (diff) | |
parent | 07e7e2f28b863b0a4d139cc7e649a630b162e0da (diff) | |
download | ninja-60554730ac89bb874f811ba312c491d5caacf8ce.tar.gz |
Merge branch 'refs/heads/Ninja-Internal' into Color
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 88 |
1 files changed, 67 insertions, 21 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 68ea928a..26ce526f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -72,6 +72,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
72 | this.trackData.isVisible = value; | 72 | this.trackData.isVisible = value; |
73 | } | 73 | } |
74 | }, | 74 | }, |
75 | |||
76 | _stageElement: { | ||
77 | value: null | ||
78 | }, | ||
79 | stageElement: { | ||
80 | get: function() { | ||
81 | return this._stageElement; | ||
82 | }, | ||
83 | set: function(newVal) { | ||
84 | this._stageElement = newVal; | ||
85 | this.trackData.stageElement = newVal; | ||
86 | } | ||
87 | }, | ||
75 | 88 | ||
76 | // Are the various collapsers collapsed or not | 89 | // Are the various collapsers collapsed or not |
77 | _isMainCollapsed:{ | 90 | _isMainCollapsed:{ |
@@ -484,6 +497,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
484 | this.isStyleCollapsed = this.trackData.isStyleCollapsed; | 497 | this.isStyleCollapsed = this.trackData.isStyleCollapsed; |
485 | this.trackPosition = this.trackData.trackPosition; | 498 | this.trackPosition = this.trackData.trackPosition; |
486 | this.isVisible = this.trackData.isVisible; | 499 | this.isVisible = this.trackData.isVisible; |
500 | this.stageElement = this.trackData.stageElement; | ||
487 | this.trackEditorProperty = "master"; | 501 | this.trackEditorProperty = "master"; |
488 | this.needsDraw = true; | 502 | this.needsDraw = true; |
489 | } | 503 | } |
@@ -682,7 +696,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
682 | // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span | 696 | // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span |
683 | // This needs to move to a keyboard shortcut that is TBD | 697 | // This needs to move to a keyboard shortcut that is TBD |
684 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 698 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
699 | |||
700 | var targetElementOffset = this.findXOffset(ev.currentTarget), | ||
701 | position = (event.pageX - targetElementOffset) - 18; | ||
702 | |||
703 | this.application.ninja.timeline.playheadmarker.style.left = position + "px"; | ||
704 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
705 | var currentMillisec = currentMillisecPerPixel * position; | ||
706 | this.application.ninja.timeline.updateTimeText(currentMillisec); | ||
707 | |||
685 | if (ev.shiftKey) { | 708 | if (ev.shiftKey) { |
709 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
710 | this.application.ninja.timeline.selectLayer(selectedIndex, true); | ||
686 | if (this.tweens.length < 1) { | 711 | if (this.tweens.length < 1) { |
687 | this.insertTween(0); | 712 | this.insertTween(0); |
688 | this.addAnimationRuleToElement(ev); | 713 | this.addAnimationRuleToElement(ev); |
@@ -720,6 +745,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
720 | 745 | ||
721 | handleNewTween:{ | 746 | handleNewTween:{ |
722 | value:function (ev) { | 747 | value:function (ev) { |
748 | |||
723 | if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { | 749 | if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { |
724 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 750 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
725 | this.application.ninja.timeline.selectLayer(selectedIndex, false); | 751 | this.application.ninja.timeline.selectLayer(selectedIndex, false); |
@@ -727,31 +753,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
727 | } else { | 753 | } else { |
728 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. | 754 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. |
729 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. | 755 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. |
756 | if (typeof(ev.currentTarget) === "undefined") { | ||
757 | this.splitTweenAt(ev.offsetX); | ||
758 | } else { | ||
759 | var targetElementOffset = this.findXOffset(ev.currentTarget), | ||
760 | position = event.pageX - targetElementOffset; | ||
761 | this.splitTweenAt(position-18); | ||
762 | } | ||
763 | } | ||
764 | } | ||
765 | }, | ||
766 | |||
767 | findXOffset:{ | ||
768 | value:function (obj) { | ||
769 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | ||
770 | var curleft = 0; | ||
771 | if (typeof(obj) === "undefined") { | ||
772 | //debugger; | ||
773 | } | ||
774 | if (obj.offsetParent) { | ||
775 | do { | ||
776 | curleft += (obj.offsetLeft - obj.scrollLeft); | ||
730 | 777 | ||
731 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | 778 | } while (obj = obj.offsetParent); |
732 | var findXOffset = function(obj) { | ||
733 | var curleft = 0; | ||
734 | if (obj.offsetParent) { | ||
735 | do { | ||
736 | curleft += (obj.offsetLeft-obj.scrollLeft); | ||
737 | |||
738 | } while (obj = obj.offsetParent); | ||
739 | } | ||
740 | return curleft; | ||
741 | } | ||
742 | var targetElementOffset = findXOffset(ev.currentTarget), | ||
743 | position = event.pageX - targetElementOffset; | ||
744 | |||
745 | this.splitTweenAt(position-18); | ||
746 | } | 779 | } |
780 | return curleft; | ||
747 | } | 781 | } |
748 | }, | 782 | }, |
749 | 783 | ||
750 | insertTween:{ | 784 | insertTween:{ |
751 | value:function (clickPos) { | 785 | value:function (clickPos) { |
752 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
753 | this.application.ninja.timeline.selectLayer(selectedIndex, true); | ||
754 | |||
755 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 786 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
756 | var currentMillisec = currentMillisecPerPixel * clickPos; | 787 | var currentMillisec = currentMillisecPerPixel * clickPos; |
757 | this.trackDuration = currentMillisec; | 788 | this.trackDuration = currentMillisec; |
@@ -969,6 +1000,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
969 | newTween.tweenData.tweenID = 0; | 1000 | newTween.tweenData.tweenID = 0; |
970 | newTween.tweenData.spanPosition = 0; | 1001 | newTween.tweenData.spanPosition = 0; |
971 | this.tweens.push(newTween); | 1002 | this.tweens.push(newTween); |
1003 | this.createMatchingPositionSizeTween(newTween); | ||
972 | } | 1004 | } |
973 | else { | 1005 | else { |
974 | tempTiming = trackTiming.split("s"); | 1006 | tempTiming = trackTiming.split("s"); |
@@ -1027,16 +1059,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
1027 | value:function (tweenEvent) { | 1059 | value:function (tweenEvent) { |
1028 | this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; | 1060 | this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; |
1029 | this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; | 1061 | this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; |
1062 | this.tweens[0].tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; | ||
1063 | this.tweens[0].tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; | ||
1030 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; | 1064 | var animationDuration = Math.round(this.trackDuration / 1000) + "s"; |
1031 | this.animationName = this.animatedElement.classList[0] + "_PositionSize"; | 1065 | this.animationName = this.animatedElement.classList[0] + "_PositionSize"; |
1032 | this.animationNamesString = this.animationName; | 1066 | if(this.animationNamesString.length == 0){ |
1033 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); | 1067 | this.animationNamesString = this.animationName; |
1068 | } else { | ||
1069 | this.animationNamesString = this.animationName + ", " + this.animationNamesString; | ||
1070 | } | ||
1071 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationNamesString); | ||
1034 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); | 1072 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); |
1073 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards"); | ||
1035 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); | 1074 | this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); |
1075 | |||
1036 | var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; | 1076 | var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; |
1037 | 1077 | ||
1038 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); | 1078 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); |
1039 | |||
1040 | this.insertTween(tweenEvent.offsetX); | 1079 | this.insertTween(tweenEvent.offsetX); |
1041 | this.isTrackAnimated = true; | 1080 | this.isTrackAnimated = true; |
1042 | } | 1081 | } |
@@ -1050,6 +1089,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
1050 | // build the new keyframe string | 1089 | // build the new keyframe string |
1051 | var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; | 1090 | var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; |
1052 | 1091 | ||
1092 | //console.log(this.animationName); | ||
1093 | |||
1053 | for (var i = 0; i < this.tweens.length; i++) { | 1094 | for (var i = 0; i < this.tweens.length; i++) { |
1054 | var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); | 1095 | var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); |
1055 | // TODO - trackDur should be parseFloat rounded to significant digits | 1096 | // TODO - trackDur should be parseFloat rounded to significant digits |
@@ -1085,6 +1126,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
1085 | createPositionTracks:{ | 1126 | createPositionTracks:{ |
1086 | value:function(){ | 1127 | value:function(){ |
1087 | // create track objects for position and transform tracks and push into arrays | 1128 | // create track objects for position and transform tracks and push into arrays |
1129 | |||
1130 | // ... but only do it if we haven't already. | ||