diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 375 |
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.bind(this), false) |