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.js179
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
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,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 },
231 295
@@ -238,7 +302,7 @@ var Tween = exports.Tween = Montage.create(Component, {
238 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); 302 var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
239 this.application.ninja.timeline.selectLayer(selectIndex, true); 303 this.application.ninja.timeline.selectLayer(selectIndex, true);