diff options
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js')
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 52 |
1 files changed, 47 insertions, 5 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index f2004b94..fbc3edd0 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -183,16 +183,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
183 | }, | 183 | }, |
184 | 184 | ||
185 | handleClick:{ | 185 | handleClick:{ |
186 | value:function(ev){ | 186 | value:function (ev) { |
187 | if (ev.shiftKey) { | 187 | if (ev.shiftKey) { |
188 | 188 | ||
189 | if (this.trackType == "position") { | ||
190 | this.parentComponent.parentComponent.parentComponent.handleNewTween(ev); | ||
191 | } | ||
192 | |||
189 | if (this.propTweens.length < 1) { | 193 | if (this.propTweens.length < 1) { |
190 | 194 | ||
191 | // check if there is an editor property assigned yet | 195 | // check if there is an editor property assigned yet |
192 | // get this property track's editor prop name from layer data arrays | 196 | // get this property track's editor prop name from layer data arrays |
193 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 197 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
194 | 198 | ||
195 | if (this.trackType === "style") { | 199 | if (this.trackType == "style") { |
196 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { | 200 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { |
197 | console.log("Please enter a style property for this track before adding keyframes."); | 201 | console.log("Please enter a style property for this track before adding keyframes."); |
198 | return; | 202 | return; |
@@ -200,7 +204,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
200 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; | 204 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; |
201 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | 205 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); |
202 | } | 206 | } |
203 | } else if (this.trackType === "position") { | 207 | } else if (this.trackType == "position") { |
204 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | 208 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); |
205 | } | 209 | } |
206 | 210 | ||
@@ -220,9 +224,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
220 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { | 224 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { |
221 | this.insertPropTween(ev.offsetX); | 225 | this.insertPropTween(ev.offsetX); |
222 | } else { | 226 | } else { |
223 | console.log("spitting sub keyframes not yet supported"); | 227 | console.log("Splitting style tweens not yet supported."); |
224 | } | 228 | } |
225 | |||
226 | } | 229 | } |
227 | }, | 230 | }, |
228 | 231 | ||
@@ -266,6 +269,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
266 | } | 269 | } |
267 | }, | 270 | }, |
268 | 271 | ||
272 | splitPropTween:{ | ||
273 | value:function (ev) { | ||
274 | console.log("splitting sub prop tween with new keyframe"); | ||
275 | var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; | ||
276 | var i; | ||
277 | var tweensLength = this.propTweens.length - 1; | ||
278 | var prevTween, nextTween, splitTweenIndex; | ||
279 | for (i = 0; i < tweensLength; i++) { | ||
280 | prevTween = this.propTweens[i].tweenData.keyFramePosition; | ||
281 | nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; | ||
282 | if (clickPos > prevTween && clickPos < nextTween) { | ||
283 | //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); | ||
284 | splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID; | ||
285 | this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos; | ||
286 | this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; | ||
287 | if (ev.target.className != "tween-span") { | ||
288 | // don't set styles on timeline track if event is coming from the track | ||
289 | } else { | ||
290 | ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px"; | ||
291 | ev.target.parentElement.style.left = clickPos + "px"; | ||
292 | ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px"; | ||
293 | } | ||
294 | var newTweenToInsert = {}; | ||
295 | newTweenToInsert.tweenData = {}; | ||
296 | newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; | ||
297 | newTweenToInsert.tweenData.keyFramePosition = clickPos; | ||
298 | newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; | ||
299 | newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; | ||
300 | newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; | ||
301 | newTweenToInsert.tweenData.tweenedProperties = []; | ||
302 | newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
303 | this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); | ||
304 | break; | ||
305 | } | ||
306 | } | ||
307 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
308 | } | ||
309 | }, | ||
310 | |||
269 | retrieveStoredStyleTweens:{ | 311 | retrieveStoredStyleTweens:{ |
270 | value:function(){ | 312 | value:function(){ |
271 | console.log("retrieve style tweens"); | 313 | console.log("retrieve style tweens"); |