aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJonathan Duran2012-06-19 14:39:30 -0700
committerJonathan Duran2012-06-19 14:39:30 -0700
commit8e2dda460526735b4db2949656aa2e8ac041ad3c (patch)
treed633d1760ed42b91adf22876aa6accc1982e4c73 /js/panels/Timeline
parenta065caf8793cafe5508bffe572ba95e0017840b8 (diff)
downloadninja-8e2dda460526735b4db2949656aa2e8ac041ad3c.tar.gz
prop tween splitting
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js83
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js3
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();