aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js906
1 files changed, 485 insertions, 421 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7f4fee89..a3965eb2 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