diff options
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 236 | ||||
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 45 | ||||
-rw-r--r-- | js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html | 30 | ||||
-rw-r--r-- | js/panels/Timeline/TrackSpacer.reel/TrackSpacer.js | 21 | ||||
-rw-r--r-- | js/panels/Timeline/TrackSpacer.reel/css/TrackSpacer.css | 11 |
5 files changed, 124 insertions, 219 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 72d26e78..752340bb 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -13,41 +13,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
13 | value: true | 13 | value: true |
14 | }, | 14 | }, |
15 | 15 | ||
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:{ | ||
40 | value:"" | ||
41 | }, | ||
42 | |||
43 | animatedElement:{ | ||
44 | value:null | ||
45 | }, | ||
46 | |||
47 | isSubproperty:{ | ||
48 | value:true | ||
49 | }, | ||
50 | |||
51 | _propTweenRepetition:{ | 16 | _propTweenRepetition:{ |
52 | value:null | 17 | value:null |
53 | }, | 18 | }, |
@@ -91,27 +56,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
91 | } | 56 | } |
92 | } | 57 | } |
93 | }, | 58 | }, |
94 | |||
95 | nextKeyframe:{ | ||
96 | value:1 | ||
97 | }, | ||
98 | |||
99 | ninjaStylesContoller:{ | ||
100 | value:null | ||
101 | }, | ||
102 | |||
103 | animationName:{ | ||
104 | value:null | ||
105 | }, | ||
106 | |||
107 | currentKeyframeRule:{ | ||
108 | value:null | ||
109 | }, | ||
110 | |||
111 | trackDuration:{ | ||
112 | value:0 | ||
113 | }, | ||
114 | |||
115 | _trackID:{ | 59 | _trackID:{ |
116 | value:null | 60 | value:null |
117 | }, | 61 | }, |
@@ -160,6 +104,42 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
160 | } | 104 | } |
161 | }, | 105 | }, |
162 | 106 | ||
107 | trackEditorProperty:{ | ||
108 | value:"" | ||
109 | }, | ||
110 | |||
111 | animatedElement:{ | ||
112 | value:null | ||
113 | }, | ||
114 | |||
115 | isSubproperty:{ | ||
116 | value:true | ||
117 | }, | ||
118 | |||
119 | nextKeyframe:{ | ||
120 | value:1 | ||
121 | }, | ||
122 | |||
123 | ninjaStylesContoller:{ | ||
124 | value:null | ||
125 | }, | ||
126 | |||
127 | animationName:{ | ||
128 | value:null | ||
129 | }, | ||
130 | |||
131 | currentKeyframeRule:{ | ||
132 | value:null | ||
133 | }, | ||
134 | |||
135 | trackDuration:{ | ||
136 | value:0 | ||
137 | }, | ||
138 | |||
139 | timelineTrack:{ | ||
140 | value:null | ||
141 | }, | ||
142 | |||
163 | setData:{ | 143 | setData:{ |
164 | value:function () { | 144 | value:function () { |
165 | if (typeof(this.propTrackData) === "undefined") { | 145 | if (typeof(this.propTrackData) === "undefined") { |
@@ -175,35 +155,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
175 | } | 155 | } |
176 | }, | 156 | }, |
177 | 157 | ||
158 | prepareForDraw:{ | ||
159 | value:function(){ | ||
160 | this.element.addEventListener("click", this, false); | ||
161 | this.timelineTrack = this.parentComponent.parentComponent.parentComponent.parentComponent; | ||
162 | this.trackID = this.timelineTrack.trackID; | ||
163 | this.animatedElement = this.timelineTrack.animatedElement; | ||
164 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
165 | } | ||
166 | }, | ||
167 | |||
168 | didDraw:{ | ||
169 | value:function () { | ||
170 | if(this.currentKeyframeRule){ | ||
171 | this.retrieveStoredStyleTweens(); | ||
172 | } | ||
173 | } | ||
174 | }, | ||
175 | |||
178 | handleClick:{ | 176 | handleClick:{ |
179 | value:function (ev) { | 177 | value:function (ev) { |
178 | |||
179 | var selectIndex , currentSelectedStyleIndex; | ||
180 | if (ev.shiftKey) { | 180 | if (ev.shiftKey) { |
181 | 181 | ||
182 | if (this.trackType == "position") { | 182 | if (this.trackType == "position") { |
183 | this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); | 183 | this.timelineTrack.handleNewTween(ev); |
184 | } | 184 | } |
185 | 185 | ||
186 | if (this.propTweens.length < 1) { | 186 | if (this.propTweens.length < 1) { |
187 | 187 | ||
188 | // check if there is an editor property assigned yet | 188 | selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), |
189 | // get this property track's editor prop name from layer data arrays | 189 | currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); |
190 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), | ||
191 | currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); | ||
192 | 190 | ||
193 | if (this.trackType == "style") { | 191 | if (this.trackType == "style") { |
194 | //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) | ||
195 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { | 192 | 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."); | 193 | console.log("Please enter a style property for this track before adding keyframes."); |
197 | return; | 194 | return; |
198 | } else { | 195 | } else { |
199 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; | 196 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; |
200 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | ||
201 | } | 197 | } |
202 | this.insertPropTween(0); | 198 | this.insertPropTween(0); |
203 | this.addPropAnimationRuleToElement(ev); | 199 | this.addPropAnimationRuleToElement(ev); |
204 | this.updatePropKeyframeRule(); | 200 | this.updatePropKeyframeRule(); |
205 | } else if (this.trackType == "position") { | 201 | } else if (this.trackType == "position") { |
206 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | ||
207 | } | 202 | } |
208 | } else { | 203 | } else { |
209 | this.handleNewPropTween(ev); | 204 | this.handleNewPropTween(ev); |
@@ -214,32 +209,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
214 | } | 209 | } |
215 | } | 210 | } |
216 | }, | 211 | }, |
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 |