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 72d26e78..c4571e9d 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component; | |||
9 | 9 | ||
10 | var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | 10 | var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { |
11 | 11 | ||
12 | /* ===- Begin Models ==== */ | ||
12 | hasTemplate:{ | 13 | hasTemplate:{ |
13 | value: true | 14 | value: true |
14 | }, | 15 | }, |
15 | 16 | ||
16 | prepareForDraw:{ | ||
17 | value:function(){ | ||
18 | this.element.addEventListener("click", this, false); | ||
19 | this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; | ||
20 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; | ||
21 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
22 | } | ||
23 | }, | ||
24 | |||
25 | draw:{ | ||
26 | value:function(){ | ||
27 | |||
28 | } | ||
29 | }, | ||
30 | |||
31 | didDraw:{ | ||
32 | value:function () { | ||
33 | if(this.currentKeyframeRule){ | ||
34 | this.retrieveStoredStyleTweens(); | ||
35 | } | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | trackEditorProperty:{ | 17 | trackEditorProperty:{ |
40 | value:"" | 18 | value:"" |
41 | }, | 19 | }, |
@@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
51 | _propTweenRepetition:{ | 29 | _propTweenRepetition:{ |
52 | value:null | 30 | value:null |
53 | }, | 31 | }, |
54 | |||
55 | propTweenRepetition:{ | 32 | propTweenRepetition:{ |
56 | get:function () { | 33 | get:function () { |
57 | return this._propTweenRepetition; | 34 | return this._propTweenRepetition; |
@@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
64 | _propTweens:{ | 41 | _propTweens:{ |
65 | value:[] | 42 | value:[] |
66 | }, | 43 | }, |
67 | |||
68 | propTweens:{ | 44 | propTweens:{ |
69 | serializable:true, | 45 | serializable:true, |
70 | get:function () { | 46 | get:function () { |
@@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
78 | _propTrackData:{ | 54 | _propTrackData:{ |
79 | value:false | 55 | value:false |
80 | }, | 56 | }, |
81 | |||
82 | propTrackData:{ | 57 | propTrackData:{ |
83 | serializable:true, | 58 | serializable:true, |
84 | get:function () { | 59 | get:function () { |
@@ -115,7 +90,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
115 | _trackID:{ | 90 | _trackID:{ |
116 | value:null | 91 | value:null |
117 | }, | 92 | }, |
118 | |||
119 | trackID:{ | 93 | trackID:{ |
120 | serializable:true, | 94 | serializable:true, |
121 | get:function () { | 95 | get:function () { |
@@ -131,7 +105,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
131 | _trackType:{ | 105 | _trackType:{ |
132 | value:null | 106 | value:null |
133 | }, | 107 | }, |
134 | |||
135 | trackType:{ | 108 | trackType:{ |
136 | serializable:true, | 109 | serializable:true, |
137 | get:function () { | 110 | get:function () { |
@@ -147,7 +120,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
147 | _styleIndex:{ | 120 | _styleIndex:{ |
148 | value:null | 121 | value:null |
149 | }, | 122 | }, |
150 | |||
151 | styleIndex:{ | 123 | styleIndex:{ |
152 | serializable:true, | 124 | serializable:true, |
153 | get:function () { | 125 | get:function () { |
@@ -174,36 +146,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
174 | this.needsDraw = true; | 146 | this.needsDraw = true; |
175 | } | 147 | } |
176 | }, | 148 | }, |
149 | /* ===- End Models ==== */ | ||
150 | |||
151 | /* ===- Begin Draw Cycle ==== */ | ||
152 | prepareForDraw:{ | ||
153 | value:function () { | ||
154 | this.element.addEventListener("click", this, false); | ||
155 | this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; | ||
156 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; | ||
157 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
158 | } | ||
159 | }, | ||
160 | |||
161 | didDraw:{ | ||
162 | value:function () { | ||
163 | if (this.currentKeyframeRule) { | ||
164 | this.retrieveStoredStyleTweens(); | ||
165 | } | ||
166 | } | ||
167 | }, | ||
168 | /* ===- End Draw Cycle ==== */ | ||
177 | 169 | ||
170 | /* ===- Begin Event Handlers ==== */ | ||
178 | handleClick:{ | 171 | handleClick:{ |
179 | value:function (ev) { | 172 | value:function (ev) { |
180 | if (ev.shiftKey) { | 173 | if (ev.shiftKey) { |
181 | |||
182 | if (this.trackType == "position") { | 174 | if (this.trackType == "position") { |
183 | this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); | 175 | this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); |
184 | } | 176 | } |
185 | |||
186 | if (this.propTweens.length < 1) { | 177 | if (this.propTweens.length < 1) { |
187 | |||
188 | // check if there is an editor property assigned yet | ||
189 | // get this property track's editor prop name from layer data arrays | ||
190 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), | 178 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), |
191 | currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); | 179 | currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); |
192 | 180 | ||
193 | if (this.trackType == "style") { | 181 | if (this.trackType == "style") { |
194 | //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) | 182 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { |
195 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { | ||
196 | console.log("Please enter a style property for this track before adding keyframes."); | 183 | console.log("Please enter a style property for this track before adding keyframes."); |
197 | return; | 184 | return; |
198 | } else { | 185 | } else { |
199 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; | 186 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; |
200 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | ||
201 | } | 187 | } |
202 | this.insertPropTween(0); | 188 | this.insertPropTween(0); |
203 | this.addPropAnimationRuleToElement(ev); | 189 | this.addPropAnimationRuleToElement(ev); |
204 | this.updatePropKeyframeRule(); | 190 | this.updatePropKeyframeRule(); |
205 | } else if (this.trackType == "position") { | 191 | } else if (this.trackType == "position") { |
206 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | 192 | |
207 | } | 193 | } |
208 | } else { | 194 | } else { |
209 | this.handleNewPropTween(ev); | 195 | this.handleNewPropTween(ev); |
@@ -214,31 +200,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
214 | } | 200 | } |
215 | } | 201 | } |
216 | }, | 202 | }, |
217 | |||
218 | getCurrentSelectedStyleIndex: { | ||
219 | value: function(layerIndex) { | ||
220 | var returnVal = false, | ||
221 | i = 0, | ||
222 | arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; | ||
223 | for (i = 0; i < arrLayerStylesLength; i++) { | ||
224 | var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; | ||
225 | if (currItem.isSelected === true) { | ||
226 | returnVal = i; | ||
227 | } | ||
228 | } | ||
229 | return returnVal; | ||
230 | } | ||
231 | }, | ||
232 | 203 | ||
233 | handleNewPropTween:{ | 204 | handleNewPropTween:{ |
234 | value:function (ev) { | 205 | value:function (ev) { |
235 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { | 206 | if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { |
236 | this.insertPropTween(ev.offsetX); | 207 | this.insertPropTween(ev.offsetX); |
237 | } else { | 208 | } else { |
238 | // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. | ||
239 | // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. | ||
240 | |||
241 | // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element | ||
242 | var findXOffset = function (obj) { | 209 | var findXOffset = function (obj) { |
243 | var curleft = 0; | 210 | var curleft = 0; |
244 | if (obj.offsetParent) { | 2 |