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.js216
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 if (this.application.ninja.currentSelectedContainer.id === "UserContent") { 329 if (this.application.ninja.currentSelectedContainer.id === "UserContent") {
258 this._hashKey = "123";