aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJon Reid2012-04-03 12:56:19 -0700
committerJon Reid2012-04-03 12:56:19 -0700
commit1ca98c8c69ea3ef28e8bc050326306424824296d (patch)
tree730a101260105f8c450a2eec378716669e49088f
parent0013aae80fc22642db6a2753f7dbd5a150f3b3cc (diff)
downloadninja-1ca98c8c69ea3ef28e8bc050326306424824296d.tar.gz
Timeline: Initial implementation of timeline zoom.
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js53
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js83
2 files changed, 58 insertions, 78 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 978b239f..b5d06ae1 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -435,6 +435,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
435 this.init(); 435 this.init();
436 this.ninjaStylesContoller = this.application.ninja.stylesController; 436 this.ninjaStylesContoller = this.application.ninja.stylesController;
437 this.element.addEventListener("click", this, false); 437 this.element.addEventListener("click", this, false);
438 this.eventManager.addEventListener("tlZoomSlider", this, false);
438 } 439 }
439 }, 440 },
440 441
@@ -467,6 +468,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
467 } 468 }
468 }, 469 },
469 470
471 handleTlZoomSlider: {
472 value: function(event) {
473
474 var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush;
475 var i = 0,
476 tweensLength = this.tweens.length;
477
478 for (i = 0; i < tweensLength; i++) {
479
480 if (i === 0) {
481 // Exception: 0th item does not depend on anything
482 // TODO: If 0th tween is draggable, this will need to be fixed.
483 this.tweens[i].tweenData.spanWidth=0;
484 this.tweens[i].tweenData.spanPosition=0;
485 this.tweens[i].tweenData.keyFramePosition=0;
486 this.tweens[i].tweenData.keyFrameMillisec=0;
487
488 } else {
489 var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition,
490 myObj = {},
491 thing = {};
492
493 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
494 currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec;
495 clickPos = currentMilliSec / currentMilliSecPerPixel;
496
497 for (thing in this.tweens[i].tweenData) {
498 myObj[thing] = this.tweens[i].tweenData[thing];
499 }
500 myObj.spanWidth = clickPos - prevKeyFramePosition;
501 myObj.keyFramePosition = clickPos;
502 myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition);
503
504 this.tweens[i].tweenData = myObj;
505 }
506
507
508 }
509 }
510 },
470 handleClick:{ 511 handleClick:{
471 value:function (ev) { 512 value:function (ev) {
472 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span 513 // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
@@ -682,6 +723,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
682 } 723 }
683 } 724 }
684 }, 725 },
726 getTweenIndexById: {
727 value: function(intID) {
728 var i = 0,
729 arrTweensLength = this.tweens.length;
730 for (i = 0; i < arrTweensLength; i++) {
731 if (this.tweens[i].tweenData.tweenID === intID) {
732 returnVal = i;
733 }
734 }
735 return returnVal;
736 }
737 },
685 /* Begin: Logging routines */ 738 /* Begin: Logging routines */
686 _boolDebug: { 739 _boolDebug: {
687 enumerable: false, 740 enumerable: false,
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index bd62a212..27828c3c 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -44,6 +44,7 @@ var Tween = exports.Tween = Montage.create(Component, {
44 }, 44 },
45 set: function(value){ 45 set: function(value){
46 this._spanWidth = value; 46 this._spanWidth = value;
47 this.tweenData.spanWidth = value;
47 this.needsDraw=true; 48 this.needsDraw=true;
48 } 49 }
49 }, 50 },
@@ -59,6 +60,7 @@ var Tween = exports.Tween = Montage.create(Component, {
59 }, 60 },
60 set:function (value) { 61 set:function (value) {
61 this._spanPosition = value; 62 this._spanPosition = value;
63 this.tweenData.spanPosition = value;
62 this.needsDraw=true; 64 this.needsDraw=true;
63 } 65 }
64 }, 66 },
@@ -74,6 +76,7 @@ var Tween = exports.Tween = Montage.create(Component, {
74 }, 76 },
75 set:function (value) { 77 set:function (value) {
76 this._keyFramePosition = value; 78 this._keyFramePosition = value;
79 this.tweenData.keyFramePosition = value;
77 this.needsDraw=true; 80 this.needsDraw=true;
78 } 81 }
79 }, 82 },
@@ -136,11 +139,6 @@ var Tween = exports.Tween = Montage.create(Component, {
136 } 139 }
137 }, 140 },
138 141
139 prepareForDraw:{
140 value:function(){
141 this.eventManager.addEventListener("tlZoomSlider", this, false);
142 }
143 },
144 142
145 draw:{ 143 draw:{
146 value:function () { 144 value:function () {
@@ -227,77 +225,6 @@ var Tween = exports.Tween = Montage.create(Component, {
227 // deselect the keyframe for this tween 225 // deselect the keyframe for this tween
228 this.keyframe.deselectKeyframe(); 226 this.keyframe.deselectKeyframe();
229 } 227 }
230 }, 228 }
231
232 handleTlZoomSlider:{
233 value:function(event){
234 var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush;
235
236 length = this.application.ninja.timeline.tempArray.length;
237 if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){
238 this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
239 var i = this.application.ninja.timeline.tweenarray.length-1;
240 for(var index=0;this.currentTween = this.parentComponent.parentComponent.tweens[index];i--,index++){
241 if(this.parentComponent.parentComponent.tweens[index].tweenData.tweenID===0){
242 this.currentTween.tweenData.spanWidth=0;
243 this.currentTween.tweenData.spanPosition=0;
244 this.currentTween.tweenData.keyFramePosition=0;
245 this.currentTween.tweenData.keyFrameMillisec=0;
246 this.setData();
247 }else{
248 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
249 currentMilliSec = this.currentTween.tweenData.keyFrameMillisec;
250 clickPos = currentMilliSec / currentMilliSecPerPixel;
251 this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition;
252 this.currentTween.tweenData.keyFramePosition = clickPos;
253 this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth;
254 this.setData();
255 }
256
257 }
258 this.application.ninja.timeline.tweenarray=[];
259 thingToPush = {};
260 thingToPush.tweenID = this.tweenID;
261 thingToPush.keyFramePosition = this.keyFramePosition;
262 this.application.ninja.timeline.tweenarray.push(thingToPush);
263 }else if(length===0){
264 this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
265 thingToPush = {};
266 thingToPush.tweenID = this.tweenID;
267 thingToPush.keyFramePosition = this.keyFramePosition;
268 this.application.ninja.timeline.tweenarray.push(thingToPush);
269 }else{
270 thingToPush = {};
271 thingToPush.tweenID = this.tweenID;
272 thingToPush.keyFramePosition = this.keyFramePosition;
273 this.application.ninja.timeline.tweenarray.push(thingToPush);
274 }
275
276 var levelNumber = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
277 var k = this.application.ninja.timeline.tweenarray.length-1;
278 if(this.parentComponent.parentComponent.tweens.length === this.application.ninja.timeline.tweenarray.length && levelNumber===0){
279 for(var indexValue=0;this.currentTween = this.parentComponent.parentComponent.tweens[indexValue];k--,indexValue++){
280 if(this.parentComponent.parentComponent.tweens[indexValue].tweenData.tweenID===0){
281 this.currentTween.tweenData.spanWidth=0;
282 this.currentTween.tweenData.spanPosition=0;
283 this.currentTween.tweenData.keyFramePosition=0;
284 this.currentTween.tweenData.keyFrameMillisec=0;
285 this.setData();
286 }else{
287 currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
288 currentMilliSec = this.currentTween.tweenData.keyFrameMillisec;
289 clickPos = currentMilliSec / currentMilliSecPerPixel;
290 this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[k+1].keyFramePosition;
291 this.currentTween.tweenData.keyFramePosition = clickPos;
292 this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth;
293 this.setData();
294 }
295
296 }
297 this.application.ninja.timeline.tempArray=[];
298 this.application.ninja.timeline.tweenarray=[];
299 }
300 }
301 }
302 229
303 }); 230});