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.js375
1 files changed, 246 insertions, 129 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7f4fee89..f6e0e252 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 },
@@ -370,35 +396,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
370 prepareForDraw:{ 396 prepareForDraw:{
371 value:function () { 397 value:function () {
372 this.initTimeline(); 398 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 } 399 }
403 }, 400 },
404 401
@@ -453,9 +450,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
453 this._scrollTracks = false; 450 this._scrollTracks = false;
454 } 451 }
455 } 452 }
453
454 // Do we need to scroll the layers?
455 if (this._areTracksScrolling) {
456 this._areTracksScrolling = false;
457 this.user_layers.scrollTop = this.layout_tracks.scrollTop;
458 this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
459 this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px";
460 }
456 461
457 } 462 }
458 }, 463 },
464 // is the control key currently being pressed (used for multiselect)
465 _isControlPressed: {
466 value: false
467 },
468
469 // is the shift key currently being pressed (used for multiselect)
470 _isShiftPressed: {
471 value: false
472 },
459 /* === END: Draw cycle === */ 473 /* === END: Draw cycle === */
460 /* === BEGIN: Controllers === */ 474 /* === BEGIN: Controllers === */
461 // Create an empty layer template object with minimal defaults and return it for use 475 // Create an empty layer template object with minimal defaults and return it for use
@@ -504,6 +518,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
504 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; 518 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
505 this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; 519 this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
506 this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; 520 this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
521 this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected;
507 } 522 }
508 } 523 }
509 }, 524 },
@@ -517,6 +532,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
517 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; 532 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
518 this.application.ninja.currentDocument.tlCurrentLayerSelected = false; 533 this.application.ninja.currentDocument.tlCurrentLayerSelected = false;
519 this.application.ninja.currentDocument.tlCurrentLayersSelected = false; 534 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
535 this.application.ninja.currentDocument.tlCurrentElementsSelected = [];
520 } 536 }
521 }, 537 },
522 538
@@ -597,15 +613,40 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
597 this.layout_tracks = this.element.querySelector(".layout-tracks"); 613 this.layout_tracks = this.element.querySelector(".layout-tracks");
598 this.layout_markers = this.element.querySelector(".layout_markers"); 614 this.layout_markers = this.element.querySelector(".layout_markers");
599 615
616
617 // Bind the event handler for the document change events
618 //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
619 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
620 //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
621 //this.eventManager.addEventListener("breadCrumbBinding",this,false);
622
623 // Bind drag and drop event handlers
624 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
625 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
626 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
627 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
628 this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
629 this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
630
631 // Bind the handlers for the config menu
632 this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
633 this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false);
634 this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false);
635 this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
636 document.addEventListener("click", this.handleDocumentClick.bind(this), false);
637
600 // Add some event handlers 638 // Add some event handlers
601 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); 639 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false);
602 this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); 640 //this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
641 //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
603 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 642 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
604 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 643 this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
605 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); 644 this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
606 this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); 645 this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bi