aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJon Reid2012-05-09 13:33:45 -0700
committerJon Reid2012-05-09 13:33:45 -0700
commit778d417d2f800b91d960849c75c0e4ee128044d1 (patch)
treeeb8fff2c42f00b6195aebcd35f0c640e628b00b0
parent1514f976119a9e5180a84a6afdf148bb25196bf8 (diff)
downloadninja-778d417d2f800b91d960849c75c0e4ee128044d1.tar.gz
Timeline: Bug fixes for keyframe drag and drop.
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js12
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js22
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js46
3 files changed, 52 insertions, 28 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index f7259d29..5afff6e6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -84,7 +84,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
84 value: function(event) { 84 value: function(event) {
85 //this.parentComponent.parentComponent.dragLayerID = this.layerID; 85 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
86 event.dataTransfer.setData('Text', 'Keyframe'); 86 event.dataTransfer.setData('Text', 'Keyframe');
87 this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID; 87
88 // Get my index in my track's tween array
89 var i = 0,
90 tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
91 myIndex = null;
92 for (i = 0; i < tweenRepetitionLength; i++) {
93 if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
94 myIndex = i;
95 }
96 }
97 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
88 } 98 }
89 }, 99 },
90 handleDragend: { 100 handleDragend: {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 3a961b51..8859e115 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1586,11 +1586,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1586 currPos = (event.x + this.layout_tracks.scrollLeft) - 277; 1586 currPos = (event.x + this.layout_tracks.scrollLeft) - 277;
1587 1587
1588 // Prevent dragging beyond previous or next keyframe, if any 1588 // Prevent dragging beyond previous or next keyframe, if any
1589 if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { 1589 if (currPos < this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition) {
1590 currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; 1590 currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition;
1591 } 1591 }
1592 if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { 1592 if (currPos > this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition) {
1593 currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; 1593 currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition;
1594 } 1594 }
1595 1595
1596 // Automatic scrolling when dragged to edge of window 1596 // Automatic scrolling when dragged to edge of window
@@ -1604,8 +1604,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1604 } 1604 }
1605 1605
1606 // Set up values in appropriate track and set that track to draw. 1606 // Set up values in appropriate track and set that track to draw.
1607 this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; 1607 this.trackRepetition.childComponents[this.draggingTrackId].dragAndDropHelperCoords = currPos + "px";
1608 this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; 1608 this.trackRepetition.childComponents[this.draggingTrackId].needsDraw = true;
1609 return false; 1609 return false;
1610 } 1610 }
1611 }, 1611 },
@@ -1622,7 +1622,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1622 currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80), 1622 currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80),
1623 currentMillisec = 0, 1623 currentMillisec = 0,
1624 i = 0, 1624 i = 0,
1625 trackIndex = this.draggingTrackId -1, 1625 trackIndex = this.draggingTrackId,
1626 tweenIndex = this.trackRepetition.childComponents[trackIndex].draggingIndex; 1626 tweenIndex = this.trackRepetition.childComponents[trackIndex].draggingIndex;
1627 1627
1628 // Make sure drop happens between previous and next keyframe, if any. 1628 // Make sure drop happens between previous and next keyframe, if any.
@@ -1656,11 +1656,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1656 } 1656 }
1657 this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween(); 1657 this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween();
1658 this.trackRepetition.childComponents[trackIndex].updateKeyframeRule(); 1658 this.trackRepetition.childComponents[trackIndex].updateKeyframeRule();
1659
1660 // If this is the last keyframe, we'll need to update the track duration
1661 if (tweenIndex === (this.trackRepetition.childComponents[trackIndex].tweens.length-1)) {
1662 this.arrLayers[trackIndex].layerData.trackDuration = currentMillisec;
1663 this.resetMasterDuration();
1664 }
1659 return false; 1665 return false;
1660 } 1666 }
1661 }, 1667 },
1662 /* === END: Controllers === */ 1668 /* === END: Controllers === */
1663 1669
1664 /* === BEGIN: Logging routines === */ 1670 /* === BEGIN: Logging routines === */
1665 _boolDebug:{ 1671 _boolDebug:{
1666 enumerable:false, 1672 enumerable:false,
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 03e3b01e..1e918c6e 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -363,6 +363,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
363 this._dragAndDropHelperCoords = newVal; 363 this._dragAndDropHelperCoords = newVal;
364 } 364 }
365 }, 365 },
366 _draggingIndex: {
367 value: false
368 },
369 draggingIndex: {
370 get: function() {
371 return this._draggingIndex;
372 },
373 set: function(newVal) {
374 this._draggingIndex = newVal;
375 }
376 },
366 _dragAndDropHelperOffset : { 377 _dragAndDropHelperOffset : {
367 value: false 378 value: false
368 }, 379 },
@@ -864,32 +875,29 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
864 875
865 //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width"); 876 //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
866 this._dragAndDropHelper.classList.add("track-dnd-helper"); 877 this._dragAndDropHelper.classList.add("track-dnd-helper");
867 878
868 // Get the offset 879 if (this.draggingIndex < (this.tweens.length -1)) {
869 var findYOffset = function(obj) { 880 maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition;
870 var curleft = curtop = 0;
871
872 if (obj.offsetParent) {
873 do {
874 curleft += obj.offsetLeft;
875 curtop += obj.offsetTop;
876
877 } while (obj = obj.offsetParent);
878 }
879 return curtop;
880 }
881 //this._dragAndDropHelperOffset = findYOffset(this.container_layers);
882 if (this.draggingIndex !== (this.tweens.length -1)) {
883 maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition;
884 } 881 }
885 if (this.draggingIndex > 1) { 882 if (this.draggingIndex > 1) {
886 minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition; 883 minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition;
887 } 884 }
888 this._keyframeMinPosition = minPosition+2; 885 this._keyframeMinPosition = minPosition+2;
889 this._keyframeMaxPosition = maxPosition-9; 886 this._keyframeMaxPosition = maxPosition-9;
890 this._appendHelper = true; 887 this._appendHelper = true;
891 this._deleteHelper = false; 888 this._deleteHelper = false;
892 this.parentComponent.parentComponent.draggingTrackId = this.trackID; 889
890 // Get my index in the track array
891 var i = 0,
892 arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
893 myId = null;
894 for (i = 0; i < arrLayersLength; i++) {
895 var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid;
896 if ( currUuid === this.uuid) {
897 myId = i;
898 }
899 }
900 this.parentComponent.parentComponent.draggingTrackId = myId;
893 this.parentComponent.parentComponent.draggingType = "keyframe"; 901 this.parentComponent.parentComponent.draggingType = "keyframe";
894 } 902 }
895 }, 903 },