diff options
author | Eric Guzman | 2012-02-27 11:13:35 -0800 |
---|---|---|
committer | Eric Guzman | 2012-02-27 11:13:35 -0800 |
commit | 1a6604a50f6cfbbf0cd6f45ab94b63a001d02162 (patch) | |
tree | bbfc75d1be1ff98d22042dbbed4ca93b4a845e0c /js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |
parent | 9e8cd4448a6d0f809a55c3bdea8b45ed75339794 (diff) | |
parent | 8125c8c6c9431067840d81c46624b6a2dd5eb4a7 (diff) | |
download | ninja-1a6604a50f6cfbbf0cd6f45ab94b63a001d02162.tar.gz |
Merge branch 'refs/heads/master' into CSSPanelUpdates
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--[-rwxr-xr-x] | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 222 |
1 files changed, 154 insertions, 68 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 07fee19d..a5cde00f 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,38 @@ 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.currentDocument.documentRoot.children[0]){ |
228 | myIndex=0; | ||
229 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | ||
230 | { | ||
231 | this._openDoc=true; | ||
232 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | ||
233 | // this.selectLayer(myIndex); | ||
234 | // TimelineTrack.retrieveStoredTweens(); | ||
235 | myIndex++; | ||
236 | } | ||
237 | }else{ | ||
238 | NJevent('newLayer', this._hashKey); | ||
239 | this.selectLayer(0); | ||
240 | |||
241 | } | ||
181 | _firstLayerDraw = true; | 242 | _firstLayerDraw = true; |
182 | this.selectLayer(0); | 243 | } |
244 | }, | ||
245 | |||
246 | updateTrackContainerWidth:{ | ||
247 | value: function(){ | ||
248 | this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; | ||
249 | this.master_track.style.width = (this.end_hottext.value * 80) + "px"; | ||
250 | this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; | ||
251 | this.time_markers.removeChild(this.timeMarkerHolder); | ||
252 | this.drawTimeMarkers(); | ||
183 | } | 253 | } |
184 | }, | 254 | }, |
185 | 255 | ||
@@ -197,7 +267,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
197 | key = this.application.ninja.selectedElements[0].uuid; | 267 | key = this.application.ninja.selectedElements[0].uuid; |
198 | switchSelectedLayer = this.hashElementMapToLayer.getItem(key); | 268 | switchSelectedLayer = this.hashElementMapToLayer.getItem(key); |
199 | if(switchSelectedLayer!==undefined){ | 269 | if(switchSelectedLayer!==undefined){ |
200 | layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID) | 270 | layerIndex = this.getLayerIndexByID(switchSelectedLayer.layerID); |
201 | this._captureSelection=false; | 271 | this._captureSelection=false; |
202 | this.selectLayer(layerIndex); | 272 | this.selectLayer(layerIndex); |
203 | this._captureSelection=true; | 273 | this._captureSelection=true; |
@@ -234,13 +304,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
234 | } | 304 | } |
235 | }, | 305 | }, |
236 | 306 | ||
237 | deselectKeyframes:{ | 307 | deselectTweens:{ |
238 | value:function () { | 308 | value:function () { |
239 | for (var i = 0; i < this.selectedKeyframes.length; i++) { | 309 | for (var i = 0; i < this.selectedTweens.length; i++) { |
240 | this.selectedKeyframes[i].deselect(); | 310 | this.selectedTweens[i].deselectTween(); |
241 | } | 311 | } |
242 | this.selectedKeyframes = null; | 312 | this.selectedTweens = null; |
243 | this.selectedKeyframes = new Array(); | 313 | this.selectedTweens = new Array(); |
244 | } |