diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel/Tween.js')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 102 |
1 files changed, 69 insertions, 33 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b13a037f..3c0223c1 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -14,12 +14,10 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
14 | }, | 14 | }, |
15 | 15 | ||
16 | _tweenData:{ | 16 | _tweenData:{ |
17 | serializable: true, | ||
18 | value:{} | 17 | value:{} |
19 | }, | 18 | }, |
20 | 19 | ||
21 | tweenData:{ | 20 | tweenData:{ |
22 | serializable: true, | ||
23 | get:function(){ | 21 | get:function(){ |
24 | return this._tweenData; | 22 | return this._tweenData; |
25 | }, | 23 | }, |
@@ -32,7 +30,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
32 | }, | 30 | }, |
33 | 31 | ||
34 | _spanWidth: { | 32 | _spanWidth: { |
35 | serializable: true, | ||
36 | value: 0 | 33 | value: 0 |
37 | }, | 34 | }, |
38 | 35 | ||
@@ -109,7 +106,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
109 | }, | 106 | }, |
110 | 107 | ||
111 | _tweenedProperties:{ | 108 | _tweenedProperties:{ |
112 | serializable: true, | ||
113 | value:[] | 109 | value:[] |
114 | }, | 110 | }, |
115 | 111 | ||
@@ -124,7 +120,6 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
124 | }, | 120 | }, |
125 | 121 | ||
126 | _isTweenAnimated:{ | 122 | _isTweenAnimated:{ |
127 | serializable:true, | ||
128 | value:false | 123 | value:false |
129 | }, | 124 | }, |
130 | 125 | ||
@@ -137,6 +132,20 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
137 | this._isTweenAnimated = value; | 132 | this._isTweenAnimated = value; |
138 | } | 133 | } |
139 | }, | 134 | }, |
135 | |||
136 | _isDragging: { | ||
137 | value: false | ||
138 | }, | ||
139 | isDragging: { | ||
140 | serializable: true, | ||
141 | get:function () { | ||
142 | return this._isDragging; | ||
143 | }, | ||
144 | set:function (newVal) { | ||
145 | this._isDragging = newVal; | ||
146 | } | ||
147 | |||
148 | }, | ||
140 | 149 | ||
141 | 150 | ||
142 | draw:{ | 151 | draw:{ |
@@ -169,50 +178,41 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
169 | var useAbsolute = true; | 178 | var useAbsolute = true; |
170 | 179 | ||
171 | if (event.detail.source && event.detail.source !== "tween") { | 180 | if (event.detail.source && event.detail.source !== "tween") { |
172 | // check for correct element selection | 181 | |
173 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { | 182 | if(this.parentComponent.parentComponent.isSubproperty){ |
174 | console.log("Wrong element selected for this keyframe track"); | 183 | this.setStyleTweenProperty(event.detail); |
175 | } else { | 184 | } else { |
176 | if(useAbsolute){ | 185 | // check for correct element selection |
177 | this.setAbsoluteTweenProperties(event.detail); | 186 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
187 | console.log("Wrong element selected for this keyframe track"); | ||
178 | } else { | 188 | } else { |
179 | this.setRelativeTweenProperties(event.detail); | 189 | if (useAbsolute) { |
190 | this.setAbsoluteTweenProperties(event.detail); | ||
191 | } else { | ||
192 | this.setRelativeTweenProperties(event.detail); | ||
193 | } | ||
180 | } | 194 | } |
181 | } | 195 | } |
196 | |||
197 | |||
182 | } | 198 | } |
183 | } | 199 | } |
184 | }, | 200 | }, |
185 | 201 | ||
186 | setAbsoluteTweenProperties:{ | 202 | setAbsoluteTweenProperties:{ |
187 | value:function (eventDetail) { | 203 | value:function (eventDetail) { |
188 | //console.log(eventDetail); | ||
189 | |||
190 | // top | ||
191 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 204 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
192 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | 205 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; |
193 | } | 206 | } |
194 | |||
195 | // left | ||
196 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ | 207 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ |
197 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | 208 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; |
198 | } | 209 | } |
199 | |||
200 | // width | ||
201 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ | 210 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ |
202 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; | 211 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; |
203 | } | 212 | } |
204 | |||
205 | // height | ||
206 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 213 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
207 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; | 214 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; |
208 | } | 215 | } |
209 | |||
210 | // skewX | ||
211 | |||
212 | // skewY | ||
213 | |||
214 | // rotation | ||
215 | |||
216 | // tell track to update css rule | 216 | // tell track to update css rule |
217 | this.parentComponent.parentComponent.updateKeyframeRule(); | 217 | this.parentComponent.parentComponent.updateKeyframeRule(); |
218 | 218 | ||
@@ -228,6 +228,34 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
228 | } | 228 | } |
229 | }, | 229 | }, |
230 | 230 | ||
231 | setStyleTweenProperty:{ | ||
232 | value:function (eventDetail) { | ||
233 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); | ||
234 | //console.log(eventDetail); | ||
235 | |||
236 | if(eventDetail.type == "setProperties"){ | ||
237 | // ignore top, left, width, and height | ||
238 | console.log(eventDetail.data.value[0]); | ||
239 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
240 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
241 | |||
242 | } else if(eventDetail.type == "setColor"){ | ||
243 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | ||
244 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; | ||
245 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
246 | |||
247 | } else if(eventDetail.type == "setProperty"){ | ||
248 | // ignore top, left, width, and height | ||
249 | console.log(eventDetail.data.value[0]); | ||
250 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
251 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
252 | |||
253 | }else { | ||
254 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); | ||
255 | } | ||
256 | } | ||
257 | }, | ||
258 | |||
231 | selectTween:{ | 259 | selectTween:{ |
232 | value: function(){ | 260 | value: function(){ |
233 | // turn on event listener for element change | 261 | // turn on event listener for element change |
@@ -237,7 +265,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
237 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); | 265 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); |
238 | this.application.ninja.timeline.selectLayer(selectIndex, true); | 266 | this.application.ninja.timeline.selectLayer(selectIndex, true); |
239 | 267 | ||
240 | // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline | 268 | // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline |
241 | this.application.ninja.timeline.deselectTweens(); | 269 | this.application.ninja.timeline.deselectTweens(); |
242 | this.application.ninja.timeline.selectedTweens.push(this); | 270 | this.application.ninja.timeline.selectedTweens.push(this); |
243 | 271 | ||
@@ -248,13 +276,21 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
248 | var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; | 276 | var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; |
249 | this.application.ninja.timeline.updateTimeText(currentMillisec); | 277 | this.application.ninja.timeline.updateTimeText(currentMillisec); |
250 | 278 | ||
251 | // move animated element to correct position on stage | 279 | if(this.parentComponent.parentComponent.isSubproperty){ |
252 | var currentTop = this.tweenedProperties["top"] + "px"; | 280 | // set property specific style on element |
253 | var currentLeft = this.tweenedProperties["left"] + "px"; | 281 | } else { |
282 | // move animated element to correct position on stage | ||
283 | var currentTop = this.tweenedProperties["top"] + "px"; | ||
284 | var currentLeft = this.tweenedProperties["left"] + "px"; | ||
285 | var currentWidth = this.tweenedProperties["width"] + "px"; | ||
286 | var currentHeight = this.tweenedProperties["height"] + "px"; | ||
254 | 287 | ||
255 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); | 288 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); |
256 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); | 289 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); |
290 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween"); | ||
291 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween"); | ||
257 | 292 | ||