diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--[-rwxr-xr-x] | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 70 | ||||
-rw-r--r--[-rwxr-xr-x] | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 216 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 25 |
3 files changed, 231 insertions, 80 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 29bf6eb3..33145028 100755..100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -24,7 +24,10 @@ | |||
24 | "trackRepetition" : {"@" : "repetition2"}, | 24 | "trackRepetition" : {"@" : "repetition2"}, |
25 | "playhead": {"#": "playhead"}, | 25 | "playhead": {"#": "playhead"}, |
26 | "playheadmarker": {"#": "playhead_marker"}, | 26 | "playheadmarker": {"#": "playhead_marker"}, |
27 | "timetext" : {"#": "time_text"} | 27 | "timetext" : {"#": "time_text"}, |
28 | "timebar" : {"#": "time_bar"}, | ||
29 | "container_tracks" : {"#" : "container-tracks"}, | ||
30 | "end_hottext" : {"@" : "endHottext"} | ||
28 | } | 31 | } |
29 | }, | 32 | }, |
30 | 33 | ||
@@ -143,6 +146,36 @@ | |||
143 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens", | 146 | "boundObjectPropertyPath" : "objectAtCurrentIteration.tweens", |
144 | "oneway" : false | 147 | "oneway" : false |
145 | }, | 148 | }, |
149 | "animatedElement" : { | ||
150 | "boundObject" : {"@" : "repetition2"}, | ||
151 | "boundObjectPropertyPath" : "objectAtCurrentIteration.animatedElement", | ||
152 | "oneway" : false | ||
153 | }, | ||
154 | "arrStyleTracks" : { | ||
155 | "boundObject" : {"@" : "repetition2"}, | ||
156 | "boundObjectPropertyPath" : "objectAtCurrentIteration.arrStyleTracks", | ||
157 | "oneway" : false | ||
158 | }, | ||
159 | "isTrackAnimated" : { | ||
160 | "boundObject" : {"@" : "repetition2"}, | ||
161 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isTrackAnimated", | ||
162 | "oneway" : false | ||
163 | }, | ||
164 | "trackDuration" : { | ||
165 | "boundObject" : {"@" : "repetition2"}, | ||
166 | "boundObjectPropertyPath" : "objectAtCurrentIteration.trackDuration", | ||
167 | "oneway" : false | ||
168 | }, | ||
169 | "animationName" : { | ||
170 | "boundObject" : {"@" : "repetition2"}, | ||
171 | "boundObjectPropertyPath" : "objectAtCurrentIteration.animationName", | ||
172 | "oneway" : false | ||
173 | }, | ||
174 | "currentKeyframeRule" : { | ||
175 | "boundObject" : {"@" : "repetition2"}, | ||
176 | "boundObjectPropertyPath" : "objectAtCurrentIteration.currentKeyframeRule", | ||
177 | "oneway" : false | ||
178 | }, | ||
146 | "isMainCollapsed" : { | 179 | "isMainCollapsed" : { |
147 | "boundObject" : {"@" : "repetition2"}, | 180 | "boundObject" : {"@" : "repetition2"}, |
148 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", | 181 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed", |
@@ -162,9 +195,26 @@ | |||
162 | "boundObject" : {"@" : "repetition2"}, | 195 | "boundObject" : {"@" : "repetition2"}, |
163 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", | 196 | "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", |
164 | "oneway" : false | 197 | "oneway" : false |
165 | } | 198 | }, |
199 | "trackPosition" : { | ||
200 | "boundObject" : {"@" : "repetition2"}, | ||
201 | "boundObjectPropertyPath" : "objectAtCurrentIteration.trackPosition", | ||
202 | "oneway" : false | ||
203 | } | ||
166 | } | 204 | } |
167 | } | 205 | }, |
206 | "endHottext" : { | ||
207 | "module": "js/components/hottextunit.reel", | ||
208 | "name": "HotTextUnit", | ||
209 | "properties": { | ||
210 | "element": {"#": "end_hottext"}, | ||
211 | "maxValue" : 100000, | ||
212 | "minValue" : 1, | ||
213 | "acceptableUnits" : "sec", | ||
214 | "units" : "sec", | ||
215 | "value" : 25 | ||
216 | } | ||
217 | } | ||
168 | } | 218 | } |
169 | </script> | 219 | </script> |
170 | 220 | ||
@@ -193,7 +243,9 @@ | |||
193 | 243 | ||
194 | 244 | ||
195 | <div id="user_layers" class="userlayers"> | 245 | <div id="user_layers" class="userlayers"> |
196 | <div id="master_layer" class="masterlayer">Master Layer</div> | 246 | <div id="master_layer" class="masterlayer"> |
247 | <div>Master Layer</div> | ||
248 | </div> | ||
197 | <div id="container-layers"> | 249 | <div id="container-layers"> |
198 | <div id="container-layer"></div> | 250 | <div id="container-layer"></div> |
199 | </div> | 251 | </div> |
@@ -202,6 +254,7 @@ | |||
202 | <div id="timeline_gutter" class="timelinegutter"> | 254 | <div id="timeline_gutter" class="timelinegutter"> |
203 | <div id="newlayer_button" class="newlayerbutton"></div> | 255 | <div id="newlayer_button" class="newlayerbutton"></div> |
204 | <div id="deletelayer_button" class="deletelayerbutton"></div> | 256 | <div id="deletelayer_button" class="deletelayerbutton"></div> |
257 | <input id="end_hottext" class="endhottext"> | ||
205 | </div> | 258 | </div> |
206 | </div> | 259 | </div> |
207 | </div> | 260 | </div> |
@@ -211,16 +264,17 @@ | |||
211 | <div id="timeline_rightpane" class="tl_rightpane"> | 264 | <div id="timeline_rightpane" class="tl_rightpane"> |
212 | <div id="right_inside" class="rightinside"> | 265 | <div id="right_inside" class="rightinside"> |
213 | <div class="layout_markers"> | 266 | <div class="layout_markers"> |
214 | <div id="timeline_markers" class="timelinemarkers"> | 267 | <div id="playhead" class="playhead"></div> |
215 | <div id="playhead" class="playhead"></div> | 268 | <div id="timeline_markers" class="timelinemarkers"></div> |
216 | </div> | ||
217 | </div> | 269 | </div> |
218 | 270 | ||
219 | 271 | ||
220 | <div id="layer_tracks" class="tl_layertracks"> | 272 | <div id="layer_tracks" class="tl_layertracks"> |
221 | <div class="layout-tracks"> | 273 | <div class="layout-tracks"> |
222 | <div id="playhead_marker" class="playheadmarker"></div> | 274 | <div id="playhead_marker" class="playheadmarker"></div> |
223 | <div id="master_track" class="mastertrack"></div> | 275 | <div id="master_track" class="mastertrack"> |
276 | <div id="time_bar" class="timebar"></div> | ||
277 | </div> | ||
224 | <div id="container-tracks" class="container-tracks"> | 278 | <div id="container-tracks" class="container-tracks"> |
225 | <div id="container-track"></div> | 279 | <div id="container-track"></div> |
226 | </div> | 280 | </div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 07fee19d..62ae625f 100755..100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -65,6 +65,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
65 | value:1000 | 65 | value:1000 |
66 | }, | 66 | }, |
67 | 67 | ||
68 | _masterDuration:{ | ||
69 | serializable: true, | ||
70 | value:0 | ||
71 | }, | ||
72 | |||
73 | masterDuration:{ | ||
74 | serializable:true, | ||
75 | get:function(){ | ||
76 | return this._masterDuration; | ||
77 | }, | ||
78 | set:function(val){ | ||
79 | this._masterDuration = val; | ||
80 | this.timebar.style.width = (this._masterDuration / 12) + "px"; | ||
81 | } | ||
82 | }, | ||
83 | |||
68 | _arrTracks:{ | 84 | _arrTracks:{ |
69 | serializable:true, | 85 | serializable:true, |
70 | value:[] | 86 | value:[] |
@@ -109,6 +125,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
109 | } | 125 | } |
110 | }, | 126 | }, |
111 | 127 | ||
128 | _selectedTweens:{ | ||
129 | value:[] | ||
130 | }, | ||
131 | |||
132 | selectedTweens:{ | ||
133 | serializable:true, | ||
134 | get:function () { | ||
135 | return this._selectedTweens; | ||
136 | }, | ||
137 | set:function (newVal) { | ||
138 | this._selectedTweens = newVal; | ||
139 | } | ||
140 | }, | ||
141 | |||
112 | _isLayer:{ | 142 | _isLayer:{ |
113 | value:false | 143 | value:false |
114 | }, | 144 | }, |
@@ -118,21 +148,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
118 | writable:true | 148 | writable:true |
119 | }, | 149 | }, |
120 | 150 | ||
121 | _arrLayersNonEmpty:{ | 151 | _captureSelection:{ |
122 | value:true, | 152 | value:false, |
123 | writable:true | 153 | writable:true |
124 | }, | 154 | }, |
125 | 155 | ||
126 | _captureSelection:{ | 156 | _ |