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.js156
1 files changed, 94 insertions, 62 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index ad022fa9..9ad88a69 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 },
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
225 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,33 +277,47 @@ 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 }
302
303 if(!this.parentComponent.parentComponent.enabled3D){
304 this.parentComponent.parentComponent.initial3DforAllTweens();
270 } 305 }
271 306
272 if (eventDetail.source === "translateTool") { 307 if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") {
273 var arrMat = eventDetail.data.value[0].properties.mat, 308 var arrMat = eventDetail.data.value[0].properties.mat,
274 strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; 309 strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")";
275 310
276 this.tweenedProperties["-webkit-transform"] = strTweenProperty; 311 this.tweenedProperties["-webkit-transform"] = strTweenProperty;
312 this.parentComponent.parentComponent.updateKeyframeRule();
313 this.isTweenAnimated = true;
314 }
315
316 if(eventDetail.source === "pi" && eventDetail.type === "setMatrix"){
317 var piArrMat = eventDetail.data.value,
318 piStrTweenProperty = "perspective(1400) matrix3d(" + piArrMat.join() + ")";
319
320 this.tweenedProperties["-webkit-transform"] = piStrTweenProperty;
277 this.parentComponent.parentComponent.updateKeyframeRule(); 321 this.parentComponent.parentComponent.updateKeyframeRule();
278 this.isTweenAnimated = true; 322 this.isTweenAnimated = true;
279 } 323 }
@@ -282,26 +326,17 @@ var Tween = exports.Tween = Montage.create(Component, {
282 326
283 setStyleTweenProperty:{ 327 setStyleTweenProperty:{
284 value:function (eventDetail) { 328 value:function (eventDetail) {
285 //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
286 //console.log(eventDetail);
287 if(eventDetail.type == "setProperties"){ 329 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]; 330 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
291 this.parentComponent.parentComponent.updatePropKeyframeRule(); 331 this.parentComponent.parentComponent.updatePropKeyframeRule();
292
293 } else if(eventDetail.type == "setColor"){ 332 } else if(eventDetail.type == "setColor"){
294 var prop = this.parentComponent.parentComponent.trackEditorProperty; 333 var prop = this.parentComponent.parentComponent.trackEditorProperty;
295 this.tweenedProperties[prop] = eventDetail.data.value.color.css; 334 this.tweenedProperties[prop] = eventDetail.data.value.color.css;
296 this.parentComponent.parentComponent.updatePropKeyframeRule(); 335 this.parentComponent.parentComponent.updatePropKeyframeRule();
297
298 } else if(eventDetail.type == "setProperty"){ 336 } 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]; 337 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
302 this.parentComponent.parentComponent.updatePropKeyframeRule(); 338 this.parentComponent.parentComponent.updatePropKeyframeRule();
303 339 } else {
304 }else {
305 console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); 340 console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type);
306 } 341 }
307 } 342 }
@@ -309,7 +344,6 @@ var Tween = exports