diff options
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 213 |
2 files changed, 142 insertions, 76 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 1aa9a725..92adee05 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -32,8 +32,7 @@ | |||
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"} | ||
37 | } | 36 | } |
38 | }, | 37 | }, |
39 | 38 | ||
@@ -285,7 +284,7 @@ | |||
285 | 284 | ||
286 | <div id="user_layers" class="userlayers"> | 285 | <div id="user_layers" class="userlayers"> |
287 | <div id="master_layer" class="masterlayer"> | 286 | <div id="master_layer" class="masterlayer"> |
288 | <div id="getme">Master Layer</div> | 287 | <div>Master Layer</div> |
289 | </div> | 288 | </div> |
290 | <div id="container-layers"> | 289 | <div id="container-layers"> |
291 | <div id="container-layer"></div> | 290 | <div id="container-layer"></div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index e92c83db..ec9555fe 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -28,7 +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 | this._cacheArrays(); |
32 | } | 32 | } |
33 | }, | 33 | }, |
34 | 34 | ||
@@ -44,6 +44,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
44 | this._layerRepetition = newVal; | 44 | this._layerRepetition = newVal; |
45 | } | 45 | } |
46 | }, | 46 | }, |
47 | _cacheArrays : { | ||
48 | value: function() { | ||
49 | // Cache this.arrLayers and this.arrTracks. | ||
50 | console.log('cacheArrays ' + this._boolCacheArrays) | ||
51 | if (this._boolCacheArrays) { | ||
52 | console.log('caching arrays for ', this.application.ninja.currentDocument.name); | ||
53 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; | ||
54 | this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; | ||
55 | } | ||
56 | } | ||
57 | }, | ||
58 | |||
59 | // Set to false to skip array caching array sets in current document | ||
60 | _boolCacheArrays : { | ||
61 | value: true | ||
62 | }, | ||
47 | 63 | ||
48 | _currentLayerNumber:{ | 64 | _currentLayerNumber:{ |
49 | value:0 | 65 | value:0 |
@@ -100,7 +116,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
100 | }, | 116 | }, |
101 | set:function (newVal) { | 117 | set:function (newVal) { |
102 | this._arrTracks = newVal; | 118 | this._arrTracks = newVal; |
103 | this.application.ninja.currentDocument.tlArrTracks = newVal; | 119 | this._cacheArrays(); |
104 | } | 120 | } |
105 | }, | 121 | }, |
106 | 122 | ||
@@ -180,39 +196,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
180 | } | 196 | } |
181 | }, | 197 | }, |
182 | 198 | ||
183 | handleOnOpenDocument:{ | ||
184 | value:function(){ | ||
185 | this.clearTimelinePanel(); | ||
186 | this.eventManager.addEventListener("deleteLayerClick", this, false); | ||
187 | this.eventManager.addEventListener("newLayer", this, false); | ||
188 | this.eventManager.addEventListener("deleteLayer", this, false); | ||
189 | this.eventManager.addEventListener("layerBinding", this, false); | ||
190 | this.eventManager.addEventListener("elementAdded", this, false); | ||
191 | this.eventManager.addEventListener("elementDeleted", this, false); | ||
192 | this.eventManager.addEventListener("deleteSelection", this, false); | ||
193 | this.eventManager.addEventListener("selectionChange", this, true); | ||
194 | this.hashInstance = this.createLayerHashTable(); | ||
195 | this.hashTrackInstance = this.createTrackHashTable(); | ||
196 | this.hashLayerNumber = this.createLayerNumberHash(); | ||
197 | this.hashElementMapToLayer = this.createElementMapToLayer(); | ||
198 | this.initTimelineView(); | ||
199 | |||
200 | |||
201 | } | ||
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 | 199 | ||
217 | willDraw:{ | 200 | willDraw:{ |
218 | value:function () { | 201 | value:function () { |
@@ -225,6 +208,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
225 | /* === END: Draw cycle === */ | 208 | /* === END: Draw cycle === */ |
226 | 209 | ||
227 | /* === BEGIN: Controllers === */ | 210 | /* === BEGIN: Controllers === */ |
211 | |||
212 | // Bind all document-specific events (pass in true to unbind) | ||
213 | _bindDocumentEvents : { | ||
214 | value: function(boolUnbind) { | ||
215 | var arrEvents = ["deleteLayerClick", | ||
216 | "newLayer", | ||
217 | "deleteLayer", | ||
218 | "layerBinding", | ||
219 | "elementAdded", | ||
220 | "elementDeleted", | ||
221 | "deleteSelection", | ||
222 | "selectionChange"], | ||
223 | i, | ||
224 | arrEventsLength = arrEvents.length; | ||
225 | |||
226 | if (boolUnbind) { | ||
227 | for (i = 0; i < arrEventsLength; i++) { | ||
228 | this.eventManager.removeEventListener(arrEvents[i], this, false); | ||
229 | } | ||
230 | } else { | ||
231 | for (i = 0; i < arrEventsLength; i++) { | ||
232 | this.eventManager.addEventListener(arrEvents[i], this, false); | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | }, | ||
237 | |||
228 | initTimeline : { | 238 | initTimeline : { |
229 | value: function() { | 239 | value: function() { |
230 | // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. | 240 | // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. |
@@ -242,49 +252,76 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
242 | 252 | ||
243 | } | 253 | } |
244 | }, | 254 | }, |
245 | initTimelineView:{ | 255 | |
256 | initTimelineForDocument:{ | ||
246 | value:function () { | 257 | value:function () { |
247 | var myIndex; | 258 | var myIndex; |
248 | |||
249 | this.drawTimeMarkers(); | 259 | this.drawTimeMarkers(); |
260 | this._hashKey = "123"; | ||
261 | |||
262 | |||
263 | // Document switching | ||
264 | // Check to see if we have saved timeline information in the currentDocument. | ||
265 | if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { | ||
266 | // No, we have no information stored. Create it. | ||
267 | console.log('newfile ' + this.application.ninja.currentDocument.name) | ||
268 | this.application.ninja.currentDocument.isTimelineInitialized = true; | ||
269 | this.application.ninja.currentDocument.tlArrLayers = []; | ||
270 | this.application.ninja.currentDocument.tlArrTracks = []; | ||
271 | |||
272 | |||
273 | // Loop through the DOM of the document to find layers and animations. | ||
274 | // Fire off events as they are found. | ||
275 | _firstLayerDraw = false; | ||
276 | if(!this.application.ninja.documentController.creatingNewFile){ | ||
277 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | ||
278 | myIndex=0; | ||
279 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | ||
280 | { | ||
281 | this._openDoc=true; | ||
282 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | ||
283 | myIndex++; | ||
284 | k } | ||
285 | } | ||
286 | else{ | ||
287 | NJevent('newLayer', this._hashKey); | ||
288 | this.selectLayer(0); | ||
289 | } | ||
290 | }else{ | ||
291 | NJevent('newLayer', this._hashKey); | ||
292 | this.selectLayer(0); | ||
293 | |||
294 | } | ||
295 | _firstLayerDraw = true; | ||
296 | |||
297 | // After recreating the tracks and layers, store the result in the currentDocument. | ||
298 | this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; | ||
299 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; | ||