diff options
Diffstat (limited to 'js/panels/Timeline')
5 files changed, 139 insertions, 30 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; |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 092176dc..89389469 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -702,6 +702,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
702 | returnObj.layerData.currentKeyframeRule = null; | 702 | returnObj.layerData.currentKeyframeRule = null; |
703 | returnObj.layerData.trackPosition = 0; | 703 | returnObj.layerData.trackPosition = 0; |
704 | returnObj.layerData.arrStyleTracks = []; | 704 | returnObj.layerData.arrStyleTracks = []; |
705 | returnObj.layerData.arrPositionTracks = []; | ||
705 | returnObj.layerData.tweens = []; | 706 | returnObj.layerData.tweens = []; |
706 |