diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel/Tween.js')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 139 |
1 files changed, 96 insertions, 43 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index dda06028..51a9e215 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 | ||
@@ -138,13 +140,41 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
138 | this._isTweenAnimated = value; | 140 | this._isTweenAnimated = value; |
139 | } | 141 | } |
140 | }, | 142 | }, |
141 | 143 | ||
144 | _isDragging: { | ||
145 | value: false | ||
146 | }, | ||
147 | isDragging: { | ||
148 | serializable: true, | ||
149 | get:function () { | ||
150 | return this._isDragging; | ||
151 | }, | ||
152 | set:function (newVal) { | ||
153 | this._isDragging = newVal; | ||
154 | } | ||
155 | |||
156 | }, | ||
157 | |||
158 | _easing: { | ||
159 | value: "ease-in" | ||
160 | }, | ||
161 | easing: { | ||
162 | serializable: true, | ||
163 | get:function () { | ||
164 | return this._easing; | ||
165 | }, | ||
166 | set:function (newVal) { | ||
167 | this._easing = newVal; | ||
168 | } | ||
169 | |||
170 | }, | ||
142 | 171 | ||
143 | draw:{ | 172 | draw:{ |
144 | value:function () { | 173 | value:function () { |
145 | this.element.style.left = this.spanPosition + "px"; | 174 | this.element.style.left = this.spanPosition + "px"; |
146 | this.keyframe.position = this.spanWidth; | 175 | this.keyframe.position = this.spanWidth; |
147 | this.tweenspan.spanWidth = this.spanWidth; | 176 | this.tweenspan.spanWidth = this.spanWidth; |
177 | this.tweenspan.easing = this.easing; | ||
148 | if(this.isTweenAnimated){ | 178 | if(this.isTweenAnimated){ |
149 | this.tweenspan.highlightSpan(); | 179 | this.tweenspan.highlightSpan(); |
150 | } | 180 | } |
@@ -160,6 +190,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
160 | this.tweenID = this.tweenData.tweenID; | 190 | this.tweenID = this.tweenData.tweenID; |
161 | this.tweenedProperties = this.tweenData.tweenedProperties; | 191 | this.tweenedProperties = this.tweenData.tweenedProperties; |
162 | this.isTweenAnimated = this.tweenData.isTweenAnimated; | 192 | this.isTweenAnimated = this.tweenData.isTweenAnimated; |
193 | this.easing = this.tweenData.easing; | ||
163 | this.needsDraw = true; | 194 | this.needsDraw = true; |
164 | } | 195 | } |
165 | }, | 196 | }, |
@@ -170,62 +201,77 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
170 | var useAbsolute = true; | 201 | var useAbsolute = true; |
171 | 202 | ||
172 | if (event.detail.source && event.detail.source !== "tween") { | 203 | if (event.detail.source && event.detail.source !== "tween") { |
173 | // check for correct element selection | 204 | |
174 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { | 205 | if(this.parentComponent.parentComponent.isSubproperty){ |
175 | console.log("Wrong element selected for this keyframe track"); | 206 | this.setStyleTweenProperty(event.detail); |
176 | } else { | 207 | } else { |
177 | if(useAbsolute){ | 208 | // check for correct element selection |
178 | this.setAbsoluteTweenProperties(event.detail); | 209 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
210 | console.log("Wrong element selected for this keyframe track"); | ||
179 | } else { | 211 | } else { |
180 | this.setRelativeTweenProperties(event.detail); | 212 | this.setTweenProperties(event.detail); |
181 | } | 213 | } |
182 | } | 214 | } |
183 | } | 215 | } |
184 | } | 216 | } |
185 | }, | 217 | }, |
186 | 218 | ||
187 | setAbsoluteTweenProperties:{ | 219 | setTweenProperties:{ |
188 | value:function (eventDetail) { | 220 | value:function (eventDetail) { |
189 | //console.log(eventDetail); | ||
190 | |||
191 | // top | ||
192 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ | 221 | if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ |
193 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | 222 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; |
194 | } | 223 | } |
195 | |||
196 | // left | ||
197 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ | 224 | if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ |
198 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | 225 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; |
199 | } | 226 | } |
200 | |||
201 | // width | ||
202 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ | 227 | if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ |
203 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; | 228 | this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; |
204 | } | 229 | } |
205 | |||
206 | // height | ||
207 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ | 230 | if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ |
208 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; | 231 | this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; |
209 | } | 232 | } |
210 | |||
211 | // skewX | ||
212 | |||
213 | // skewY | ||
214 | |||
215 | // rotation | ||
216 | |||
217 | // tell track to update css rule | 233 | // tell track to update css rule |
218 | this.parentComponent.parentComponent.updateKeyframeRule(); | 234 | this.parentComponent.parentComponent.updateKeyframeRule(); |
219 | |||
220 | // highlight the tween's span | ||
221 | this.tweenspan.highlightSpan(); | ||
222 | this.isTweenAnimated = true; | 235 | this.isTweenAnimated = true; |
223 | } | 236 | } |
224 | }, | 237 | }, |
225 | 238 | ||
226 | setRelativeTweenProperties:{ | 239 | setStyleTweenProperty:{ |
227 | value:function(eventDetail){ | 240 | value:function (eventDetail) { |
241 | //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); | ||
228 | //console.log(eventDetail); | 242 | //console.log(eventDetail); |
243 | if(eventDetail.type == "setProperties"){ | ||
244 | // need to ignore top, left, width, and height | ||
245 | //console.log(eventDetail.data.value[0]); | ||
246 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
247 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
248 | |||
249 | } else if(eventDetail.type == "setColor"){ | ||
250 | var prop = this.parentComponent.parentComponent.trackEditorProperty; | ||
251 | this.tweenedProperties[prop] = eventDetail.data.value.color.css; | ||
252 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
253 | |||
254 | } else if(eventDetail.type == "setProperty"){ | ||
255 | // need to ignore top, left, width, and height | ||
256 | //console.log(eventDetail.data.value[0]); | ||
257 | this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; | ||
258 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
259 | |||
260 | }else { | ||
261 | console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); | ||
262 | } | ||
263 | } | ||
264 | }, | ||
265 | |||
266 | setKeyframeEase:{ | ||
267 | value:function(easeType){ | ||
268 | // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) | ||
269 | this.tweenedProperties["-webkit-animation-timing-function"] = easeType; | ||
270 | if(this.parentComponent.parentComponent.isSubproperty){ | ||
271 | this.parentComponent.parentComponent.updatePropKeyframeRule(); | ||
272 | } else { | ||
273 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
274 | } | ||
229 | } | 275 | } |
230 | }, | 276 | }, |
231 | 277 | ||
@@ -238,7 +284,7 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
238 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); | 284 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); |
239 | this.application.ninja.timeline.selectLayer(selectIndex, true); | 285 | this.application.ninja.timeline.selectLayer(selectIndex, true); |
240 | 286 | ||
241 | // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline | 287 | // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline |
242 | this.application.ninja.timeline.deselectTweens(); | 288 | this.application.ninja.timeline.deselectTweens(); |
243 | this.application.ninja.timeline.selectedTweens.push(this); | 289 | this.application.ninja.timeline.selectedTweens.push(this); |
244 | 290 | ||
@@ -249,13 +295,22 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
249 | var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; | 295 | var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; |
250 | this.application.ninja.timeline.updateTimeText(currentMillisec); | 296 | this.application.ninja.timeline.updateTimeText(currentMillisec); |
251 | 297 | ||
252 | // move animated element to correct position on stage | 298 | if(this.parentComponent.parentComponent.isSubproperty){ |
253 | var currentTop = this.tweenedProperties["top"] + "px"; | 299 | // set property specific style on element |
254 | var currentLeft = this.tweenedProperties["left"] + "px"; | 300 | var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; |
255 | 301 | this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween"); | |