diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 690 |
1 files changed, 533 insertions, 157 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7f4fee89..1ddb3977 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -57,6 +57,10 @@ 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 current document |
62 | _boolCacheArrays:{ | 66 | _boolCacheArrays:{ |
@@ -91,6 +95,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
91 | this.cacheTimeline(); | 95 | this.cacheTimeline(); |
92 | } | 96 | } |
93 | }, | 97 | }, |
98 | _currentElementsSelected: { | ||
99 | value: [] | ||
100 | }, | ||
101 | currentElementsSelected: { | ||
102 | get: function() { | ||
103 | return this._currentElementsSelected; | ||
104 | }, | ||
105 | set: function(newVal) { | ||
106 | this._currentElementsSelected = newVal; | ||
107 | this.cacheTimeline(); | ||
108 | } | ||
109 | }, | ||
94 | 110 | ||
95 | _selectedLayerID:{ | 111 | _selectedLayerID:{ |
96 | value:false | 112 | value:false |
@@ -135,6 +151,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
135 | this.cacheTimeline(); | 151 | this.cacheTimeline(); |
136 | } | 152 | } |
137 | }, | 153 | }, |
154 | // The index of the last layer that was clicked on | ||
155 | // (used for shift-click multiselect) | ||
156 | _lastLayerClicked : { | ||
157 | value: 0 | ||
158 | }, | ||
159 | lastLayerClicked: { | ||
160 | serializable: true, | ||
161 | get: function() { | ||
162 | return this._lastLayerClicked; | ||
163 | }, | ||
164 | set: function(newVal) { | ||
165 | this._lastLayerClicked = newVal | ||
166 | } | ||
167 | }, | ||
138 | 168 | ||
139 | _currentSelectedContainer: { | 169 | _currentSelectedContainer: { |
140 | value: null | 170 | value: null |
@@ -240,10 +270,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
240 | } | 270 | } |
241 | }, | 271 | }, |
242 | 272 | ||
243 | _isLayer:{ | ||
244 | value:false | ||
245 | }, | ||
246 | |||
247 | _firstTimeLoaded:{ | 273 | _firstTimeLoaded:{ |
248 | value:true | 274 | value:true |
249 | }, | 275 | }, |
@@ -300,6 +326,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
300 | } | 326 | } |
301 | } | 327 | } |
302 | }, | 328 | }, |
329 | _dragLayerIndexes: { | ||
330 | value: [] | ||
331 | }, | ||
303 | _dropLayerID : { | 332 | _dropLayerID : { |
304 | value: null | 333 | value: null |
305 | }, | 334 | }, |
@@ -311,6 +340,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
311 | if (newVal !== this._dropLayerID) { | 340 | if (newVal !== this._dropLayerID) { |
312 | this._dropLayerID = newVal; | 341 | this._dropLayerID = newVal; |
313 | 342 | ||
343 | var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | ||
344 | arrDragLayers = [], | ||
345 | i = 0, | ||
346 | dragLayerIndexesLength = this._dragLayerIndexes.length; | ||
347 | |||
348 | // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order? | ||
349 | |||
350 | for (i = 0; i < dragLayerIndexesLength; i++) { | ||
351 | var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]]; | ||
352 | arrDragLayers.push(myDraggingLayer); | ||
353 | this.arrLayers.splice(this._dragLayerIndexes[i], 1); | ||
354 | this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer); | ||
355 | } | ||
356 | console.log(arrDragLayers); | ||
357 | //this.arrLayers.splice(dropLayerIndex, 0, arrDragLayers); | ||
358 | this.layersDragged = arrDragLayers; | ||
359 | console.log(this.layersDragged); | ||
360 | console.log(this.arrLayers); | ||
361 | this._layerDroppedInPlace = this.arrLayers[dropLayerIndex]; | ||
362 | this.cacheTimeline(); | ||
363 | |||
364 | this._dropLayerID = null; | ||
365 | this.dragLayerIndexes = []; | ||
366 | this._dragLayerIndexes = []; | ||
367 | this.lastLayerClicked = 0; | ||
368 | |||
369 | // Sometimes, just to be fun, the drop and dragend events don't fire. | ||
370 | // So just in case, set the draw routine to delete the helper. | ||
371 | this._deleteHelper = true; | ||
372 | this.needsDraw = true; | ||
373 | |||
374 | /* | ||
314 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), | 375 | var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID), |
315 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), | 376 | dropLayerIndex = this.getLayerIndexByID(this.dropLayerID), |
316 | dragLayer = this.arrLayers[dragLayerIndex]; | 377 | dragLayer = this.arrLayers[dragLayerIndex]; |
@@ -329,6 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
329 | // So just in case, set the draw routine to delete the helper. | 390 | // So just in case, set the draw routine to delete the helper. |
330 | this._deleteHelper = true; | 391 | this._deleteHelper = true; |
331 | this.needsDraw = true; | 392 | this.needsDraw = true; |
393 | */ | ||
332 | } | 394 | } |
333 | } | 395 | } |
334 | }, | 396 | }, |
@@ -370,35 +432,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
370 | prepareForDraw:{ | 432 | prepareForDraw:{ |
371 | value:function () { | 433 | value:function () { |
372 | this.initTimeline(); | 434 | 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 | ||
388 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | ||
389 | this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); | ||
390 | this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); | ||
391 | this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); | ||
392 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); | ||
393 | |||
394 | } | ||
395 | }, | ||
396 | |||
397 | willDraw:{ | ||
398 | value:function () { | ||
399 | if (this._isLayer) { | ||
400 | this._isLayer = false; | ||
401 | } | ||
402 | } | 435 | } |
403 | }, | 436 | }, |
404 | 437 | ||
@@ -453,9 +486,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
453 | this._scrollTracks = false; | 486 | this._scrollTracks = false; |
454 | } | 487 | } |
455 | } | 488 | } |
489 | |||
490 | // Do we need to scroll the layers? | ||
491 | if (this._areTracksScrolling) { | ||
492 | this._areTracksScrolling = false; | ||
493 | this.user_layers.scrollTop = this.layout_tracks.scrollTop; | ||
494 | this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft; | ||
495 | this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px"; | ||
496 | } | ||
456 | 497 | ||
457 | } | 498 | } |
458 | }, | 499 | }, |
500 | // is the control key currently being pressed (used for multiselect) | ||
501 | _isControlPressed: { | ||
502 | value: false | ||
503 | }, | ||
504 | |||
505 | // is the shift key currently being pressed (used for multiselect) | ||
506 | _isShiftPressed: { | ||
507 | value: false | ||
508 | }, | ||
459 | /* === END: Draw cycle === */ | 509 | /* === END: Draw cycle === */ |
460 | /* === BEGIN: Controllers === */ | 510 | /* === BEGIN: Controllers === */ |
461 | // Create an empty layer template object with minimal defaults and return it for use | 511 | // Create an empty layer template object with minimal defaults and return it for use |
@@ -466,6 +516,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
466 | returnObj.layerData = {}; |