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.js110
1 files changed, 71 insertions, 39 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 8b6826ed..de6a8d56 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,73 @@ 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;
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;
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;
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;
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 this.parentComponent.parentComponent.updatePropKeyframeRule();
223 } 247 }
224 }, 248 },
225 249
@@ -232,7 +256,7 @@ var Tween = exports.Tween = Montage.create(Component, {
232 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); 256 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
233 this.application.ninja.timeline.selectLayer(selectIndex, true); 257 this.application.ninja.timeline.selectLayer(selectIndex, true);
234 258
235 // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline 259 // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline
236 this.application.ninja.timeline.deselectTweens(); 260 this.application.ninja.timeline.deselectTweens();
237 this.application.ninja.timeline.selectedTweens.push(this); 261 this.application.ninja.timeline.selectedTweens.push(this);
238 262
@@ -243,13 +267,23 @@ var Tween = exports.Tween = Montage.create(Component, {
243 var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; 267 var currentMillisec = currentMillisecPerPixel * this.keyFramePosition;
244 this.application.ninja.timeline.updateTimeText(currentMillisec); 268 this.application.ninja.timeline.updateTimeText(currentMillisec);
245 269
246 // move animated element to correct position on stage 270 if(this.parentComponent.parentComponent.isSubproperty){
247 var currentTop = this.tweenedProperties["top"] + "px"; 271 // set property specific style on element
248 var currentLeft = this.tweenedProperties["left"] + "px"; 272 var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty];
249 273 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"); 274 console.log(currentValue);
251 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); 275 } else {
252 276 // move animated element to correct position on stage
277 var currentTop = this.tweenedProperties["top"] + "px";
278 var currentLeft = this.tweenedProperties["left"] + "px";
279 var currentWidth = this.tweenedProperties["width"] + "px";
280 var currentHeight = this.tweenedProperties["height"] + "px";
281
282 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween");
283 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween");
284 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween");
285 this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween");
286 }
253 } 287 }
254 }, 288 },
255 289
@@ -257,10 +291,8 @@ var Tween = exports.Tween = Montage.create(Component, {
257 value:function(){ 291 value:function(){
258 // turn off event listener for element change 292 // turn off event listener for element change
259 this.eventManager.removeEventListener("elementChange", this, false); 293 this.eventManager.removeEventListener("elementChange", this, false);
260
261 // deselect the keyframe for this tween 294 // deselect the keyframe for this tween
262 this.keyframe.deselectKeyframe(); 295 this.keyframe.deselectKeyframe();
263 } 296 }
264 } 297 }
265
266}); 298});