diff options
author | Jon Reid | 2012-04-27 14:41:15 -0700 |
---|---|---|
committer | Jon Reid | 2012-04-27 14:41:15 -0700 |
commit | 53a604d0ccb1315576b94406cf3b0b958162307b (patch) | |
tree | 2479219049b7895a60a0a949b479a26c7344c3bc /js/panels/Timeline | |
parent | 983df3d71efd1f809184814b520a8155cd0c9b6e (diff) | |
download | ninja-53a604d0ccb1315576b94406cf3b0b958162307b.tar.gz |
Timeline: Multiselect.
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 166 |
1 files changed, 151 insertions, 15 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 70e04b4c..546a6abf 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -138,6 +138,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
138 | this.cacheTimeline(); | 138 | this.cacheTimeline(); |
139 | } | 139 | } |
140 | }, | 140 | }, |
141 | // The index of the last layer that was clicked on | ||
142 | // (used for shift-click multiselect) | ||
143 | _lastLayerClicked : { | ||
144 | value: 0 | ||
145 | }, | ||
146 | lastLayerClicked: { | ||
147 | serializable: true, | ||
148 | get: function() { | ||
149 | return this._lastLayerClicked; | ||
150 | }, | ||
151 | set: function(newVal) { | ||
152 | this._lastLayerClicked = newVal | ||
153 | } | ||
154 | }, | ||
141 | 155 | ||
142 | _currentSelectedContainer: { | 156 | _currentSelectedContainer: { |
143 | value: null | 157 | value: null |
@@ -406,6 +420,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
406 | } | 420 | } |
407 | } | 421 | } |
408 | }, | 422 | }, |
423 | // is the control key currently being pressed (used for multiselect) | ||
424 | _isControlPressed: { | ||
425 | value: false | ||
426 | }, | ||
427 | |||
428 | // is the shift key currently being pressed (used for multiselect) | ||
429 | _isShiftPressed: { | ||
430 | value: false | ||
431 | }, | ||
409 | /* === END: Draw cycle === */ | 432 | /* === END: Draw cycle === */ |
410 | /* === BEGIN: Controllers === */ | 433 | /* === BEGIN: Controllers === */ |
411 | // Create an empty layer template object with minimal defaults and return it for use | 434 | // Create an empty layer template object with minimal defaults and return it for use |
@@ -549,14 +572,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
549 | this.layout_markers = this.element.querySelector(".layout_markers"); | 572 | this.layout_markers = this.element.querySelector(".layout_markers"); |
550 | 573 | ||
551 | // Add some event handlers | 574 | // Add some event handlers |
552 | this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); | 575 | //this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false); |
553 | this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); | 576 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false); |
577 | //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); | ||
554 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 578 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
555 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 579 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
556 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); | 580 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); |
557 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); | 581 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); |
558 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); | 582 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); |
559 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); | 583 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); |
584 | document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false); | ||
585 | document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false); | ||
560 | 586 | ||
561 | // Bind some bindings | 587 | // Bind some bindings |
562 | Object.defineBinding(this, "currentSelectedContainer", { | 588 | Object.defineBinding(this, "currentSelectedContainer", { |
@@ -848,15 +874,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
848 | 874 | ||
849 | 875 | ||
850 | selectLayers:{ | 876 | selectLayers:{ |
851 | value:function (arrSelectedIndexes) { | 877 | value:function (arrSelectedIndexes, userSelection) { |
852 | 878 | ||
853 | var i = 0, | 879 | var i = 0, |
854 | arrLayersLength = this.arrLayers.length, | 880 | arrLayersLength = this.arrLayers.length, |
855 | arrSelectedIndexesLength = arrSelectedIndexes.length, | 881 | arrSelectedIndexesLength = arrSelectedIndexes.length, |
856 | userSelection = false; | 882 | arrSelectedLayers = false; |
857 | 883 | ||
858 | //console.log(arrSelectedIndexes); | 884 | if (typeof(userSelection) === "undefined") { |
885 | userSelection = false; | ||
886 | } | ||
859 | 887 | ||
888 | console.log(arrSelectedIndexes); | ||
889 | |||
860 | 890 | ||
861 | if (this.selectedKeyframes) { | 891 | if (this.selectedKeyframes) { |
862 | this.deselectTweens(); | 892 | this.deselectTweens(); |
@@ -867,9 +897,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
867 | this.triggerLayerBinding(i); | 897 | this.triggerLayerBinding(i); |
868 | } | 898 | } |
869 | 899 | ||
870 | this.currentLayersSelected = false; | ||
871 | if (arrSelectedIndexesLength > 0) { | 900 | if (arrSelectedIndexesLength > 0) { |
872 | this.currentLayersSelected = []; | 901 | arrSelectedLayers = []; |
873 | } | 902 | } |
874 | 903 | ||
875 | 904 | ||
@@ -878,12 +907,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
878 | this.arrLayers[i].layerData.isSelected = true; | 907 | this.arrLayers[i].layerData.isSelected = true; |
879 | this.arrLayers[i].isSelected = true; | 908 | this.arrLayers[i].isSelected = true; |
880 | this.triggerLayerBinding(i); | 909 | this.triggerLayerBinding(i); |
881 | this.currentLayersSelected.push(i); | 910 | arrSelectedLayers.push(i); |
911 | |||
912 | if (userSelection && this._captureSelection) { | ||
913 | this.application.ninja.selectionController.selectElements(this.arrLayers[i].layerData.elementsList); | ||
914 | } | ||
882 | } | 915 | } |
883 | } | 916 | } |
884 | 917 | ||
918 | this.currentLayersSelected = arrSelectedLayers; | ||
885 | this.layerRepetition.selectedIndexes = arrSelectedIndexes; | 919 | this.layerRepetition.selectedIndexes = arrSelectedIndexes; |
886 | 920 | ||
921 | /* | ||
887 | // TODO: Set up for user selection. | 922 | // TODO: Set up for user selection. |
888 | if (userSelection) { | 923 | if (userSelection) { |
889 | if (this._captureSelection) { | 924 | if (this._captureSelection) { |
@@ -897,7 +932,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
897 | } | 932 | } |
898 | this._captureSelection = true; | 933 | this._captureSelection = true; |
899 | } | 934 | } |
900 | 935 | */ | |
901 | // Finally, reset the master duration. | 936 | // Finally, reset the master duration. |
902 | this.resetMasterDuration(); | 937 | this.resetMasterDuration(); |
903 | } | 938 | } |
@@ -932,16 +967,117 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
932 | } | 967 | } |
933 | 968 | ||
934 | } | 969 | } |
935 | this._isMousedown = true; | ||
936 | } | 970 | } |
937 | }, | 971 | }, |
938 | 972 | ||
939 | timelineLeftPaneMouseup:{ | 973 | timelineLeftPanelMousedown: { |
940 | value:function (event) { | 974 | value:function (event) { |
941 | this._isMousedown = false; | 975 | console.log('click') |
976 | var ptrParent = nj.queryParentSelector(event.target, ".container-layer"), | ||
977 | i = 0, | ||
978 | arrLayers = document.querySelectorAll(".container-layer"), | ||
979 | arrLayersLength = arrLayers.length, | ||
980 | targetIndex = 0, | ||
981 | isAlreadySelected = false, | ||
982 | indexAlreadySelected = 0, | ||
983 | indexLastClicked = 0; | ||
984 | |||
985 | // Get targetIndex, the index of the clicked target within the DOM array of layers | ||
986 | if (ptrParent === false) { | ||
987 | return; | ||
988 | } | ||
989 | for (i = 0; i < arrLayersLength; i++) { | ||
990 | if (arrLayers[i] == ptrParent) { | ||
991 | targetIndex = i; | ||
992 | } | ||
993 | } | ||
994 | if (this.currentLayersSelected !== false) { | ||
995 | indexAlreadySelected = this.currentLayersSelected.indexOf(targetIndex); | ||
996 | } | ||
997 | |||
998 | if (indexAlreadySelected > -1) { | ||
999 | isAlreadySelected = true; | ||
1000 | } | ||
1001 | |||
1002 | if (targetIndex > -1) { | ||
1003 | indexLastClicked = targetIndex; | ||
1004 | } | ||
1005 | |||
1006 | if (this.currentLayersSelected.length === 0) { | ||
1007 | this.currentLayersSelected.push(targetIndex); | ||
1008 | } else { | ||
1009 | if (this._isControlPressed === true) { | ||
1010 | // Control key is being pressed, so we need to | ||
1011 | // either add the current layer to selectedLayers | ||
1012 | // or remove it if it's already there. | ||
1013 | if (this.currentLayersSelected === false) { | ||
1014 | this.currentLayersSelected = []; | ||
1015 | this.currentLayerSelected = false; | ||
1016 | } | ||