diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1128 |
1 files changed, 714 insertions, 414 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d7329ac7..a902d282 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -127,12 +127,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
127 | this._layerRepetition = newVal; | 127 | this._layerRepetition = newVal; |
128 | } | 128 | } |
129 | }, | 129 | }, |
130 | |||
131 | _areTracksScrolling: { | ||
132 | value: false | ||
133 | }, | ||
130 | 134 | ||
131 | // Set to false to skip array caching array sets in current document | 135 | // Set to false to skip array caching array sets in currentDocument |
132 | _boolCacheArrays:{ | 136 | _boolCacheArrays:{ |
133 | value:true | 137 | value:true |
134 | }, | 138 | }, |
135 | 139 | ||
140 | // Current layer number: iterated and used to assign layer IDs. | ||
136 | _currentLayerNumber:{ | 141 | _currentLayerNumber:{ |
137 | value:0 | 142 | value:0 |
138 | }, | 143 | }, |
@@ -161,36 +166,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
161 | this.cacheTimeline(); | 166 | this.cacheTimeline(); |
162 | } | 167 | } |
163 | }, | 168 | }, |
164 | 169 | _currentElementsSelected: { | |
165 | _selectedLayerID:{ | 170 | value: [] |
166 | value:false | ||
167 | }, | 171 | }, |
168 | selectedLayerID:{ | 172 | currentElementsSelected: { |
169 | get:function () { | 173 | get: function() { |
170 | return this._selectedLayerID; | 174 | return this._currentElementsSelected; |
171 | }, | 175 | }, |
172 | set:function (newVal) { | 176 | set: function(newVal) { |
173 | if (newVal === false) { | 177 | this._currentElementsSelected = newVal; |
174 | // We are clearing the timeline, so just set the value and return. | 178 | this.cacheTimeline(); |
175 | this._selectedLayerID = newVal; | 179 | } |
176 | return; | ||
177 | } | ||
178 | if (newVal !== this._selectedLayerID) { | ||
179 | var selectIndex = this.getLayerIndexByID(newVal); | ||
180 | this._selectedLayerID = newVal; | ||
181 | this._captureSelection = true; | ||
182 | if (this.currentLayerSelected !== false) { | ||
183 | this.selectLayer(selectIndex, false); | ||
184 | } | ||
185 | if (this.currentLayersSelected !== false) { | ||
186 | this.selectLayers(this.currentLayersSelected); | ||
187 | } | ||
188 | if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) { | ||
189 | this.selectLayers([]); | ||
190 | } | ||
191 | |||
192 | } | ||
193 | } | ||
194 | }, | 180 | }, |
195 | 181 | ||
196 | _currentLayersSelected:{ | 182 | _currentLayersSelected:{ |
@@ -205,7 +191,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
205 | this.cacheTimeline(); | 191 | this.cacheTimeline(); |
206 | } | 192 | } |
207 | }, | 193 | }, |
208 | 194 | ||
195 | // The index of the last layer that was clicked on | ||
196 | // (used for shift-click multiselect) | ||
197 | _lastLayerClicked : { | ||
198 | value: 0 | ||
199 | }, | ||
200 | lastLayerClicked: { | ||
201 | serializable: true, | ||
202 | get: function() { | ||
203 | return this._lastLayerClicked; | ||
204 | }, | ||
205 | set: function(newVal) { | ||
206 | this._lastLayerClicked = newVal | ||
207 | } | ||
208 | }, | ||
209 | 209 | ||
210 | _millisecondsOffset:{ | 210 | _millisecondsOffset:{ |
211 | value:1000 | 211 | value:1000 |
@@ -235,7 +235,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
235 | }, | 235 | }, |
236 | set:function (val) { | 236 | set:function (val) { |
237 | this._masterDuration = val; | 237 | this._masterDuration = val; |
238 | this.timebar.style.width = (this._masterDuration / 12) + "px"; | 238 | var intDur = Math.round(val/12), |
239 | strWidth = intDur + "px"; | ||
240 | this.timebar.style.width = strWidth; | ||
239 | } | 241 | } |
240 | }, | 242 | }, |
241 | 243 | ||
@@ -295,10 +297,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
295 | } | 297 | } |
296 | }, | 298 | }, |
297 | 299 | ||
298 | _isLayer:{ | ||
299 | value:false | ||
300 | }, | ||
301 | |||
302 | _firstTimeLoaded:{ | 300 | _firstTimeLoaded:{ |
303 | value:true | 301 | value:true |
304 | }, | 302 | }, |
@@ -314,6 +312,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
314 | timeMarkerHolder:{ | 312 | timeMarkerHolder:{ |
315 | value:null | 313 | value:null |
316 | }, | 314 | }, |
315 | |||
316 | // Drag and Drop properties | ||
317 | _dragAndDropHelper : { | 317 | _dragAndDropHelper : { |
318 | value: false | 318 | value: false |
319 | }, | 319 | }, |
@@ -326,6 +326,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
326 | _dragLayerID : { | 326 | _dragLayerID : { |
327 | value: null | 327 | value: null |
328 | }, | 328 | }, |
329 | _draggingType: { | ||
330 | value: false | ||
331 | }, | ||
332 | draggingType: { | ||
333 | get: function() { | ||
334 | return this._draggingType; | ||
335 | }, | ||
336 | set: function(newVal) { | ||
337 | this._draggingType = newVal; | ||
338 | } | ||
339 | }, | ||
329 | 340 | ||
330 | layersDragged:{ | 341 | layersDragged:{ |
331 | value:[], | 342 | value:[], |
@@ -342,6 +353,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
342 | } | 353 | } |
343 | } | 354 | } |
344 | }, | 355 | }, |
356 | _dragLayerIndexes: { | ||
357 | value: [] | ||
358 | }, | ||
345 | _dropLayerID : { | 359 | _dropLayerID : { |
346 | value: null | 360 | value: null |
347 | }, | 361 | }, |
@@ -353,20 +367,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
353 | if (newVal !== this._dropLayerID) { | 367 | if (newVal !== this._dropLayerID) { |
354 | this._dropLayerID = newVal; | 368 | this._dropLayerID = newVal; |
355 | 369 | ||
356 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), | 370 | var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), |
357 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 371 | arrDragLayers = [], |
358 | dragLayer = this.arrLayers[dragLayerIndex]; | 372 | i = 0, |
359 | this.layersDragged.push(dragLayer); | 373 | dragLayerIndexesLength = this._dragLayerIndexes.length; |
360 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | 374 | |
361 | 375 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? | |
362 | this.arrLayers.splice(dragLayerIndex, 1); | 376 | |
363 | this.arrLayers.splice(dropLayerIndex, 0, dragLayer); | 377 | for (i = 0; i < dragLayerIndexesLength; i++) { |
378 | var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; | ||
379 | arrDragLayers.push(myDraggingLayer); | ||
380 | // Splice arrLayers | ||
381 | this.arrLayers.splice(this._dragLayerIndexes[i], 1); | ||
382 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); | ||
383 | } | ||
384 | this.layersDragged = arrDragLayers; | ||
385 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | ||
386 | |||
387 | // Cache the new info | ||
364 | this.cacheTimeline(); | 388 | this.cacheTimeline(); |
365 | 389 | ||
366 | // Clear for future DnD | 390 | // Clear drag and drop variables for future re-use |
367 | this._dropLayerID = null; | 391 | this._dropLayerID = null; |
368 | this._dragLayerID = null; | 392 | this.dragLayerIndexes = []; |
369 | 393 | this._dragLayerIndexes = []; | |
394 | this.lastLayerClicked = 0; | ||
395 | |||
370 | // Sometimes, just to be fun, the drop and dragend events don't fire. | 396 | // Sometimes, just to be fun, the drop and dragend events don't fire. |
371 | // So just in case, set the draw routine to delete the helper. | 397 | // So just in case, set the draw routine to delete the helper. |
372 | this._deleteHelper = true; | 398 | this._deleteHelper = true; |
@@ -383,10 +409,41 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
383 | _scrollTracks: { | 409 | _scrollTracks: { |