diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel/Tween.js')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 153 |
1 files changed, 88 insertions, 65 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index ad022fa9..c9b59253 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -36,6 +36,7 @@ var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | |||
36 | 36 | ||
37 | var Tween = exports.Tween = Montage.create(Component, { | 37 | var Tween = exports.Tween = Montage.create(Component, { |
38 | 38 | ||
39 | // ==== Begin Models | ||
39 | keyframe: { | 40 | keyframe: { |
40 | value: null, | 41 | value: null, |
41 | serializable: true | 42 | serializable: true |
@@ -195,17 +196,17 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
195 | 196 | ||
196 | }, | 197 | }, |
197 | 198 | ||
198 | draw:{ | 199 | _initSelect:{ |
199 | value:function () { | 200 | value: null |
200 | this.tweenspan.element.style.width = this.spanWidth + "px"; | 201 | }, |
201 | this.keyframe.element.style.left = (this.spanWidth -5) + "px"; | 202 | initSelect:{ |
202 | this.tweenspan.spanWidth = this.spanWidth; | 203 | serializable:true, |
203 | this.element.style.left = this.spanPosition + "px"; | 204 | get:function () { |
204 | this.keyframe.position = this.spanWidth; | 205 | return this._initSelect; |
205 | this.tweenspan.easing = this.easing; | 206 | }, |
206 | if(this.isTweenAnimated){ | 207 | set:function (newVal) { |
207 | this.tweenspan.highlightSpan(); | 208 | this._initSelect = newVal; |
208 | } | 209 | this.tweenData.initSelect = newVal; |
209 | } | 210 | } |
210 | }, | 211 | }, |
211 | 212 | ||
@@ -219,25 +220,54 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
219 | this.tweenedProperties = this.tweenData.tweenedProperties; | 220 | this.tweenedProperties = this.tweenData.tweenedProperties; |
220 | this.isTweenAnimated = this.tweenData.isTweenAnimated; | 221 | this.isTweenAnimated = this.tweenData.isTweenAnimated; |
221 | this.easing = this.tweenData.easing; | 222 | this.easing = this.tweenData.easing; |
223 | this.initSelect = this.tweenData.initSelect; | ||
222 | this.needsDraw = true; | 224 | this.needsDraw = true; |
223 | } | 225 | } |
224 | }, | 226 | }, |
227 | // ==== End Models | ||
225 | 228 | ||
229 | // ==== Begin Draw cycle methods | ||
230 | prepareForDraw:{ | ||
231 | value:function(){ | ||
232 | if(this.initSelect){ | ||
233 | // Select our new keyframe only if our parent is a main track. | ||
234 | // TODO: When we decouple all property tracks, this will go away. | ||
235 | if (typeof(this.parentComponent.parentComponent.trackType) === "undefined") { | ||
236 | if (this.tweenID > 0) { | ||
237 | this.keyframe.selectKeyframe(); | ||
238 | } | ||
239 | } | ||
240 | this.initSelect = false; | ||
241 | } | ||
242 | } | ||
243 | }, | ||
244 | |||
245 | draw:{ | ||
246 | value:function () { | ||
247 | this.tweenspan.element.style.width = this.spanWidth + "px"; | ||
248 | this.keyframe.element.style.left = (this.spanWidth -5) + "px"; | ||
249 | this.tweenspan.spanWidth = this.spanWidth; | ||
250 | this.element.style.left = this.spanPosition + "px"; | ||
251 | this.keyframe.position = this.spanWidth; | ||
252 | this.tweenspan.easing = this.easing; | ||
253 | if(this.isTweenAnimated){ | ||
254 | this.tweenspan.highlightSpan(); | ||
255 | } | ||
256 | } | ||
257 | }, | ||
258 | // ==== End Draw cycle methods | ||
259 | |||
260 | // ==== Begin Event handlers | ||
226 | handleElementChange:{ | 261 | handleElementChange:{ |
227 | value:function (event) { | 262 | value:function (event) { |
228 | // temp - testing var | ||
229 | var useAbsolute = true; | ||
230 | |||
231 | if(event.detail.type === "cssChange"){ | 263 | if(event.detail.type === "cssChange"){ |
232 | event.detail.source="cssPanelChange" | 264 | event.detail.source="cssPanelChange" |
233 | } | 265 | } |
234 | |||
235 | if (event.detail.source && event.detail.source !== "tween") { | 266 | if (event.detail.source && event.detail.source !== "tween") { |
236 | 267 | ||
237 | if(this.parentComponent.parentComponent.isSubproperty){ | 268 | if(this.parentComponent.parentComponent.isSubproperty){ |
238 | this.setStyleTweenProperty(event.detail); | 269 | this.setStyleTweenProperty(event.detail); |
239 | } else { | 270 | } else { |
240 | // check for correct element selection | ||
241 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { | 271 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
242 | console.log("Wrong element selected for this keyframe track"); | 272 | console.log("Wrong element selected for this keyframe track"); |
243 | } else { | 273 | } else { |
@@ -247,61 +277,57 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
247 | } | 277 | } |
248 | } | 278 | } |
249 | }, | 279 | }, |
280 | // ==== End Event handlers | ||
250 | 281 | ||
282 | // ==== Begin Controllers | ||
251 | setTweenProperties:{ | 283 | setTweenProperties:{ |
252 | value:function (eventDetail) { | 284 | value:function (eventDetail) { |
253 | 285 | 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") { | 286 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
255 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 287 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; |
256 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; | 288 | } |
257 | } | 289 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ |
258 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ | 290 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; |
259 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; | 291 | } |
260 | } | 292 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ |
261 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ | 293 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; |
262 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; | 294 | } |
263 | } | 295 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
264 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 296 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; |
265 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; | 297 | } |
266 | } | 298 | |
267 | // tell track to update css rule | 299 | this.parentComponent.parentComponent.updateKeyframeRule(); |
268 | this.parentComponent.parentComponent.updateKeyframeRule(); | 300 | this.isTweenAnimated = true; |
269 | this.isTweenAnimated = true; | 301 | } |
270 | } | 302 | |
271 | 303 | if(!this.parentComponent.parentComponent.enabled3D){ | |
272 | if (eventDetail.source === "translateTool") { | 304 | this.parentComponent.parentComponent.initial3DforAllTweens(); |
273 | var arrMat = eventDetail.data.value[0].properties.mat, | ||
274 | strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; | ||
275 | |||
276 | this.tweenedProperties["-webkit-transform"] = strTweenProperty; | ||
277 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
278 | this.isTweenAnimated = true; | ||
279 | } | 305 | } |
306 | |||
307 | if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") { | ||
308 | var arrMat = eventDetail.data.value[0].properties.mat, | ||
309 | strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; | ||
310 | |||
311 | this.tweenedProperties["-webkit-transform"] = strTweenProperty; | ||
312 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
313 | this.isTweenAnimated = true; | ||
314 | } | ||
280 | } | 315 | } |
281 | }, | 316 | }, |
282 | 317 | ||
283 | setStyleTweenProperty:{ | 318 | setStyleTweenProperty:{ |
284 | value:function (eventDetail) { | 319 | value:function (eventDetail) { |
285 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); | ||
286 | //console.log(eventDetail); | ||
287 | if(eventDetail.type == "setProperties"){ | 320 | if(eventDetail.type == "setProperties"){ |
288 | // need to ignore top, left, width, and height | ||
289 | //console.log(eventDetail.data.value[0]); | ||
290 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | 321 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; |
291 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 322 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
292 | |||
293 | } else if(eventDetail.type == "setColor"){ | 323 | } else if(eventDetail.type == "setColor"){ |
294 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | 324 | var prop = this.parentComponent.parentComponent.trackEditorProperty; |
295 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; | 325 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; |
296 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 326 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
297 | |||
298 | } else if(eventDetail.type == "setProperty"){ | 327 | } else if(eventDetail.type == "setProperty"){ |
299 | // need to ignore top, left, width, and height | ||
300 | //console.log(eventDetail.data.value[0]); | ||
301 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | 328 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; |
302 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 329 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
303 | 330 | } else { | |
304 | }else { | ||
305 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); | 331 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); |
306 | } | 332 | } |
307 | } | 333 | } |
@@ -309,7 +335,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
309 | 335 | ||
310 | setKeyframeEase:{ | 336 | setKeyfra |