diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel/Tween.js')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 87 |
1 files changed, 46 insertions, 41 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 89f18f98..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 |
@@ -170,17 +171,17 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
170 | 171 | ||
171 | }, | 172 | }, |
172 | 173 | ||
173 | draw:{ | 174 | _initSelect:{ |
174 | value:function () { | 175 | value: null |
175 | this.tweenspan.element.style.width = this.spanWidth + "px"; | 176 | }, |
176 | this.keyframe.element.style.left = (this.spanWidth -5) + "px"; | 177 | initSelect:{ |
177 | this.tweenspan.spanWidth = this.spanWidth; | 178 | serializable:true, |
178 | this.element.style.left = this.spanPosition + "px"; | 179 | get:function () { |
179 | this.keyframe.position = this.spanWidth; | 180 | return this._initSelect; |
180 | this.tweenspan.easing = this.easing; | 181 | }, |
181 | if(this.isTweenAnimated){ | 182 | set:function (newVal) { |
182 | this.tweenspan.highlightSpan(); | 183 | this._initSelect = newVal; |
183 | } | 184 | this.tweenData.initSelect = newVal; |
184 | } | 185 | } |
185 | }, | 186 | }, |
186 | 187 | ||
@@ -194,25 +195,48 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
194 | this.tweenedProperties = this.tweenData.tweenedProperties; | 195 | this.tweenedProperties = this.tweenData.tweenedProperties; |
195 | this.isTweenAnimated = this.tweenData.isTweenAnimated; | 196 | this.isTweenAnimated = this.tweenData.isTweenAnimated; |
196 | this.easing = this.tweenData.easing; | 197 | this.easing = this.tweenData.easing; |
198 | this.initSelect = this.tweenData.initSelect; | ||
197 | this.needsDraw = true; | 199 | this.needsDraw = true; |
198 | } | 200 | } |
199 | }, | 201 | }, |
202 | // ==== End Models | ||
203 | |||
204 | // ==== Begin Draw cycle methods | ||
205 | prepareForDraw:{ | ||
206 | value:function(){ | ||
207 | if(this.initSelect){ | ||
208 | this.keyframe.selectKeyframe(); | ||
209 | this.initSelect = false; | ||
210 | } | ||
211 | } | ||
212 | }, | ||
213 | |||
214 | draw:{ | ||
215 | value:function () { | ||
216 | this.tweenspan.element.style.width = this.spanWidth + "px"; | ||
217 | this.keyframe.element.style.left = (this.spanWidth -5) + "px"; | ||
218 | this.tweenspan.spanWidth = this.spanWidth; | ||
219 | this.element.style.left = this.spanPosition + "px"; | ||
220 | this.keyframe.position = this.spanWidth; | ||
221 | this.tweenspan.easing = this.easing; | ||
222 | if(this.isTweenAnimated){ | ||
223 | this.tweenspan.highlightSpan(); | ||
224 | } | ||
225 | } | ||
226 | }, | ||
227 | // ==== End Draw cycle methods | ||
200 | 228 | ||
229 | // ==== Begin Event handlers | ||
201 | handleElementChange:{ | 230 | handleElementChange:{ |
202 | value:function (event) { | 231 | value:function (event) { |
203 | // temp - testing var | ||
204 | var useAbsolute = true; | ||
205 | |||
206 | if(event.detail.type === "cssChange"){ | 232 | if(event.detail.type === "cssChange"){ |
207 | event.detail.source="cssPanelChange" | 233 | event.detail.source="cssPanelChange" |
208 | } | 234 | } |
209 | |||
210 | if (event.detail.source && event.detail.source !== "tween") { | 235 | if (event.detail.source && event.detail.source !== "tween") { |
211 | 236 | ||
212 | if(this.parentComponent.parentComponent.isSubproperty){ | 237 | if(this.parentComponent.parentComponent.isSubproperty){ |
213 | this.setStyleTweenProperty(event.detail); | 238 | this.setStyleTweenProperty(event.detail); |
214 | } else { | 239 | } else { |
215 | // check for correct element selection | ||
216 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { | 240 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
217 | console.log("Wrong element selected for this keyframe track"); | 241 | console.log("Wrong element selected for this keyframe track"); |
218 | } else { | 242 | } else { |
@@ -222,10 +246,11 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
222 | } | 246 | } |
223 | } | 247 | } |
224 | }, | 248 | }, |
249 | // ==== End Event handlers | ||
225 | 250 | ||
251 | // ==== Begin Controllers | ||
226 | setTweenProperties:{ | 252 | setTweenProperties:{ |
227 | value:function (eventDetail) { | 253 | value:function (eventDetail) { |
228 | |||
229 | 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") { |
230 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 255 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
231 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; | 256 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; |
@@ -239,12 +264,12 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
239 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 264 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
240 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; | 265 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; |
241 | } | 266 | } |
242 | // tell track to update css rule | 267 | |
243 | this.parentComponent.parentComponent.updateKeyframeRule(); | 268 | this.parentComponent.parentComponent.updateKeyframeRule(); |
244 | this.isTweenAnimated = true; | 269 | this.isTweenAnimated = true; |
245 | } | 270 | } |
246 | 271 | ||
247 | if (eventDetail.source === "translateTool") { | 272 | if (eventDetail.source === "translateTool" || eventDetail.source === "rotateTool") { |
248 | var arrMat = eventDetail.data.value[0].properties.mat, | 273 | var arrMat = eventDetail.data.value[0].properties.mat, |
249 | strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; | 274 | strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; |
250 | 275 | ||
@@ -257,26 +282,17 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
257 | 282 | ||
258 | setStyleTweenProperty:{ | 283 | setStyleTweenProperty:{ |
259 | value:function (eventDetail) { | 284 | value:function (eventDetail) { |
260 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); | ||
261 | //console.log(eventDetail); | ||
262 | if(eventDetail.type == "setProperties"){ | 285 | if(eventDetail.type == "setProperties"){ |
263 | // need to ignore top, left, width, and height | ||
264 | //console.log(eventDetail.data.value[0]); | ||
265 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | 286 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; |
266 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 287 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
267 | |||
268 | } else if(eventDetail.type == "setColor"){ | 288 | } else if(eventDetail.type == "setColor"){ |
269 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | 289 | var prop = this.parentComponent.parentComponent.trackEditorProperty; |
270 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; | 290 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; |
271 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 291 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
272 | |||
273 | } else if(eventDetail.type == "setProperty"){ | 292 | } else if(eventDetail.type == "setProperty"){ |
274 | // need to ignore top, left, width, and height | ||
275 | //console.log(eventDetail.data.value[0]); | ||
276 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | 293 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; |
277 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | 294 | this.parentComponent.parentComponent.updatePropKeyframeRule(); |
278 | 295 | } else { | |
279 | }else { | ||
280 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); | 296 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); |
281 | } | 297 | } |
282 | } | 298 | } |
@@ -284,7 +300,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
284 | 300 | ||
285 | setKeyframeEase:{ | 301 | setKeyframeEase:{ |
286 | value:function(easeType){ | 302 | value:function(easeType){ |
287 | // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) | ||
288 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; | 303 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; |
289 | if(this.parentComponent.parentComponent.isSubproperty){ | 304 | if(this.parentComponent.parentComponent.isSubproperty){ |
290 | if(this.parentComponent.parentComponent.trackType == "position"){ | 305 | if(this.parentComponent.parentComponent.trackType == "position"){ |
@@ -299,18 +314,11 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
299 | 314 | ||
300 | selectTween:{ | 315 | selectTween:{ |
301 | value: function(){ | 316 | value: function(){ |
302 | // turn on event listener for element change | ||
303 | this.eventManager.addEventListener("elementChange", this, false); | 317 | this.eventManager.addEventListener("elementChange", this, false); |
304 | |||
305 | // select the containing layer | ||
306 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); | 318 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); |
307 | this.application.ninja.timeline.selectLayer(selectIndex, true); | 319 | this.application.ninja.timeline.selectLayer(selectIndex, true); |
308 | |||
309 | // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline | ||
310 | this.application.ninja.timeline.deselectTweens(); | 320 | this.application.ninja.timeline.deselectTweens(); |
311 | this.application.ninja.timeline.selectedTweens.push(this); | 321 | this.application.ninja.timeline.selectedTweens.push(this); |
312 | |||
313 | // update playhead position and time text | ||
314 | this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; | 322 | this.application.ninja.timeline.playhead.style.left = (this.keyFramePosition - 2) + "px"; |
315 | this.application.ninja.timeline.playheadmarker.style.left = this.keyFramePosition + "px"; | 323 |