aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
diff options
context:
space:
mode:
authorKruti Shah2012-06-26 09:46:59 -0700
committerKruti Shah2012-06-26 09:46:59 -0700
commit4b4a95140d52e191e5e637371dfc369e50e7f9c8 (patch)
tree274b55f66527a9925032c5d6da4baa6f12be8ada /js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
parent4bf8e4cdc179c3b388fc06f26008808aa4b77eb0 (diff)
parentf0d4d89d856b99da1ca8dd3366c48bb76ba6b1f6 (diff)
downloadninja-4b4a95140d52e191e5e637371dfc369e50e7f9c8.tar.gz
Merge branch 'refs/heads/TimelineUberJD' into Timeline-local-kruti
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js')
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js55
1 files changed, 34 insertions, 21 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 85fce1ec..3a8d1ff3 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -682,6 +682,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
682 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span 682 // 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 683 // This needs to move to a keyboard shortcut that is TBD
684 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 684 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
685
686 var targetElementOffset = this.findXOffset(ev.currentTarget),
687 position = (event.pageX - targetElementOffset) - 18;
688
689 this.application.ninja.timeline.playheadmarker.style.left = position + "px";
690 var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
691 var currentMillisec = currentMillisecPerPixel * position;
692 this.application.ninja.timeline.updateTimeText(currentMillisec);
693
685 if (ev.shiftKey) { 694 if (ev.shiftKey) {
686 if (this.tweens.length < 1) { 695 if (this.tweens.length < 1) {
687 this.insertTween(0); 696 this.insertTween(0);
@@ -709,15 +718,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
709 this.updateKeyframeRule(); 718 this.updateKeyframeRule();
710 } else { 719 } else {
711 this.handleNewTween(ev); 720 this.handleNewTween(ev);
712
713 // Split a tween!
714 //this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft);
715 this.updateKeyframeRule(); 721 this.updateKeyframeRule();
716 } 722 }
717 } else if(ev.actionType == "remove"){ 723 } else if(ev.actionType == "remove"){
718 this.removeTween(); 724 this.removeTween();
725 this.updateKeyframeRule();
719 } 726 }
720
721 } 727 }
722 }, 728 },
723 729
@@ -730,19 +736,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
730 } else { 736 } else {
731 // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. 737 // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
732 // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. 738 // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
733 739 var targetElementOffset = this.findXOffset(ev.currentTarget),
734 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
735 var findXOffset = function(obj) {
736 var curleft = 0;
737 if (obj.offsetParent) {
738 do {
739 curleft += (obj.offsetLeft-obj.scrollLeft);
740
741 } while (obj = obj.offsetParent);
742 }
743 return curleft;
744 }
745 var targetElementOffset = findXOffset(ev.currentTarget),
746 position = event.pageX - targetElementOffset; 740 position = event.pageX - targetElementOffset;
747 741
748 this.splitTweenAt(position-18); 742 this.splitTweenAt(position-18);
@@ -750,6 +744,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
750 } 744 }
751 }, 745 },
752 746
747 findXOffset:{
748 value:function (obj) {
749 // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
750 var curleft = 0;
751 if (obj.offsetParent) {
752 do {
753 curleft += (obj.offsetLeft - obj.scrollLeft);
754
755 } while (obj = obj.offsetParent);
756 }
757 return curleft;
758 }
759 },
760
753 insertTween:{ 761 insertTween:{
754 value:function (clickPos) { 762 value:function (clickPos) {
755 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); 763 var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
@@ -800,8 +808,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
800 this.createMatchingPositionSizeTween(newTween); 808 this.createMatchingPositionSizeTween(newTween);
801 } 809 }
802 810
803
804
805 this.application.ninja.currentDocument.model.needsSave = true; 811 this.application.ninja.currentDocument.model.needsSave = true;
806 } 812 }
807 }, 813 },
@@ -974,6 +980,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
974 newTween.tweenData.tweenID = 0; 980 newTween.tweenData.tweenID = 0;
975 newTween.tweenData.spanPosition = 0; 981 newTween.tweenData.spanPosition = 0;
976 this.tweens.push(newTween); 982 this.tweens.push(newTween);
983 this.createMatchingPositionSizeTween(newTween);
977 } 984 }
978 else { 985 else {
979 tempTiming = trackTiming.split("s"); 986 tempTiming = trackTiming.split("s");
@@ -995,6 +1002,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
995 newTween.tweenData.easing = "none"; 1002 newTween.tweenData.easing = "none";
996 } 1003 }
997 this.tweens.push(newTween); 1004 this.tweens.push(newTween);
1005 this.createMatchingPositionSizeTween(newTween);
998 } 1006 }
999 this.nextKeyframe += 1; 1007 this.nextKeyframe += 1;
1000 } 1008 }
@@ -1022,8 +1030,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1022 value:function(ruleSet){ 1030 value:function(ruleSet){
1023 for(var i in ruleSet){ 1031 for(var i in ruleSet){
1024 var styleProp = ruleSet[i][0].style[0]; 1032 var styleProp = ruleSet[i][0].style[0];
1025 //console.log(styleProp);
1026 //console.log(ruleSet[i]);
1027 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]); 1033 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]);
1028 } 1034 }
1029 } 1035 }
@@ -1056,6 +1062,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1056 // build the new keyframe string 1062 // build the new keyframe string
1057 var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; 1063 var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
1058 1064
1065 console.log(this.animationName);
1066
1059 for (var i = 0; i < this.tweens.length; i++) { 1067 for (var i = 0; i < this.tweens.length; i++) {
1060 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); 1068 var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec);
1061 // TODO - trackDur should be parseFloat rounded to significant digits 1069 // TODO - trackDur should be parseFloat rounded to significant digits
@@ -1091,6 +1099,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1091 createPositionTracks:{ 1099 createPositionTracks:{
1092 value:function(){ 1100 value:function(){
1093 // create track objects for position and transform tracks and push into arrays 1101 // create track objects for position and transform tracks and push into arrays
1102
1103 // ... but only do it if we haven't already.
1104 if (this.arrPositionTracks.length > 0) {
1105 return;
1106 }
1094 1107
1095 // create 'left' track 1108 // create 'left' track
1096 var newLeftTrack = {}; 1109 var newLeftTrack = {};