aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/PropertyTrack.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js83
1 files changed, 81 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;