aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Tween.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js145
1 files changed, 79 insertions, 66 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index ad022fa9..0f567fbd 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
37var Tween = exports.Tween = Montage.create(Component, { 37var 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
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 },
225 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,53 @@ 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 (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") {
272 if (eventDetail.source === "translateTool") { 304 var arrMat = eventDetail.data.value[0].properties.mat,
273 var arrMat = eventDetail.data.value[0].properties.mat, 305 strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")";
274 strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; 306
275 307 this.tweenedProperties["-webkit-transform"] = strTweenProperty;
276 this.tweenedProperties["-webkit-transform"] = strTweenProperty; 308 this.parentComponent.parentComponent.updateKeyframeRule();
277 this.parentComponent.parentComponent.updateKeyframeRule(); 309 this.isTweenAnimated = true;
278 this.isTweenAnimated = true; 310 }
279 }
280 } 311 }
281 }, 312 },
282 313
283 setStyleTweenProperty:{ 314 setStyleTweenProperty:{
284 value:function (eventDetail) { 315 value:function (eventDetail) {
285 //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
286 //console.log(eventDetail);
287 if(eventDetail.type == "setProperties"){ 316 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]; 317 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
291 this.parentComponent.parentComponent.updatePropKeyframeRule(); 318 this.parentComponent.parentComponent.updatePropKeyframeRule();
292
293 } else if(eventDetail.type == "setColor"){ 319 } else if(eventDetail.type == "setColor"){
294 var prop = this.parentComponent.parentComponent.trackEditorProperty; 320 var prop = this.parentComponent.parentComponent.trackEditorProperty;
295 this.tweenedProperties[prop] = eventDetail.data.value.color.css; 321 this.tweenedProperties[prop] = eventDetail.data.value.color.css;
296 this.parentComponent.parentComponent.updatePropKeyframeRule(); 322 this.parentComponent.parentComponent.updatePropKeyframeRule();
297
298 } else if(eventDetail.type == "setProperty"){ 323 } 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]; 324 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
302 this.parentComponent.parentComponent.updatePropKeyframeRule(); 325 this.parentComponent.parentComponent.updatePropKeyframeRule();
303 326 } else {
304 }else {
305 console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); 327 console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type);
306 } 328 }
307 } 329 }
@@ -309,7 +331,6 @@ var Tween = exports.Tween = Montage.create(Component, {
309 331
310 setKeyframeEase:{ 332 setKeyframeEase:{
311 value:function(easeType){ 333 value:function(easeType){
312 // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)
313 this.tweenedProperties["-webkit-animation-timing-function"] = easeType; 334 this.tweenedProperties["-webkit-animation-timing-function"] = easeType;
314 if(this.parentComponent.parentComponent.isSubproperty){ 335 if(this.parentComponent.parentComponent.isSubproperty){
315 if(this.parentComponent.parentComponent.trackType == "position"){ 336