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