diff options
author | hwc487 | 2012-03-06 11:41:28 -0800 |
---|---|---|
committer | hwc487 | 2012-03-06 11:41:28 -0800 |
commit | 5e640e24c3b4658b8060cde837ae98dabd3ba5bf (patch) | |
tree | 527f183b5e485282ce1efe15d96b6b8ddc26801e /js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |
parent | 182f05f2f7a8f43f1589c9b8c15bf00d6e983676 (diff) | |
parent | 2815adfd7c19b3dff89dc3e1bda9af8d30dca8d6 (diff) | |
download | ninja-5e640e24c3b4658b8060cde837ae98dabd3ba5bf.tar.gz |
Merge branch 'TimelineUber' of github.com:imix23ways/ninja-internal into integration
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 389 |
1 files changed, 275 insertions, 114 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d7d5328e..91277a63 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._cacheArrays(); | ||
31 | } | 32 | } |
32 | }, | 33 | }, |
33 | 34 | ||
@@ -44,6 +45,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
44 | } | 45 | } |
45 | }, | 46 | }, |
46 | 47 | ||
48 | _cacheArrays : { | ||
49 | value: function() { | ||
50 | if (this._boolCacheArrays) { | ||
51 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; | ||
52 | } | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | // Set to false to skip array caching array sets in current document | ||
57 | _boolCacheArrays : { | ||
58 | value: true | ||
59 | }, | ||
60 | |||
47 | _currentLayerNumber:{ | 61 | _currentLayerNumber:{ |
48 | value:0 | 62 | value:0 |
49 | }, | 63 | }, |
@@ -63,10 +77,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
63 | value: null | 77 | value: null |
64 | }, | 78 | }, |
65 | 79 | ||
66 | currentTrackSelected:{ | ||
67 | value: null | ||
68 | }, | ||
69 | |||
70 | millisecondsOffset:{ | 80 | millisecondsOffset:{ |
71 | value:1000 | 81 | value:1000 |
72 | }, | 82 | }, |
@@ -99,6 +109,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
99 | }, | 109 | }, |
100 | set:function (newVal) { | 110 | set:function (newVal) { |
101 | this._arrTracks = newVal; | 111 | this._arrTracks = newVal; |
112 | this._cacheArrays(); | ||
102 | } | 113 | } |
103 | }, | 114 | }, |
104 | 115 | ||
@@ -163,37 +174,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
163 | value:false, | 174 | value:false, |
164 | writable:true | 175 | writable:true |
165 | }, | 176 | }, |
177 | |||
166 | timeMarkerHolder:{ | 178 | timeMarkerHolder:{ |
167 | value: null | 179 | value: null |
168 | }, | 180 | }, |
169 | /* === END: Models === */ | 181 | /* === END: Models === */ |
170 | |||
171 | /* === BEGIN: Draw cycle === */ | 182 | /* === BEGIN: Draw cycle === */ |
172 | prepareForDraw:{ | 183 | prepareForDraw:{ |
173 | value:function () { | 184 | value:function () { |
174 | this.eventManager.addEventListener( "onOpenDocument", this, false); | 185 | this.initTimeline(); |
175 | } | 186 | this.eventManager.addEventListener("onOpenDocument", this, false); |
176 | }, | 187 | this.eventManager.addEventListener("closeDocument", this, false); |
177 | 188 | this.eventManager.addEventListener("switchDocument", this, false); | |
178 | handleOnOpenDocument:{ | ||
179 | value:function(){ | ||
180 | this.eventManager.addEventListener("deleteLayerClick", this, false); | ||
181 | this.eventManager.addEventListener("newLayer", this, false); | ||
182 | this.eventManager.addEventListener("deleteLayer", this, false); | ||
183 | this.eventManager.addEventListener("layerBinding", this, false); | ||
184 | this.eventManager.addEventListener("elementAdded", this, false); | ||
185 | this.eventManager.addEventListener("elementDeleted", this, false); | ||
186 | this.eventManager.addEventListener("deleteSelection", this, false); | ||
187 | this.eventManager.addEventListener("selectionChange", this, true); | ||
188 | this.hashInstance = this.createLayerHashTable(); | ||
189 | this.hashTrackInstance = this.createTrackHashTable(); | ||
190 | this.hashLayerNumber = this.createLayerNumberHash(); | ||
191 | this.hashElementMapToLayer = this.createElementMapToLayer(); | ||
192 | this.initTimelineView(); | ||
193 | |||
194 | |||
195 | } | 189 | } |
196 | }, | 190 | }, |
191 | |||
197 | willDraw:{ | 192 | willDraw:{ |
198 | value:function () { | 193 | value:function () { |
199 | if (this._isLayer) { | 194 | if (this._isLayer) { |
@@ -203,12 +198,37 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
203 | } | 198 | } |
204 | }, | 199 | }, |
205 | /* === END: Draw cycle === */ | 200 | /* === END: Draw cycle === */ |
206 | |||
207 | /* === BEGIN: Controllers === */ | 201 | /* === BEGIN: Controllers === */ |
208 | initTimelineView:{ | 202 | // Bind all document-specific events (pass in true to unbind) |
209 | value:function () { | 203 | _bindDocumentEvents : { |
210 | var myIndex; | 204 | value: function(boolUnbind) { |
211 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | 205 | var arrEvents = ["deleteLayerClick", |
206 | "newLayer", | ||
207 | "deleteLayer", | ||
208 | "layerBinding", | ||
209 | "elementAdded", | ||
210 | "elementDeleted", | ||
211 | "deleteSelection", | ||
212 | "selectionChange"], | ||
213 | i, | ||
214 | arrEventsLength = arrEvents.length; | ||
215 | |||
216 | if (boolUnbind) { | ||
217 | for (i = 0; i < arrEventsLength; i++) { | ||
218 | this.eventManager.removeEventListener(arrEvents[i], this, false); | ||
219 | } | ||
220 | } else { | ||
221 | for (i = 0; i < arrEventsLength; i++) { | ||
222 | this.eventManager.addEventListener(arrEvents[i], this, false); | ||
223 | } | ||
224 | } | ||
225 | } | ||
226 | }, | ||
227 | |||
228 | initTimeline : { | ||
229 | value: function() { | ||
230 | // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. | ||
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,49 +239,129 @@ 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 | } |
224 | 244 | }, | |
225 | this._hashKey = "123"; | 245 | |
226 | _firstLayerDraw = false; | 246 | initTimelineForDocument:{ |
227 | if(!this.application.ninja.documentController.creatingNewFile){ | 247 | value:function () { |
228 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 248 | var myIndex; |
229 | myIndex=0; | 249 | this.drawTimeMarkers(); |
230 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | 250 | this._hashKey = "123"; |
231 | { | 251 | |
232 | this._openDoc=true; | 252 | // Document switching |
233 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | 253 | // Check to see if we have saved timeline information in the currentDocument. |
234 | myIndex++; | 254 | if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { |
235 | } | 255 | // No, we have no information stored. Create it. |
236 | } | 256 | this.log('newfile ' + this.application.ninja.currentDocument.name) |
237 | else{ | 257 | this.application.ninja.currentDocument.isTimelineInitialized = true; |
238 | NJevent('newLayer', this._hashKey); | 258 | this.application.ninja.currentDocument.tlArrLayers = []; |
239 | this.selectLayer(0); | 259 | this.application.ninja.currentDocument.tlArrTracks = []; |
240 | } | 260 | |
241 | }else{ | 261 | |
242 | NJevent('newLayer', this._hashKey); | 262 | // Loop through the DOM of the document to find layers and animations. |
243 | this.selectLayer(0); | 263 | // Fire off events as they are found. |
244 | 264 | _firstLayerDraw = false; | |
245 | } | 265 | if(!this.application.ninja.documentController.creatingNewFile){ |
246 | _firstLayerDraw = true; | 266 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
267 | myIndex=0; | ||
268 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | ||
269 | { | ||
270 | this._openDoc=true; | ||