diff options
Diffstat (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js')
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 290 |
1 files changed, 290 insertions, 0 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 175b77f9..31e0b3b6 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -15,7 +15,297 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
15 | 15 | ||
16 | prepareForDraw:{ | 16 | prepareForDraw:{ |
17 | value:function(){ | 17 | value:function(){ |
18 | this.element.addEventListener("click", this, false); | ||
19 | this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; | ||
20 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; | ||
21 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
22 | } | ||
23 | }, | ||
24 | |||
25 | draw:{ | ||
26 | value:function(){ | ||
27 | |||
28 | } | ||
29 | }, | ||
30 | |||
31 | trackEditorProperty:{ | ||
32 | value:"" | ||
33 | }, | ||
34 | |||
35 | _propTweenRepetition:{ | ||
36 | value:null | ||
37 | }, | ||
38 | |||
39 | animatedElement:{ | ||
40 | value:null | ||
41 | }, | ||
42 | |||
43 | isSubproperty:{ | ||
44 | value:true | ||
45 | }, | ||
46 | |||
47 | propTweenRepetition:{ | ||
48 | serializable:true, | ||
49 | get:function () { | ||
50 | return this._propTweenRepetition; | ||
51 | }, | ||
52 | set:function (newVal) { | ||
53 | this._propTweenRepetition = newVal; | ||
54 | } | ||
55 | }, | ||
56 | |||
57 | _propTweens:{ | ||
58 | value:[] | ||
59 | }, | ||
60 | |||
61 | propTweens:{ | ||
62 | serializable:true, | ||
63 | get:function () { | ||
64 | return this._propTweens; | ||
65 | }, | ||
66 | set:function (newVal) { | ||
67 | this._propTweens = newVal; | ||
68 | } | ||
69 | }, | ||
70 | |||
71 | _propTrackData:{ | ||
72 | value:false | ||
73 | }, | ||
74 | |||
75 | propTrackData:{ | ||
76 | serializable:true, | ||
77 | get:function () { | ||
78 | return this._propTrackData; | ||
79 | }, | ||
80 | set:function (val) { | ||
81 | this._propTrackData = val; | ||
82 | if (this._propTrackData) { | ||
83 | this.setData(); | ||
84 | } | ||
85 | } | ||
86 | }, | ||
87 | |||
88 | nextKeyframe:{ | ||
89 | value:1 | ||
90 | }, | ||
91 | |||
92 | ninjaStylesContoller:{ | ||
93 | value:null | ||
94 | }, | ||
95 | |||
96 | animationName:{ | ||
97 | value:null | ||
98 | }, | ||
99 | |||
100 | currentKeyframeRule:{ | ||
101 | value:null | ||
102 | }, | ||
103 | |||
104 | trackDuration:{ | ||
105 | value:0 | ||
106 | }, | ||
107 | |||
108 | _trackID:{ | ||
109 | value:null | ||
110 | }, | ||
111 | |||
112 | trackID:{ | ||
113 | serializable:true, | ||
114 | get:function () { | ||
115 | return this._trackID; | ||
116 | }, | ||
117 | set:function (value) { | ||
118 | if (value !== this._trackID) { | ||
119 | this._trackID = value; | ||
120 | } | ||
121 | } | ||
122 | }, | ||
123 | |||
124 | _trackType:{ | ||
125 | value:null | ||
126 | }, | ||
127 | |||
128 | trackType:{ | ||
129 | serializable:true, | ||
130 | get:function () { | ||
131 | return this._trackType; | ||
132 | }, | ||
133 | set:function (value) { | ||
134 | if (value !== this._trackType) { | ||
135 | this._trackType = value; | ||
136 | } | ||
137 | } | ||
138 | }, | ||
139 | |||
140 | _styleIndex:{ | ||
141 | value:null | ||
142 | }, | ||
143 | |||
144 | styleIndex:{ | ||
145 | serializable:true, | ||
146 | get:function () { | ||
147 | return this._styleIndex; | ||
148 | }, | ||
149 | set:function (value) { | ||
150 | if (value !== this._styleIndex) { | ||
151 | this._styleIndex = value; | ||
152 | } | ||
153 | } | ||
154 | }, | ||
155 | |||
156 | setData:{ | ||
157 | value:function () { | ||
158 | if (typeof(this.propTrackData) === "undefined") { | ||
159 | return; | ||
160 | } | ||
161 | |||
162 | this.styleIndex = this.propTrackData.styleIndex; | ||
163 | this.propTweens = this.propTrackData.propTweens; | ||
164 | this.trackType = this.propTrackData.trackType; | ||
165 | this.trackEditorProperty = this.propTrackData.trackEditorProperty; | ||
166 | this.needsDraw = true; | ||
167 | } | ||
168 | }, | ||
169 | |||
170 | handleClick:{ | ||
171 | value:function(ev){ | ||
172 | if (ev.shiftKey) { | ||
173 | |||
174 | if (this.propTweens.length < 1) { | ||
175 | |||
176 | // check if there is an editor property assigned yet | ||
177 | // get this property track's editor prop name from layer data arrays | ||
178 | var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
179 | |||
180 | if (this.trackType === "style") { | ||
181 | if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) { | ||
182 | console.log("Please enter a style property for this track before adding keyframes."); | ||
183 | return; | ||
184 | } else { | ||
185 | this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty; | ||
186 | //console.log("Property track editorProperty set to: " + this.trackEditorProperty); | ||
187 | } | ||
188 | } else if (this.trackType === "position") { | ||
189 | console.log("Property track editorProperty set to: " + this.trackEditorProperty); | ||
190 | } | ||
191 | |||
192 | this.insertPropTween(0); | ||
193 | this.addPropAnimationRuleToElement(ev); | ||
194 | this.updatePropKeyframeRule(); | ||
195 | } else { | ||
196 | this.handleNewPropTween(ev); | ||
197 | this.updatePropKeyframeRule(); | ||
198 | } | ||
199 | } | ||
200 | } | ||
201 | }, | ||
202 | |||
203 | handleNewPropTween:{ | ||
204 | value:function(ev){ | ||
205 | this.insertPropTween(ev.offsetX); | ||
206 | } | ||
207 | }, | ||
208 | |||
209 | insertPropTween:{ | ||
210 | value:function(clickPos){ | ||
211 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | ||
212 | this.application.ninja.timeline.selectLayer(selectedIndex, true); | ||
213 | |||
214 | var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | ||
215 | var currentMillisec = currentMillisecPerPixel * clickPos; | ||
216 | this.trackDuration = currentMillisec; | ||
217 | |||
218 | var newTween = {}; | ||
219 | newTween.tweenData = {}; | ||
220 | |||
221 | if (clickPos == 0) { | ||
222 | newTween.tweenData.spanWidth = 0; | ||
223 | newTween.tweenData.keyFramePosition = 0; | ||
224 | newTween.tweenData.keyFrameMillisec = 0; | ||
225 | newTween.tweenData.tweenID = 0; | ||
226 | newTween.tweenData.spanPosition = 0; | ||
227 | newTween.tweenData.tweenedProperties = []; | ||
228 | newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
229 | |||
230 | this.propTweens.push(newTween); | ||
231 | |||
232 | } else { | ||
233 | newTween.tweenData.spanWidth = clickPos - this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition; | ||
234 | newTween.tweenData.keyFramePosition = clickPos; | ||
235 | newTween.tweenData.keyFrameMillisec = currentMillisec; | ||