aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-04-02 15:44:11 -0700
committerJon Reid2012-04-02 15:44:11 -0700
commitd480bea18450990131dc2e69b7f097aea1b26af0 (patch)
tree3361d6ca83b2a0d84db71dc4aa73159861e6af0a /js/panels/Timeline
parent57f26309f7474c2b07eb9c42e0984f5b6b81cc7c (diff)
downloadninja-d480bea18450990131dc2e69b7f097aea1b26af0.tar.gz
Timeline: Autoscrolling when dragging a layer within a scrollable layer
list.
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js86
1 files changed, 55 insertions, 31 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7ed33fda..110f0336 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -319,6 +319,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
319 _deleteHelper: { 319 _deleteHelper: {
320 value: false 320 value: false
321 }, 321 },
322 _scrollTracks: {
323 value: false
324 },
322 /* === END: Models === */ 325 /* === END: Models === */
323 /* === BEGIN: Draw cycle === */ 326 /* === BEGIN: Draw cycle === */
324 prepareForDraw:{ 327 prepareForDraw:{
@@ -361,6 +364,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
361 } 364 }
362 this._dragAndDropHelperCoords = false; 365 this._dragAndDropHelperCoords = false;
363 } 366 }
367 // Do we need to scroll the tracks?
368 if (this._scrollTracks !== false) {
369 this.layout_tracks.scrollTop = this._scrollTracks;
370 this._scrollTracks = false;
371 }
364 // Do we have a helper to delete? 372 // Do we have a helper to delete?
365 if (this._deleteHelper === true) { 373 if (this._deleteHelper === true) {
366 if (this._dragAndDropHelper === null) { 374 if (this._dragAndDropHelper === null) {
@@ -732,41 +740,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
732 740
733 createNewLayer:{ 741 createNewLayer:{
734 value:function (object) { 742 value:function (object) {
735 var hashVariable = 0; 743 var hashVariable = 0,
736 744 newLayerName = "",
737 var newLayerName = "", 745 thingToPush = this.createLayerTemplate(),
738 thingToPush = this.createLayerTemplate(), 746 myIndex = 0,
739 myIndex = 0; 747 i = 0,
748 arrLayersLength = this.arrLayers.length;
740 749
741 this.currentLayerNumber = this.currentLayerNumber + 1; 750 this.currentLayerNumber = this.currentLayerNumber + 1;
742 newLayerName = "Layer " + this.currentLayerNumber; 751 newLayerName = "Layer " + this.currentLayerNumber;
743 thingToPush.layerData.layerName = newLayerName; 752 thingToPush.layerData.layerName = newLayerName;
744 thingToPush.layerData.layerID = this.currentLayerNumber; 753 thingToPush.layerData.layerID = this.currentLayerNumber;
745 thingToPush.parentElement = this.application.ninja.currentSelectedContainer; 754 thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
746 thingToPush.layerData.isSelected = true; 755 thingToPush.layerData.isSelected = true;
747 thingToPush.layerData._isFirstDraw = true; 756 thingToPush.layerData._isFirstDraw = true;
748 thingToPush.layerData.created = true; 757 thingToPush.layerData.created = true;
758
759 for (i = 0; i < this.arrLayersLength; i++) {
760 this.arrLayers[i].layerData.isSelected = false;
761 this.arrLayers[i].layerData._isFirstDraw = false;
762 }
749 763
750 for (var i = 0; i < this.arrLayers.length; i++) { 764 if (this.layerRepetition.selectedIndexes) {
751 this.arrLayers[i].layerData.isSelected = false; 765 // There is a selected layer, so we need to splice the new layer on top of it.
752 this.arrLayers[i].layerData._isFirstDraw = false; 766 myIndex = this.layerRepetition.selectedIndexes[0];
753 } 767 thingToPush.layerData.layerPosition = myIndex;
768 thingToPush.layerData.trackPosition = myIndex;
769 this.arrLayers.splice(myIndex, 0, thingToPush);
754 770
755 if (this.layerRepetition.selectedIndexes) { 771 } else {
756 // There is a selected layer, so we need to splice the new layer on top of it. 772 thingToPush.layerData.layerPosition = myIndex;
757 myIndex = this.layerRepetition.selectedIndexes[0]; 773 this.arrLayers.splice(myIndex, 0, thingToPush);
758 thingToPush.layerData.layerPosition = myIndex;
759 thingToPush.layerData.trackPosition = myIndex;
760 this.arrLayers.splice(myIndex, 0, thingToPush);
761 774
762 } else { 775 }
763 thingToPush.layerData.layerPosition = myIndex;
764 this.arrLayers.splice(myIndex, 0, thingToPush);
765 776
766 } 777 this.selectLayer(myIndex);
767 778
768 this.selectLayer(myIndex);
769// }
770 } 779 }
771 }, 780 },
772 781
@@ -1062,6 +1071,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1062 // Get the offset 1071 // Get the offset
1063 var findYOffset = function(obj) { 1072 var findYOffset = function(obj) {
1064 var curleft = curtop = 0; 1073 var curleft = curtop = 0;
1074
1065 if (obj.offsetParent) { 1075 if (obj.offsetParent) {
1066 do { 1076 do {
1067 curleft += obj.offsetLeft; 1077 curleft += obj.offsetLeft;
@@ -1078,8 +1088,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1078 }, 1088 },
1079 handleLayerDragover: { 1089 handleLayerDragover: {
1080 value: function(event) { 1090 value: function(event) {
1081 var currPos = 0; 1091 var currPos = 0,
1082 currPos = event.y - this._dragAndDropHelperOffset -28; 1092 myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
1093 if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
1094 this._scrollTracks = (this.user_layers.scrollTop - 10)
1095 }
1096 if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
1097 this._scrollTracks = (this.user_layers.scrollTop - 20)
1098 }
1099 if ((myScrollTest > (this.user_layers.clientHeight + 10))) {
1100 this._scrollTracks = (this.user_layers.scrollTop + 10)
1101 }
1102 if ((myScrollTest > (this.user_layers.clientHeight + 20))) {
1103 this._scrollTracks = (this.user_layers.scrollTop + 20)
1104
1105 }
1106 currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
1083 this._dragAndDropHelperCoords = currPos + "px"; 1107 this._dragAndDropHelperCoords = currPos + "px";
1084 this.needsDraw = true; 1108 this.needsDraw = true;
1085 } 1109 }