aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js189
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 },