diff options
author | Pushkar Joshi | 2012-03-02 12:24:33 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-03-02 12:24:33 -0800 |
commit | 4419209a1fd850ab468209b562b66b0242b42a9c (patch) | |
tree | bd7ca04f963f5a3aeb4b3c06db6f187903307d45 /js/panels/Timeline/TimelinePanel.reel | |
parent | 1b68bb87c458877cb850a96d8a093d6064bc41dc (diff) | |
parent | ff0a956f33df034e9a009cfcb8999e469456a4b5 (diff) | |
download | ninja-4419209a1fd850ab468209b562b66b0242b42a9c.tar.gz |
Merge branch 'master' into brushtool
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 143 |
2 files changed, 122 insertions, 26 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 92adee05..1aa9a725 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -32,7 +32,8 @@ | |||
32 | "timetext" : {"#": "time_text"}, | 32 | "timetext" : {"#": "time_text"}, |
33 | "timebar" : {"#": "time_bar"}, | 33 | "timebar" : {"#": "time_bar"}, |
34 | "container_tracks" : {"#" : "container-tracks"}, | 34 | "container_tracks" : {"#" : "container-tracks"}, |
35 | "end_hottext" : {"@" : "endHottext"} | 35 | "end_hottext" : {"@" : "endHottext"}, |
36 | "getme" : {"#" : "getme"} | ||
36 | } | 37 | } |
37 | }, | 38 | }, |
38 | 39 | ||
@@ -284,7 +285,7 @@ | |||
284 | 285 | ||
285 | <div id="user_layers" class="userlayers"> | 286 | <div id="user_layers" class="userlayers"> |
286 | <div id="master_layer" class="masterlayer"> | 287 | <div id="master_layer" class="masterlayer"> |
287 | <div>Master Layer</div> | 288 | <div id="getme">Master Layer</div> |
288 | </div> | 289 | </div> |
289 | <div id="container-layers"> | 290 | <div id="container-layers"> |
290 | <div id="container-layer"></div> | 291 | <div id="container-layer"></div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d7d5328e..81415951 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -28,6 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
28 | }, | 28 | }, |
29 | set:function (newVal) { | 29 | set:function (newVal) { |
30 | this._arrLayers = newVal; | 30 | this._arrLayers = newVal; |
31 | this.application.ninja.currentDocument.tlArrLayers = newVal; | ||
31 | } | 32 | } |
32 | }, | 33 | }, |
33 | 34 | ||
@@ -99,6 +100,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
99 | }, | 100 | }, |
100 | set:function (newVal) { | 101 | set:function (newVal) { |
101 | this._arrTracks = newVal; | 102 | this._arrTracks = newVal; |
103 | this.application.ninja.currentDocument.tlArrTracks = newVal; | ||
102 | } | 104 | } |
103 | }, | 105 | }, |
104 | 106 | ||
@@ -171,12 +173,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
171 | /* === BEGIN: Draw cycle === */ | 173 | /* === BEGIN: Draw cycle === */ |
172 | prepareForDraw:{ | 174 | prepareForDraw:{ |
173 | value:function () { | 175 | value:function () { |
174 | this.eventManager.addEventListener( "onOpenDocument", this, false); | 176 | this.initTimeline(); |
177 | this.eventManager.addEventListener("onOpenDocument", this, false); | ||
178 | this.eventManager.addEventListener("closeDocument", this, false); | ||
179 | this.eventManager.addEventListener("switchDocument", this, false); | ||
175 | } | 180 | } |
176 | }, | 181 | }, |
177 | 182 | ||
178 | handleOnOpenDocument:{ | 183 | handleOnOpenDocument:{ |
179 | value:function(){ | 184 | value:function(){ |
185 | this.clearTimelinePanel(); | ||
180 | this.eventManager.addEventListener("deleteLayerClick", this, false); | 186 | this.eventManager.addEventListener("deleteLayerClick", this, false); |
181 | this.eventManager.addEventListener("newLayer", this, false); | 187 | this.eventManager.addEventListener("newLayer", this, false); |
182 | this.eventManager.addEventListener("deleteLayer", this, false); | 188 | this.eventManager.addEventListener("deleteLayer", this, false); |
@@ -194,6 +200,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
194 | 200 | ||
195 | } | 201 | } |
196 | }, | 202 | }, |
203 | |||
204 | handleCloseDocument: { | ||
205 | value: function(event) { | ||
206 | this.clearTimelinePanel(); | ||
207 | } | ||
208 | }, | ||
209 | |||
210 | handleSwitchDocument : { | ||
211 | value: function(event) { | ||
212 | // Handle document change. | ||
213 | this.handleOnOpenDocument(); | ||
214 | } | ||
215 | }, | ||
216 | |||
197 | willDraw:{ | 217 | willDraw:{ |
198 | value:function () { | 218 | value:function () { |
199 | if (this._isLayer) { | 219 | if (this._isLayer) { |
@@ -205,10 +225,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
205 | /* === END: Draw cycle === */ | 225 | /* === END: Draw cycle === */ |
206 | 226 | ||
207 | /* === BEGIN: Controllers === */ | 227 | /* === BEGIN: Controllers === */ |
208 | initTimelineView:{ | 228 | initTimeline : { |
209 | value:function () { | 229 | value: function() { |
210 | var myIndex; | 230 | // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. |
211 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | 231 | this.layout_tracks = this.element.querySelector(".layout-tracks"); |
212 | this.layout_markers = this.element.querySelector(".layout_markers"); | 232 | this.layout_markers = this.element.querySelector(".layout_markers"); |
213 | 233 | ||
214 | this.newlayer_button.identifier = "addLayer"; | 234 | this.newlayer_button.identifier = "addLayer"; |
@@ -219,8 +239,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
219 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 239 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
220 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 240 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
221 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); | 241 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); |
222 | 242 | ||
223 | this.drawTimeMarkers(); | 243 | } |
244 | }, | ||
245 | initTimelineView:{ | ||
246 | value:function () { | ||
247 | var myIndex; | ||
248 | |||
249 | this.drawTimeMarkers(); | ||
224 | 250 | ||
225 | this._hashKey = "123"; | 251 | this._hashKey = "123"; |
226 | _firstLayerDraw = false; | 252 | _firstLayerDraw = false; |
@@ -230,6 +256,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
230 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | 256 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) |
231 | { | 257 | { |
232 | this._openDoc=true; | 258 | this._openDoc=true; |
259 | this._captureSelection=true; | ||
233 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | 260 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) |
234 | myIndex++; | 261 | myIndex++; |
235 | } | 262 | } |
@@ -249,18 +276,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
249 | 276 | ||
250 | clearTimelinePanel : { | 277 | clearTimelinePanel : { |
251 | value: function() { | 278 | value: function() { |
252 | console.log('clearing timeline...') | 279 | // Remove events |
253 | this.arrTracks = null; | 280 | this.eventManager.removeEventListener("deleteLayerClick", this, false); |
254 | this.arrLayers = null; | 281 | this.eventManager.removeEventListener("newLayer", this, false); |
282 | this.eventManager.removeEventListener("deleteLayer", this, false); | ||
283 | this.eventManager.removeEventListener("layerBinding", this, false); | ||
284 | this.eventManager.removeEventListener("elementAdded", this, false); | ||
285 | this.eventManager.removeEventListener("elementDeleted", this, false); | ||
286 | this.eventManager.removeEventListener("deleteSelection", this, false); | ||
287 | this.eventManager.removeEventListener("selectionChange", this, true); | ||
288 | |||
289 | // Remove every event listener for every tween in TimelineTrack | ||
290 | this.deselectTweens(); | ||
291 | |||
292 | // Reset visual appearance | ||
293 | this.application.ninja.timeline.playhead.style.left = "-2px"; | ||
294 | this.application.ninja.timeline.playheadmarker.style.left = "0px"; | ||
295 | this.application.ninja.timeline.updateTimeText(0.00); | ||
296 | this.timebar.style.width = "0px"; | ||
297 | |||
298 | // Clear variables--including repetitions. | ||
299 | this.hashInstance = null; | ||
300 | this.hashTrackInstance = null; | ||
301 | this.hashLayerNumber = null; | ||
302 | this.hashElementMapToLayer = null; | ||
303 | this.arrTracks = []; | ||
304 | this.arrLayers = []; | ||
255 | this.currentLayerNumber = 0; | 305 | this.currentLayerNumber = 0; |
256 | this.currentLayerSelected = null; | 306 | this.currentLayerSelected = false; |
257 | this.currentTrackSelected = null; | 307 | this.currentTrackSelected = false; |
258 | this.selectedKeyframes = []; | 308 | this.selectedKeyframes = []; |
259 | this.selectedTweens = []; | 309 | this.selectedTweens = []; |
260 | this._captureSelection = false; | 310 | this._captureSelection = false; |
261 | this._openDoc = false; | 311 | this._openDoc = false; |
262 | this.end_hottext.value = 25; | 312 | this.end_hottext.value = 25; |
263 | this.updateTrackContainerWidth(); | 313 | this.updateTrackContainerWidth(); |
314 | |||
315 | // Redraw all the things | ||
316 | this.layerRepetition.needsDraw = true; | ||
317 | this.trackRepetition.needsDraw = true; | ||
264 | this.needsDraw = true; | 318 | this.needsDraw = true; |
265 | } | 319 | } |
266 | }, | 320 | }, |
@@ -270,7 +324,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Com |