aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorJon Reid2012-04-27 14:41:15 -0700
committerJon Reid2012-04-27 14:41:15 -0700
commit53a604d0ccb1315576b94406cf3b0b958162307b (patch)
tree2479219049b7895a60a0a949b479a26c7344c3bc /js/panels
parent983df3d71efd1f809184814b520a8155cd0c9b6e (diff)
downloadninja-53a604d0ccb1315576b94406cf3b0b958162307b.tar.gz
Timeline: Multiselect.
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js166
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 }