diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 189 |
1 files changed, 155 insertions, 34 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a5cde00f..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,20 +239,31 @@ 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; |
227 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 253 | if(!this.application.ninja.documentController.creatingNewFile){ |
228 | myIndex=0; | 254 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
229 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | 255 | myIndex=0; |
230 | { | 256 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) |
231 | this._openDoc=true; | 257 | { |
232 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | 258 | this._openDoc=true; |
233 | // this.selectLayer(myIndex); | 259 | this._captureSelection=true; |
234 | // TimelineTrack.retrieveStoredTweens(); | 260 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) |
235 | myIndex++; | 261 | myIndex++; |
262 | } | ||
263 | } | ||
264 | else{ | ||
265 | NJevent('newLayer', this._hashKey); | ||
266 | this.selectLayer(0); | ||
236 | } | 267 | } |
237 | }else{ | 268 | }else{ |
238 | NJevent('newLayer', this._hashKey); | 269 | NJevent('newLayer', this._hashKey); |
@@ -242,13 +273,61 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
242 | _firstLayerDraw = true; | 273 | _firstLayerDraw = true; |
243 | } | 274 | } |
244 | }, | 275 | }, |
276 | |||
277 | clearTimelinePanel : { | ||
278 | value: function() { | ||
279 | // Remove events | ||
280 | this.eventManager.removeEventListener("deleteLayerClick", this, false); | ||
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 = []; | ||
305 | this.currentLayerNumber = 0; | ||
306 | this.currentLayerSelected = false; | ||
307 | this.currentTrackSelected = false; | ||
308 | this.selectedKeyframes = []; | ||
309 | this.selectedTweens = []; | ||
310 | this._captureSelection = false; | ||
311 | this._openDoc = false; | ||
312 | this.end_hottext.value = 25; | ||
313 | this.updateTrackContainerWidth(); | ||
314 | |||
315 | // Redraw all the things | ||
316 | this.layerRepetition.needsDraw = true; | ||
317 | this.trackRepetition.needsDraw = true; | ||
318 | this.needsDraw = true; | ||
319 | } | ||
320 | }, | ||
245 | 321 | ||
246 | updateTrackContainerWidth:{ | 322 | updateTrackContainerWidth:{ |
247 | value: function(){ | 323 | value: function(){ |
248 | this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; | 324 | this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; |
249 | this.master_track.style.width = (this.end_hottext.value * 80) + "px"; | 325 | this.master_track.style.width = (this.end_hottext.value * 80) + "px"; |
250 | this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; | 326 | this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; |
251 | this.time_markers.removeChild(this.timeMarkerHolder); | 327 | if (this.timeMarkerHolder) { |
328 | this.time_markers.removeChild(this.timeMarkerHolder); | ||
329 | } | ||
330 | |||
252 | this.drawTimeMarkers(); | 331 | this.drawTimeMarkers(); |
253 | } | 332 | } |
254 | }, | 333 | }, |
@@ -318,6 +397,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
318 | value:function (event) { | 397 | value:function (event) { |
319 | this._isLayer = true; | 398 | this._isLayer = true; |
320 | this.needsDraw = true; | 399 | this.needsDraw = true; |
400 | this.application.ninja.selectionController.executeSelectElement(); | ||
321 | } | 401 | } |
322 | }, | 402 | }, |
323 | 403 | ||
@@ -400,6 +480,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
400 |