diff options
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel')
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 120 |
1 files changed, 42 insertions, 78 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 6c68fa63..24fd8392 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -33,33 +33,11 @@ var Component = require("montage/ui/component").Component; | |||
33 | 33 | ||
34 | var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | 34 | var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { |
35 | 35 | ||
36 | /* ===- Begin Models ==== */ | ||
36 | hasTemplate:{ | 37 | hasTemplate:{ |
37 | value: true | 38 | value: true |
38 | }, | 39 | }, |
39 | 40 | ||
40 | prepareForDraw:{ | ||
41 | value:function(){ | ||
42 | this.element.addEventListener("click", this, false); | ||
43 | this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; | ||
44 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; | ||
45 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
46 | } | ||
47 | }, | ||
48 | |||
49 | draw:{ | ||
50 | value:function(){ | ||
51 | |||
52 | } | ||
53 | }, | ||
54 | |||
55 | didDraw:{ | ||
56 | value:function () { | ||
57 | if(this.currentKeyframeRule){ | ||
58 | this.retrieveStoredStyleTweens(); | ||
59 | } | ||
60 | } | ||
61 | }, | ||
62 | |||
63 | trackEditorProperty:{ | 41 | trackEditorProperty:{ |
64 | value:"" | 42 | value:"" |
65 | }, | 43 | }, |
@@ -75,7 +53,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
75 | _propTweenRepetition:{ | 53 | _propTweenRepetition:{ |
76 | value:null | 54 | value:null |
77 | }, | 55 | }, |
78 | |||
79 | propTweenRepetition:{ | 56 | propTweenRepetition:{ |
80 | get:function () { | 57 | get:function () { |
81 | return this._propTweenRepetition; | 58 | return this._propTweenRepetition; |
@@ -88,7 +65,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
88 | _propTweens:{ | 65 | _propTweens:{ |
89 | value:[] | 66 | value:[] |
90 | }, | 67 | }, |
91 | |||
92 | propTweens:{ | 68 | propTweens:{ |
93 | serializable:true, | 69 | serializable:true, |
94 | get:function () { | 70 | get:function () { |
@@ -102,7 +78,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
102 | _propTrackData:{ | 78 | _propTrackData:{ |
103 | value:false | 79 | value:false |
104 | }, | 80 | }, |
105 | |||
106 | propTrackData:{ | 81 | propTrackData:{ |
107 | serializable:true, | 82 | serializable:true, |
108 | get:function () { | 83 | get:function () { |
@@ -139,7 +114,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
139 | _trackID:{ | 114 | _trackID:{ |
140 | value:null | 115 | value:null |
141 | }, | 116 | }, |
142 | |||
143 | trackID:{ | 117 | trackID:{ |
144 | serializable:true, | 118 | serializable:true, |
145 | get:function () { | 119 | get:function () { |
@@ -155,7 +129,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
155 | _trackType:{ | 129 | _trackType:{ |
156 | value:null | 130 | value:null |
157 | }, | 131 | }, |
158 | |||
159 | trackType:{ | 132 | trackType:{ |
160 | serializable:true, | 133 | serializable:true, |
161 | get:function () { | 134 | get:function () { |
@@ -171,7 +144,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
171 | _styleIndex:{ | 144 | _styleIndex:{ |
172 | value:null | 145 | value:null |
173 | }, | 146 | }, |
174 | |||
175 | styleIndex:{ | 147 | styleIndex:{ |
176 | serializable:true, | 148 | serializable:true, |
177 | get:function () { | 149 | get:function () { |
@@ -198,36 +170,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
198 | this.needsDraw = true; | 170 | this.needsDraw = true; |
199 | } | 171 | } |
200 | }, | 172 | }, |
173 | /* ===- End Models ==== */ | ||
174 | |||
175 | /* ===- Begin Draw Cycle ==== */ | ||
176 | prepareForDraw:{ | ||
177 | value:function () { | ||
178 | this.element.addEventListener("click", this, false); | ||
179 | this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; | ||
180 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; | ||
181 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
182 | } | ||
183 | }, | ||
184 | |||
185 | didDraw:{ | ||
186 | value:function () { | ||
187 | if (this.currentKeyframeRule) { | ||
188 | this.retrieveStoredStyleTweens(); | ||
189 | } | ||
190 | } | ||
191 | }, | ||
192 | /* ===- End Draw Cycle ==== */ | ||
201 | 193 | ||
194 | /* ===- Begin Event Handlers ==== */ | ||
202 | handleClick:{ | 195 | handleClick:{ |
203 | value:function (ev) { | 196 | value:function (ev) { |
204 | if (ev.shiftKey) { | 197 | if (ev.shiftKey) { |
205 | |||
206 | if (this.trackType == "position") { | 198 | if (this.trackType == "position") { |
207 | this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); | 199 | this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); |
208 | } | 200 | } |
209 | |||
210 | if (this.propTweens.length < 1) { | 201 | if (this.propTweens.length < 1) { |
211 | |||
212 | // check if there is an editor property assigned yet | ||
213 | // get this property track's editor prop name from layer data arrays | ||
214 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), | 202 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), |
215 | currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); | 203 | currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); |
216 | 204 | ||
217 | if (this.trackType == "style") { | 205 | if (this.trackType == "style") { |
218 | //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) | 206 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { |
219 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { | ||
220 | console.log("Please enter a style property for this track before adding keyframes."); | 207 | console.log("Please enter a style property for this track before adding keyframes."); |
221 | return; | 208 | return; |
222 | } else { | 209 | } else { |
223 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; | 210 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; |
224 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | ||
225 | } | 211 | } |
226 | this.insertPropTween(0); | 212 | this.insertPropTween(0); |
227 | this.addPropAnimationRuleToElement(ev); | 213 | this.addPropAnimationRuleToElement(ev); |
228 | this.updatePropKeyframeRule(); | 214 | this.updatePropKeyframeRule(); |
229 | } else if (this.trackType == "position") { | 215 | } else if (this.trackType == "position") { |
230 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | 216 | |
231 | } | 217 | } |
232 | } else { | 218 | } else { |
233 | this.handleNewPropTween(ev); | 219 | this.handleNewPropTween(ev); |
@@ -238,31 +224,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
238 | } | 224 | } |
239 | } | 225 | } |
240 | }, | 226 | }, |
241 | |||
242 | getCurrentSelectedStyleIndex: { | ||
243 | value: function(layerIndex) { | ||
244 | var returnVal = false, | ||
245 | i = 0, | ||
246 | arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; | ||
247 | for (i = 0; i < arrLayerStylesLength; i++) { | ||
248 | var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; | ||
249 | if (currItem.isSelected === true) { | ||
250 | returnVal = i; | ||
251 | } | ||
252 | } | ||
253 | return returnVal; | ||
254 | } | ||
255 | }, | ||
256 | 227 | ||
257 | handleNewPropTween:{ | 228 | handleNewPropTween:{ |
258 | value:function (ev) { | 229 | value:function (ev) { |
259 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { | 230 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { |
260 | this.insertPropTween(ev.offsetX); | 231 | this.insertPropTween(ev.offsetX); |
261 | } else { | 232 | } else { |
262 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. | ||
263 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. | ||
264 | |||
265 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | ||
266 | var findXOffset = function (obj) { |