diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.html | 3 | ||||
-rw-r--r-- | js/panels/Timeline/EasingMenu.reel/EasingMenu.js | 17 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 101 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 7 |
4 files changed, 115 insertions, 13 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html index 82218b45..1c8f808f 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html | |||
@@ -23,8 +23,9 @@ | |||
23 | <body> | 23 | <body> |
24 | <div data-montage-id="container-easing-menu" class="container-easing-choices"> | 24 | <div data-montage-id="container-easing-menu" class="container-easing-choices"> |
25 | <ul data-montage-id="easing_choices" class="easing-choices"> | 25 | <ul data-montage-id="easing_choices" class="easing-choices"> |
26 | <li data-ninja-ease="none">none</li> | ||
26 | <li data-ninja-ease="ease">ease</li> | 27 | <li data-ninja-ease="ease">ease</li> |
27 | <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li> | 28 | <li data-ninja-ease="ease-out">ease-out</li> |
28 | <li data-ninja-ease="ease-in">ease-in</li> | 29 | <li data-ninja-ease="ease-in">ease-in</li> |
29 | <li data-ninja-ease="ease-in-out">ease-in-out</li> | 30 | <li data-ninja-ease="ease-in-out">ease-in-out</li> |
30 | <li data-ninja-ease="linear">linear</li> | 31 | <li data-ninja-ease="linear">linear</li> |
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index f0547e31..ced3ae6a 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js | |||
@@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
81 | 81 | ||
82 | // currentChoice: The data attribute of the current choice | 82 | // currentChoice: The data attribute of the current choice |
83 | _currentChoice: { | 83 | _currentChoice: { |
84 | value: null | 84 | value: "none" |
85 | }, | 85 | }, |
86 | currentChoice: { | 86 | currentChoice: { |
87 | get: function() { | 87 | get: function() { |
@@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
109 | draw: { | 109 | draw: { |
110 | value: function() { | 110 | value: function() { |
111 | // Update the selection classes. | 111 | // Update the selection classes. |
112 | this.element.querySelector(".easing-selected").classList.remove("easing-selected"); | 112 | var easingSelected = this.element.querySelector(".easing-selected"); |
113 | this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected"); | 113 | if (easingSelected !== null) { |
114 | easingSelected.classList.remove("easing-selected"); | ||
115 | } | ||
116 | var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]'); | ||
117 | if (dataEl !== null) { | ||
118 | dataEl.classList.add("easing-selected"); | ||
119 | } | ||
114 | } | 120 | } |
115 | }, | 121 | }, |
116 | didDraw: { | 122 | didDraw: { |
@@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, { | |||
147 | event.stopPropagation(); | 153 | event.stopPropagation(); |
148 | 154 | ||
149 | // Un-highlight the old choice and highlight the new choice | 155 | // Un-highlight the old choice and highlight the new choice |
150 | this.element.querySelector(".easing-selected").classList.remove("easing-selected"); | 156 | var easingSelected = this.element.querySelector(".easing-selected"); |
157 | if (easingSelected !== null) { | ||
158 | easingSelected.classList.remove("easing-selected"); | ||
159 | } | ||
151 | event.target.classList.add("easing-selected"); | 160 | event.target.classList.add("easing-selected"); |
152 | 161 | ||
153 | // Set the easing in the span that called us | 162 | // Set the easing in the span that called us |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 3db57a3a..74dd1ca1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
687 | if (ev.target.className === "tracklane") { | 687 | if (ev.target.className === "tracklane") { |
688 | this.handleNewTween(ev); | 688 | this.handleNewTween(ev); |
689 | this.updateKeyframeRule(); | 689 | this.updateKeyframeRule(); |
690 | } else if (ev.target.className === "tween_span" && ev.target.parentElement.parentElement.className === "tracklane") { | 690 | } else if (ev.target.className === "tween_span_bar" && ev.target.parentElement.parentElement.parentElement.className === "tracklane") { |
691 | this.handleNewTween(ev); | 691 | this.handleNewTween(ev); |
692 | this.updateKeyframeRule(); | 692 | this.updateKeyframeRule(); |
693 | } | 693 | } |
@@ -703,6 +703,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
703 | this.addAnimationRuleToElement(ev); | 703 | this.addAnimationRuleToElement(ev); |
704 | this.updateKeyframeRule(); | 704 | this.updateKeyframeRule(); |
705 | } else { | 705 | } else { |
706 | |||
707 | |||
706 | this.handleNewTween(ev); | 708 | this.handleNewTween(ev); |
707 | this.updateKeyframeRule(); | 709 | this.updateKeyframeRule(); |
708 | } | 710 | } |
@@ -716,7 +718,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
716 | this.application.ninja.timeline.selectLayer(selectedIndex, false); | 718 | this.application.ninja.timeline.selectLayer(selectedIndex, false); |
717 | this.insertTween(ev.offsetX); | 719 | this.insertTween(ev.offsetX); |
718 | } else { | 720 | } else { |
719 | this.splitTween(ev); | 721 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. |
722 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. | ||
723 | |||
724 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | ||
725 | var findXOffset = function(obj) { | ||
726 | var curleft = 0; | ||
727 | if (obj.offsetParent) { | ||
728 | do { | ||
729 | curleft += (obj.offsetLeft-obj.scrollLeft); | ||
730 | |||
731 | } while (obj = obj.offsetParent); | ||
732 | } | ||
733 | return curleft; | ||
734 | } | ||
735 | var targetElementOffset = findXOffset(ev.currentTarget), | ||
736 | position = event.pageX - targetElementOffset; | ||
737 | |||
738 | this.splitTweenAt(position-18); | ||
720 | } | 739 | } |
721 | } | 740 | } |
722 | }, | 741 | }, |
@@ -771,10 +790,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
771 | 790 | ||
772 | splitTween:{ | 791 | splitTween:{ |
773 | value:function (ev) { | 792 | value:function (ev) { |
774 | var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; | 793 | var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX, |
775 | var i; | 794 | i, |
776 | var tweensLength = this.tweens.length-1; | 795 | tweensLength = this.tweens.length-1, |
777 | var prevTween, nextTween, splitTweenIndex; | 796 | prevTween, nextTween, splitTweenIndex; |
797 | |||
798 | consol.log(ev.target.className) | ||
778 | for(i=0; i<tweensLength; i++){ | 799 | for(i=0; i<tweensLength; i++){ |
779 | prevTween = this.tweens[i].tweenData.keyFramePosition; | 800 | prevTween = this.tweens[i].tweenData.keyFramePosition; |
780 | nextTween = this.tweens[i+1].tweenData.keyFramePosition; | 801 | nextTween = this.tweens[i+1].tweenData.keyFramePosition; |
@@ -810,6 +831,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
810 | } | 831 | } |
811 | }, | 832 | }, |
812 | 833 | ||
834 | // splitTweenAt: Split a tween at a particular position (x coordinate) | ||
835 | splitTweenAt: { | ||
836 | value:function (position) { | ||
837 | var i, j, nextComponentIndex, | ||
838 | tweensLength = this.tweens.length-1, | ||
839 | prevTween, | ||
840 | nextTween, | ||
841 | splitTweenIndex; | ||
842 | |||
843 | // Search through the tweens and find the pair whose keyframes bracket position. | ||
844 | for(i=0; i<tweensLength; i++){ | ||
845 | prevTween = this.tweens[i].tweenData.keyFramePosition; | ||
846 | nextTween = this.tweens[i+1].tweenData.keyFramePosition; | ||
847 | if(position > prevTween && position < nextTween) { | ||
848 | |||
849 | // We will insert a new tween at this index | ||
850 | splitTweenIndex = i+1; | ||
851 | |||
852 | // Update the next tween to have new span position and width. | ||
853 | this.tweens[i+1].tweenData.spanPosition = position; | ||
854 | this.tweens[i+1].spanPosition = position; | ||
855 | this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - position; | ||
856 | this.tweens[i+1].spanWidth = this.tweens[i+1].keyFramePosition - position; | ||
857 | |||
858 | // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? | ||
859 | // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. | ||
860 | // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. | ||
861 | for (j = 0; j < tweensLength +1; j++) { | ||
862 | if (this.tweenRepetition.childComponents[j].keyFramePosition === nextTween) { | ||
863 | nextComponentIndex = j; | ||
864 | } | ||
865 | } | ||
866 | this.tweenRepetition.childComponents[nextComponentIndex].setData(); | ||
867 | |||
868 | // Create the new tween and splice it into the model | ||
869 | var newTweenToInsert = {}; | ||
870 | newTweenToInsert.tweenData = {}; | ||
871 | newTweenToInsert.tweenData.spanWidth = position - prevTween; | ||
872 | newTweenToInsert.tweenData.keyFramePosition = position; | ||
873 | newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position; | ||
874 | newTweenToInsert.tweenData.tweenID = this.tweens.length; | ||
875 | newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; | ||
876 | newTweenToInsert.tweenData.tweenedProperties = []; | ||
877 | newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; | ||
878 | newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; | ||
879 | newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px"; | ||
880 | newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px"; | ||
881 | this.tweens.splice(splitTweenIndex, 0, newTweenToInsert); | ||
882 | |||
883 | // We are done, so end the loop. | ||
884 | i = tweensLength; | ||
885 | } | ||
886 | } | ||
887 | |||
888 | // We've made a change, so set the needsSave flag | ||
889 | this.application.ninja.currentDocument.model.needsSave = true; | ||