diff options
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 83 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 3 |
2 files changed, 84 insertions, 2 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 3a998617..9971933f 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -231,11 +231,28 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
231 | }, | 231 | }, |
232 | 232 | ||
233 | handleNewPropTween:{ | 233 | handleNewPropTween:{ |
234 | value:function(ev){ | 234 | value:function (ev) { |
235 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { | 235 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { |
236 | this.insertPropTween(ev.offsetX); | 236 | this.insertPropTween(ev.offsetX); |
237 | } else { | 237 | } else { |
238 | console.log("Splitting style tweens not yet supported."); | 238 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. |
239 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. | ||
240 | |||
241 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | ||
242 | var findXOffset = function (obj) { | ||
243 | var curleft = 0; | ||
244 | if (obj.offsetParent) { | ||
245 | do { | ||
246 | curleft += (obj.offsetLeft - obj.scrollLeft); | ||
247 | |||
248 | } while (obj = obj.offsetParent); | ||
249 | } | ||
250 | return curleft; | ||
251 | } | ||
252 | var targetElementOffset = findXOffset(ev.currentTarget), | ||
253 | position = event.pageX - targetElementOffset; | ||
254 | |||
255 | this.splitPropTweenAt(position - 18); | ||
239 | } | 256 | } |
240 | } | 257 | } |
241 | }, | 258 | }, |
@@ -324,6 +341,68 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
324 | } | 341 | } |
325 | }, | 342 | }, |
326 | 343 | ||
344 | // splitTweenAt: Split a tween at a particular position (x coordinate) | ||
345 | splitPropTweenAt:{ | ||
346 | value:function (position) { | ||
347 | var i, j, nextComponentIndex, | ||
348 | tweensLength = this.propTweens.length - 1, | ||
349 | prevTween, | ||
350 | nextTween, | ||
351 | splitTweenIndex; | ||
352 | |||
353 | // Search through the tweens and find the pair whose keyframes bracket position. | ||
354 | for (i = 0; i < tweensLength; i++) { | ||
355 | prevTween = this.propTweens[i].tweenData.keyFramePosition; | ||
356 | nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; | ||
357 | if (position > prevTween && position < nextTween) { | ||
358 | |||
359 | // We will insert a new tween at this index | ||
360 | splitTweenIndex = i + 1; | ||
361 | |||
362 | // Update the next tween to have new span position and width. | ||
363 | this.propTweens[i + 1].tweenData.spanPosition = position; | ||
364 | this.propTweens[i + 1].spanPosition = position; | ||
365 | this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; | ||
366 | this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; | ||
367 | |||
368 | // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? | ||
369 | // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. | ||
370 | // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. | ||
371 | for (j = 0; j < tweensLength + 1; j++) { | ||
372 | if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { | ||
373 | nextComponentIndex = j; | ||
374 | } | ||
375 | } | ||
376 | this.propTweenRepetition.childComponents[nextComponentIndex].setData(); | ||
377 | |||
378 | // Create the new tween and splice it into the model | ||
379 | var newTweenToInsert = {}; | ||
380 | newTweenToInsert.tweenData = {}; | ||
381 | newTweenToInsert.tweenData.spanWidth = position - prevTween; | ||
382 | newTweenToInsert.tweenData.keyFramePosition = position; | ||
383 | newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position; | ||
384 | newTweenToInsert.tweenData.tweenID = this.propTweens.length; | ||
385 | newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth; | ||
386 | newTweenToInsert.tweenData.tweenedProperties = []; | ||
387 | newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
388 | this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); | ||
389 | |||
390 | // We are done, so end the loop. | ||
391 | i = tweensLength; | ||
392 | } | ||
393 | } | ||
394 | |||
395 | // We've made a change, so set the needsSave flag | ||
396 | this.application.ninja.currentDocument.model.needsSave = true; | ||
397 | |||
398 | // Our tween IDs are now all messed up. Fix them. | ||
399 | for (i = 0; i <= tweensLength + 1; i++) { | ||
400 | this.propTweens[i].tweenID = i; | ||
401 | this.propTweens[i].tweenData.tweenID = i; | ||
402 | } | ||
403 | } | ||
404 | }, | ||
405 | |||
327 | retrieveStoredStyleTweens:{ | 406 | retrieveStoredStyleTweens:{ |
328 | value:function(){ | 407 | value:function(){ |
329 | var percentValue, fraction, splitValue; | 408 | var percentValue, fraction, splitValue; |
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index dcc139a5..db368caf 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -271,6 +271,9 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
271 | // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) | 271 | // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) |
272 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; | 272 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; |
273 | if(this.parentComponent.parentComponent.isSubproperty){ | 273 | if(this.parentComponent.parentComponent.isSubproperty){ |
274 | if(this.parentComponent.parentComponent.trackType == "position"){ | ||
275 | return; | ||
276 | } | ||
274 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 277 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
275 | } else { | 278 | } else { |
276 | this.parentComponent.parentComponent.updateKeyframeRule(); | 279 | this.parentComponent.parentComponent.updateKeyframeRule(); |