aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Tween.reel/Tween.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Tween.reel/Tween.js')
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js102
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.parentC