aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js106
1 files changed, 98 insertions, 8 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 3db57a3a..84bac2cb 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,7 +703,10 @@ 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 this.handleNewTween(ev); 706 //this.handleNewTween(ev);
707
708 // Split a tween!
709 this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft)
707 this.updateKeyframeRule(); 710 this.updateKeyframeRule();
708 } 711 }
709 } 712 }
@@ -716,7 +719,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
716 this.application.ninja.timeline.selectLayer(selectedIndex, false); 719 this.application.ninja.timeline.selectLayer(selectedIndex, false);
717 this.insertTween(ev.offsetX); 720 this.insertTween(ev.offsetX);
718 } else { 721 } else {
719 this.splitTween(ev); 722 // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
723 // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
724
725 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
726 var findXOffset = function(obj) {
727 var curleft = 0;
728 if (obj.offsetParent) {
729 do {
730 curleft += (obj.offsetLeft-obj.scrollLeft);
731
732 } while (obj = obj.offsetParent);
733 }
734 return curleft;
735 }
736 var targetElementOffset = findXOffset(ev.currentTarget),
737 position = event.pageX - targetElementOffset;
738
739 this.splitTweenAt(position-18);
720 } 740 }
721 } 741 }
722 }, 742 },
@@ -751,7 +771,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
751 newTween.tweenData.keyFrameMillisec = currentMillisec; 771 newTween.tweenData.keyFrameMillisec = currentMillisec;
752 newTween.tweenData.tweenID = this.nextKeyframe; 772 newTween.tweenData.tweenID = this.nextKeyframe;
753 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; 773 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
754 newTween.tweenData.easing = "ease-in"; 774 newTween.tweenData.easing = "none";
755 newTween.tweenData.tweenedProperties = []; 775 newTween.tweenData.tweenedProperties = [];
756 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px"; 776 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
757 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px"; 777 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
@@ -771,10 +791,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
771 791
772 splitTween:{ 792 splitTween:{
773 value:function (ev) { 793 value:function (ev) {
774 var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; 794 var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX,
775 var i; 795 i,
776 var tweensLength = this.tweens.length-1; 796 tweensLength = this.tweens.length-1,
777 var prevTween, nextTween, splitTweenIndex; 797 prevTween, nextTween, splitTweenIndex;
798
799 consol.log(ev.target.className)
778 for(i=0; i<tweensLength; i++){ 800 for(i=0; i<tweensLength; i++){
779 prevTween = this.tweens[i].tweenData.keyFramePosition; 801 prevTween = this.tweens[i].tweenData.keyFramePosition;
780 nextTween = this.tweens[i+1].tweenData.keyFramePosition; 802 nextTween = this.tweens[i+1].tweenData.keyFramePosition;
@@ -810,6 +832,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
810 } 832 }
811 }, 833 },
812 834
835 // splitTweenAt: Split a tween at a particular position (x coordinate)
836 splitTweenAt: {
837 value:function (position) {
838 var i, j, nextComponentIndex,
839 tweensLength = this.tweens.length-1,
840 prevTween,
841 nextTween,
842 splitTweenIndex;
843
844 // Search through the tweens and find the pair whose keyframes bracket position.
845 for(i=0; i<tweensLength; i++){
846 prevTween = this.tweens[i].tweenData.keyFramePosition;
847 nextTween = this.tweens[i+1].tweenData.keyFramePosition;
848 if(position > prevTween && position < nextTween) {
849
850 // We will insert a new tween at this index
851 splitTweenIndex = i+1;
852
853 // Update the next tween to have new span position and width.
854 this.tweens[i+1].tweenData.spanPosition = position;
855 this.tweens[i+1].spanPosition = position;
856 this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - position;
857 this.tweens[i+1].spanWidth = this.tweens[i+1].keyFramePosition - position;
858
859 // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you?
860 // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes.
861 // So we have to get the index of the actual componentin the repetition, which may not match our iteration index.
862 for (j = 0; j < tweensLength +1; j++) {
863 if (this.tweenRepetition.childComponents[j].keyFramePosition === nextTween) {
864 nextComponentIndex = j;
865 }
866 }
867 this.tweenRepetition.childComponents[nextComponentIndex].setData();
868
869 // Create the new tween and splice it into the model
870 var newTweenToInsert = {};
871 newTweenToInsert.tweenData = {};
872 newTweenToInsert.tweenData.spanWidth = position - prevTween;
873 newTweenToInsert.tweenData.keyFramePosition = position;
874 newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position;
875 newTweenToInsert.tweenData.tweenID = this.tweens.length;
876 newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth;
877 newTweenToInsert.tweenData.tweenedProperties = [];
878 newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
879 newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
880 newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
881 newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
882 this.tweens.splice(splitTweenIndex, 0, newTweenToInsert);
883
884 // We are done, so end the loop.
885 i = tweensLength;
886 }
887 }
888
889 // We've made a change, so set the needsSave flag
890 this.application.ninja.currentDocument.model.needsSave = true;
891
892 // Our tween IDs are now all messed up. Fix them.
893 for (i = 0; i <= tweensLength+1; i++) {
894 this.tweens[i].tweenID = i;
895 this.tweens[i].tweenData.tweenID = i;
896 }
897 }
898 },
899
813 retrieveStoredTweens:{ 900 retrieveStoredTweens:{
814 value:function () { 901 value:function () {
815 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute,widthOffsetAttribute,heightOffsetAttribute; 902 var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute,widthOffsetAttribute,heightOffsetAttribute;
@@ -885,6 +972,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
885 newTween.tweenData.tweenID = this.nextKeyframe; 972 newTween.tweenData.tweenID = this.nextKeyframe;
886 newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; 973 newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth;
887 newTween.tweenData.easing = this.currentKeyframeRule[i].style.webkitAnimationName; 974 newTween.tweenData.easing = this.currentKeyframeRule[i].style.webkitAnimationName;
975 if (newTween.tweenData.easing == "") {
976 newTween.tweenData.easing = "none";
977 }
888 this.tweens.push(newTween); 978 this.tweens.push(newTween);
889 } 979 }
890 this.nextKeyframe += 1; 980 this.nextKeyframe += 1;