diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 12 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 22 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 46 |
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 | }, |