diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 69 |
1 files changed, 25 insertions, 44 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 0d189fba..6b940c91 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -11,6 +11,7 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | |||
11 | 11 | ||
12 | var Tween = exports.Tween = Montage.create(Component, { | 12 | var Tween = exports.Tween = Montage.create(Component, { |
13 | 13 | ||
14 | // ==== Begin Models | ||
14 | keyframe: { | 15 | keyframe: { |
15 | value: null, | 16 | value: null, |
16 | serializable: true | 17 | serializable: true |
@@ -184,6 +185,23 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
184 | } | 185 | } |
185 | }, | 186 | }, |
186 | 187 | ||
188 | setData:{ | ||
189 | value:function(){ | ||
190 | this.spanWidth = this.tweenData.spanWidth; | ||
191 | this.keyFramePosition = this.tweenData.keyFramePosition; | ||
192 | this.spanPosition = this.tweenData.spanPosition; | ||
193 | this.keyFrameMillisec = this.tweenData.keyFrameMillisec; | ||
194 | this.tweenID = this.tweenData.tweenID; | ||
195 | this.tweenedProperties = this.tweenData.tweenedProperties; | ||
196 | this.isTweenAnimated = this.tweenData.isTweenAnimated; | ||
197 | this.easing = this.tweenData.easing; | ||
198 | this.initSelect = this.tweenData.initSelect; | ||
199 | this.needsDraw = true; | ||
200 | } | ||
201 | }, | ||
202 | // ==== End Models | ||
203 | |||
204 | // ==== Begin Draw cycle methods | ||
187 | prepareForDraw:{ | 205 | prepareForDraw:{ |
188 | value:function(){ | 206 | value:function(){ |
189 | if(this.initSelect){ | 207 | if(this.initSelect){ |
@@ -206,37 +224,19 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
206 | } | 224 | } |
207 | } | 225 | } |
208 | }, | 226 | }, |
227 | // ==== End Draw cycle methods | ||
209 | 228 | ||
210 | setData:{ | 229 | // ==== Begin Event handlers |
211 | value:function(){ | ||
212 | this.spanWidth = this.tweenData.spanWidth; | ||
213 | this.keyFramePosition = this.tweenData.keyFramePosition; | ||
214 | this.spanPosition = this.tweenData.spanPosition; | ||
215 | this.keyFrameMillisec = this.tweenData.keyFrameMillisec; | ||
216 | this.tweenID = this.tweenData.tweenID; | ||
217 | this.tweenedProperties = this.tweenData.tweenedProperties; | ||
218 | this.isTweenAnimated = this.tweenData.isTweenAnimated; | ||
219 | this.easing = this.tweenData.easing; | ||
220 | this.initSelect = this.tweenData.initSelect; | ||
221 | this.needsDraw = true; | ||
222 | } | ||
223 | }, | ||
224 | |||
225 | handleElementChange:{ | 230 | handleElementChange:{ |
226 | value:function (event) { | 231 | value:function (event) { |
227 | // temp - testing var | ||
228 | var useAbsolute = true; | ||
229 | |||
230 | if(event.detail.type === "cssChange"){ | 232 | if(event.detail.type === "cssChange"){ |
231 | event.detail.source="cssPanelChange" | 233 | event.detail.source="cssPanelChange" |
232 | } | 234 | } |
233 | |||
234 | if (event.detail.source && event.detail.source !== "tween") { | 235 | if (event.detail.source && event.detail.source !== "tween") { |
235 | 236 | ||
236 | if(this.parentComponent.parentComponent.isSubproperty){ | 237 | if(this.parentComponent.parentComponent.isSubproperty){ |
237 | this.setStyleTweenProperty(event.detail); | 238 | this.setStyleTweenProperty(event.detail); |
238 | } else { | 239 | } else { |
239 | // check for correct element selection | ||
240 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { | 240 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
241 | console.log("Wrong element selected for this keyframe track"); | 241 | console.log("Wrong element selected for this keyframe track"); |
242 | } else { | 242 | } else { |
@@ -246,10 +246,11 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
246 | } | 246 | } |
247 | } | 247 | } |
248 | }, | 248 | }, |
249 | // ==== End Event handlers | ||
249 | 250 | ||
251 | // ==== Begin Controllers | ||
250 | setTweenProperties:{ | 252 | setTweenProperties:{ |
251 | value:function (eventDetail) { | 253 | value:function (eventDetail) { |
252 | |||
253 | if (eventDetail.source === "SelectionTool" || eventDetail.source === "timeline" || eventDetail.source === "pi" || eventDetail.source === "cssPanelChange") { | 254 | if (eventDetail.source === "SelectionTool" || eventDetail.source === "timeline" || eventDetail.source === "pi" || eventDetail.source === "cssPanelChange") { |
254 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 255 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
255 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; | 256 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; |
@@ -263,7 +264,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
263 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 264 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
264 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; | 265 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; |
265 | } | 266 | } |
266 | // tell track to update css rule | 267 | |
267 | this.parentComponent.parentComponent.updateKeyframeRule(); | 268 | this.parentComponent.parentComponent.updateKeyframeRule(); |
268 | this.isTweenAnimated = true; | 269 | this.isTweenAnimated = true; |
269 | } | 270 | } |
@@ -281,26 +282,17 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
281 | 282 | ||
282 | setStyleTweenProperty:{ | 283 | setStyleTweenProperty:{ |
283 | value:function (eventDetail) { | 284 | value:function (eventDetail) { |
284 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); | ||
285 | //console.log(eventDetail); | ||
286 | if(eventDetail.type == "setProperties"){ | 285 | if(eventDetail.type == "setProperties"){ |
287 | // need to ignore top, left, width, and height | ||
288 | //console.log(eventDetail.data.value[0]); | ||
289 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | 286 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; |
290 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 287 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
291 | |||
292 | } else if(eventDetail.type == "setColor"){ | 288 | } else if(eventDetail.type == "setColor"){ |
293 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | 289 | var prop = this.parentComponent.parentComponent.trackEditorProperty; |
294 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; | 290 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; |
295 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 291 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
296 | |||
297 | } else if(eventDetail.type == "setProperty"){ | 292 | } else if(eventDetail.type == "setProperty"){ |
298 | // need to ignore top, left, width, and height | ||
299 | //console.log(eventDetail.data.value[0]); | ||
300 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | 293 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; |
301 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 294 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
302 | 295 | } else { | |
303 | }else { | ||
304 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); | 296 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); |
305 | } | 297 | } |
306 | } | 298 | } |
@@ -308,7 +300,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
308 | 300 | ||
309 | setKeyframeEase:{ | 301 | setKeyframeEase:{ |
310 | value:function(easeType){ | 302 | value:function(easeType){ |
311 | // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) | ||
312 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; | 303 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; |
313 | if(this.parentComponent.parentComponent.isSubproperty){ | 304 | if(this.parentComponent.parentComponent.isSubproperty){ |
314 | if(this.parentComponent.parentComponent.trackType == "position"){ | 305 | if(this.parentComponent.parentComponent.trackType == "position"){ |
@@ -323,18 +314,11 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
323 | 314 | ||
324 | selectTween:{ | 315 | selectTween:{ |
325 | value: function(){ | 316 | value: function(){ |
326 | // turn on event listener for element change | ||
327 | this.eventManager.addEventListener("elementChange", this, false); | 317 | this.eventManager.addEventListener("elementChange", this, false); |
328 | |||
329 | // select the containing layer | ||
330 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); | 318 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); |
331 | this.application.ninja.timeline.selectLayer(selectIndex, true); | 319 | this.application.ninja.timeline.selectLayer(selectIndex, true); |
332 | |||
333 | // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline | ||
334 | this.application.ninja.timeline.deselectTweens(); | 320 | this.application.ninja.timeline.deselectTweens(); |
335 | this.application.ninja.timeline.selectedTweens.push(this); | 321 | this.application.ninja.timeline.selectedTweens.push(this); |
336 | |||
337 | // update playhead position and time text | ||
338 | this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; | 322 | this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; |
339 | this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px"; | 323 | this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px"; |
340 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 324 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
@@ -342,13 +326,11 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
342 | this.application.ninja.timeline.updateTimeText(currentMillisec); | 326 | this.application.ninja.timeline.updateTimeText(currentMillisec); |
343 | 327 | ||
344 | if(this.parentComponent.parentComponent.isSubproperty){ | 328 | if(this.parentComponent.parentComponent.isSubproperty){ |
345 | // set property specific style on element | ||
346 | var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; | 329 | var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; |
347 | var el = this.parentComponent.parentComponent.animatedElement; | 330 | var el = this.parentComponent.parentComponent.animatedElement; |
348 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | 331 | var prop = this.parentComponent.parentComponent.trackEditorProperty; |
349 | this.application.ninja.elementMediator.setProperty([el], prop, [currentValue], "Change", "tween"); | 332 | this.application.ninja.elementMediator.setProperty([el], prop, [currentValue], "Change", "tween"); |
350 | } else { | 333 | } else { |
351 | // move animated element to correct position on stage | ||
352 | var currentTop = this.tweenedProperties["top"]; | 334 | var currentTop = this.tweenedProperties["top"]; |
353 | var currentLeft = this.tweenedProperties["left"]; | 335 | var currentLeft = this.tweenedProperties["left"]; |
354 | var currentWidth = this.tweenedProperties["width"]; | 336 | var currentWidth = this.tweenedProperties["width"]; |
@@ -364,10 +346,9 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
364 | 346 | ||
365 | deselectTween:{ | 347 | deselectTween:{ |
366 | value:function(){ | 348 | value:function(){ |
367 | // turn off event listener for element change | ||
368 | this.eventManager.removeEventListener("elementChange", this, false); | 349 | this.eventManager.removeEventListener("elementChange", this, false); |
369 | // deselect the keyframe for this tween | ||
370 | this.keyframe.deselectKeyframe(); | 350 | this.keyframe.deselectKeyframe(); |
371 | } |