diff options
Diffstat (limited to 'js/panels/Timeline/Tween.reel')
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 48 |
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 | }); |