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.js107
1 files changed, 93 insertions, 14 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 791239d7..9971933f 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -17,7 +17,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
17 value:function(){ 17 value:function(){
18 this.element.addEventListener("click", this, false); 18 this.element.addEventListener("click", this, false);
19 this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; 19 this.trackID = this.parentComponent.parentComponent.parentComponent.trackID;
20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; 20 this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
21 this.ninjaStylesContoller = this.application.ninja.stylesController; 21 this.ninjaStylesContoller = this.application.ninja.stylesController;
22 } 22 }
23 }, 23 },
@@ -40,10 +40,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
40 value:"" 40 value:""
41 }, 41 },
42 42
43 _propTweenRepetition:{
44 value:null
45 },
46
47 animatedElement:{ 43 animatedElement:{
48 value:null 44 value:null
49 }, 45 },
@@ -52,8 +48,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
52 value:true 48 value:true
53 }, 49 },
54 50
51 _propTweenRepetition:{
52 value:null
53 },
54
55 propTweenRepetition:{ 55 propTweenRepetition:{
56 serializable:true,
57 get:function () { 56 get:function () {
58 return this._propTweenRepetition; 57 return this._propTweenRepetition;
59 }, 58 },
@@ -181,7 +180,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
181 if (ev.shiftKey) { 180 if (ev.shiftKey) {
182 181
183 if (this.trackType == "position") { 182 if (this.trackType == "position") {
184 this.parentComponent.parentComponent.parentComponent.handleNewTween(ev); 183 this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
185 } 184 }
186 185
187 if (this.propTweens.length < 1) { 186 if (this.propTweens.length < 1) {
@@ -200,16 +199,17 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
200 this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; 199 this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty;
201 //console.log("Property track editorProperty set to: " + this.trackEditorProperty); 200 //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
202 } 201 }
202 this.insertPropTween(0);
203 this.addPropAnimationRuleToElement(ev);
204 this.updatePropKeyframeRule();
203 } else if (this.trackType == "position") { 205 } else if (this.trackType == "position") {
204 //console.log("Property track editorProperty set to: " + this.trackEditorProperty); 206 //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
205 } 207 }
206
207 this.insertPropTween(0);
208 this.addPropAnimationRuleToElement(ev);
209 this.updatePropKeyframeRule();
210 } else { 208 } else {
211 this.handleNewPropTween(ev); 209 this.handleNewPropTween(ev);
212 this.updatePropKeyframeRule(); 210 if (this.trackType == "style") {
211 this.updatePropKeyframeRule();
212 }
213 } 213 }
214 } 214 }
215 } 215 }
@@ -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;