diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 165 |
1 files changed, 151 insertions, 14 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index d85259cb..767dc362 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -139,6 +139,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
139 | this.cacheTimeline(); | 139 | this.cacheTimeline(); |
140 | } | 140 | } |
141 | }, | 141 | }, |
142 | // The index of the last layer that was clicked on | ||
143 | // (used for shift-click multiselect) | ||
144 | _lastLayerClicked : { | ||
145 | value: 0 | ||
146 | }, | ||
147 | lastLayerClicked: { | ||
148 | serializable: true, | ||
149 | get: function() { | ||
150 | return this._lastLayerClicked; | ||
151 | }, | ||
152 | set: function(newVal) { | ||
153 | this._lastLayerClicked = newVal | ||
154 | } | ||
155 | }, | ||
142 | 156 | ||
143 | _currentSelectedContainer: { | 157 | _currentSelectedContainer: { |
144 | value: null | 158 | value: null |
@@ -435,6 +449,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
435 | 449 | ||
436 | } | 450 | } |
437 | }, | 451 | }, |
452 | // is the control key currently being pressed (used for multiselect) | ||
453 | _isControlPressed: { | ||
454 | value: false | ||
455 | }, | ||
456 | |||
457 | // is the shift key currently being pressed (used for multiselect) | ||
458 | _isShiftPressed: { | ||
459 | value: false | ||
460 | }, | ||
438 | /* === END: Draw cycle === */ | 461 | /* === END: Draw cycle === */ |
439 | /* === BEGIN: Controllers === */ | 462 | /* === BEGIN: Controllers === */ |
440 | // Create an empty layer template object with minimal defaults and return it for use | 463 | // Create an empty layer template object with minimal defaults and return it for use |
@@ -599,14 +622,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
599 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); | 622 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); |
600 | 623 | ||
601 | // Add some event handlers | 624 | // Add some event handlers |
602 | this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); | 625 | //this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false); |
603 | this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); | 626 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false); |
627 | //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); | ||
604 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 628 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
605 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 629 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
606 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); | 630 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); |
607 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); | 631 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); |
608 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); | 632 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); |
609 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); | 633 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); |
634 | document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false); | ||
635 | document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false); | ||
610 | 636 | ||
611 | // Bind some bindings | 637 | // Bind some bindings |
612 | Object.defineBinding(this, "currentSelectedContainer", { | 638 | Object.defineBinding(this, "currentSelectedContainer", { |
@@ -916,16 +942,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
916 | 942 | ||
917 | 943 | ||
918 | selectLayers:{ | 944 | selectLayers:{ |
919 | value:function (arrSelectedIndexes) { | 945 | value:function (arrSelectedIndexes, userSelection) { |
920 | 946 | ||
921 | var i = 0, | 947 | var i = 0, |
922 | arrLayersLength = this.arrLayers.length, | 948 | arrLayersLength = this.arrLayers.length, |
923 | arrSelectedIndexesLength = arrSelectedIndexes.length, | 949 | arrSelectedIndexesLength = arrSelectedIndexes.length, |
924 | userSelection = false; | 950 | arrSelectedLayers = false; |
925 | 951 | ||
926 | //console.log(arrSelectedIndexes); | 952 | if (typeof(userSelection) === "undefined") { |
953 | userSelection = false; | ||
954 | } | ||
927 | 955 | ||
956 | console.log(arrSelectedIndexes); | ||
928 | 957 | ||
958 | |||
929 | if (this.selectedKeyframes) { | 959 | if (this.selectedKeyframes) { |
930 | this.deselectTweens(); | 960 | this.deselectTweens(); |
931 | } | 961 | } |
@@ -939,7 +969,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
939 | this.currentLayersSelected = false; | 969 | this.currentLayersSelected = false; |
940 | } | 970 | } |
941 | if (arrSelectedIndexesLength > 0) { | 971 | if (arrSelectedIndexesLength > 0) { |
942 | this.currentLayersSelected = []; | 972 | arrSelectedLayers = []; |
943 | } | 973 | } |
944 | 974 | ||
945 | 975 | ||
@@ -948,12 +978,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
948 | this.arrLayers[i].layerData.isSelected = true; | 978 | this.arrLayers[i].layerData.isSelected = true; |
949 | this.arrLayers[i].isSelected = true; | 979 | this.arrLayers[i].isSelected = true; |
950 | this.triggerLayerBinding(i); | 980 | this.triggerLayerBinding(i); |
951 | this.currentLayersSelected.push(i); | 981 | arrSelectedLayers.push(i); |
982 | |||
983 | if (userSelection && this._captureSelection) { | ||
984 | this.application.ninja.selectionController.selectElements(this.arrLayers[i].layerData.elementsList); | ||
985 | } | ||
952 | } | 986 | } |
953 | } | 987 | } |
954 | 988 | ||
989 | this.currentLayersSelected = arrSelectedLayers; | ||
955 | this.layerRepetition.selectedIndexes = arrSelectedIndexes; | 990 | this.layerRepetition.selectedIndexes = arrSelectedIndexes; |
956 | 991 | ||
992 | /* | ||
957 | // TODO: Set up for user selection. | 993 | // TODO: Set up for user selection. |
958 | if (userSelection) { | 994 | if (userSelection) { |
959 | if (this._captureSelection) { | 995 | if (this._captureSelection) { |
@@ -967,7 +1003,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
967 | } | 1003 | } |
968 | this._captureSelection = true; | 1004 | this._captureSelection = true; |
969 | } | 1005 | } |
970 | 1006 | */ | |
971 | // Finally, reset the master duration. | 1007 | // Finally, reset the master duration. |
972 | this.resetMasterDuration(); | 1008 | this.resetMasterDuration(); |
973 | } | 1009 | } |
@@ -993,16 +1029,117 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
993 | } | 1029 | } |
994 | 1030 | ||
995 | } | 1031 | } |
996 | this._isMousedown = true; | ||
997 | } | 1032 | } |
998 | }, | 1033 | }, |
999 | 1034 | ||
1000 | timelineLeftPaneMouseup:{ | 1035 | timelineLeftPanelMousedown: { |
1001 | value:function (event) { | 1036 | value:function (event) { |
1002 | this._isMousedown = false; | 1037 | console.log('click') |
1038 | var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), | ||
1039 | i = 0, | ||
1040 | arrLayers = document.querySelectorAll(".container-layer"), | ||
1041 | arrLayersLength = arrLayers.length, | ||
1042 | targetIndex = 0, | ||
1043 | isAlreadySelected = false, | ||
1044 | indexAlreadySelected = 0, | ||
1045 | indexLastClicked = 0; | ||
1046 | |||
1047 | // Get targetIndex, the index of the clicked target within the DOM array of layers | ||
1048 | if (ptrParent === false) { | ||
1049 | return; | ||
1050 | } | ||
1051 | for (i = 0; i < arrLayersLength; i++) { | ||
1052 | if (arrLayers[i] == ptrParent) { | ||
1053 | targetIndex = i; | ||
1054 | } | ||
1055 | } | ||
1056 | if (this.currentLayersSelected !== false) { | ||
1057 | indexAlreadySelected = this.currentLayersSelected.indexOf(targetIndex); | ||
1058 | } | ||
1059 | |||
1060 | if (indexAlreadySelected > -1) { | ||
1061 | isAlreadySelected = true; | ||
1062 | } | ||
1063 | |||
1064 | if (targetIndex > -1) { | ||
1065 | indexLastClicked = targetIndex; | ||
1066 | } | ||
1067 | |||
1068 | if (this.currentLayersSelected.length === 0) { | ||
1069 | this.currentLayersSelected.push(targetIndex); | ||
1070 | } else { | ||
1071 | if (this._isControlPressed === true) { | ||
1072 | // Control key is being pressed, so we need to | ||
1073 | // either add the current layer to selectedLayers | ||
1074 | // or remove it if it's already there. | ||
1075 | if (this.currentLayersSelected === false) { | ||
1076 | this.currentLayersSelected = []; | ||
1077 | this.currentLayerSelected = false; | ||
1078 | } | ||
1079 | if (isAlreadySelected === false) { | ||
1080< |