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 | 240 |
1 files changed, 176 insertions, 64 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 07fee19d..d7d5328e 100755..100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -1,3 +1,9 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
1 | var Montage = require("montage/core/core").Montage; | 7 | var Montage = require("montage/core/core").Montage; |
2 | var Component = require("montage/ui/component").Component; | 8 | var Component = require("montage/ui/component").Component; |
3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; | 9 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; |
@@ -65,6 +71,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
65 | value:1000 | 71 | value:1000 |
66 | }, | 72 | }, |
67 | 73 | ||
74 | _masterDuration:{ | ||
75 | serializable: true, | ||
76 | value:0 | ||
77 | }, | ||
78 | |||
79 | masterDuration:{ | ||
80 | serializable:true, | ||
81 | get:function(){ | ||
82 | return this._masterDuration; | ||
83 | }, | ||
84 | set:function(val){ | ||
85 | this._masterDuration = val; | ||
86 | this.timebar.style.width = (this._masterDuration / 12) + "px"; | ||
87 | } | ||
88 | }, | ||
89 | |||
68 | _arrTracks:{ | 90 | _arrTracks:{ |
69 | serializable:true, | 91 | serializable:true, |
70 | value:[] | 92 | value:[] |
@@ -109,6 +131,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
109 | } | 131 | } |
110 | }, | 132 | }, |
111 | 133 | ||
134 | _selectedTweens:{ | ||
135 | value:[] | ||
136 | }, | ||
137 | |||
138 | selectedTweens:{ | ||
139 | serializable:true, | ||
140 | get:function () { | ||
141 | return this._selectedTweens; | ||
142 | }, | ||
143 | set:function (newVal) { | ||
144 | this._selectedTweens = newVal; | ||
145 | } | ||
146 | }, | ||
147 | |||
112 | _isLayer:{ | 148 | _isLayer:{ |
113 | value:false | 149 | value:false |
114 | }, | 150 | }, |
@@ -118,21 +154,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
118 | writable:true | 154 | writable:true |
119 | }, | 155 | }, |
120 | 156 | ||
121 | _arrLayersNonEmpty:{ | 157 | _captureSelection:{ |
122 | value:true, | 158 | value:false, |
123 | writable:true | 159 | writable:true |
124 | }, | 160 | }, |
125 | 161 | ||
126 | _captureSelection:{ | 162 | _openDoc:{ |
127 | value:false, | 163 | value:false, |
128 | writable:true | 164 | writable:true |
129 | }, | 165 | }, |
166 | timeMarkerHolder:{ | ||
167 | value: null | ||
168 | }, | ||
130 | /* === END: Models === */ | 169 | /* === END: Models === */ |
131 | 170 | ||
132 | /* === BEGIN: Draw cycle === */ | 171 | /* === BEGIN: Draw cycle === */ |
133 | prepareForDraw:{ | 172 | prepareForDraw:{ |
134 | value:function () { | 173 | value:function () { |
174 | this.eventManager.addEventListener( "onOpenDocument", this, false); | ||
175 | } | ||
176 | }, | ||
135 | 177 | ||
178 | handleOnOpenDocument:{ | ||
179 | value:function(){ | ||
136 | this.eventManager.addEventListener("deleteLayerClick", this, false); | 180 | this.eventManager.addEventListener("deleteLayerClick", this, false); |
137 | this.eventManager.addEventListener("newLayer", this, false); | 181 | this.eventManager.addEventListener("newLayer", this, false); |
138 | this.eventManager.addEventListener("deleteLayer", this, false); | 182 | this.eventManager.addEventListener("deleteLayer", this, false); |
@@ -146,9 +190,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
146 | this.hashLayerNumber = this.createLayerNumberHash(); | 190 | this.hashLayerNumber = this.createLayerNumberHash(); |
147 | this.hashElementMapToLayer = this.createElementMapToLayer(); | 191 | this.hashElementMapToLayer = this.createElementMapToLayer(); |
148 | this.initTimelineView(); | 192 | this.initTimelineView(); |
193 | |||
194 | |||
149 | } | 195 | } |
150 | }, | 196 | }, |
151 | |||
152 | willDraw:{ | 197 | willDraw:{ |
153 | value:function () { | 198 | value:function () { |
154 | if (this._isLayer) { | 199 | if (this._isLayer) { |
@@ -162,6 +207,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
162 | /* === BEGIN: Controllers === */ | 207 | /* === BEGIN: Controllers === */ |
163 | initTimelineView:{ | 208 | initTimelineView:{ |
164 | value:function () { | 209 | value:function () { |
210 | var myIndex; | ||
165 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | 211 | this.layout_tracks = this.element.querySelector(".layout-tracks"); |
166 | this.layout_markers = this.element.querySelector(".layout_markers"); | 212 | this.layout_markers = this.element.querySelector(".layout_markers"); |
167 | 213 | ||
@@ -172,14 +218,60 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
172 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); | 218 | this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); |
173 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 219 | this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
174 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); | 220 | this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
221 | this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); | ||
175 | 222 | ||
176 | this.drawTimeMarkers(); | 223 | this.drawTimeMarkers(); |
177 | 224 | ||
178 | this._hashKey = "123"; | 225 | this._hashKey = "123"; |
179 | _firstLayerDraw = false; | 226 | _firstLayerDraw = false; |
180 | NJevent('newLayer', this._hashKey); | 227 | if(!this.application.ninja.documentController.creatingNewFile){ |
228 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | ||
229 | myIndex=0; | ||
230 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | ||
231 | { | ||
232 | this._openDoc=true; | ||
233 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | ||
234 | myIndex++; | ||
235 | } | ||
236 | } | ||
237 | else{ | ||
238 | NJevent('newLayer', this._hashKey); | ||
239 | this.selectLayer(0); | ||
240 | } | ||
241 | }else{ | ||
242 | NJevent('newLayer', this._hashKey); | ||
243 | this.selectLayer(0); | ||
244 | |||
245 | } | ||
181 | _firstLayerDraw = true; | 246 | _firstLayerDraw = true; |
182 | this.selectLayer(0); | 247 | } |
248 | }, | ||
249 | |||
250 | clearTimelinePanel : { | ||
251 | value: function() { | ||
252 | console.log('clearing timeline...') | ||
253 | this.arrTracks = null; | ||
254 | this.arrLayers = null; | ||
255 | this.currentLayerNumber = 0; | ||
256 | this.currentLayerSelected = null; | ||
257 | this.currentTrackSelected = null; | ||
258 | this.selectedKeyframes = []; | ||
259 | this.selectedTweens = []; | ||
260 | this._captureSelection = false; | ||
261 | this._openDoc = false; | ||
262 | this.end_hottext.value = 25; | ||
263 | this.updateTrackContainerWidth(); | ||
264 | this.needsDraw = true; | ||
265 | } | ||
266 | }, | ||
267 | |||
268 | updateTrackContainerWidth:{ | ||
269 | value: function(){ | ||
270 | this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; | ||
271 | this.master_track.style.width = (this.end_hottext.value * 80) + "px"; | ||
272 | this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; | ||
273 | this.time_markers.removeChild(this.timeMarkerHolder); | ||
274 | this.drawTimeMarkers(); | ||
183 | } | 275 | } |
184 | }, | 276 | }, |
185 | 277 | ||
@@ -197,7 +289,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
197 | key = this.application.ninja.selectedElements[0].uuid; | 289 | key = this.application.ninja.selectedElements[0].uuid; |
198 | switchSelectedLayer = this.hashElementMapToLayer.getItem(key); | 290 | switchSelectedLayer = this.hashElementMapToLayer.getItem(key); |
199 | if(switchSelectedLayer!==undefined){ | 291 | if(switchSelectedLayer!==undefined){ |
200 | layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID) | 292 | layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID); |
201 | this._captureSelection=false; | 293 | this._captureSelection=false; |
202 | this.selectLayer(layerIndex); | 294 | this.selectLayer(layerIndex); |
203 | this._captureSelection=true; | 295 | this._captureSelection=true; |
@@ -234,13 +326,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
234 | } | 326 |