diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 885 |
1 files changed, 475 insertions, 410 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7f4fee89..185211ae 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -57,12 +57,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
57 | this._layerRepetition = newVal; | 57 | this._layerRepetition = newVal; |
58 | } | 58 | } |
59 | }, | 59 | }, |
60 | |||
61 | _areTracksScrolling: { | ||
62 | value: false | ||
63 | }, | ||
60 | 64 | ||
61 | // Set to false to skip array caching array sets in current document | 65 | // Set to false to skip array caching array sets in currentDocument |
62 | _boolCacheArrays:{ | 66 | _boolCacheArrays:{ |
63 | value:true | 67 | value:true |
64 | }, | 68 | }, |
65 | 69 | ||
70 | // Current layer number: iterated and used to assign layer IDs. | ||
66 | _currentLayerNumber:{ | 71 | _currentLayerNumber:{ |
67 | value:0 | 72 | value:0 |
68 | }, | 73 | }, |
@@ -91,36 +96,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
91 | this.cacheTimeline(); | 96 | this.cacheTimeline(); |
92 | } | 97 | } |
93 | }, | 98 | }, |
94 | 99 | _currentElementsSelected: { | |
95 | _selectedLayerID:{ | 100 | value: [] |
96 | value:false | ||
97 | }, | 101 | }, |
98 | selectedLayerID:{ | 102 | currentElementsSelected: { |
99 | get:function () { | 103 | get: function() { |
100 | return this._selectedLayerID; | 104 | return this._currentElementsSelected; |
101 | }, | 105 | }, |
102 | set:function (newVal) { | 106 | set: function(newVal) { |
103 | if (newVal === false) { | 107 | this._currentElementsSelected = newVal; |
104 | // We are clearing the timeline, so just set the value and return. | 108 | this.cacheTimeline(); |
105 | this._selectedLayerID = newVal; | 109 | } |
106 | return; | ||
107 | } | ||
108 | if (newVal !== this._selectedLayerID) { | ||
109 | var selectIndex = this.getLayerIndexByID(newVal); | ||
110 | this._selectedLayerID = newVal; | ||
111 | this._captureSelection = true; | ||
112 | if (this.currentLayerSelected !== false) { | ||
113 | this.selectLayer(selectIndex, true); | ||
114 | } | ||
115 | if (this.currentLayersSelected !== false) { | ||
116 | this.selectLayers(this.currentLayersSelected); | ||
117 | } | ||
118 | if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) { | ||
119 | this.selectLayers([]); | ||
120 | } | ||
121 | |||
122 | } | ||
123 | } | ||
124 | }, | 110 | }, |
125 | 111 | ||
126 | _currentLayersSelected:{ | 112 | _currentLayersSelected:{ |
@@ -136,6 +122,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
136 | } | 122 | } |
137 | }, | 123 | }, |
138 | 124 | ||
125 | // The index of the last layer that was clicked on | ||
126 | // (used for shift-click multiselect) | ||
127 | _lastLayerClicked : { | ||
128 | value: 0 | ||
129 | }, | ||
130 | lastLayerClicked: { | ||
131 | serializable: true, | ||
132 | get: function() { | ||
133 | return this._lastLayerClicked; | ||
134 | }, | ||
135 | set: function(newVal) { | ||
136 | this._lastLayerClicked = newVal | ||
137 | } | ||
138 | }, | ||
139 | |||
139 | _currentSelectedContainer: { | 140 | _currentSelectedContainer: { |
140 | value: null | 141 | value: null |
141 | }, | 142 | }, |
@@ -235,15 +236,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
235 | set:function (value) { | 236 | set:function (value) { |
236 | if (this._breadCrumbContainer !== value) { | 237 | if (this._breadCrumbContainer !== value) { |
237 | this._breadCrumbContainer = value; | 238 | this._breadCrumbContainer = value; |
238 | //this.LayerBinding(); | ||
239 | } | 239 | } |
240 | } | 240 | } |
241 | }, | 241 | }, |
242 | 242 | ||
243 | _isLayer:{ | ||
244 | value:false | ||
245 | }, | ||
246 | |||
247 | _firstTimeLoaded:{ | 243 | _firstTimeLoaded:{ |
248 | value:true | 244 | value:true |
249 | }, | 245 | }, |
@@ -300,6 +296,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
300 | } | 296 | } |
301 | } | 297 | } |
302 | }, | 298 | }, |
299 | _dragLayerIndexes: { | ||
300 | value: [] | ||
301 | }, | ||
303 | _dropLayerID : { | 302 | _dropLayerID : { |
304 | value: null | 303 | value: null |
305 | }, | 304 | }, |
@@ -311,20 +310,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
311 | if (newVal !== this._dropLayerID) { | 310 | if (newVal !== this._dropLayerID) { |
312 | this._dropLayerID = newVal; | 311 | this._dropLayerID = newVal; |
313 | 312 | ||
314 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), | 313 | var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), |
315 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 314 | arrDragLayers = [], |
316 | dragLayer = this.arrLayers[dragLayerIndex]; | 315 | i = 0, |
317 | this.layersDragged.push(dragLayer); | 316 | dragLayerIndexesLength = this._dragLayerIndexes.length; |
318 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | 317 | |
319 | 318 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? | |
320 | this.arrLayers.splice(dragLayerIndex, 1); | 319 | |
321 | this.arrLayers.splice(dropLayerIndex, 0, dragLayer); | 320 | for (i = 0; i < dragLayerIndexesLength; i++) { |
321 | var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; | ||
322 | arrDragLayers.push(myDraggingLayer); | ||
323 | // Splice arrLayers | ||
324 | this.arrLayers.splice(this._dragLayerIndexes[i], 1); | ||
325 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); | ||
326 | } | ||
327 | this.layersDragged = arrDragLayers; | ||
328 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | ||
329 | |||
330 | // Cache the new info | ||
322 | this.cacheTimeline(); | 331 | this.cacheTimeline(); |
323 | 332 | ||
324 | // Clear for future DnD | 333 | // Clear drag and drop variables for future re-use |
325 | this._dropLayerID = null; | 334 | this._dropLayerID = null; |
326 | this._dragLayerID = null; | 335 | this.dragLayerIndexes = []; |
327 | 336 | this._dragLayerIndexes = []; | |
337 | this.lastLayerClicked = 0; | ||
338 | |||
328 | // Sometimes, just to be fun, the drop and dragend events don't fire. | 339 | // Sometimes, just to be fun, the drop and dragend events don't fire. |
329 | // So just in case, set the draw routine to delete the helper. | 340 | // So just in case, set the draw routine to delete the helper. |
330 | this._deleteHelper = true; | 341 | this._deleteHelper = true; |
@@ -365,40 +376,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
365 | _ignoreSelectionChanges: { | 376 | _ignoreSelectionChanges: { |
366 | value: false | 377 | value: false |
367 | }, | 378 | }, |
379 | // is the control key currently being pressed (used for multiselect) | ||
380 | _isControlPressed: { | ||
381 | value: false | ||
382 | }, | ||
383 | |||
384 | // is the shift key currently being pressed (used for multiselect) | ||
385 | _isShiftPressed: { | ||
386 | value: false | ||
387 | }, | ||
368 | /* === END: Models === */ | 388 | /* === END: Models === */ |
389 | |||
369 | /* === BEGIN: Draw cycle === */ | 390 | /* === BEGIN: Draw cycle === */ |
370 | prepareForDraw:{ | 391 | prepareForDraw:{ |
371 | value:function () { | 392 | value:function () { |
372 | this.initTimeline(); | 393 | this.initTimeline(); |
373 | // Bind the event handler for the document change events | ||
374 | //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); | ||
375 | this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); | ||
376 | //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); | ||
377 | //this.eventManager.addEventListener("breadCrumbBinding",this,false); | ||
378 | |||
379 | // Bind drag and drop event handlers | ||
380 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | ||
381 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | ||
382 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | ||
383 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | ||
384 | this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); | ||
385 | this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); | ||
386 | |||
387 | // Bind the handlers for the config menu | ||
< |