aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js69
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
12var Tween = exports.Tween = Montage.create(Component, { 12var 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 }