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.js147
1 files changed, 103 insertions, 44 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index dda06028..db368caf 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -6,6 +6,8 @@
6 6
7var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
9var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
10
9 11
10var Tween = exports.Tween = Montage.create(Component, { 12var Tween = exports.Tween = Montage.create(Component, {
11 13
@@ -108,6 +110,7 @@ var Tween = exports.Tween = Montage.create(Component, {
108 }, 110 },
109 set:function (value) { 111 set:function (value) {
110 this._tweenID = value; 112 this._tweenID = value;
113 this.tweenData.tweenID = value;
111 } 114 }
112 }, 115 },
113 116
@@ -138,13 +141,43 @@ var Tween = exports.Tween = Montage.create(Component, {
138 this._isTweenAnimated = value; 141 this._isTweenAnimated = value;
139 } 142 }
140 }, 143 },
141 144
145 _isDragging: {
146 value: false
147 },
148 isDragging: {
149 serializable: true,
150 get:function () {
151 return this._isDragging;
152 },
153 set:function (newVal) {
154 this._isDragging = newVal;
155 }
156
157 },
158
159 _easing: {
160 value: "none"
161 },
162 easing: {
163 serializable: true,
164 get:function () {
165 return this._easing;
166 },
167 set:function (newVal) {
168 this._easing = newVal;
169 }
170
171 },
142 172
143 draw:{ 173 draw:{
144 value:function () { 174 value:function () {
175 this.tweenspan.element.style.width = this.spanWidth + "px";
176 this.keyframe.element.style.left = (this.spanWidth -5) + "px";
177 this.tweenspan.spanWidth = this.spanWidth;
145 this.element.style.left = this.spanPosition + "px"; 178 this.element.style.left = this.spanPosition + "px";
146 this.keyframe.position = this.spanWidth; 179 this.keyframe.position = this.spanWidth;
147 this.tweenspan.spanWidth = this.spanWidth; 180 this.tweenspan.easing = this.easing;
148 if(this.isTweenAnimated){ 181 if(this.isTweenAnimated){
149 this.tweenspan.highlightSpan(); 182 this.tweenspan.highlightSpan();
150 } 183 }
@@ -160,6 +193,7 @@ var Tween = exports.Tween = Montage.create(Component, {
160 this.tweenID = this.tweenData.tweenID; 193 this.tweenID = this.tweenData.tweenID;
161 this.tweenedProperties = this.tweenData.tweenedProperties; 194 this.tweenedProperties = this.tweenData.tweenedProperties;
162 this.isTweenAnimated = this.tweenData.isTweenAnimated; 195 this.isTweenAnimated = this.tweenData.isTweenAnimated;
196 this.easing = this.tweenData.easing;
163 this.needsDraw = true; 197 this.needsDraw = true;
164 } 198 }
165 }, 199 },
@@ -170,62 +204,80 @@ var Tween = exports.Tween = Montage.create(Component, {
170 var useAbsolute = true; 204 var useAbsolute = true;
171 205
172 if (event.detail.source && event.detail.source !== "tween") { 206 if (event.detail.source && event.detail.source !== "tween") {
173 // check for correct element selection 207
174 if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { 208 if(this.parentComponent.parentComponent.isSubproperty){
175 console.log("Wrong element selected for this keyframe track"); 209 this.setStyleTweenProperty(event.detail);
176 } else { 210 } else {
177 if(useAbsolute){ 211 // check for correct element selection
178 this.setAbsoluteTweenProperties(event.detail); 212 if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
213 console.log("Wrong element selected for this keyframe track");
179 } else { 214 } else {
180 this.setRelativeTweenProperties(event.detail); 215 this.setTweenProperties(event.detail);
181 } 216 }
182 } 217 }
183 } 218 }
184 } 219 }
185 }, 220 },
186 221
187 setAbsoluteTweenProperties:{ 222 setTweenProperties:{
188 value:function (eventDetail) { 223 value:function (eventDetail) {
189 //console.log(eventDetail);
190
191 // top
192 if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ 224 if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
193 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; 225 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px";
194 } 226 }
195
196 // left
197 if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ 227 if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
198 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; 228 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px";
199 } 229 }
200
201 // width
202 if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ 230 if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
203 this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; 231 this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px";
204 } 232 }
205
206 // height
207 if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ 233 if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
208 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; 234 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px";
209 } 235 }
210
211 // skewX
212
213 // skewY
214
215 // rotation
216
217 // tell track to update css rule 236 // tell track to update css rule
218 this.parentComponent.parentComponent.updateKeyframeRule(); 237 this.parentComponent.parentComponent.updateKeyframeRule();
219
220 // highlight the tween's span
221 this.tweenspan.highlightSpan();
222 this.isTweenAnimated = true; 238 this.isTweenAnimated = true;
223 } 239 }
224 }, 240 },
225 241
226 setRelativeTweenProperties:{ 242 setStyleTweenProperty:{
227 value:function(eventDetail){ 243 value:function (eventDetail) {
244 //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty);
228 //console.log(eventDetail); 245 //console.log(eventDetail);
246 if(eventDetail.type == "setProperties"){
247 // need to ignore top, left, width, and height
248 //console.log(eventDetail.data.value[0]);
249 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
250 this.parentComponent.parentComponent.updatePropKeyframeRule();
251
252 } else if(eventDetail.type == "setColor"){
253 var prop = this.parentComponent.parentComponent.trackEditorProperty;
254 this.tweenedProperties[prop] = eventDetail.data.value.color.css;
255 this.parentComponent.parentComponent.updatePropKeyframeRule();
256
257 } else if(eventDetail.type == "setProperty"){
258 // need to ignore top, left, width, and height
259 //console.log(eventDetail.data.value[0]);
260 this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0];
261 this.parentComponent.parentComponent.updatePropKeyframeRule();
262
263 }else {
264 console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type);
265 }
266 }
267 },
268
269 setKeyframeEase:{
270 value:function(easeType){
271 // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)
272 this.tweenedProperties["-webkit-animation-timing-function"] = easeType;
273 if(this.parentComponent.parentComponent.isSubproperty){
274 if(this.parentComponent.parentComponent.trackType == "position"){
275 return;
276 }
277 this.parentComponent.parentComponent.updatePropKeyframeRule();
278 } else {
279 this.parentComponent.parentComponent.updateKeyframeRule();
280 }
229 } 281 }
230 }, 282 },
231 283
@@ -238,7 +290,7 @@ var Tween = exports.Tween = Montage.create(Component, {
238 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); 290 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
239 this.application.ninja.timeline.selectLayer(selectIndex, true); 291 this.application.ninja.timeline.selectLayer(selectIndex, true);
240 292
241 // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline 293 // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline
242 this.application.ninja.timeline.deselectTweens(); 294 this.application.ninja.timeline.deselectTweens();
243 this.application.ninja.timeline.selectedTweens.push(this); 295