aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--[-rwxr-xr-x]js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js240
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
1var Montage = require("montage/core/core").Montage; 7var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component; 8var Component = require("montage/ui/component").Component;
3var Layer = require("js/panels/Timeline/Layer.reel").Layer; 9var 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