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.js78
1 files changed, 64 insertions, 14 deletions
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 7339139f..b13a037f 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -6,7 +6,6 @@
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
11var Tween = exports.Tween = Montage.create(Component, { 10var Tween = exports.Tween = Montage.create(Component, {
12 11
@@ -44,6 +43,8 @@ var Tween = exports.Tween = Montage.create(Component, {
44 }, 43 },
45 set: function(value){ 44 set: function(value){
46 this._spanWidth = value; 45 this._spanWidth = value;
46 this.tweenData.spanWidth = value;
47 this.needsDraw=true;
47 } 48 }
48 }, 49 },
49 50
@@ -58,6 +59,8 @@ var Tween = exports.Tween = Montage.create(Component, {
58 }, 59 },
59 set:function (value) { 60 set:function (value) {
60 this._spanPosition = value; 61 this._spanPosition = value;
62 this.tweenData.spanPosition = value;
63 this.needsDraw=true;
61 } 64 }
62 }, 65 },
63 66
@@ -72,6 +75,8 @@ var Tween = exports.Tween = Montage.create(Component, {
72 }, 75 },
73 set:function (value) { 76 set:function (value) {
74 this._keyFramePosition = value; 77 this._keyFramePosition = value;
78 this.tweenData.keyFramePosition = value;
79 this.needsDraw=true;
75 } 80 }
76 }, 81 },
77 82
@@ -133,6 +138,7 @@ var Tween = exports.Tween = Montage.create(Component, {
133 } 138 }
134 }, 139 },
135 140
141
136 draw:{ 142 draw:{
137 value:function () { 143 value:function () {
138 this.element.style.left = this.spanPosition + "px"; 144 this.element.style.left = this.spanPosition + "px";
@@ -159,27 +165,69 @@ var Tween = exports.Tween = Montage.create(Component, {
159 165
160 handleElementChange:{ 166 handleElementChange:{
161 value:function (event) { 167 value:function (event) {
162 168 // temp - testing var
169 var useAbsolute = true;
170
163 if (event.detail.source && event.detail.source !== "tween") { 171 if (event.detail.source && event.detail.source !== "tween") {
164 // check for correct element selection 172 // check for correct element selection
165 if (this.application.ninja.selectedElements[0]!= this.parentComponent.parentComponent.animatedElement) { 173 if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) {
166 console.log("Wrong element selected for this keyframe track"); 174 console.log("Wrong element selected for this keyframe track");
167 } else { 175 } else {
168 // update tweenedProperties and tell containing track to update CSS rule 176 if(useAbsolute){
169 // temp read only top and left. need to change to loop over event details for prop changes generically 177 this.setAbsoluteTweenProperties(event.detail);
170 if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) { 178 } else {
171 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; 179 this.setRelativeTweenProperties(event.detail);
172 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
173 this.parentComponent.parentComponent.updateKeyframeRule();
174 } 180 }
175 // highlight the tween's span
176 this.tweenspan.highlightSpan();
177 this.isTweenAnimated = true;
178 } 181 }
179 } 182 }
180 } 183 }
181 }, 184 },
182 185
186 setAbsoluteTweenProperties:{
187 value:function (eventDetail) {
188 //console.log(eventDetail);
189
190 // top
191 if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){
192 this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop;
193 }
194
195 // left
196 if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){
197 this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft;
198 }
199
200 // width
201 if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){
202 this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth;
203 }
204
205 // height
206 if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){
207 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
208 }
209
210 // skewX
211
212 // skewY
213
214 // rotation
215
216 // tell track to update css rule
217 this.parentComponent.parentComponent.updateKeyframeRule();
218
219 // highlight the tween's span
220 this.tweenspan.highlightSpan();
221 this.isTweenAnimated = true;
222 }
223 },
224
225 setRelativeTweenProperties:{
226 value:function(eventDetail){
227 //console.log(eventDetail);
228 }
229 },
230
183 selectTween:{ 231 selectTween:{
184 value: function(){ 232 value: function(){
185 // turn on event listener for element change 233 // turn on event listener for element change
@@ -203,8 +251,9 @@ var Tween = exports.Tween = Montage.create(Component, {
203 // move animated element to correct position on stage 251 // move animated element to correct position on stage
204 var currentTop = this.tweenedProperties["top"] + "px"; 252 var currentTop = this.tweenedProperties["top"] + "px";
205 var currentLeft = this.tweenedProperties["left"] + "px"; 253 var currentLeft = this.tweenedProperties["left"] + "px";
206 ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); 254
207 ElementsMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); 255 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");
208 257
209 } 258 }
210 }, 259 },
@@ -218,4 +267,5 @@ var Tween = exports.Tween = Montage.create(Component, {
218 this.keyframe.deselectKeyframe(); 267 this.keyframe.deselectKeyframe();
219 } 268 }
220 } 269 }
270
221}); 271});