diff options
author | Jon Reid | 2012-03-07 14:29:49 -0800 |
---|---|---|
committer | Jon Reid | 2012-03-07 14:29:49 -0800 |
commit | de3b2f1dce91b8bf807e1b9264dbeb835d0c3006 (patch) | |
tree | fab6d272143daca45c87e691490d8698defb5d23 /js/panels/Timeline/TimelineTrack.reel | |
parent | 18be6028647017d053424cdd160ef7afc9351fd2 (diff) | |
parent | abdd0542bce89b6b22f0684d00b9cf24e5d0a5e6 (diff) | |
download | ninja-de3b2f1dce91b8bf807e1b9264dbeb835d0c3006.tar.gz |
Merge branch 'Timeline-serialkiller' into Timeline-local
Diffstat (limited to 'js/panels/Timeline/TimelineTrack.reel')
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 39 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 125 |
2 files changed, 84 insertions, 80 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 1cc05f4e..7e9b8a21 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | |||
@@ -32,44 +32,9 @@ | |||
32 | "element":{"#": "track_lane"} | 32 | "element":{"#": "track_lane"} |
33 | }, | 33 | }, |
34 | "bindings" : { | 34 | "bindings" : { |
35 | "spanWidth" : { | 35 | "tweenData" : { |
36 | "boundObject" : {"@": "tweenRepetition"}, | 36 | "boundObject" : {"@": "tweenRepetition"}, |
37 | "boundObjectPropertyPath" : "objectAtCurrentIteration.spanWidth", | 37 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData", |
38 | "oneway" : false | ||
39 | }, | ||
40 | "keyFramePosition" : { | ||
41 | "boundObject" : {"@": "tweenRepetition"}, | ||
42 | "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFramePosition", | ||
43 | "oneway" : false | ||
44 | }, | ||
45 | "spanPosition" : { | ||
46 | "boundObject" : {"@": "tweenRepetition"}, | ||
47 | "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", | ||
48 | "oneway" : false | ||
49 | }, | ||
50 | "keyFrameMillisec" : { | ||
51 | "boundObject" : {"@": "tweenRepetition"}, | ||
52 | "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", | ||
53 | "oneway" : false | ||
54 | }, | ||
55 | "tweenID" : { | ||
56 | "boundObject" : {"@": "tweenRepetition"}, | ||
57 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID", | ||
58 | "oneway" : false | ||
59 | }, | ||
60 | "tweenedProperties" : { | ||
61 | "boundObject" : {"@": "tweenRepetition"}, | ||
62 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties", | ||
63 | "oneway" : false | ||
64 | }, | ||
65 | "isTweenAnimated" : { | ||
66 | "boundObject" : {"@": "tweenRepetition"}, | ||
67 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", | ||
68 | "oneway" : false | ||
69 | }, | ||
70 | "isClearing" : { | ||
71 | "boundObject" : {"@": "tweenRepetition"}, | ||
72 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing", | ||
73 | "oneway" : false | 38 | "oneway" : false |
74 | } | 39 | } |
75 | } | 40 | } |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 669dabef..17e50789 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -345,6 +345,43 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
345 | _styleCollapser:{ | 345 | _styleCollapser:{ |
346 | value:null | 346 | value:null |
347 | }, | 347 | }, |
348 | |||
349 | _trackData:{ | ||
350 | |||
351 | }, | ||
352 | |||
353 | trackData:{ | ||
354 | serializable:true, | ||
355 | get:function(){ | ||
356 | return this._trackData; | ||
357 | }, | ||
358 | set:function(val){ | ||
359 | this._trackData = val; | ||
360 | if(this._trackData){ | ||
361 | this.setData(); | ||
362 | } | ||
363 | } | ||
364 | }, | ||
365 | |||
366 | setData:{ | ||
367 | value:function(){ | ||
368 | this.trackID = this.trackData.layerID; | ||
369 | this.tweens = this.trackData.tweens; | ||
370 | this.animatedElement = this.trackData.animatedElement; | ||
371 | this.arrStyleTracks = this.trackData.arrStyleTracks; | ||
372 | this.isTrackAnimated = this.trackData.isTrackAnimated; | ||
373 | this.trackDuration = this.trackData.trackDuration; | ||
374 | this.animationName = this.trackData.animationName; | ||
375 | this.currentKeyframeRule = this.trackData.currentKeyframeRule; | ||
376 | this.isMainCollapsed = this.trackData.isMainCollapsed; | ||
377 | this.isPositionCollapsed = this.trackData.isPositionCollapsed; | ||
378 | this.isTransformCollapsed = this.trackData.isTransformCollapsed; | ||
379 | this.bypassAnimation = this.trackData.bypassAnimation; | ||
380 | this.isStyleCollapsed = this.trackData.isStyleCollapsed; | ||
381 | this.trackPosition = this.trackData.trackPosition; | ||
382 | } | ||
383 | }, | ||
384 | |||
348 | prepareForDraw:{ | 385 | prepareForDraw:{ |
349 | value:function () { | 386 | value:function () { |
350 | this.init(); | 387 | this.init(); |
@@ -378,7 +415,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
378 | if(!this.application.ninja.documentController.creatingNewFile){ | 415 | if(!this.application.ninja.documentController.creatingNewFile){ |
379 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 416 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
380 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 417 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
381 | if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){ | 418 | if(!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created){ |
382 | this.retrieveStoredTweens(); | 419 | this.retrieveStoredTweens(); |
383 | } | 420 | } |
384 | } | 421 | } |
@@ -394,7 +431,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
394 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 431 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
395 | 432 | ||
396 | if (ev.shiftKey) { | 433 | if (ev.shiftKey) { |
397 | if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { | 434 | if (this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList.length == 1) { |
398 | if (this.tweens.length < 1) { | 435 | if (this.tweens.length < 1) { |
399 | this.insertTween(0); | 436 | this.insertTween(0); |
400 | this.addAnimationRuleToElement(ev); | 437 | this.addAnimationRuleToElement(ev); |
@@ -410,7 +447,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
410 | 447 | ||
411 | handleNewTween:{ | 448 | handleNewTween:{ |
412 | value:function (ev) { | 449 | value:function (ev) { |
413 | if (ev.offsetX > this.tweens[this.tweens.length - 1].keyFramePosition) { | 450 | if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { |
414 | this.insertTween(ev.offsetX); | 451 | this.insertTween(ev.offsetX); |
415 | } else { | 452 | } else { |
416 | this.splitTween(ev); | 453 | this.splitTween(ev); |
@@ -427,27 +464,28 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
427 | // need to check timeline master duration if greater than this track duration | 464 | // need to check timeline master duration if greater than this track duration |
428 | this.trackDuration = currentMillisec; | 465 | this.trackDuration = currentMillisec; |
429 | var newTween = {}; | 466 | var newTween = {}; |
467 | newTween.tweenData = {}; | ||
430 | 468 | ||
431 | if (clickPos == 0) { | 469 | if (clickPos == 0) { |
432 | this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; | 470 | this.animatedElement = this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0]; |
433 | newTween.spanWidth = 0; | 471 | newTween.tweenData.spanWidth = 0; |
434 | newTween.keyFramePosition = 0; | 472 | newTween.tweenData.keyFramePosition = 0; |
435 | newTween.keyFrameMillisec = 0; | 473 | newTween.tweenData.keyFrameMillisec = 0; |
436 | newTween.tweenID = 0; | 474 | newTween.tweenData.tweenID = 0; |
437 | newTween.spanPosition = 0; | 475 | newTween.tweenData.spanPosition = 0; |
438 | newTween.tweenedProperties = []; | 476 | newTween.tweenData.tweenedProperties = []; |
439 | newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; | 477 | newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; |
440 | newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; | 478 | newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; |
441 | this.tweens.push(newTween); | 479 | this.tweens.push(newTween); |
442 | } else { | 480 | } else { |
443 | newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; | 481 | newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; |
444 | newTween.keyFramePosition = clickPos; | 482 | newTween.tweenData.keyFramePosition = clickPos; |
445 | newTween.keyFrameMillisec = currentMillisec; | 483 | newTween.tweenData.keyFrameMillisec = currentMillisec; |
446 | newTween.tweenID = this.nextKeyframe; | 484 | newTween.tweenData.tweenID = this.nextKeyframe; |
447 | newTween.spanPosition = clickPos - newTween.spanWidth; | 485 | newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; |
448 | newTween.tweenedProperties = []; | 486 | newTween.tweenData.tweenedProperties = []; |
449 | newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; | 487 | newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; |
450 | newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; | 488 | newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; |
451 | this.tweens.push(newTween); | 489 | this.tweens.push(newTween); |
452 | 490 | ||
453 | // update the animation duration | 491 | // update the animation duration |
@@ -471,8 +509,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
471 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; | 509 | var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; |
472 | 510 | ||
473 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 511 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
474 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | 512 | this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created=true; |
475 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; | 513 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; |
476 | if(this.animatedElement!==undefined){ | 514 | if(this.animatedElement!==undefined){ |
477 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |