diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--[-rwxr-xr-x] | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 216 |
1 files changed, 148 insertions, 68 deletions
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 | _openDoc:{ |
127 | value:false, | 157 | value:false, |
128 | writable:true | 158 | writable:true |
129 | }, | 159 | }, |
160 | timeMarkerHolder:{ | ||
161 | value: null | ||
162 | }, | ||
130 | /* === END: Models === */ | 163 | /* === END: Models === */ |
131 | 164 | ||
132 | /* === BEGIN: Draw cycle === */ | 165 | /* === BEGIN: Draw cycle === */ |
133 | prepareForDraw:{ | 166 | prepareForDraw:{ |
134 | value:function () { | 167 | value:function () { |
168 | this.eventManager.addEventListener( "onOpenDocument", this, false); | ||
169 | } | ||
170 | }, | ||
135 | 171 | ||
172 | handleOnOpenDocument:{ | ||
173 | value:function(){ | ||
136 | this.eventManager.addEventListener("deleteLayerClick", this, false); | 174 | this.eventManager.addEventListener("deleteLayerClick", this, false); |
137 | this.eventManager.addEventListener("newLayer", this, false); | 175 | this.eventManager.addEventListener("newLayer", this, false); |
138 | this.eventManager.addEventListener("deleteLayer", this, false); | 176 | this.eventManager.addEventListener("deleteLayer", this, false); |
@@ -146,9 +184,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
146 | this.hashLayerNumber = this.createLayerNumberHash(); | 184 | this.hashLayerNumber = this.createLayerNumberHash(); |
147 | this.hashElementMapToLayer = this.createElementMapToLayer(); | 185 | this.hashElementMapToLayer = this.createElementMapToLayer(); |
148 | this.initTimelineView(); | 186 | this.initTimelineView(); |
187 | |||
188 | |||
149 | } | 189 | } |
150 | }, | 190 | }, |
151 | |||
152 | willDraw:{ | 191 | willDraw:{ |
153 | value:function () { | 192 | value:function () { |
154 | if (this._isLayer) { | 193 | if (this._isLayer) { |
@@ -162,6 +201,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
162 | /* === BEGIN: Controllers === */ | 201 | /* === BEGIN: Controllers === */ |
163 | initTimelineView:{ | 202 | initTimelineView:{ |
164 | value:function () { | 203 | value:function () { |
204 | var myIndex; | ||
165 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | 205 | this.layout_tracks = this.element.querySelector(".layout-tracks"); |
166 | this.layout_markers = this.element.querySelector(".layout_markers"); | 206 | this.layout_markers = this.element.querySelector(".layout_markers"); |
167 | 207 | ||
@@ -172,14 +212,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
172 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); | 212 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); |
173 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 213 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
174 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 214 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
215 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); | ||
175 | 216 | ||
176 | this.drawTimeMarkers(); | 217 | this.drawTimeMarkers(); |
177 | 218 | ||
178 | this._hashKey = "123"; | 219 | this._hashKey = "123"; |
179 | _firstLayerDraw = false; | 220 | _firstLayerDraw = false; |
180 | NJevent('newLayer', this._hashKey); | 221 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
222 | myIndex=0; | ||
223 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | ||
224 | { | ||
225 | this._openDoc=true; | ||
226 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | ||
227 | // this.selectLayer(myIndex); | ||
228 | // TimelineTrack.retrieveStoredTweens(); | ||
229 | myIndex++; | ||
230 | } | ||
231 | }else{ | ||
232 | NJevent('newLayer', this._hashKey); | ||
233 | this.selectLayer(0); | ||
234 | |||
235 | } | ||
181 | _firstLayerDraw = true; | 236 | _firstLayerDraw = true; |
182 | this.selectLayer(0); | 237 | } |
238 | }, | ||
239 | |||
240 | updateTrackContainerWidth:{ | ||
241 | value: function(){ | ||
242 | this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; | ||
243 | this.master_track.style.width = (this.end_hottext.value * 80) + "px"; | ||
244 | this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; | ||
245 | this.time_markers.removeChild(this.timeMarkerHolder); | ||
246 | this.drawTimeMarkers(); | ||
183 | } | 247 | } |
184 | }, | 248 | }, |
185 | 249 | ||
@@ -197,7 +261,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
197 | key = this.application.ninja.selectedElements[0].uuid; | 261 | key = this.application.ninja.selectedElements[0].uuid; |
198 | switchSelectedLayer = this.hashElementMapToLayer.getItem(key); | 262 | switchSelectedLayer = this.hashElementMapToLayer.getItem(key); |
199 | if(switchSelectedLayer!==undefined){ | 263 | if(switchSelectedLayer!==undefined){ |
200 | layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID) | 264 | layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID); |
201 | this._captureSelection=false; | 265 | this._captureSelection=false; |
202 | this.selectLayer(layerIndex); | 266 | this.selectLayer(layerIndex); |
203 | this._captureSelection=true; | 267 | this._captureSelection=true; |
@@ -234,13 +298,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
234 | } | 298 | } |
235 | }, | 299 | }, |
236 | 300 | ||
237 | deselectKeyframes:{ | 301 | deselectTweens:{ |
238 | value:function () { | 302 | value:function () { |
239 | for (var i = 0; i < this.selectedKeyframes.length; i++) { | 303 | for (var i = 0; i < this.selectedTweens.length; i++) { |
240 | this.selectedKeyframes[i].deselect(); | 304 | this.selectedTweens[i].deselectTween(); |
241 | } | 305 | } |
242 | this.selectedKeyframes = null; | 306 | this.selectedTweens = null; |
243 | this.selectedKeyframes = new Array(); | 307 | this.selectedTweens = new Array(); |
244 | } | 308 | } |
245 | }, | 309 | }, |
246 | 310 | ||
@@ -253,6 +317,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
253 | 317 | ||
254 | handleDeleteLayerClick:{ | 318 | handleDeleteLayerClick:{ |
255 | value:function (event) { | 319 | value:function (event) { |
320 | if (this.arrLayers.length === 1) { | ||
321 | // do not delete last layer | ||
322 | return; | ||
323 | } | ||
324 | if (this.layerRepetition.selectedIndexes === null) { | ||
325 | // nothing is selected, do not delete | ||
326 | return; | ||
327 | } | ||
256 | this._deleteKeyDown = false; | 328 | this._deleteKeyDown = false; |
257 |