aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.html3
-rw-r--r--js/panels/Timeline/EasingMenu.reel/EasingMenu.js17
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js101
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js7
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;
890
891 // Our tween IDs are now all messed up. Fix them.
892 for (i = 0; i <= tweensLength+1; i++) {