aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-05-04 16:59:07 -0700
committerJon Reid2012-05-04 16:59:07 -0700
commit2ea8a62835f4c20efff2623306e7205e6f5bf0ba (patch)
tree3578e221b62f9a0b8f967626262108c1609ad39d /js/panels/Timeline
parent0d33ff651baf062b8e82f3a89b69b3ccae0cbe47 (diff)
downloadninja-2ea8a62835f4c20efff2623306e7205e6f5bf0ba.tar.gz
Timeline: True drag-and-drop of keyframes
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js7
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js60
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js16
3 files changed, 71 insertions, 12 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index df5bdd67..f7259d29 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -36,6 +36,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
36 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); 36 this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
37 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); 37 this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
38 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 38 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
39 this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
39 40
40 41
41 42
@@ -83,7 +84,13 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
83 value: function(event) { 84 value: function(event) {
84 //this.parentComponent.parentComponent.dragLayerID = this.layerID; 85 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
85 event.dataTransfer.setData('Text', 'Keyframe'); 86 event.dataTransfer.setData('Text', 'Keyframe');
87 this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID;
86 } 88 }
87 }, 89 },
90 handleDragend: {
91 value: function(event) {
92 this.parentComponent.isDragging = false;
93 }
94 }
88 95
89}); 96});
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index d5571c3c..836bb60f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -836,7 +836,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
836 // Drag and drop event handlers 836 // Drag and drop event handlers
837 handleKeyframeDragstart : { 837 handleKeyframeDragstart : {
838 value: function(event) { 838 value: function(event) {
839 var dragIcon = document.createElement("img"); 839 var dragIcon = document.createElement("img"),
840 minPosition = 0,
841 maxPosition = 100000000000;
842
840 event.dataTransfer.effectAllowed = 'move'; 843 event.dataTransfer.effectAllowed = 'move';
841 event.dataTransfer.setData('Text', this.identifier); 844 event.dataTransfer.setData('Text', this.identifier);
842 dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" 845 dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
@@ -868,6 +871,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
868 return curtop; 871 return curtop;
869 } 872 }
870 //this._dragAndDropHelperOffset = findYOffset(this.container_layers); 873 //this._dragAndDropHelperOffset = findYOffset(this.container_layers);
874 if (this.draggingIndex !== (this.tweens.length -1)) {
875 maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition;
876 }
877 if (this.draggingIndex > 1) {
878 minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition;
879 }
880 this._keyframeMinPosition = minPosition+2;
881 this._keyframeMaxPosition = maxPosition-9;
871 this._appendHelper = true; 882 this._appendHelper = true;
872 this._deleteHelper = false; 883 this._deleteHelper = false;
873 } 884 }
@@ -894,6 +905,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
894 */ 905 */
895 //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; 906 //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
896 currPos = event.x - 277; 907 currPos = event.x - 277;
908
909 // too much or too little?
910 if (currPos < this._keyframeMinPosition) {
911 currPos = this._keyframeMinPosition;
912 }
913 if (currPos > this._keyframeMaxPosition) {
914 currPos = this._keyframeMaxPosition;
915 }
916
897 this._dragAndDropHelperCoords = currPos + "px"; 917 this._dragAndDropHelperCoords = currPos + "px";
898 this.needsDraw = true; 918 this.needsDraw = true;
899 return false; 919 return false;
@@ -923,16 +943,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
923 * 943 *
924 */ 944 */
925 945
926 var currPos = event.x - 277, 946 var currPos = event.x - 274,
927 currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80), 947 currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80),
928 currentMillisec = currentMillisecPerPixel * currPos; 948 currentMillisec = 0,
929 console.log(this.tweens[1].tweenData); 949 i = 0,
930 this.tweens[1].tweenData.spanWidth = currPos - this.tweens[0].tweenData.keyFramePosition; 950 tweenIndex = this.draggingIndex;
931 this.tweens[1].tweenData.keyFramePosition = currPos; 951
932 this.tweens[1].tweenData.keyFrameMillisec = currentMillisec; 952 // too much or too little?
933 this.tweens[1].tweenData.spanPosition = currPos - this.tweens[1].tweenData.spanWidth; 953 if (currPos < this._keyframeMinPosition) {
934 this.tweenRepetition.childComponents[1].setData(); 954 currPos = this._keyframeMinPosition + 3;
935 console.log(this.tweens[1].tweenData); 955 }
956 if (currPos > this._keyframeMaxPosition) {
957 currPos = this._keyframeMaxPosition + 3;
958 }
959
960 currentMillisec = currentMillisecPerPixel * currPos;
961
962 this.tweens[tweenIndex].tweenData.spanWidth = currPos - this.tweens[tweenIndex - 1].tweenData.keyFramePosition;
963 this.tweens[tweenIndex].tweenData.keyFramePosition = currPos;
964 this.tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec;
965 this.tweens[tweenIndex].tweenData.spanPosition = currPos - this.tweens[tweenIndex].tweenData.spanWidth;
966 this.tweenRepetition.childComponents[tweenIndex].setData();
967 if (tweenIndex < this.tweens.length -1) {
968 var spanWidth = this.tweens[tweenIndex +1].tweenData.keyFramePosition - currPos;
969 var spanPosition = currPos;
970 this.tweens[tweenIndex +1].tweenData.spanWidth = spanWidth;
971 this.tweens[tweenIndex +1].tweenData.spanPosition = currPos;
972 this.tweenRepetition.childComponents[tweenIndex+1].setData();
973 }
974 this.tweenRepetition.childComponents[tweenIndex].selectTween();
975 this.updateKeyframeRule();
936 return false; 976 return false;
937 } 977 }
938 }, 978 },
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index b4c3bd86..c21b5f91 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -132,11 +132,24 @@ var Tween = exports.Tween = Montage.create(Component, {
132 this._isTweenAnimated = value; 132 this._isTweenAnimated = value;
133 } 133 }
134 }, 134 },
135
136 _isDragging: {
137 value: false
138 },
139 isDragging: {
140 serializable: true,
141 get:function () {
142 return this._isDragging;
143 },
144 set:function (newVal) {
145 this._isDragging = newVal;
146 }
147
148 },
135 149
136 150
137 draw:{ 151 draw:{
138 value:function () { 152 value:function () {
139 console.log("Tween.draw")
140 this.element.style.left = this.spanPosition + "px"; 153 this.element.style.left = this.spanPosition + "px";
141 this.keyframe.position = this.spanWidth; 154 this.keyframe.position = this.spanWidth;
142 this.tweenspan.spanWidth = this.spanWidth; 155 this.tweenspan.spanWidth = this.spanWidth;
@@ -148,7 +161,6 @@ var Tween = exports.Tween = Montage.create(Component, {
148 161
149 setData:{ 162 setData:{
150 value:function(){ 163 value:function(){
151 console.log("Tween.setData")
152 this.spanWidth = this.tweenData.spanWidth; 164 this.spanWidth = this.tweenData.spanWidth;
153 this.keyFramePosition = this.tweenData.keyFramePosition; 165 this.keyFramePosition = this.tweenData.keyFramePosition;
154 this.spanPosition = this.tweenData.spanPosition; 166 this.spanPosition = this.tweenData.spanPosition;