diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 396 |
1 files changed, 284 insertions, 112 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 546a6abf..767dc362 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -16,7 +16,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
16 | 16 | ||
17 | /* === BEGIN: Models === */ | 17 | /* === BEGIN: Models === */ |
18 | _arrLayers:{ | 18 | _arrLayers:{ |
19 | serializable:true, | ||
20 | value:[] | 19 | value:[] |
21 | }, | 20 | }, |
22 | 21 | ||
@@ -47,12 +46,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
47 | 46 | ||
48 | 47 | ||
49 | _layerRepetition:{ | 48 | _layerRepetition:{ |
50 | serializable:true, | ||
51 | value:null | 49 | value:null |
52 | }, | 50 | }, |
53 | 51 | ||
54 | layerRepetition:{ | 52 | layerRepetition:{ |
55 | serializable:true, | ||
56 | get:function () { | 53 | get:function () { |
57 | return this._layerRepetition; | 54 | return this._layerRepetition; |
58 | }, | 55 | }, |
@@ -60,6 +57,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
60 | this._layerRepetition = newVal; | 57 | this._layerRepetition = newVal; |
61 | } | 58 | } |
62 | }, | 59 | }, |
60 | |||
61 | _areTracksScrolling: { | ||
62 | value: false | ||
63 | }, | ||
63 | 64 | ||
64 | // Set to false to skip array caching array sets in current document | 65 | // Set to false to skip array caching array sets in current document |
65 | _boolCacheArrays:{ | 66 | _boolCacheArrays:{ |
@@ -184,7 +185,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
184 | }, | 185 | }, |
185 | 186 | ||
186 | _masterDuration:{ | 187 | _masterDuration:{ |
187 | serializable:true, | ||
188 | value:0 | 188 | value:0 |
189 | }, | 189 | }, |
190 | 190 | ||
@@ -195,17 +195,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
195 | }, | 195 | }, |
196 | set:function (val) { | 196 | set:function (val) { |
197 | this._masterDuration = val; | 197 | this._masterDuration = val; |
198 | this.timebar.style.width = (this._masterDuration / 12) + "px"; | 198 | var intDur = Math.round(val/12), |
199 | strWidth = intDur + "px"; | ||
200 | this.timebar.style.width = strWidth; | ||
199 | } | 201 | } |
200 | }, | 202 | }, |
201 | 203 | ||
202 | _trackRepetition:{ | 204 | _trackRepetition:{ |
203 | serializable:true, | ||
204 | value:null | 205 | value:null |
205 | }, | 206 | }, |
206 | 207 | ||
207 | trackRepetition:{ | 208 | trackRepetition:{ |
208 | serializable:true, | ||
209 | get:function () { | 209 | get:function () { |
210 | return this._trackRepetition; | 210 | return this._trackRepetition; |
211 | }, | 211 | }, |
@@ -258,28 +258,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
258 | } | 258 | } |
259 | }, | 259 | }, |
260 | 260 | ||
261 | _isLayer:{ | ||
262 | value:false | ||
263 | }, | ||
264 | |||
265 | _firstTimeLoaded:{ | 261 | _firstTimeLoaded:{ |
266 | value:true, | 262 | value:true |
267 | writable:true | ||
268 | }, | 263 | }, |
269 | 264 | ||
270 | _captureSelection:{ | 265 | _captureSelection:{ |
271 | value:false, | 266 | value:false |
272 | writable:true | ||
273 | }, | 267 | }, |
274 | 268 | ||
275 | _openDoc:{ | 269 | _openDoc:{ |
276 | value:false, | 270 | value:false |
277 | writable:true | ||
278 | }, | 271 | }, |
279 | 272 | ||
280 | timeMarkerHolder:{ | 273 | timeMarkerHolder:{ |
281 | value:null | 274 | value:null |
282 | }, | 275 | }, |
276 | |||
277 | // Drag and Drop properties | ||
283 | _dragAndDropHelper : { | 278 | _dragAndDropHelper : { |
284 | value: false | 279 | value: false |
285 | }, | 280 | }, |
@@ -292,6 +287,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
292 | _dragLayerID : { | 287 | _dragLayerID : { |
293 | value: null | 288 | value: null |
294 | }, | 289 | }, |
290 | _draggingType: { | ||
291 | value: false | ||
292 | }, | ||
293 | draggingType: { | ||
294 | get: function() { | ||
295 | return this._draggingType; | ||
296 | }, | ||
297 | set: function(newVal) { | ||
298 | this._draggingType = newVal; | ||
299 | } | ||
300 | }, | ||
301 | |||
302 | layersDragged:{ | ||
303 | value:[], | ||
304 | writable:true | ||
305 | }, | ||
306 | |||
295 | dragLayerID : { | 307 | dragLayerID : { |
296 | get: function() { | 308 | get: function() { |
297 | return this._dragLayerID; | 309 | return this._dragLayerID; |
@@ -316,6 +328,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
316 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), | 328 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), |
317 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 329 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), |
318 | dragLayer = this.arrLayers[dragLayerIndex]; | 330 | dragLayer = this.arrLayers[dragLayerIndex]; |
331 | this.layersDragged.push(dragLayer); | ||
332 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | ||
319 | 333 | ||
320 | this.arrLayers.splice(dragLayerIndex, 1); | 334 | this.arrLayers.splice(dragLayerIndex, 1); |
321 | this.arrLayers.splice(dropLayerIndex, 0, dragLayer); | 335 | this.arrLayers.splice(dropLayerIndex, 0, dragLayer); |
@@ -341,83 +355,98 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
341 | _scrollTracks: { | 355 | _scrollTracks: { |
342 | value: false | 356 | value: false |
343 | }, | 357 | }, |
358 | |||
359 | // Keyframe drag and drop properties | ||
360 | _draggingTrackId: { | ||
361 | value: false | ||
362 | }, | ||
363 | draggingTrackId: { | ||
364 | get: function() { | ||
365 | return this._draggingTrackId; | ||
366 | }, | ||
367 | set: function(newVal) { | ||
368 | this._draggingTrackId = newVal; | ||
369 | } | ||
370 | }, | ||
371 | |||
372 | |||
344 | useAbsolutePosition:{ | 373 | useAbsolutePosition:{ |
345 | value:true | 374 | value:true |
346 | }, | 375 | }, |
376 | _currentDocumentUuid: { | ||
377 | value: false | ||
378 | }, | ||
379 | _ignoreSelectionChanges: { | ||
380 | value: false | ||
381 | }, | ||
347 | /* === END: Models === */ | 382 | /* === END: Models === */ |
348 | /* === BEGIN: Draw cycle === */ | 383 | /* === BEGIN: Draw cycle === */ |
349 | prepareForDraw:{ | 384 | prepareForDraw:{ |
350 | value:function () { | 385 | value:function () { |
351 | this.initTimeline(); | 386 | this.initTimeline(); |
352 | // Bind the event handler for the document change events | ||
353 | //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); | ||
354 | this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); | ||
355 | //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); | ||
356 | //this.eventManager.addEventListener("breadCrumbBinding",this,false); | ||
357 | |||
358 | // Bind drag and drop event handlers | ||
359 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | ||
360 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | ||
361 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | ||
362 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | ||
363 | |||
364 | // Bind the handlers for the config menu | ||
365 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | ||
366 | this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); | ||
367 | this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); | ||
368 | this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); | ||
369 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); | ||
370 | |||
371 | } | ||
372 | }, | ||
373 | |||
374 |