diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 7 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 60 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 16 |
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; |