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.js122
1 files changed, 79 insertions, 43 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 8b6826ed..e5288ad9 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -132,7 +132,20 @@ var Tween = exports.Tween = Montage.create(Component, {
132 this._isTweenAnimated = value; 132 this._isTweenAnimated = value;
133 } 133 }
134 }, 134 },
135 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 },
136 149
137 draw:{ 150 draw:{
138 value:function () { 151 value:function () {
@@ -164,62 +177,77 @@ var Tween = exports.Tween = Montage.create(Component, {
164 var useAbsolute = true; 177 var useAbsolute = true;
165 178
166 if (event.detail.source && event.detail.source !== "tween") { 179 if (event.detail.source && event.detail.source !== "tween") {
167 // check for correct element selection 180
168 if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { 181 if(this.parentComponent.parentComponent.isSubproperty){
169 console.log("Wrong element selected for this keyframe track"); 182 this.setStyleTweenProperty(event.detail);
170 } else { 183 } else {
171 if(useAbsolute){ 184 // check for correct element selection
172 this.setAbsoluteTweenProperties(event.detail); 185 if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
186 console.log("Wrong element selected for this keyframe track");
173 } else { 187 } else {
174 this.setRelativeTweenProperties(event.detail); 188 this.setTweenProperties(event.detail);
175 } 189 }
176 } 190 }
177 } 191 }
178 } 192 }
179 }, 193 },
180 194
181 setAbsoluteTweenProperties:{ 195 setTweenProperties:{
182 value:function (eventDetail) { 196 value:function (eventDetail) {
183 //console.log(eventDetail);
184
185 // top
186 if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ 197 if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
187 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; 198 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px";
188 } 199 }
189
190 // left
191 if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ 200 if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
192 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; 201 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px";
193 } 202 }
194
195 // width
196 if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ 203 if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
197 this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; 204 this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px";
198 } 205 }
199
200 // height
201 if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ 206 if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
202 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; 207 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px";
203 } 208 }
204
205 // skewX
206
207 // skewY
208
209 // rotation
210
211 // tell track to update css rule 209 // tell track to update css rule
212 this.parentComponent.parentComponent.updateKeyframeRule(); 210 this.parentComponent.parentComponent.updateKeyframeRule();
213
214 // highlight the tween's span
215 this.tweenspan.highlightSpan();
216 this.isTweenAnimated = true; 211 this.isTweenAnimated = true;
217 } 212 }
218 }, 213 },
219 214
220 setRelativeTweenProperties:{ 215 setStyleTweenProperty:{
221 value:function(eventDetail){ 216 value:function (eventDetail) {
217 //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
222 //console.log(eventDetail); 218 //console.log(eventDetail);
219 if(eventDetail.type == "setProperties"){
220 // need to ignore top, left, width, and height
221 //console.log(eventDetail.data.value[0]);
222 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
223 this.parentComponent.parentComponent.updatePropKeyframeRule();
224
225 } else if(eventDetail.type == "setColor"){
226 var prop = this.parentComponent.parentComponent.trackEditorProperty;
227 this.tweenedProperties[prop] = eventDetail.data.value.color.css;
228 this.parentComponent.parentComponent.updatePropKeyframeRule();
229
230 } else if(eventDetail.type == "setProperty"){
231 // need to ignore top, left, width, and height
232 //console.log(eventDetail.data.value[0]);
233 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
234 this.parentComponent.parentComponent.updatePropKeyframeRule();
235
236 }else {
237 console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type);
238 }
239 }
240 },
241
242 setKeyframeEase:{
243 value:function(easeType){
244 // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)
245 this.tweenedProperties["-webkit-animation-timing-function"] = easeType;
246 if(this.parentComponent.parentComponent.isSubproperty){
247 this.parentComponent.parentComponent.updatePropKeyframeRule();
248 } else {
249 this.parentComponent.parentComponent.updateKeyframeRule();
250 }
223 } 251 }
224 }, 252 },
225 253
@@ -232,7 +260,7 @@ var Tween = exports.Tween = Montage.create(Component, {
232 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); 260 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
233 this.application.ninja.timeline.selectLayer(selectIndex, true); 261 this.application.ninja.timeline.selectLayer(selectIndex, true);
234 262
235 // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline 263 // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline
236 this.application.ninja.timeline.deselectTweens(); 264 this.application.ninja.timeline.deselectTweens();
237 this.application.ninja.timeline.selectedTweens.push(this); 265 this.application.ninja.timeline.selectedTweens.push(this);
238 266
@@ -243,13 +271,23 @@ var Tween = exports.Tween = Montage.create(Component, {
243 var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; 271 var currentMillisec = currentMillisecPerPixel * this.keyFramePosition;
244 this.application.ninja.timeline.updateTimeText(currentMillisec); 272 this.application.ninja.timeline.updateTimeText(currentMillisec);
245 273
246 // move animated element to correct position on stage 274 if(this.parentComponent.parentComponent.isSubproperty){
247 var currentTop = this.tweenedProperties["top"] + "px"; 275 // set property specific style on element
248 var currentLeft = this.tweenedProperties["left"] + "px"; 276 var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty];
249 277 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween");
250 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); 278 console.log(currentValue);
251 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); 279 } else {
252 280 // move animated element to correct position on stage
281 var currentTop = this.tweenedProperties["top"];
282 var currentLeft = this.tweenedProperties["left"];
283 var currentWidth = this.tweenedProperties["width"];
284 var currentHeight = this.tweenedProperties["height"];
285
286 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween");
287 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
288 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");
289 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");
290 }
253 } 291 }
254 }, 292 },
255 293
@@ -257,10 +295,8 @@ var Tween = exports.Tween = Montage.create(Component, {
257 value:function(){ 295 value:function(){
258 // turn off event listener for element change 296 // turn off event listener for element change
259 this.eventManager.removeEventListener("elementChange", this, false); 297 this.eventManager.removeEventListener("elementChange", this, false);
260
261 // deselect the keyframe for this tween 298 // deselect the keyframe for this tween
262 this.keyframe.deselectKeyframe(); 299 this.keyframe.deselectKeyframe();
263 } 300 }
264 } 301 }
265
266}); 302});