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.html21
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js62
2 files changed, 62 insertions, 21 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 79014ae6..658764c8 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -56,7 +56,7 @@
56 "styleTrackRepetition": { 56 "styleTrackRepetition": {
57 "prototype": "montage/ui/repetition.reel", 57 "prototype": "montage/ui/repetition.reel",
58 "properties": { 58 "properties": {
59 "element": {"#": "content-styles"}, 59 "element": {"#": "content_style_tracks"},
60 "isSelectionEnabled" : false 60 "isSelectionEnabled" : false
61 }, 61 },
62 "bindings": { 62 "bindings": {
@@ -195,22 +195,23 @@
195 </div> 195 </div>
196 <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div> 196 <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div>
197 <div class="collapsible-content collapsible-collapsed content-main" data-montage-id="content-main"> 197 <div class="collapsible-content collapsible-collapsed content-main" data-montage-id="content-main">
198 <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position">
199 198
200 </div> 199 <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position"></div>
201 <div class="content-position collapsible-content collapsible-collapsed" 200
202 data-montage-id="content_position_collapser"> 201 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content_position_collapser">
203 <div data-montage-id="content_position_tracks"> 202 <div data-montage-id="content_position_tracks">
204 <div data-montage-id="position_track_base"></div> 203 <div data-montage-id="position_track_base"></div>
205 </div> 204 </div>
206 </div> 205 </div>
207 206
208 <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"> 207 <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"></div>
209 208
210 </div> 209 <div class="content-styles collapsible-content collapsible-collapsed" data-montage-id="content-styles">
211 <div data-montage-id="content-styles" class="content-styles collapsible-content collapsible-collapsed"> 210 <div data-montage-id="content_style_tracks">
212 <div data-montage-id="style-track-base"></div> 211 <div data-montage-id="style-track-base"></div>
212 </div>
213 </div> 213 </div>
214
214 </div> 215 </div>
215 </div> 216 </div>
216 217
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index bf380e00..7576b33f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -702,15 +702,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
702 702
703 handleKeyboardShortcut:{ 703 handleKeyboardShortcut:{
704 value:function(ev){ 704 value:function(ev){
705 if (this.tweens.length < 1) { 705 if(ev.actionType == "insert"){
706 this.insertTween(0); 706 if (this.tweens.length < 1) {
707 this.addAnimationRuleToElement(ev); 707 this.insertTween(0);
708 this.updateKeyframeRule(); 708 this.addAnimationRuleToElement(ev);
709 } else { 709 this.updateKeyframeRule();
710 //this.handleNewTween(ev); 710 } else {
711 711 this.handleNewTween(ev);
712 // Split a tween! 712 this.updateKeyframeRule();
713 this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft) 713 }
714 } else if(ev.actionType == "remove"){
715 this.removeTween();
714 this.updateKeyframeRule(); 716 this.updateKeyframeRule();
715 } 717 }
716 } 718 }
@@ -795,9 +797,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
795 this.createMatchingPositionSizeTween(newTween); 797 this.createMatchingPositionSizeTween(newTween);
796 } 798 }
797 799
800 this.application.ninja.currentDocument.model.needsSave = true;
801 }
802 },
798 803
804 removeTween:{
805 value:function(){
806 var tweenIDToRemove = this.application.ninja.timeline.selectedTweens[0].tweenID,
807 oldPosition = this.application.ninja.timeline.selectedTweens[0].spanPosition,
808 oldSpanWidth = this.application.ninja.timeline.selectedTweens[0].spanWidth;
809
810 if(tweenIDToRemove == this.tweens[this.tweens.length-1].tweenData.tweenID){
811 this.trackDuration = this.tweens[this.tweens.length-2].tweenData.keyFrameMillisec;
812 this.tweens.pop();
813 return;
814 }
815
816 // Update the next tween to have new span position and width.
817 this.tweens[tweenIDToRemove + 1].tweenData.spanPosition = oldPosition;
818 this.tweens[tweenIDToRemove + 1].spanPosition = oldPosition;
819 this.tweens[tweenIDToRemove + 1].tweenData.spanWidth = this.tweens[tweenIDToRemove + 1].tweenData.spanWidth + oldSpanWidth;
820 this.tweens[tweenIDToRemove + 1].spanWidth = this.tweens[tweenIDToRemove + 1].spanWidth + oldSpanWidth;
799 821
822 // redraw the tweens
823 for(var i in this.tweenRepetition.childComponents){
824 this.tweenRepetition.childComponents[i].setData();
825 }
826
827 // remove the selected tween
828 this.tweens.splice(tweenIDToRemove, 1);
800 this.application.ninja.currentDocument.model.needsSave = true; 829 this.application.ninja.currentDocument.model.needsSave = true;
830
831 // update the tween ids
832 for (var j = 0; j < this.tweens.length; j++) {
833 this.tweens[j].tweenID = j;
834 this.tweens[j].tweenData.tweenID = j;
835 }
801 } 836 }
802 }, 837 },
803 838
@@ -934,6 +969,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
934 newTween.tweenData.tweenID = 0; 969 newTween.tweenData.tweenID = 0;
935 newTween.tweenData.spanPosition = 0; 970 newTween.tweenData.spanPosition = 0;
936 this.tweens.push(newTween); 971 this.tweens.push(newTween);
972 this.createMatchingPositionSizeTween(newTween);
937 } 973 }
938 else { 974 else {
939 tempTiming = trackTiming.split("s"); 975 tempTiming = trackTiming.split("s");
@@ -955,6 +991,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
955 newTween.tweenData.easing = "none"; 991 newTween.tweenData.easing = "none";
956 } 992 }
957 this.tweens.push(newTween); 993 this.tweens.push(newTween);
994 this.createMatchingPositionSizeTween(newTween);
958 } 995 }
959 this.nextKeyframe += 1; 996 this.nextKeyframe += 1;
960 } 997 }
@@ -982,8 +1019,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
982 value:function(ruleSet){ 1019 value:function(ruleSet){
983 for(var i in ruleSet){ 1020 for(var i in ruleSet){
984 var styleProp = ruleSet[i][0].style[0]; 1021 var styleProp = ruleSet[i][0].style[0];
985 //console.log(styleProp);
986 //console.log(ruleSet[i]);
987 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]); 1022 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]);
988 } 1023 }
989 } 1024 }
@@ -1051,6 +1086,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
1051 createPositionTracks:{ 1086 createPositionTracks:{
1052 value:function(){ 1087 value:function(){
1053 // create track objects for position and transform tracks and push into arrays 1088 // create track objects for position and transform tracks and push into arrays
1089
1090 // ... but only do it if we haven't already.
1091 if (this.arrPositionTracks.length > 0) {
1092 return;
1093 }
1054 1094
1055 // create 'left' track 1095 // create 'left' track
1056 var newLeftTrack = {}; 1096 var newLeftTrack = {};