diff options
author | Valerio Virgillito | 2012-06-20 21:56:18 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-20 21:56:18 -0700 |
commit | c8fc6d15e1570e89243abe527cd149e354f7e11f (patch) | |
tree | f648fa7842f3dc6011da08aaab0bedb445d43b58 /js/panels/Timeline/Tween.reel | |
parent | 392a559e90357d48c910a07617261483b2b45476 (diff) | |
parent | 58bca4771ab1e043cd5c11239c1936a022080096 (diff) | |
download | ninja-c8fc6d15e1570e89243abe527cd149e354f7e11f.tar.gz |
Merge pull request #316 from imix23ways/Timeline-merge-candidate
Timeline merge candidate
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 179 |
1 files changed, 125 insertions, 54 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index dda06028..c0949f93 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -6,6 +6,8 @@ | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
8 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
9 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
10 | |||
9 | 11 | ||
10 | var Tween = exports.Tween = Montage.create(Component, { | 12 | var 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,92 @@ 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 | console.log("setting style tween property") |
210 | this.setStyleTweenProperty(event.detail); | ||
176 | } else { | 211 | } else { |
177 | if(useAbsolute){ | 212 | // check for correct element selection |
178 | this.setAbsoluteTweenProperties(event.detail); | 213 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
214 | console.log("Wrong element selected for this keyframe track"); | ||
179 | } else { | 215 | } else { |
180 | this.setRelativeTweenProperties(event.detail); | 216 | this.setTweenProperties(event.detail); |
181 | } | 217 | } |
182 | } | 218 | } |
183 | } | 219 | } |
184 | } | 220 | } |
185 | }, | 221 | }, |
186 | 222 | ||
187 | setAbsoluteTweenProperties:{ | 223 | setTweenProperties:{ |
188 | value:function (eventDetail) { | 224 | value:function (eventDetail) { |
189 | //console.log(eventDetail); | 225 | if (eventDetail.source === "SelectionTool") { |
190 | 226 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | |
191 | // top | 227 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; |
192 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 228 | } |
193 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | 229 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ |
194 | } | 230 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; |
195 | 231 | } | |
196 | // left | 232 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ |
197 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ | 233 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; |
198 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | 234 | } |
199 | } | 235 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
200 | 236 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; | |
201 | // width | 237 | } |
202 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ | 238 | // tell track to update css rule |
203 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; | 239 | this.parentComponent.parentComponent.updateKeyframeRule(); |
204 | } | 240 | this.isTweenAnimated = true; |
241 | } | ||
242 | |||
243 | if (eventDetail.source === "translateTool") { | ||
244 | var arrMat = eventDetail.data.value[0].properties.mat, | ||
245 | strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; | ||
246 | |||
247 | this.tweenedProperties["-webkit-transform"] = strTweenProperty; | ||
248 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
249 | this.isTweenAnimated = true; | ||
250 | } | ||
251 | } | ||
252 | }, | ||
205 | 253 | ||
206 | // height | 254 | setStyleTweenProperty:{ |
207 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 255 | value:function (eventDetail) { |
208 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; | 256 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); |
257 | //console.log(eventDetail); | ||
258 | if(eventDetail.type == "setProperties"){ | ||
259 | // need to ignore top, left, width, and height | ||
260 | //console.log(eventDetail.data.value[0]); | ||
261 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
262 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
263 | |||
264 | } else if(eventDetail.type == "setColor"){ | ||
265 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | ||
266 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; | ||
267 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
268 | |||
269 | } else if(eventDetail.type == "setProperty"){ | ||
270 | // need to ignore top, left, width, and height | ||
271 | //console.log(eventDetail.data.value[0]); | ||
272 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
273 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
274 | |||
275 | }else { | ||
276 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); | ||
209 | } | 277 | } |
210 | |||
211 | // skewX | ||
212 | |||
213 | // skewY | ||
214 | |||
215 | // rotation | ||
216 | |||
217 | // tell track to update css rule | ||
218 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
219 | |||
220 | // highlight the tween's span | ||
221 | this.tweenspan.highlightSpan(); | ||
222 | this.isTweenAnimated = true; | ||
223 | } | 278 | } |
224 | }, | 279 | }, |
225 | 280 | ||
226 | setRelativeTweenProperties:{ | 281 | setKeyframeEase:{ |
227 | value:function(eventDetail){ | 282 | value:function(easeType){ |
228 | //console.log(eventDetail); | 283 | // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) |
284 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; | ||
285 | if(this.parentComponent.parentComponent.isSubproperty){ | ||
286 | if(this.parentComponent.parentComponent.trackType == "position"){ | ||
287 | return; | ||
288 | } | ||
289 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
290 | } else { | ||
291 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
292 | } | ||
229 | } | 293 | } |
230 | }, | 294 | }, |