diff options
author | Jonathan Duran | 2012-02-09 09:09:01 -0800 |
---|---|---|
committer | Jonathan Duran | 2012-02-09 09:09:01 -0800 |
commit | 112ba5f5beea03010d40a53a64bfa9595e0faa88 (patch) | |
tree | e23d48f682f6b857f07c531de0fde4fc9c1b706b | |
parent | fc7638f3921595f9a0cb0bd1687caf5451a7dd4d (diff) | |
download | ninja-112ba5f5beea03010d40a53a64bfa9595e0faa88.tar.gz |
Cleaning up more code and adding more models for timeline
Signed-off-by: Jonathan Duran <jduran@motorola.com>
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 18 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 13 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 10 |
3 files changed, 27 insertions, 14 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 6f0b0b58..3c4cfa2e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -50,6 +50,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
50 | } | 50 | } |
51 | }, | 51 | }, |
52 | 52 | ||
53 | currentLayerSelected:{ | ||
54 | value: null | ||
55 | }, | ||
56 | |||
57 | currentTrackSelected:{ | ||
58 | value: null | ||
59 | }, | ||
60 | |||
53 | millisecondsOffset:{ | 61 | millisecondsOffset:{ |
54 | value:1000 | 62 | value:1000 |
55 | }, | 63 | }, |
@@ -291,7 +299,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
291 | handleNewLayer:{ | 299 | handleNewLayer:{ |
292 | value:function (event) { | 300 | value:function (event) { |
293 | // Add a new layer. It should be added above the currently selected layer, | 301 | // Add a new layer. It should be added above the currently selected layer, |
294 | // Or at the end, if no layer is selected. | 302 | // Or at the top, if no layer is selected. |
295 | var hashIndex = 0 , hashVariable = 0, layerResult, trackResult, layerObject, trackObject, dLayer, parentNode; | 303 | var hashIndex = 0 , hashVariable = 0, layerResult, trackResult, layerObject, trackObject, dLayer, parentNode; |
296 | 304 | ||
297 | this._arrLayersNonEmpty = true; | 305 | this._arrLayersNonEmpty = true; |
@@ -520,8 +528,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
520 | handleElementAdded:{ | 528 | handleElementAdded:{ |
521 | value:function (event) { | 529 | value:function (event) { |
522 | this.currentLayerSelected.element.push(event.detail); | 530 | this.currentLayerSelected.element.push(event.detail); |
523 | //console.log(this.currentLayerSelected.layerPosition); | ||
524 | //console.log(this.arrTracks); | ||
525 | } | 531 | } |
526 | }, | 532 | }, |
527 | 533 | ||
@@ -719,10 +725,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
719 | // Next, update this.layerRepetition.selectedIndexes and this.currentLayerSelected. | 725 | // Next, update this.layerRepetition.selectedIndexes and this.currentLayerSelected. |
720 | if (layerIndex !== false) { | 726 | if (layerIndex !== false) { |
721 | this.layerRepetition.selectedIndexes = [layerIndex]; | 727 | this.layerRepetition.selectedIndexes = [layerIndex]; |
722 | this.currentLayerSelected = this.arrLayers[layerIndex] | 728 | this.trackRepetition.selectedIndexes = [layerIndex]; |
729 | this.currentLayerSelected = this.arrLayers[layerIndex]; | ||
730 | this.currentTrackSelected = this.arrTracks[layerIndex]; | ||
723 | } else { | 731 | } else { |
724 | this.layerRepetition.selectedIndexes = null; | 732 | this.layerRepetition.selectedIndexes = null; |
733 | this.trackRepetition.selectedIndexes = null; | ||
725 | this.currentLayerSelected = null; | 734 | this.currentLayerSelected = null; |
735 | this.currentTrackSelected = null; | ||
726 | } | 736 | } |
727 | } | 737 | } |
728 | }, | 738 | }, |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f9d3ad6b..dde01a2c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -173,7 +173,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
173 | this.ninjaStylesContoller = this.application.ninja.stylesController; | 173 | this.ninjaStylesContoller = this.application.ninja.stylesController; |
174 | this.track_lane.addEventListener("click", this, false); | 174 | this.track_lane.addEventListener("click", this, false); |
175 | this.keyFramePropertyData = new Array(); | 175 | this.keyFramePropertyData = new Array(); |
176 | //this.insertTween(0); | ||
177 | } | 176 | } |
178 | }, | 177 | }, |
179 | 178 | ||
@@ -202,9 +201,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
202 | if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { | 201 | if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) { |
203 | if (this.tweens.length < 1) { | 202 | if (this.tweens.length < 1) { |
204 | this.insertTween(0); | 203 | this.insertTween(0); |
205 | this.addAnimationRuleToElement(); | 204 | this.addAnimationRuleToElement(ev); |
205 | } else { | ||
206 | this.handleNewTween(ev); | ||
206 | } | 207 | } |
207 | this.handleNewTween(ev); | ||
208 | } else { | 208 | } else { |
209 | alert("There must be exactly one element in an animated layer.") | 209 | alert("There must be exactly one element in an animated layer.") |
210 | } | 210 | } |
@@ -266,12 +266,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
266 | 266 | ||
267 | splitTween:{ | 267 | splitTween:{ |
268 | value:function (ev) { | 268 | value:function (ev) { |
269 | console.log("splitting tween at span offsetX: " + ev.offsetX); | 269 | alert("Splitting an existing span with a new keyframe is not yet supported.") |
270 | //console.log("splitting tween at span offsetX: " + ev.offsetX); | ||
270 | } | 271 | } |
271 | }, | 272 | }, |
272 | 273 | ||
273 | addAnimationRuleToElement:{ | 274 | addAnimationRuleToElement:{ |
274 | value:function () { | 275 | value:function (tweenEvent) { |
275 | var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; | 276 | var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; |
276 | this.animatedElement = theElement; | 277 | this.animatedElement = theElement; |
277 | 278 | ||
@@ -293,6 +294,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
293 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); | 294 | this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); |
294 | 295 | ||
295 | this.isAnimated = true; | 296 | this.isAnimated = true; |
297 | |||
298 | this.insertTween(tweenEvent.offsetX); | ||
296 | } | 299 | } |
297 | }, | 300 | }, |
298 | 301 | ||
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 64e998c3..eddf1b17 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -92,17 +92,17 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
92 | }, | 92 | }, |
93 | 93 | ||
94 | prepareForDraw:{ | 94 | prepareForDraw:{ |
95 | value:function(){ | 95 | value:function () { |
96 | this.keyframe.containingTrack = this.timelineTrack; | 96 | this.keyframe.containingTrack = this.timelineTrack; |
97 | this.keyframe.position = this.spanWidth; | ||
98 | this.keyframe.timelinePosition = this.keyFramePosition; | ||
99 | this.keyframe.id = this.keyframeID; | ||
97 | } | 100 | } |
98 | }, | 101 | }, |
99 | 102 | ||
100 | draw:{ | 103 | draw:{ |
101 | value:function(){ | 104 | value:function () { |
102 | this.span.spanWidth = this.spanWidth; | 105 | this.span.spanWidth = this.spanWidth; |
103 | this.keyframe.position = this.spanWidth; | ||
104 | this.keyframe.timelinePosition = this.keyFramePosition; | ||
105 | this.keyframe.id = this.keyframeID; | ||
106 | this.tweencontainer.style.left = this.spanPosition + "px"; | 106 | this.tweencontainer.style.left = this.spanPosition + "px"; |
107 | } | 107 | } |
108 | } | 108 | } |